Can you apply multiple stylesheets to a single page?

Question

In the context of this exercise, can we apply multiple stylesheets to a single page?

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. Like so,

<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
...

However, when applying more than one stylesheet to your page, there are a few things you may want to keep in mind.

When linking multiple CSS files, the styles are applied in the order that they are linked in the HTML document. So, in the above code, all the rules from style1.css would be applied first, then the rules from style2.css will be applied. This can cause similar rules to overwrite the rules from the previously linked files.

In addition, linking too many files, in general, can affect the performance of a webpage, since each file must be loaded into the browser. More files will mean that more of them must be transferred and loaded from the server, which can slow down the loading time.

17 Likes

What is an alternative method to linking several fines to a web page that doesn’t slow down loading times?

4 Likes

Probably just trying to optimize a single style sheet as much as you can

11 Likes

I am confused . When it comes to overwriting rules, does it mean that in the code above rules from style2.css will overwrite the similar rules which were indicated before in style1.css? Or will style1.css still be dominant?

6 Likes

Since style1.css would run first, I believe style2.css would then overwrite any similar rules as it is applied next.

8 Likes

thank you very much for making it clear :grinning:

That is what the “C” in “CSS” is all about. Cascading Style-Sheets means that the styles cascade onto each other, also, depending on where they are.

So style1.css may define font families and font sizes for h1, h2, and p, while style2.css may define a font size for h1, and a font family for p. The h1 will now have the original font family, but the new font size, h2 will have the original font family & size, and p will have the new font family with the original font size.

How CSS cascade depend on when they are called, and where they are called. CSS can be in five places; external, (called from the <link> element), internal, (within the <style> element), in-line, (within the actual content), render agent, (declared by ones browser, such as Firefox or Chrome), or user defined, (created by the end user).

The first style to cascade, is the user agent. In the absence of any other style-sheet, the user agent defines how things will appear.

Second will be internal & external style-sheets. They will override the user agent, (and each other). The order of cascade, will be the order of appearance in the <head> element, the last one having final override.

Third will be inline styles.

Finally, whatever CSS the end-user has decided is best for themselves, (usually because of accessibility concerns), will override all that came before.

17 Likes

Use SASS. With SASS, you can have multiple files importer to one main.scss file that experts everything to a single CSS file.

2 Likes

Why would I want to add multiple stylesheets? Whats the benefit?

10 Likes

It’s not something usually done on it’s own, but there is some justification to multiple stylesheets integrated with Javascript.

As others have pointed out, it’s usually better to just optimize a single stylesheet. However, some use cases are themed pages for holidays, changing visibility of certain features for signed in users versus guests, or even giving a user some ability to change a pages appearance, without making a new web page for each situation.

4 Likes

That is to say that you could reset the styles with the first stylesheet and then link a second below it to use your own styles and the second set of styles would take priority in the event of conflict.

I wouldn’t do that. It’s more important to keep the code maintainable. And number 1 simplest way to do that is keep your files short.

Later on in the course they’ll cover ‘build’ systems which automatically bundle up your files and ‘compress’ (minify) them into one file before publishing.

1 Like

Main reason would be for your own sanity. A simple real-world page’s CSS can run over 1000 lines.

2 Likes

Hello. So so far in the course survey of web dev, I am not supposed to be knowing each and every element correct?
For instance, the course gave us a link[] to paste in ,
but we aren’t supposed to do anything but follow the prompts correct?

It appears most of the material has been prepared so yes, read and follow the exact instructions. Be sure to examine the finished product closely to be sure of what the effect has been.

2 Likes

Thanks for your explanation. That’s tremendous clearly. As a totally new learner, I have learned alot from it.

This is a very helpful explanation! Fantastic! :slight_smile:

Here are some reasons to have multiple stylesheets
For example one for screen output and one for print output

I found the following articles useful. They nicely explain the CSS Style Precedence.

https://marksheet.io/css-priority.html
https://jenkov.com/tutorials/css/precedence.html