Using CSS

Pseudo Classes

Choose Method: Show Dreamweaver Instructions | Show Code

Text Rollovers

This type of style allows you to create rollovers without making images. The visited, active and hover states inherit css from the original link style, so you only need to specify the changes you require in the altered state.

Using the Vertical Navigation List as a starting point, we will now create a hover state for the links.

  • In Dreamweaver, click on 'Window > CSS Styles' to open the CSS window, as above. Click the 'New Style Sheet' icon, as above. Click 'Use CSS Selector'.
    CSS selector
  • In the Selector drop down menu, there are four different options.
    • a:active - when the browser is getting the linked page the link is active
    • a:hover - the rollover itself
    • a:link - the default link attributes
    • a:visited - the visited link attributes
      link options
  • Select one option at a time and assign attributes to each of the link states. If you don't want an underlined link, just select the 'None' checkbox in the 'Decoration' options.
    decoration none

Use the settings below to create a link style. The hover state must come last in the code to work on the link, visited and active states.

a:visited - visited link

  • In the Background panel of the Dreamweaver CSS Window, select
    • background: #C8D3B8;

a:active - selected link

  • In the Background panel of the Dreamweaver CSS Window, select
    • background: #CC99CC;

a:hover - hover link

  • In the Background panel of the Dreamweaver CSS Window, select
    • background: #799157;

The code should look like this:

a:visited {
background: #C8D3B8;
}
a:active {
background: #CC99CC;
}
a:hover {
background: #799157;
}

 

To test the styles you must have some linked text. View the page in the browser window an dhold the mouse over the links to see the results. Click on the links to see the visited and active states.

You should have something which looks like this... (you might have to clear your browsers history to see all the link states.)