Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A web site is just a web site unless it’s designed with a unique style. Creating a CSS Style Guide: Hands-On Training highlights the importance of a CSS style guide, which serves as an interface for the design team and a communication tool for the client. Laurie Burruss calls on her background as director of digital media at Pasadena City College and takes an informative, real–world approach to this topic. She shows how Dreamweaver CS4 can be used to develop a coherent site–wide emotion that boosts brand identity. The course culminates with building a working web style guide for professional use. Exercise files and a downloadable PDF quiz accompany the course.
Download the exercise files from the Exercise Files tab.
Because the browser's default style sheets will automatically add margins and padding, setting the margins and padding to zero is a way to strip out the browser styles. This practice is called zeroing out. A number of ways exist to zero out an HTML document. The main idea here is that you want the styles you create to style the page, not the browser's default style sheets. In order to do this, let's go over to the CSS Style panel and select the body, td (table data), th (table header) tag. We can style the properties for this tag right down here in the bottom of the CSS panels. I'm going to make it just a little bit longer so we can see what we're doing.
Select the Add Property by clicking on it and type in the word margin, Tab, and that will put you into the value area. Type 0px for zero pixels. Remember we're using shorthand so putting in 0 here will apply to the top, bottom, left and right. Tab. That will let us add another property. Let's type in padding. Tab again, and again type 0px. Click anywhere outside this document and now you'll see that we've added those two settings and that is called zeroing out.
There is one other tag that we need to zero out and that is the image tag. Let's click on the image, return to the CSS Styles panel, click on New CSS Rule. That brings up the New CSS Rule dialog box. We don't want to style for the image inside of the content area, we just want to style the tag image, no matter where it appears. So go up to the Selector Type and select Tag. Perfect! That's all we want is the image tag and we want to define this rule in our style guide, our external style guide. Let's click OK. Then we have our CSS Rule Definition dialog box.
For the Category, select Box, in Padding, type 0, and in Margin type 0. If we select Apply right now, you won't see any difference. This is kind of behind-the-scenes work that ensures that our styles override what the browser style sheets are doing. Select OK, go up to File > Save All, and then let's preview this in the browser. As I said before, what the user sees is not what we just did, but the kind of work that we were doing, zeroing out, will make sure that our styles override the default browser styles. This is an important best practice.
There are currently no FAQs about Creating a CSS Style Guide: Hands-On Training.
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.