Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
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.
There are currently no FAQs about CSS Web Site Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.