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.
We're back to our non-styled document. In previous videos of this chapter, of course, we've linked to external style sheets, and we embedded style sheets and we've combined the two. Now I've taken all the way to look at yet another method of associating CSS with a XHTML document and that's importing. We go over to our style sheet, we have here, an embedded style sheet, in which we could do a little directive called at import.
This isn't exactly the decoration is more of a directive and has a very specific syntax, which is fairly rare in CSS, as is almost certainly the only time you'll ever use this sort of construction, the at symbol and then import, and after that a space and then the URL in parentheses. We provide the URL of the style sheet that we wish to import, that the URL part of course is very much like an href attribute in the link element. So we set at import the thing at this URL styles/base.css and having said that, if we go back over to our Web browser and hit Reload, we've imported the style sheet just as if we had linked it.
And as with linking, is possible to have multiple imports, let's say styles/secondary.css and switch over to the web browser, hit Reload and have those changes. Functionally this is the same as what we did before. Whereas we had two links before now we have two imports or as they were sometimes called atimports. So might wonder why both these things exist.
The reason is that the link element is part of XHTML. It's a way that XHTML documents have to link to other things, not necessarily just style sheets, that's far and away the most common use for link, all of the other ones are very obscure and generally only done for experimental purposes. We have to spend a pretty long time doing web design before you're likely to come in any other reason for the link element besides associating style sheets to your document. But that's part of the XHTML specification.
CSS itself needed a way to associate one style sheet to another, and that's what at import does. It's a way in one style sheet to say bring in the contents of another style sheet here so that's what's happening. So, because you can't have link or any other XHTML in a style sheet. Which one is better, there is, that tends to be a matter of personal preference, and it tends to be a matter of some debate if I'm only associating external style sheets with my document I tend to use link elements for a variety of reasons.
For those of you who might be interested in eventually doing scripting on your documents, it's very easy to have downscripting effect link elements. It's a very, very difficult for downscripting to affect importing, in fact, it's, so far as I know well into impossible, maybe not totally impossible, but very, very close to being so. So if I'm only associating external style sheets with my document I'm going to use link elements, I'm not going to embed a style sheet just for the purpose of having one or more at imports.
But where this gets interesting is that this is an embedded style sheet and so, in addition to having our imports we could also have some normal you know, regular old declarations and some regular old rules, that say things like, so let's italicize our navlinks, and let's boldface our paragraphs which, if we switch over and reload, you can see that those things have happened. So, if I know that I'm likely in my pages to have a need for both external style sheets and embedded styles I might then in that case decide to just have embedded style sheets import the external style sheets and then add the embedded styles that I want to afterward. That's a pretty rare case. That really ever happens in my experience so I end up linking a lot and I end up add importing and frankly, embedding style sheets not very often at all.
The one thing to watch out for if you want to do this is that the CSS specification requires that all your at imports come before any other rule. If you wanted to take the two at imports and put them after the p font-weight bold and the navlinks font-style italic, that would be illegal and a fully CSS conformant Web browser would actually ignore your imports if you put them after the font-weight bold, navlinks font-style italic. These two lines have to come after any at import. You can have as many at imports as you want, although if you have seven or eight or ten or twelve you're probably overdoing it, but you can have them as long as they are all at the beginning of the style sheet, before any other rules come in. So that is one thing to keep in mind, if you're going to be combining imported style sheets and regular style rows in the same embedded style sheet.
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.