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.
Building on the state of things from the end of the previous video. We are going to add more styles to this particular stage of the Javaco. Here, I have ex1002.CSS opened up and we're going to start dragging in the first fragment for the second exercise. This is where we're going to start the masthead styles. What we have here is we're saying for the masthead give it a bottom margin and a little bit of top padding . The reason for that is to contain any margins of elements that might be inside of it, otherwise they would stick out of the top and do strange things and then set a background color. That's pretty straight forward and if we save that, I'm going to the web browser and reload and there were some minor changes there.
We'll bring in homelink. Now this is the styling of the a element that links to the homepage of the Javaco site. And that's what surrounds that the Javaco tea image, that's in the masthead. So with this, we actually want the whole masthead basically to be a link back to the home page, or at least a good little trunk of it, so we're going to take this a element and set it to be display blocks, so it's going to start generating a block box as though it were a div. A little bit of margin on the top and the bottom and the sides and some padding, which will, you know, obviously expand the area that's clickable, the padding and the content are all a sort of a clickable area and then we're going to put a background image into this hyperlink, into this a element that has the idea of home link. This is a little white curl that is going to go into the bottom right corner and not be repeated at all. So if we save that and go over to reload the white curl here is actually an image in the background of the hyperlink that surrounds this Javaco tea image and you can see the little white glove of magic, which is staying in place even as we move throughout this entire area. This is all just one great big hyperlink. So, the last thing we're going to do in this exercise is, for the navlinks here, for the navigation links, the navigation links are in an ordered list and ordered lists by default have margin padding that helps indent the list items and so forth. So what we're going to do is we're going to remove the margin and just set the padding so there's just a half an em of padding on the top and bottom, and then 3em of padding on the right and left. That will control the amount that the actual contents of the ordered list are indented from the left, if it ever got long enough in terms of content than the right padding, the 3ems of padding on the right will control where the line with rap. We're not going to run into that problem here, but that's the effect that would have.
This is how we set the background color and the foreground color and the once we save that and go back to Firefox and hit Reload, we get that effect, so at this point we can see that we have the green masthead, and we can see how far that goes and then there's this ordered lists of navigation links. It has purple background, and so, it also has a white foreground. The links of course, because they are links, stay blue, they don't change to white. We're going to affect what color they have and then, underneath that is the today's date, which we're going to, in a later step, pull up so that it sits next to the navigation links, but this is how far we've come.
The next step is to basically create the navigation bar with the dates on the right-hand side of it.
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.