Is it possible to include one CSS file in another?
The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.
Answer. Yes, you can apply more than one stylesheet to an HTML file. For each stylesheet you link to a page, you would just need to add an additional <link> element.
The best practice in web design is to separate out the CSS into a separate stylesheet. The reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document.
A site with only a few pages likely only needs one CSS file. Even if it has a few pages with different template, as long as those templates are fairly similar it can be all rolled together. Even sites with hundreds or thousands of pages can often get away with a single CSS file if the pages are largely the same.
Yes:
@import url("base.css");
Note:
@import
rule must precede all other rules (except @charset
).@import
statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css
and special.css
into base-special.css
and reference only base-special.css
.Yes. Importing CSS file into another CSS file is possible.
It must be the first rule in the style sheet using the @import rule.
@import "mystyle.css"; @import url("mystyle.css");
The only caveat is that older web browsers will not support it. In fact, this is one of the CSS 'hack' to hide CSS styles from older browsers.
Refer to this list for browser support.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With