Intermediate Dreamweaver

Styles

Cascading Style sheets

Cascading Style Sheets let you specify the appearance of some text element in HTML. Basically, you define a 'class' of that element (or a generic class of any element) that has the settings you want, and then apply it to the elements you want. This allows you to, for instance, have two kinds of headings, citations, etc. in the same document. It also allows you to make global changes to the settings for all the elements of that type. So, instead of laboriously changing a bunch of different sets of text to one color of green, then changing your mind and making them yellow one at a time instead, you can give all of the elements the same class, and experiment with the colors for the whole class.

If you save the styles to a separate style sheet, you can use them in any other web page too.

To set up a Cascading Style sheet in your document:

From the Text menu, choose CSS Styles, then New Style
In the New Style window, choose 'New Style Sheet File' in the Define In: section
Leave "Class" selected.
Give the style a name (starting with a period . ) in the Name box, and click OK.
You will be asked to save the new stylesheet under a new file name:

Enter a name and click Save.
The edit style sheet window will come up. This will let you set various properties of the style.

For instance, the screen above will let you set
- The font/font family, the line height, and color of the text
- the size in either pixels or size relative to the rest of the text in the document
- Decoration-- note that choosing NONE will actually REMOVE any underlining, etc. set on the rest of the document.
- Weight lets you set the text to bolder OR lighter (if you choose bolder, it will make it more bold than the rest of the text); Variant lets you set small-caps if you want them; and Case will force capitalization or lower case.
The Background screen (click 'Background' under 'Category') lets you:
- Set a background color and or image for that element (piece of text, heading, table cell, table row, table, etc.), and set whether the background image repeats
- Set the horizontal or vertical alignment for things in that element
Block lets you set the text spacing for a block of text
Box lets you create a box around the block of text or other element
Border lets you make the borders on things (tables, images) to vary in width on color on each side.
List lets you define the list-type, the bullet image, and the location of the bullets in lists.
Positioning lets you set up margin spacing/padding for objects such as images.

Once you've set the settings to your liking, click OK, then Done in the Edit Style Sheet window.

Now, when you want to apply that style, select the area you want to apply the style to, and select CSS Styles from the Text menu. Choose the style you want to apply. To remove the style from something, select it, go to CSS Styles, and choose 'none.'

Suppose you want to change the attributes for one kind of element throughout the entire document?

Select CSS Styles from the Text menu, then choose New.
In the New Style window, click

Then from the drop-down menu marked Tag choose the tag to specify, and click OK.
Set the attributes as above, then click OK and Done. The style will be applied to all elements of that type in the document.

When you set up a 'custom style' in Dreamweaver, and set it on something, Dreamweaver will either add the class as an attribute of the element (if you have selected the whole element), or create a 'span' element around the text you have selected and add the class to that.

If the settings you have created in CSS don't appear to be applied properly, be sure the class is applied to the whole element.

Editing an existing style

If you want to change the attributes of a style you've already created, you will need to edit the Style Sheet.

From the Text menu, choose CSS Styles, then Manage Styles.
Select the name of the stylesheet you want to edit, then click 'Edit'.
Click the name of the style you want to edit, then click Edit.
Make changes as described above, then click the OK button.
In the Stylesheet window, click Save to save the changed.
In the list of stylesheets, click Done to complete the process.

Special Types of Styles-- Advanced

To change the style of links (unvisited, visited, active, or when they are hovered over), create a new style as above, but choose the Advanced selector type, then choose a:link, a:visited, a: active, or a:hover. Then create the style and set the options as above.

Adding a Stylesheet an existing page

To use an existing stylesheet on a page, go to the Text menu, choose CSS Styles, Manage Styles.

Then click on the style you want to use, and click the "Attach" button.

The next page has some sample stylesheet applications: StyleSheet examples

February 10, 2004