Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to include one CSS file in another?

Tags:

css

Is it possible to include one CSS file in another?

like image 292
Gaizka Allende Avatar asked Sep 29 '08 04:09

Gaizka Allende


People also ask

How do I include CSS file in another CSS file?

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.

Can I use 2 CSS files in HTML?

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.

Does CSS need to be in a separate file?

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.

Is it better to have one CSS file or multiple?

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.


2 Answers

Yes:

@import url("base.css"); 

Note:

  • The @import rule must precede all other rules (except @charset).
  • Additional @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.
like image 127
Kevin Read Avatar answered Nov 15 '22 11:11

Kevin Read


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.

like image 33
Ronnie Liew Avatar answered Nov 15 '22 13:11

Ronnie Liew