Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
For Web designers styling the page is one of the most fun activities. This is when your design skills can really be applied to what you are doing inside of Web design and development. We have got the content structure, we have our information designed well and now let's try to make the presentation as cool, neat, readable, and interesting as possible. We can really use our design skills here. We are going to learn how to create embedded styles in the head portion of the Web page using the style tag. I do not recommend this method, as each individual page must be edited in order to change or update your styles. Using an external style sheet allows you to apply styles to a number of Web pages, but only update the styles in one location, that external style sheet, and then those styles will be applied throughout your website. An external style sheet is linked in the head of a Web page with the link tag. Don't worry, more on this later. Again use external style sheets as a best practice.
A great place to start learning how to use embedded styles is with Page Properties. So let's go down to the bottom to the Property inspector and click on the Page Properties button. This brings up the Page Properties dialog box. There are many categories that you can use, and look at and try, but the two categories that we will be looking at is Appearance CSS and Links CSS. It's important to make sure that you start noticing the distinction between styles and structure. We will be concentrating on styles in this particular exercise.
The first thing I like to do is work on what the general Page font for the whole page will be. This will probably be the body text font. It will be used throughout the Website. Let's click on the dropdown menu. As you can see Dreamweaver ships with many, many preset font examples and you can also see they usually have three fonts. For instant Verdana, Geneva, Sans-serif. The way the Web works is that when a browser sees the style, it looks to see if the user has the font Verdana. If the user doesn't have that font in their operating system or on their desktop or in their fonts folder, it then looks to see if Geneva is available. If Geneva is not available it then looks for any Sans-serif fonts and if none of the above are available it will display whatever Sans-serif font the user has.
This makes designing for Web pages for a certain target user very difficult. You have no guarantee that they will have the exact font that you request. So it's important to use fonts that are adopted by both platforms windows in Macintosh and to always use the strings of choices if you can't find Georgia, then do Times New Roman, then do Times, then do serif. There are a number of fonts recently that have been developed just for the Web and for screens. Verdana is one of them. Trebuchet is another one that looks really great. Arial, Helvetica are old standbys, but again there are some problems with Arial and Helvetica. There are many, many different publishers and many manufactures of these fonts, so they may display differently from machine to machine, from user to user. Even from screen to screen and from operating system to operating system.
So be aware when you select a font. Just choose something that most people have. This brings up the question what if I want to use an unusual font. It will probably have to be an image. So just keep that in mind when you are thinking about how to style your sheets and whether to use an image or whether to use a font. Of course pages will download much faster if you use a basic body text font. You don't want to use all images for you body text. For this I'm going to choose Verdana, I know that Verdana was designed for the screen and it looks really, really good. To see how this will look, I can click on the Apply button. This is nice feature inside of this dialog box that let's you make a choice and then see how it might look.
Already the page is looking better. On screen it is much easier to read a font that is Sans-serif. Fonts that are serifs like Time New Roman or curly script fonts or unusual Gothic fonts are very difficult to read because of the boxy nature or the pixelated nature of the screen. So for main, main body text, things like that I try to stick to Sans-serif font. The next thing to consider is the Size of the font. But right now let's choose something we are all familiar with, 12 pixels, which essentially translates to 12 points. If you are in graphic design this will be familiar to you. We will talk about other ways we can choose our font size as we start creating more styles. So I'm going to choose 12, this will be 12 pixels high which means it will be an exact measurement.
Another tip that I would like to give you is although many, many people just keep the font at black, a nice little trick with choosing the color of your font is not to choose black, which is considered to be the default, but to choose the dark gray. It will set you page back a little bit, make it seem as though it's more well designed, be more inviting and not such a harsh contrast on the eye as the person reads the font against the light background. So let's click on this box and with our color picker let's go down the dark gray. Now remember in Preferences we choose to see our styles using the shorthand method. So that's why we are not seeing six numbers or six letters.
Typically a hexadecimal color will have six numbers and six letters or combination of that because this color in it's hexadecimal form is 333333 or six 3s.We can shorten this by simply going # mark 333. It's exactly the same color. If you see this color as 333 or as six 3s, it's the same color. Let's click the Apply button, looks really good. It sets back, beginning to look like it has something to do with the header color palette. It really feels more inviting, more friendly, easier to read.
Then I like to go into the Background color. I'm going to move my dialog box to do this. One of my tricks that I like to use all the time is if I have a header, a nice trick with the Background color is to actually use the header color to help you define what your color palette will be. I'm going to click on the box. This gives me my hexadecimal palette, which is about 256 colors. I can also choose to have no color. Where I can go out to my color will, but a trick that I like to use is go ahead and leave this box and notice that your cursor instantly turns into the eyedropper which is a great little thing. So we are going to go out to our header and look for some colors that might look good.
I am going to try this color right here and then click Apply. That's a little cool, for me. It looks very business like sort of Fortune 500. I like something a little warmer or something a little more lively. So I'll click on my Background color again, go out with my eyedropper, try to find something that's a little bit lighter, in the green or pale green category and then click Apply. That's looking pretty good. I can even go out for some crazy color. Try some contrast. May be this pink, peach color. Click Apply.
As you can see I'm really having some time really looking at how that looks, how it feels and each color that I change really changes the emotional quality of this page. I would like to keep the background light enough so that the dark gray pops forward and looks good. I think this is too much contrast and too much like those are the clowns. I'm going to go for something little bit more subtle. Click on my Background color. Go back up in here one more time, look for that pale gray and it took us maybe 30- 45 minutes when I was working on this project, I finally found a color I like. I'm going to type that in right now.
The last thing that we will change are the Margins. Each browser has it's own set of style sheets. Those style sheets actually make your page move away from the Top edge and from the Left edge by default. I want to be able to override the browsers style sheet so I'm going to do what we call zero out. I'm going to put a 0 in the Left, Top, Right and Bottom. It won't look good, but later on as we are doing more styles we will change it and this will allow us to override what's going on in the browser window. So I'm going to put 0 and then Tab through these. 0, Tab, 0, Tab, 0. Let's click on the Apply button. There we go. Now we are bossing that page around.
We have got the header snug up at the top of the window and we have all of our text on the left. Yes this is tight, no we don't have any negative and positive space but as I said as we continue to work with our styles we will address this issue. Let's go ahead and click OK. So where did these styles go, where can we find them, how can we change them? What I want you to see is up in your upper right hand corner in the CSS Styles panel, you now see the word or tag style. If we twiddle down the triangle here, you can see that we actually made two styles. One for the body, table data, and table header. Let's click on that. Those styles will appear right down here in our CSS Style panel.
If I click on body you can see those styles that we added. But where did they actually go in code because I said these are embedded. Let's click on the Code view. The styles will appear in the head portion or the head tag. So let's find the beginning and end of our head tag. And one of the things I like to do so I can see this just a little bit easier is I put my I-beam right after my closing style tag and then hit my Return key. Now let's just find our opening style tag and our closing style tag. There we go. This is called an embedded style.
As you can see we are using the style tag in the head tag to make this work. As we have talked about before the head tag or the head information really bosses this page around. It tells the browser how to display and in this case what styles to apply. For just a minute, let's take a look at what the styles actually do. We have attached or affected these tags, the body tags, the table data tags and a table header. Within these two curly-Q parenthesis we have descriptors or attributes that we can change.
In this case the descriptor or attributes we are changing with the font family, the font size and the color of the font. When you see the word just color, it refers to the background color. In the second tag we are affecting just the body tag so that's why it appears alone and not up with the other one. Another thing to notice here is we can group our tags or we can simply have one tag that has it's own specific attributes. The way this works is that we have our attribute and then it's actual value.
Our attribute, a colon and then its actual value. In code we don't end sentences with period because periods are used for other things. So you often see a semicolon as a way of ending a line of instruction or ending a thought or ending a command. So if you see the semicolon think of it is being a period in a code line. So our attribute, colon, the value of that attribute, in this case margin-right:0 pixels end of thought, end of instruction. That's where our styles appear. Let's go back to Design view and let's do a Command or Ctrl+Save.
So this was a great place to start learning about styles and we have seen how embedding the styles puts those styles up into the head of our document.
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.