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.
As we finish our web page, we are going to change and edit two of our class styles, organize our style sheet one last time and then delete some of the extraneous content or just give it a once-over and try to see some of the little details we might be missing. So let's start with fixing up our style sheet. As you are designing and working on your presentation, it's perfectly okay to create a lot of styles, but it quickly gets disorganized. So let's take a look at what's going on right now. We have all of these HTML tags that are appearing at the bottom of the CSS list. We can Shift-click to select all of these HTML tag styles at the same time and then drag them up to the top, right below the body, td, th. Next, I'm going to select my two compound styles and drag them below the body, td, th compound style.
I have all my Hs together, my body, image, ul, all my links together. That looks right. I'm going from the outside in. Next, you will see that all of the classes are together and finally my IDs. So that looks good and you should go ahead and save. I also want to revisit some of the classes I created earlier. So I'm going to select the hiLite class in the CSS panel and right here in Properties, I'm going to change a few of its values. I'm happy with the color. I like the fact that it's italic, but I would like to add a few properties right here.
So I'm going to click on Add Property and type in font-weight. Tab to the next area and I would like to make this more emphatic, so I'm going to choose bolder. I want to change the actual font itself, so I'm going to click on Font Property and type font-family. And you are probably saying, "Well how does she know to do this?" Right here is a dropdown menu. So if you need some help, just click on that dropdown menu and enter the first letter of what you are looking for.
As you can see all the things that have to do with font are right there together and I happen to know that font- family is what I want. This makes it go a lot faster. Then click on the dropdown menu on the right side and I'm going to change this to Georgia to give it a visibly different look. As I make these changes, they update automatically right here in Design View and that looks good. I'm happy with that. Next I'll select boldWord. I'm not happy with this one because the color is competing with my Heading 1. I think the color of boldWord is too close to the color of the Main Heading 1. I have selected another color to put in there.
Click right here and delete everything but the hash mark and the color I want to use is 099 and then Tab through. That looks much, much better. Now a couple other things I noticed that don't quite work for me is blue looks good and I would like to make the line the color of the sky, also blue. So I'm going to select just those words, go down to my Properties Inspector, make sure CSS is selected, go to my Targeted Rule dropdown menu, scroll to the bottom and add blue. That will apply that class.
Leaving this blue detracts from what the table is all about. It should be data and it should look like it's part of the data set and it should like it's part of the second row. I'll place my I- beam in the second row, second column. Go down to my Properties Inspector, look at the Targeted Rule dropdown menu. It now has that blue class applied to it and scroll down until I find Remove Class. Looks much better. Finally, for demonstration purposes, I showed you how to make two kinds of definition lists and I would like to delete that. Let's select Split View because I want to show you something that happens when you select text inside Design View.
Notice although I have selected the words inside the definition list, I haven't selected the entire opening and closing tag. I really want to get everything from DL all the way to the close tag for DL. There is a simple way to do this. You don't even need to go into Code View; just return to your Tag Inspector and select DL. There we go. Now we have the complete tag and all of the content. By clicking on Delete, I'll remove that entirely and leave my Code View, my Source View, clean and no extraneous or unnecessary code will be inside there. That's another part of cleaning up your webpage before you get ready to put it up on the server. Let's select the Design View.
So I'm looking through the site one more time and even though I thought I would like making the definition term blue, I actually think it detracts. This is more emphatic by just having the definition term be blue. So I'll select this text, return down to the Properties inspector, click on the dropdown menu for the Targeted Rule, scroll down to the bottom and select Remove Class.
There. That has the cleaner, more consistent, more readable look. This kind of scrutiny is really necessary at the end. Sometimes you need to just walk away for two or three hours, come back, look at it, have someone else look at it, but keep going over this last little part. It looks good. It does what I want it to do. It's direct, it's simple, it's clear and it's readable. Go up to File > Save All and preview it one more time in Firefox. It's a nice, clean page. It really does read. I can see the important information easily.
The color palette is working well and is consistent throughout the page and my use of styles is appropriate and used in a way to help make the user understand information, not detract from the information. I'm happy. I have got a finished style guide.
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.