Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Creating the Default Link Selectors

The default link selectors apply to all hyperlinked text on a page. Here, again, is how ours look:

a:link { 
	color: #333333;
	}
a:visited {
	color: 333333;
	}
a:hover {
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
a:active {
	color: #333333;
	}

To see how the above styles render, click the Demo link (Hover and Active Selectors do not render in Netscape 4)

Demo

Creating the a:link selector

Creating a new Selector

Creating a Linked Style Sheet file

Whoa! Not only are we learning about link classes, we're learning how to create a linked style sheet!

As soon as you click OK, the Save Style Sheet File As window will open.

Saving a new Style Sheet

Note: You now have a genuine linked style sheet. This single style sheet can be linked to every page in your site. So, to change the look of your site, you need edit only a single style sheet! (See Linking Style Sheets to Existing Pages below)

When you click Save, the Style Definition Window will open and the title bar will read: for a:link in mystyles.css.

Setting a:link properties

The only property we are going to set is Color. Enter #333333 in the Color field (of course, you can open the color picker to choose a color from the web-safe palette or pick up a color from your page with the eyedropper)

-Click OK

If you are using Dreamweaver MX 2004, the style sheet file will open. I recommend disabling this feature. To do so:

Choose Edit - Preferences

Disabling Auto CSS File Open

creating the a:visited selector

Creating the a:visited pseudoclass

The Style Definition Window will open and the title bar will reference for a:visited in mystyles.css.

The only property we are going to set is Color. Enter #FFFFFF in the Color field.

-Click OK.

creating the a:hover selector

Creating the a:hover class

Setting a:hover properties

Setting a background color

-Switch to the Background Category by selecting it from the Category list on left side of the window.

Setting a:hover background properties

creating the a:active selector

When the Editor window opens:

Linking Style Sheets to Existing Pages

Dreamweaver makes creating a linked style sheet very easy, as we saw above. To realize the benefits and efficiencies of a linked CSS file, you may want to know how to link your existing pages to your new CSS file. Here's how...

Clicking the Attach Style Sheet icon

The Select Style Sheet File window will open.

Attaching an external style sheet

Next: Creating Multiple CSS Link Styles

PVII Link Styles Series: