Using More Than One Stylesheet

If I want to use more than one stylesheet how do I go about doing that?

I have this in the header so far:
<link rel="stylesheet" type="text/css" href="main.css" />

 

This should help you out.

http://www.alistapart.com/stories/alternate/

Skinny

 

put in the same thing but linking to another stylesheet:

The one on the bottom will take prioroty over the one on the top, it's just as if the css was added onto the bottom of the first document.

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

 

<style type="text/css" media="all">
@import url(styles1.css);
@import url(styles2.css);
@import url(styles3.css);

</style>

 

Bad way to do it.

 

<link /> to one stylesheet, and @import others inside (typography, forms, etc). I find it's easier to split a few into sections.

Some might say it will really slow your site down because of the extra HTTP requests, but I say it makes it much easier to develop if you're doing upgrades often.

 

Never had to use more than one stylesheet, but thanks for the heads up.

 

Not necessarily - For example if you have a standard library of styles (like say some non-image corner code) that would only be linked into your screen.css and not your print.css, @import can be handy to link that in.

But then I actually name any CSS that will be linked directly into my page by their media type (finding style.css or main.css just a little vague) or media type plus page name for page specific stuff.

For example the second page of my non-image corner code tutorial:

http://battletech.hopto.org/html_tutorials/rounded_css_borders/more_styles.html

get's this in it's HTML to link in the common screen stylesheet from the first page.

<link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="screen_morestyles.css" media="screen, projection" />

While screen.css calls the screen_borderstyles.css thus:

@import "screen_borderstyles.css";

Since all pages in that section are going to use the borderstyles I import that as a 'library' to screen.css - but since only the second page needs screen_morestyles.css I inline that one in that page's HTML.

Both methods have their place.

 

The @import rule can be useful for graceful degradation of older browsers, such as IE4 and below. From memory @import '/stylesheet.css'; stops a majority of browsers below IE 5 from reading the stylesheet. Many people will not need to adhere to such strict standards, but it's good to know. Be careful not to fouc up.

 

agreed, why do u wana use 2 style sheets?

 

Maybe just wants to use different media types? Maybe including CSS that only effects one page that overrides the default styles from the rest of the pages? Maybe modularize some standard CSS for all your different websites for re-use?

There are reasons to do it - like any other tool the key is not to OVERUSE it. (see tables, DIV's, etc)

Though FOUC is MUCH more common when you use javascript sniffing to output the CSS code - though yes it is a concern particularly if your CSS is overly large and does not compensate for measurements 'top-down'.

Though using javascript or conditionals to determine which CSS to use is definately a bit #DDD