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 chapter what we're going to talk about is styling for media, other than the screen, the most common of which is styling for print. You might never have considered that a webpage could be output in any medium other than a web browser. But in point of facts, a webpage is really just some XHTML document with some styling, and neither XHTML nor CSS are required to be used only in web browsers or by web browsers or on a monitor you could print it out. Now the pages that exist, we can print it now, which I'm going to do here, using basically we are going to look at a print preview and this is what the page would more or less look like if we printed it out.
The styles that we have applied would so far as is possible, be applied to the print as well as to the screen. So you can see some of the colors are coming through, the borders are there, and these sort of things, but there are other things that are missing, for example backgrounds. The user does not have to print backgrounds, in fact, every browser pretty much as of this recording is configured to not print backgrounds by default. You can imagine the reason for that. If you had a page that was white text on a black background and the user decided to print it out and the browser was set up to print background by default, somebody would choose through a whole lot of ink cartridge before they get done even printing out the first page. So there you have it.
That's what this page would look like. Now, it looks like that because the styles we've applied are being applied in all media. If we look at the link at the top of the document, just like we discussed back in Chapter 2, we can see that at the very end of this link is the media equals all. This means that this style sheet, should be applied in all media, the screen medium such as on a computer, print medium, the production medium, if you happen to have something that can distinguish between a screen and projection, handheld medium, if you have a web browser on a handheld device that understands handheld media types and so and so on. Basically this style sheet will always be applied. We could restrict it so that it only shows up on screen so that this style sheet would then not be applied when it comes to printing or anything other than the screen medium, which could be a web browser, on a computer or let's say in web TV.
You can combine these two, you can decide it was, it should only apply in screen, in print and not apply in any of those others. Practically speaking, the most common media types that you ever have to worry about is screen and print. Handheld is in here in middle late 2006, as we're recording this, handheld is starting to make a further large upsurge in the United States, it's already become very big overseas and so mobile web browsing is trying to become more and more common and mobile web browsers that understand handheld style sheets are becoming more and more common. We are not going to cover handheld style sheets today, but the principles that we're going to cover here will apply the way that we set up a print style sheet, exactly the same sorts of things have to be done in order to set up a handheld style sheet. Let's say that we have our screen style sheet and we decide that we will also want to a print style sheet, we could say, that this is going to be our print style sheet, so we only want to apply in the print medium.
If we say this, we go back to Firefox and reload, the web browser, nothing will happen, so far as we can tell nothing is happened because the screen style sheet is still applying in the screen medium, but if we go to preview our print, you can see that things are very different now, because the print style sheet is now, there's now a print style sheet being applied and it only applies if we actually go to the print media or in this case a preview of a print medium. So if you were to put out this document, the same page you're looking at there in Firefox would look the way it does here on a piece of paper once printed out, because of the association of a print style sheet and the restriction of the styles that you see there to the screen medium. So that's the basics of how to associate a print style sheet. Now. what we're going to do in the videos to follow is create the print style sheet that we just saw being applied.
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.