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 going to the end of the print styling, really the last thing that we have to do it the footer, which at the moment is just some plain text and we'd like to make that look a little nicer. What I have in mind is to have the footer's appearance sort of visually echo the masthead with the date over on the right side and italicized and a solid border separating it from the rest of the document, they would just be nice to the sort of echo that in footer, so what we're going to do in our CSS is for the footer, there's a div with an id of footer, so we'll give it a top border 1px solid and a bottom border, and a top margin to push it away from the rest of the document, I think that's often important.
I link this text italicized and smaller and we also want to align the text to the right, so if we go back to Firefox and reload, there we have that. The space here between the border and the site design footer text is actually the paragraphs margin. There is the site design by Dominique Sillett and littleigloo.comp, a site design text that's inside of a paragraph, and the paragraph, since we haven't done anything to its margins, browsers automatically apply margins to that paragraph.
If we want the text to get up close to that border, then we need to get rid of that margin so we're going to say footer p margin zero, go back and ok, there it is and it might be a little too close actually now that I look at it, that's maybe a little too snugly so, on the footer let's actually put a top padding of a quarter em, so we have a quarter em of top padding for the footer, and actually, while I'm at it, I kind of feel like the footer should be deemphasized a little bit, so let's make its color gray instead of just leaving it at the default. So if we hit Reload on this, it pushes down and the text color goes to gray and the border color goes with it because if you recall, we did not specify a color for the top border.
And so it picks up the value of color for this particular element and since we just added to grey, it change the top border to gray. That's again an illustration of why sometimes you don't want to explicitly define a color for a border, if you would like it to reflect whatever the text color is within that element, then you just leave it alone with the exception as stated in the previous chapter of table cells, which Internet Explorer for Windows will just make the table cells be a very color, sort of white and very light gray, if you don't explicitly set border colors for table cells. But that is just table cells and that's only in Internet Explorer for Windows. So that pretty much puts us where we want to be in terms of the footer.
We could fiddle with it a little bit, or we might decide to deemphasize the link text, or you know, we might not. I think we're just going to leave it alone because that way in a printout, the URLs will be there for someone to be able to type into a web browser if they want to and also the underlining should show up in print and will sort of draw the eye to, oh, hey, here is some URLs. We'll just leave it like that and now really all we need to do is open up 0906.HTML and change the media types, so that they're actually what they should be. Instead of being tty's and screen, we're going to take that print style sheet and have it only apply in print and our basic style sheet, which is meant for screen will apply on screen. We save those, we hit Reload and bingo, all of the screen styles are back, all we do is we just shut them out of the way throughout this chapter and now if I change the media type and then change the media type back, here they come.
The print styles however, not to worry, they are still around, because if we preview, we can see that there are print styles and this is what the print out will look like. You can see where the side margins on the content and on the Tee of the Day box sort of squeeze those down and leads to a fairly straightforward print style. You could call it professional, I'm sure that there are print designers who could make all sorts of suggestions for improvement. That's always great, because if they do, then you just edit the print style sheet to do what they want as best as you can, and you're off for the races.
There is print styling.
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.