joshcase
commented
1 year ago Hey again Danton!
Great question.
1) Why use more than one Stylesheet in a document?
As you can imagine, as projects get more and more complex, the amount of CSS that you will write for your website will increase dramatically. Eventually, you'll have tens of thousands of lines of CSS and managing all of this in one document becomes a big headache. So, it's common practice to find ways to "modularise" your CSS. Perhaps you have a set of stylesheets for your "public facing" website, and a different set of stylesheets for your user dashboard where logged in users hang out in your application. (It's also common for developers to use tools to squash and compress their CSS stylesheets together to minimise filesize, but that's a discussion for another day).
Another reason you might want to use multiple stylesheets is if you're using components built by another developer, let's say they've made a Google Maps plugin that lets you interact with the map directly on your web page. In this case, you'd probably want to load the stylesheets from the Google Maps plugin onto your webpage in addition to the CSS you've written for your page itself. Note this is essentially an alternative form of modularisation, except in this case the module is written by someone else.
In the Code Blue project series, we all also import the normalize.css stylesheets, which have been written to help all browsers (Firefox, Chrome, Safari, Opera etc) display things HTML elements consistently out of the box. Believe it or not, even in 2022 these browsers all have different default behaviours. This was a design choice I implemented to help eliminate inconsistencies for beginners working through the book in different browser environments.
Custom fonts are also often imported from third-party sites in the form of a stylesheet.
2) How does it know which one to use?
Another great question. In fact, the web browser will read and apply all imported stylesheets. That is, it will read and apply the styles in chronological order, for the most part*. Note that this can lead to nasty bugs known as conflicts when an imported stylesheet overwrites something that you've written in another stylesheet - these can be hard to troubleshoot. For this reason, it's best practice to try and win stylesheet conflicts by writing CSS selectors that are as specific as possible.
ie:
.some-element div p {
background-color: red;
}Rather than:
p {
background-color: red;
}In the first case, we are selecting: any paragraph inside a div that's inside an element of the .some-element class
In the second case, we are selecting: any paragraph
You can see that the first case is far more specific than the second, and is thus less likely to result in conflicts.
* - the rules are actually a little bit more complicated than just chronological order. The real rules consider things like specificity, !important flags, where the CSS is actually written/loaded and so on, but that's beyond our scope for now.
Hello, Why is there more than one stylesheet linked into the document, and how does it know which one to use?