Intermediate Dreamweaver

Topics:

 

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 Edit Style Sheet:
  • In the Style Sheet windowStyle sheet window, click on 'New'.
  • This will bring up the New StyleWindow:New Style window
  • Give the style a name in the Name box, and click OK:
  • The edit style sheet window will come up. This will let you edit various properties of the style.

Style Definition: Type

  • 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:Style Definition: Background
    • 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 Edit Style Sheet.
  • Click the New button.
  • In the New Style window, click Redefine HTML Tag:
    New Style: Redefine HTML Tag
    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 3, and set it on something, Dreamweaver sets up a 'span' element with that class around your selection(s). If you want to adjust the paragraph elements, etc., you may need to either make your changes for the element throughout the document, use Dreamweaver 4, or use the HTML Source window or the Replace function to make the

Last Modified: November 18, 2002