Macromedia Dreamweaver - Using Cascading Style Sheets in Dreamweaver 3 and 4: Why use styles to change the appearance of text?

Home > Products > Dreamweaver > Support > Using Cascading Style Sheets

Why use styles to change the appearance of text?

The traditional way to make an H1 heading appear as green Helvetica text was to wrap it in FONT tags. (In Dreamweaver you can do this by selecting some text and choosing a font or series of fonts and a color in the Property inspector; to apply the same FONT -tag formatting to multiple pieces of text, use HTML Styles.) For example:

<H1><FONT FACE="Helvetica" COLOR="green">a level-one heading</FONT></H1>

Using CSS you can, if you wish, give the same information using a STYLE attribute:


	<H1 STYLE="font-family: Helvetica; color: green">a level-one heading</H1>

But putting style information inside a tag defeats the whole purpose of styles, which is to separate the formatting from the content. If you want to make every H1 header Helvetica and green, wrapping the H1 in FONT tags is just as efficient—or rather, inefficient—as including a STYLE attribute in each H1 .

This is where the sheets part of Cascading Style Sheets comes in. A style sheet is a list of style definitions that goes in the head of your HTML document. If you put the style information for H1 in the style sheet, all H1 s in your document will automatically be Helvetica and green.

<STYLE TYPE="text/css">
H1{ font-family: Helvetica;
color: green }
</STYLE>

This not only saves you a lot of typing when you create a document, but it also saves you a lot of retyping later if you decide the font should really be Arial and the color red, because you'll only need to make the change in one place.

Of course, with Dreamweaver you don't need to type any of that into your document; instead you use the CSS Style palette to create and modify styles.