Using multiple stylesheets

Hi,

why would i want to have multiple style sheets in my <head> </head>?

this is a tough one for me!

though it might be simple to explain!

any ways, i dont get it :frowning:

please explain in simple terms and please give 2 or 3 examples of using multiple stylesheets

thanks!

Browsers can load and store stylesheets separately, making your site run faster.
OR
You can also use the same stylesheets on more than one website page. This can help you save time and ensure your website looks and feels the same.

Easier to find code. I gather all media queries ino one, all navigation in another CSS etc.

<link rel="stylesheet" type="text/css" href="/public/css/nav.css">
<link rel="stylesheet" type="text/css" href="/public/css/base.css">
<link rel="stylesheet" type="text/css" href="/public/css/font.css">
<link rel="stylesheet" type="text/css" href="/public/css/theme.css">
<link rel="stylesheet" type="text/css" href="/public/css/btn.css">
<link rel="stylesheet" type="text/css" href="/public/css/media.css">

But it may load a bit slower, the more stylesheets. But I consider the isolation of code may win in the long run. Just a personal preference.

1 Like

Does that mean multiple <style></style> tags or does that mean multiple links to (external) stylesheets, as in the post from sibertius?

Also, the context is important. An individual might prefer multiple stylesheets or prefer one stylesheet but when a website is modified by multiple developers then the policies and procedures need to make development easier for all developers. Experienced developers are likely to have learned that it helps to keep pieces separately. There are many things like that that seem stupid for beginners.

Only if you are working alone, or if on a team, have one “overlord” who ensures that the selectors are appropriate and in one place. Too many people can mean that things get mixed up, and becomes a maintenance nightmare.

1 Like

I am not sure what you mean. Do you mean that for teams, it is better to have everything in one stylesheet?

I’m saying that finding and fixing conflicting selectors/styles is infinitely easier using one stylesheet. I’ve had nightmares trying to work backwards and fixing hijacked styles when they are in multiple files and/or then having to rework markup.

Fonts are the primary cause of pain, but I’ve had borders and floats and all kinds of treasures until I could get the developers on the same page in terms of handling style issues.

1 Like

I have not had to work with HTML and CSS in a multiple developer project but years ago I had to deal with spaghetti COBOL code.

Getting back to the relevant subject, if there are not tools to help untangle messes as you describe then that is unfortunate.

As have I. My favorite was a single if statement that, when printed on the green and white bar paper, ran almost eighteen feet printed. We hung it on a cubicle wall and went from top to bottom almost three full times. And we weren’t allowed to refactor it… :shifty:

There are some I believe but I’m not overly familiar with them, unfortunately. But I also keep a closer eye on stuff like that…

Personally I wouldn’t use more than one unless I had to. I would prefer to keep requests to a minimum.
Odd circumstances where I may: If there were styles that are particular to a specific page that would not be used anywhere else on the site, but the page still needed to reference the main, global sheet.
Another one is if you need to cater for people printing your page, you may want a sheet for that.
Otherwise I avoid multiple CSS.

1 Like

Curiously, to me at least, a style sheet specifically tagged with “media=print” gets loaded immediately with the rest of the page. At least in FF and Chrome where I checked. I would have expected it to be loaded only when the user tries to print the page, making it one of the possibilities for multiple stylesheets.

Anyone know why that would be?

They always get loaded, but don’t get applied unless the media is print…

the same way that media queries for, example, the wrong screen size are loaded. if the context changes, the browser can apply the style sheet and/or revert as necessary.

1 Like

Yes I do realize the print style sheet is loaded, the question is why? Printing a page is enough of an “event” to the browser that it would seem like the quick load of a specific style sheet would be insignificant in terms of performance, whereas loading it every time someone browses the site, just in case the user wants to print the page, could add up to some real cycles over time.

According to the documentation it doesn’t actually get loaded immediately if the media value evaluates to false. The css file becomes non render blocking and the file is loaded later on without impacting the page render time.

Therefore, I assume you could split the css files into their different media queries and only the current media file would be render blocking.

4 Likes

Ah, thanks. I hadn’t though of the difference between loading now/render blocking and loading later when time isn’t critical. I suspect that’s exactly what I saw in the network tab as the print css was further down the page than the rest of the css above.

1 Like

Not really useful, but Firefox has a feature that allows you to specify alternative stylesheets. Kind of an old-school way of providing themes for a site. The feature still exists, but is only accessible from the menu bar which is hidden by default now. I don’t think any other browser supports (or ever did support) this either.