Join Eric Meyer for an in-depth discussion in this video Linking a style sheet, part of CSS Web Site Design.
- View Offline
In this video, what we're going to do is we're going to create a reference to a style sheet that's actually external to our XHTML document and thereby associate the two together and have the styles applied to the document. So here we are with our lovely quote and quote unstyled document. Says no other style whatsoever and in the head element, what you can do is you can add a link on it. What a link does is it creates a link from this XHTML document to something else.
The link element has an attribute called rel, which stands for relationship and that describes a relationship of the thing that we're pointing to, to the document here. So the link rel means the relationship of the thing I'm linking is that it is a style sheet for this document here. So the XHTML document style sheet has a rel of style sheet. We also need a type. This is going to be a CSS style sheet, so we want text/CSS href equals and then a path to the style sheet and we also want to say the media in which this will apply, and we'll just have it apply in all media. We'll talk about medium specific style sheets in chapter 9.
For now, just accept that media equals all this is generally the way you want to go. That's the default value for media anyway. So if we hit save here, and then switch over to the web browser containing your document and hit Reload, there you have it, we have created the link between this XHTML document and an external style sheet, which is a CSS file, and that puts the two together. The advantage here is that we can have any number of pages on a website.
All of them simply linking to the same style sheet using a link element, just like this one and in the document head and then there would just be one style sheet somewhere that, that could be altered at will. This is, the link does occur inside the head element, just like the style element did in the previous exercise. And that's pretty much all there is to it. You can create a link from one to another.