0

Difference between <link> and @import for including CSS

author
pranav m
medium
1
27

Answer
  • <link>
    • Placed in <head>.
    • Loads CSS parallel with HTML.
    • Better performance.
    • Can load other resources (favicon, RSS, preconnect).
  • @import
    • Placed inside a CSS file.
    • CSS is only fetched after main CSS loads (slower).
    • Not recommended for performance.
    • Syntax:@import url("theme.css");

Example

<!-- Better -->
<link rel="stylesheet" href="style.css">

<!-- Slower -->
<style>
@import url("style.css");
</style>

Click to Reveal Answer

Tap anywhere to see the solution

Revealed

Comments0
    Difference between <link> and @import for including CSS - <link> | EBAT