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.
So having a taken care of the masthead and the navigation links, is time for us to turn our attention to the main area of the layout. The content columns is what we're going to focus on first. So switching over to the ex1004.css, I'm going to bring in the first bit of style which is to say the main column styles here. Float that content div left and give it a padding of zero on the top, 20em on the right, 4em on the bottom and 3em on the left.
If we go back and hit Reload, ok, there it is. If we scroll down we can see that there's still the rest of the stuff that will eventually go into the sidebar, but we've set up our content column so that we get more or less our basics in terms of layout here. Then, the next step from there, is to start with the stuff inside that content column. So, the h1 for example, which is the about tea history portion, give it some margins, a backgrounds and colors and a font size, we'll take that backwards actually, the font is 1.5em, which will just set the h1 to be one and a half times the font size of the content div font size, so that will make it half again as big as the text around it.
A white background and a purples blue foreground. Then we have the padding and the margins. The padding will just, you know, give extra space to the background, but then, with the margin, we're actually taken away the top margin and giving it a one and a quarter em margin on the bottom. The 33% right margin will shrink down the background area, which is a visible portion of the element as was seen in the design comp and then with a -2em on the left, we're going to pull the whole thing over to the left.
So that the white area of the h1 actually moves over and just touches the edge of the browser window and then the 2em of side padding which comes from the padding decoration will push the content, the actual text over so that it overcomes what was just done, so will pull whole thing 2em to the left with the -2em left margin and then push the content back the same distance, but this time 2em to the right, so that the text will not appear to move when we hit Reload in terms of, well it won't appear to move horizontally, but the background area of the h1 goes all the way over to the edge of the browser window and then goes most of the way across the content column, but then it stops, 33% right margin, which again was sort of a feature of the design comp, this about tea history had this white bar that was inside, but the white bar didn't go all the way across the content column, so in this sense we're following the designers whishes. And now, for our last step in this section, something else that the designer asked for was to have part of the h1 be a different color, instead of being the bluish they wanted this color instead. So, there's a b elements inside the h1 that surrounds that bit that's supposed to change and if we hit Reload, there it is. There's that greenish about tea. Now, if you know anything about HTML and XHTML, you might wonder why there's a b element here, b elements are presentational, but that's precisely why I did use a b element for this case. There was the need to have one bit of text in the element be one color and another bit of text be another color seem like a purely presentational affectation to me.
Now there wasn't any real structural reason for it to happen. So in this case, they used the b element around the about tea portion knowing that in a non CSS browser, just if it's a really old browser if we were to turn off the styles you can't really see it because of the size of the text, but that b element would make the text there, potentially bolder for about tea and yet here we don't have that problem, we're just using it to change the color. This is a case of using a presentational element like b, for presentational purposes. Now, in discussing with the designer the situation, they said, well we really want to emphasize the history portion.
Then, actually, what would have happen was the history would've been marked with the m element for emphasis, basically we would have reversed the style, the h1 would have had the green color and the m element would've gotten the purple blue color. These are the sort of structural questions and decisions that you end up having to make and that don't always have a right answer, but generally they have an answered that suits a particular person best. So in next step, we'll finish up with the rest of the content column, and then, after that, we'll move on to the rest of the document.
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.