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?

2 Likes

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

3 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?

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

3 Likes

thank you very much for making it clear :grinning: