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.
We have made lots of styles for our page. We have made styles for HTML tags, styles for classes. Remember classes can be used throughout the page as many times as you want. We have made styles for IDs. IDs can be used only once. Typically they are used for content areas and for layout areas. There is another way of creating styles that is very important. It's called compound styles. You can put a number of tags together or a combination of IDs and tags together. What this allows you to do is style multiple tags all at the same time and apply them very quickly and efficiently.
So we are going to create a compound tag. In fact, we're going to create two of them. Let's move over to the CSS panel, select New CSS Rule. At the top it already displays Compound, but this is not what we want to style. At this point we would like to style our body text and our list. To type this, we put in the tags p, ul for the Unordered List, ol, dl. So that's all of our body text and all three of our lists. Again, we will save it into our external style sheet and let's click OK.
We are going to be working on the margins. We need to tighten this page up. If you look over to the left, you will see that there is a lot of space that could be slightly tightened up and make the content read better and be tighter. Let's select the Box category and under Margin, let's deselect Same for All. Margin Top should be zero, Margin Right should be 20 pixels, Bottom should be 7 and Left should be 20. Let's click on the Apply button and notice this really makes everything sort of ship-shape. We don't have that zig-zaggy left edge, it tightens up the content and we can read concept by concept now. It's kind of much better flow. Let's select OK.
We also need to tighten up the space between the headings. This is way too much space. It looks like dead space. It looks like we are not sure what's coming next. So we can create another compound tag for the h1, h2 and h3 tags. Back in the CSS panel select New CSS Rule. Leave the Selector Type Compound, and let's type h1, h2, h3. This compound tag will style all three of these tags at the same time. We'll leave it in our default style sheet, the one that is linked externally to our HTML document. Let's select OK.
Inside the CSS Rule Definition dialog box, under Category select Box and under Margin deselect Same for All. The Margin Top will be zero. As I do each one of these in the Header category I'm going to go ahead and click the Apply button so you can see what happens. That tightens that up and as you can see our link navigation may have gotten too tight up, but we can fix that in just a moment. Then for the Bottom Margin, instead of using pixels we are going to use em. By using em the space underneath the header will be based on the size of the letter em within the header.
So for that we will type in 0.6em. Now you can go ahead and just type em right there as you are typing and then Tab. It will apply itself. Let's click the Apply button again. There, see how that tightened it up and without needing to know all the proportions and having to guess at how many pixels for each header, we have a proportional or relational spacing that works for all three headers. Select OK. So, taking a look at what we have done, notice that as you apply styles it can affect other things going on in your page. And when we apply the style to the Main Heading, this actually pushed the navigation bar up. Let's place our I-beam right before the Link1 and hit the Return key. There we go. That's a good space. Let's do File > Save All. Select our Browser Preview for Firefox.
Let's carefully look through the page to make sure that the markup and the text and content is reading correctly. There is a mistake right down there. So the same thing that happened with the Link navigation bar is also happening down here with our footer area information. So let's close out of Firefox. Click on the document window to refocus Dreamweaver. Scroll to the bottom. Put our I-beam in front of the C of Cool Company and let's select the Return key.
Now we have got it all worked out. Let's do File > Save All. We are ready just to do some detail things and really clean it up and look at the finishing touches and try to make this as presentable as possible.
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.