Join Eric Meyer for an in-depth discussion in this video Linking to multiple style sheets, part of CSS Web Site Design.
- View Offline
As we saw on the last video, we can link a style sheet together with an XHTML document, create a link between the two pointing from the XHTML document to the style sheet that we want to use. We can actually do that for more than one style sheet at a time and those will be combined together in affect, the way that this happens is you just have multiple link elements inside the head so what it did here was, I haven't even copied it, the link elements, I'm going to paste it in again, and really, the only thing you need to change is the path to the secondary style sheet, which I have in a fit originality called secondary.css. So we have two links to, from this document to external style sheets, we have a link to base.CSS and another link to secondary.css, both of them will come in and if we hit Reload, we'll see that some changes occur, they are not huge changes and but they are there nonetheless.
We get a hatch background and also some changes of color in the sidebar. Really, all that's happening here is they say, both of these style sheets have been linked to this XHTML documents and the cascade, which is the cascading part of cascading style sheets determines how the rules in each of these style sheets are combined in how any conflicts will result. We'll discuss the cascade in a later chapter in some detail. For now, just accept that if there are conflicts, there are mechanisms in place to determine how to resolve those conflicts. The styles are combined together. So with this, it's possible to split up your styles for your website so that perhaps one style sheet deals with the basic layout of the pages and another style sheet deals with the fonts and the colors or alternatively you could have a basic style sheet that applies to every page on the websites but then the contact pages, of all the pages that are in the contact section of the site, also link to a style sheet that contains styles just for contact pages. There are a number of ways in which you can organize your style sheets, which we will discuss in a later video.