This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

If you are somebody who has not been using CSS styles in past and part of why I am doing this is because I know a lot of people who have not used CSS at all are trying to figure out how to catch up now. You maybe surprised or you maybe annoyed by the fact that Dreamweaver has been automatically creating styles for you in a number of ways. One of them is when you change things in the properties inspector. So, let us go ahead and make this page look dramatically better right away by changing the page properties and the first thing I want to do is make that background color black because that is going to pull this page together pretty well. In fact if I apply, you can see right away, that was a big difference, just the background color on this page design.

The other thing I can do from the page properties dialogue is to change the page font in a global way. So, if I change the page font to Verdana here in the page properties, then I apply that all the way across the page. Now, this is where we will start to get into multiple styles affecting the same things on a page. So, even though I set the global style to Verdana, if I have got the headline styles set to something like Geneva, then that will override this global style setting of the font for the whole page.

Again, we will talk more about how the cascading in cascading style sheets works. But that is what they mean when they say cascading style sheets, that one style cascades over another cascades over another. Let us also set the size of the font on this page so that we do not have to set the size for every paragraph, every piece of text. We are going to make a global size setting of 12. A global font setting of Verdana and then override that in the few places where we want something different.

When you get to page properties the way you want, click okay. Now, I wanted to do this first before there was anything else in the styles box so that you can see. When I change the page properties, Dreamweaver actually created two new styles for me both affecting the body tag. That is how the background color and the font size and font style and font face are being affected on the page.

The other place that Dreamweaver automatically creates styles is if you highlight text like this headline here and then come down and maybe change the font, notice that Dreamweaver created something it is calling style 3, it will do that in sequence. Every time you create something that does not have a style already attached to it, Dreamweaver will create a new style for you. So, that can get a little confusing if you are not aware and you are trying to figure out where that style 3 came from.

It also can be problematic as we are creating styles if you use the property inspector to format something that is already styled, then Dreamweaver may alter that style automatically for you. So, try to get consistent, if you are using style sheets, only use style sheets. If you prefer to use traditionally HTML formatting or you are just making quick changes, then you can do that. You can even change your preferences back to HTML so that Dreamweaver does not automatically create these styles.

But for the purposes of this lesson, we will not change any settings in the properties inspector, only in ways that actually apply the styles. So, let us delete style 3 because we do not really want it here. That was just so you could see what happens.

If you are somebody who has not been using CSS styles in past and part of why I am doing this is because I know a lot of people who have not used CSS at all are trying to figure out how to catch up now. You maybe surprised or... click to read more