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.
For this video, we're just going to do a really, a little bit of cleanup in the content column, The Legendary Origins of Tea heading is going to get a little bit of a spiff up and we'll take that tea kettle image and push it over to one side and let the rest of the text flow around it. So, into picture size 1005, the ex1005.css I'm going to add this content h2, give it a little bit of top and bottom margin, a little bit of bottom padding and then put this solid greenish border across the bottom and for this one, we're actually going to set its font size to be 1.5em, just like we did with the h1, because in the design comp, both of them were the same text size. If we hit Reload, you can see the difference. Now these don't quite look the same actually because The Legendary Origins of Tea is mixed case and the about tea history is all in lower case.
Legendary Origins of Tea almost looks bigger, but they are the same size, and that's one of those things that once the design comp was examined very closely, this was something that was discovered. So they've been said to be the same font size, the same size of text and then just have this sort of separation here and now just the second thing we're going to do is take that image and float it to the left and give it some top, right and bottom margins so the text doesn't crowd it. We go over and hit Reload, there it is, it just drops over to the left and the text flows around it and it's a nice separation.
So at this point, having finished up basically with the content column, we're going to get into the more interesting portion, which actually, which is the sidebar, which has a number of interesting styling demands that will occupy us for the next few movies.
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.