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.
The Page Properties dialog box has some other styles that we can create. Looking at the page right now you can see that our links look very generic and don't match the design that we are starting to create here using styles. So let's go down to the Page Properties button, which is in the Properties Inspector, and click on it. In the Category I'd like you to look at Links CSS and click on that category. Links as you remember is another way of saying A for anchor tag. I'm happy with our font. I like the font that we have chosen for this page and I'm happy with the size of our links right now. So I don't think I'll override or change that.
But I would like to change the state of the links so that they behave differently and look differently then the default settings that we find in browsers. There are four states to links or A tags. There is a mnemonic device that will help you remember that. Just remember the words love, hate. L in love for Link, V in love for Visited, H for hover or Rollover and A in hate for Active. When styling links I think the most important thing to distinguish is between your Link color and your hover or Rollover color. Visited and Active, the user hardly notices because they just happen so quickly.
So to keep this simple and to make it work it with our header tag up there, I pick two colors for the Link, Visited and Active areas. And one color for the Rollover because the Rollover or hover link should be very clearly defined and clue the user in to the fact that this is a hot link, something I can do that I can interact with. So let's go to the Link color, put our cursor inside that box. Remember every color needs to start off with the hash mark. And the color we are going to type in here is 663B18 then tab to the next box and our Rollover color is going to be #AE833E. Now as I said before I like to keep it simple for the user.
So I'm going to use the Link color that I have already created for Visited and Active. I can select this, copy it and then paste it to the other boxes. If you want to see it update just remember to keep tabbing that will establish the color inside the box. Now I can go down here and get a preview by clicking on the Apply button. That looks good but it still looks a little bit like a generic browser link. So one of the things its great is I can actually change when the underline appears in a link. Let's go up to Underline style and look at our choices. We can leave it Always underlined, Never underlined, Show underline only on rollover or hover, or Hide the underline on rollover.
In this case I have decided I'd like to have the underline only show when the user rolls over the button. Again let's try clicking Apply and notice you can't see anything. This is an interaction that the user has to have with this link. The best place to preview interactive areas on your web page is in a browser. Let's click OK, save your page, go up to preview in browser and go up to Firefox. So as I hover over each of these buttons notice the color state changes and the underline appears. This is exactly what I was looking for something simple but something definitive to make the user know they have done the right thing.
Let's close Firefox, focus again on Dreamweaver and let's see how that looks in our code. Remember embedded styles will always show up at the top in the head tag in a style tag. There are four states for a link and they are showing up in the order that I described. L, love, V in love, H for hate, A for the A in hate. They need always to appear this way and in this order. This is very important to remember. You can't change the order of this in code. They will not display properly inside the browser or really work correctly if you put them in a different order.
You don't need to use all four states but they always need to appear in this order. Let's go back to Design view. We have done a great job of using Page Properties and its dialog box to create some good initial styles for our web page granted they are embedded styles. But it's a great place to start to begin to understand how styles work and what they do to make your page look great in the browser.
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.