You can use imported CSS.
This is done by placing the @import rule in a CSS file or in an HTML5 file. The loading of another CSS file will then be launched automatically. In large and complex websites, if you put everything in the same CSS file, it will become huge and you won’t be able to find your way through all your code.
With @import url(yourCSSfile.css) in a CSS file, you can create multiple CSS files: one for your page header, another for your footer, yet another for your article content, for your menu… Then you add @import url rules, or you can use the <link> tag with href="myCssFile.css", depending on your preference.
Example in an HTML5 page:
<style type="text/css">
@import url(monFichierCss.css);
</style>There are priorities in CSS files. When there are multiple elements coming from multiple stylesheets, there are priorities. In ascending order of priority, from lowest to highest, you have:
- Browser default properties
- External stylesheets
- Internal stylesheets
- Inline styles
The highest priority goes to inline styles, which is what we recommend you use.
Otherwise, you have the !important declaration, which means it is possible to override all these priorities by using the !important value.
Is it better to link your CSS stylesheet with the <link> tag or use the @import rule inside a <style> block? This is a frequently asked question, as both techniques apparently produce the same result.
The @import rule in detail
@import is a CSS2 property that must be followed by the URL of a file containing styles to apply in addition to the current stylesheet. You can use @import:
- between the
<style>tags in the<head>section of an HTML page; - at the beginning of a CSS file, to include one or more other stylesheets;
This second option is interesting because it allows you to create more scalable stylesheets (you link a single file from the HTML page and manage the stylesheet imports directly from this root CSS file). The problem is that this approach can slightly slow down the loading of styles and therefore of the page, and it is not recommended in a client-side performance optimization approach.
Example:
<style type="text/css">
@import url(/styles/habillage.css);
@import url(/styles/texte.css);
</style>You can optionally add a media list. However, note that Internet Explorer 6-7 did not understand this syntax and would not import the corresponding stylesheet at all (Internet Explorer 8+ fixed this issue).
<style type="text/css" media="print">
@import url(impression.css);
</style>This property also allows you to import stylesheets into other stylesheets. This offers possibilities for creating dynamic stylesheets without having to copy the same code multiple times.
In practice, what are the differences?
In practice, the result for the HTML document presentation is exactly the same, but there are two important subtleties:
@import(CSS2) is not recognized by very old browsers that are not yet up to CSS standards, so styles will be applied everywhere except on these dinosaur browsers. What’s the point? Simply to allow users of these dinosaurs to browse the site without too many problems. Indeed, without a stylesheet the site remains more visible than with styles interpreted incorrectly. This is therefore a recommended technique for interoperability and backward compatibility.- On some browsers,
@importseriously reduces performance, because this technique does not allow parallel loading of multiple stylesheets at the same time, which slows down page rendering and makes the visitor wait a bit longer than necessary. To learn more about this topic, see the original article “Don’t use @import” by Steve Souders.
So the choice between the two techniques depends on your priorities: browser compatibility or loading performance.
0 Comments