Can I call several css sheets ?

[Koros]

Hi,
is it valid to call several css style sheets on a same page like:

<link rel="stylesheet" href="http://www.mysite.com/sheet1.css" type="text/css" />
<link rel="stylesheet" href="http://www.mysite.com/sheet2.css" type="text/css" />

?

Cordially,
Koros

[focusedpixel]

yes

[lostseed]

Ya but you can also do this:

<link rel="stylesheet" type="text/css" href="sheet1.css" />

just import other sheets from sheet.css

@import 'sheet2.css';
@import 'sheet3.css';
@import 'sheet4.css';
@import 'sheet5.css';

Then you only need to put that link rel for sheet1.css once on a page, and whenever you decide to include or exclude any css files, you only have to change sheet1.css

[Dan Schulz]

Yes you can; however, keep in mind that if you have two style rules that are identical in multiple style sheets, the last style sheet will take precedence and literally over-ride your previous rule.

For example, if your first style sheet has p {background-color: red; color blue;} and your fourth style sheet has p {background-color: green; color: yellow; text-align: right;} (I know, an over-simplification, but bear with me); all the paragraphs will have a green background and yellow text, and will be aligned to the right, instead of a red background with blue text aliigned normally.

[DeafNLoud]

You mean importing within the sheet1.css stylesheet?

such as this:

<<< code within sheet1.css file >>>
@import 'sheet2.css';
@import 'sheet3.css';

* { margin: 0; padding: 0;}

... etc.
<<< end code within sheet1.css file >>>

Or are you talking about the actual HTML/XHTML page header?

If so then I really do not see the benefits of doing it this way within the header of the html/xhtml page vs. just using multiple <link rel...> tags.

Ya but you can also do this:

<link rel="stylesheet" type="text/css" href="sheet1.css" />

just import other sheets from sheet.css

@import 'sheet2.css';
@import 'sheet3.css';
@import 'sheet4.css';
@import 'sheet5.css';

Then you only need to put that link rel for sheet1.css once on a page, and whenever you decide to include or exclude any css files, you only have to change sheet1.css

[Tailslide]

The advantage of having the list of stylesheet links within a linked stylesheet as above is that you can add or change the list of stylesheets without having to go through and change every page of the site - it saves a load of effort.

Also having the linked stylesheet in the head of the document gets round the problem of FOUC and the @import in the linked stylesheet dumps out the elderly browsers that won't cope with the CSS.

[DeafNLoud]

that is a first I have heard or seen of this method. Interesting

[paulm]

Hi,
is it valid to call several css style sheets on a same page like:

<link rel="stylesheet" href="http://www.mysite.com/sheet1.css" type="text/css" />
<link rel="stylesheet" href="http://www.mysite.com/sheet2.css" type="text/css" />

The correct answers are already given. I only wanted to add that that is what the Cascading in "Cascading Style Sheets" exactly stands for (unless I am misinformed ;-)).

[Tyssen]

I only wanted to add that that is what the Cascading in "Cascading Style Sheets" exactly stands for (unless I am misinformed ;-)).

Although that is what the official definition refers to, I've always thought it more useful to think of the cascade in that you apply a rule to a parent element and it 'cascades' down through all the children and descendants. It seems like a lot of people new to CSS miss this point because you'll see their stylesheets cluttered with repeated rules on every element.