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!

I am going to start with a quick review of the basics of CSS in this lesson and get more advanced as we progress because CSS support in version 8 has changed so much and CSS is so complex. I do not want anyone to get lost as we move into the more advanced lesson. You will need to do a new site setup for this lesson. I have a special version of the dive site created just for you. You will find it in the lesson 3 folder. It is called dive for CSS. We can see that here at the top of the files panel. We will start with the file called CSS start lesson and work from there.

I have created three CSS files in this website and it is kind of like a cooking show. So, I have got my already out of the oven version that we are going to look at the end and you will think I will make a perfect cake. And then, I have this one where we can start in and see a few things real quickly and then another one with no formatting where we can go a little further with it.

So, we will start with CSS start lesson and please note, I do not consider this page the best possible example of design. I created this to provide a good example of a variety of styles on one page, and I promise, when we get done, it will look a lot better than it does right now.

Let us start at the beginning by creating a new style. The easiest way to do that is to open the CSS style panel. You will find that at the top of your panel collection. If it is not visible there, just go to window and choose CSS style. This is also where you will find all of the other panels, pallets etcetera in Dreamweaver. So, if you are ever looking for something that I am using and cannot find it, this is probably where you will be able to open it.

Over here in the CSS style panel, I have a couple of options for how to create a new style. I can use this little icon down here or I can just right click anywhere in the style panel and choose new. Notice that there are multiple types of styles that I can create, multiple selector types. I am going to start by redefining an HTML tag and when you choose this radio button, the second button, redefining an HTML tag creates a large popup list here under tag. And here you can choose any HTML tag and redefine what happens when that tag is applied to text.

So, if you notice the headlines on this page are formatted in H1. The heading 1 style in traditional HTML. I am going to change what happens to the H1 tag by selecting H1, redefining the tag, I am going to do this in this document only or work with them external style sheets in the moment. Click okay. Now, in the CSS rule definition dialogue, I have many options. But for now, keeping it simple, I am going to change the font to Geneva.

Notice that there is a list of font options in Dreamweaver. Dreamweaver has intentionally created a collection of font with multiple options in each one. That is because in order for text that is formatted in HTML to display properly on somebody else's screen, they have to have the same font. So, Dreamweaver anticipating that not everybody has the same fonts, provides alternative, what I am doing when I select Geneva, Aerial Helvetica is telling the browser to display my text in Geneva if it can find that font on the users computer. If not, it will use, if not it will use Helvetica and if it cannot find that, it will use whatever since there are font it can find.

Now, you can edit this font list and create any collection of fonts you want. Just be aware that more of your fonts are less likely to be on the end users computer. Choose Geneva for this example and I am going to set this to size 18, click okay. Notice that Dreamweaver immediately reflected this change because I am redefining an existing HTML tag and that HTML tag was already applied. Notice that when I click in this headline, you can see down here in the properties inspector that I have already applied the heading one tag to this headline. All it did was change the font and the size to reflect the redefined H1 tag that I have created over here as a style.

So, my H1 tag in the CSS styles panel is now formatted with

I am going to start with a quick review of the basics of CSS in this lesson and get more advanced as we progress because CSS support in version 8 has changed so much and CSS is so complex. I do not want anyone to get lost as we move... click to read more