Creating Text Menus and Background Colors with Cascading Style Sheets (using Dreamweaver 8)

You can create rollover menus using just text and CSS. The benefit of using these menus (as opposed to using graphics) is that the text can be changed and added to at any time in Dreamweaver. There are no original images to keep track of.

In Dreamweaver 8 there are two useful tools for using CSS - the CSS Styles Window and the Properties Window. You can open both of these from the Window menu.

For the summer you will be creating a linked .css file that all of your pages link to. The benefit of adding your CSS this way is that if you need to make changes to the colors, fonts, sizes, etc. you only need to change a single page!

Creating a New CSS Document in Dreamweaver 8

  • File > New > CSS
  • Open the CSS Styles window

Linking a CSS Document to a Page in your Web Site

  • Open your web page
  • Open the CSS Styles window
  • Click on the "chain link" button at the bottom of the CSS Styles window. If you hover over the button it will say "Attach Style Sheet"
  • Every time you update the CSS document, all of the HTML pages it is attached to will automatically reflect those updates.

Adding Styles to the CSS Document

  • Open the CSS Styles window
  • Click on the + button at the bottom of the CSS Styles window. If you hover over the button it will say "New CSS Rule"
  • In the window that appears, choose the type of style you would like to add and follow the instructions below

Adding a CSS Tag Rule

This type of rule assigns properties to all instances of an HTML tag on a page. You can apply styles to any HTML tag. For the summer, you will be applying styles to <body> tags such as background color and font as well as to heading tags including <H1>, <H2> and <H3>.

  • In the New CSS Rule window click on the second option (Tag)
  • Choose a tag from the Tag menu or type the tag in to the Tag field yourself.
  • Choose to define in This Document Only.
  • Click OK.
  • In the CSS Rule Definition window, choose your properties.
    • For <body> you can choose Type in the left menu and choose a default font, size and color for your website. Choose Background in the left menu and choose a background color for your website.
    • For a heading tag such as <H1> choose the font properties you would like to use.
  • Click OK.

Adding a CSS Advanced Rule

Use these rules to create rollover menus from your text. The rules in this section are applied only to links.

  • In the New CSS Rule window click on the third option (Advanced)
  • Choose a:link from the Selector menu to set properties for unvisited links
  • Choose to define in This Document Only.
  • Click OK.
  • In the CSS Rule Definition window choose your properties.
  • Click OK.
  • Repeat these steps for a:visited to set properties for visited links (the way links appear after they have been clicked on.)
  • Repeat these steps for a:hover to set properties for links you are currently hovering your mouse over (the "rollover" state for the menu.)
  • You can repeat these steps for a:active, but it is unecessary given that most visitors to your site have a fast enough connection that they will never see this state.

Adding a custom Class Rule

  • Use these rules to create styles for other text. For instance, you could create a class to define the main headings in a left menu so they look different from the page text, but not the same as the links.
  • In the New CSS Rule window click on the first option (Class)
  • In the Name window type in a name (no spaces or odd punctuation). In the example above you could type in something like menu-headings.
  • Choose to define in This Document Only.
  • Click OK.
  • In the CSS Rule Definition window choose your properties.
  • Click OK.

Applying Styles to the Text in your Document

If you have used a Tag or Advanced rule, the styles will be automatically applied each time you use one of these tags (<body>, <H1>, <a href>) in your pages. You don't need to do anything else. If the styles do not automatically appear, you have not attached your style sheet. Follow the instructions above to do so.

If you have used a Class rule, you will need to apply the styles to the appropriate text.

  • Open your HTML document in Dreamweaver.
  • Select the Text you want to apply a style to.
  • In the Property window, choose the style from the Style menu.
  • If you do not see the style you want listed there, you haven't attached your style sheet. You can select Attach Style Sheet from the Style menu and browse to your .css document.
  • Information Services
  • Date Created: June 12, 2006
  • Last Modified: June 12, 2006
  • Expires: August 31, 2006