• Home
• Products
• Tutorials
• Extensions
• Support
  

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

• Right-Click (Control-Click) anywhere on the page.
• From the popup menu, choose CSS Styles- New...

• Select the Advanced radio button
• Open the Selector list and choose a:link
• Select the Define In radio button and New Style Sheet File in its list.
• Click OK.

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.

• Type a name in the File name field (make sure you include .css after the name).
• Make sure the Save In field is pointing to a directory within your defined site.
• Dreamweaver will fill in the URL as you type the file name
• Make sure Relative To is set to your site's proper mode (usually Document).
• Click Save.

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.

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

• Select the CSS Styles Category
• Clear (uncheck) the Check Box labeled Open CSS File when modified
• Click OK

creating the a:visited selector

• Right-Click (Control-Click) anywhere on the page.
• From the popup menu, choose CSS Styles- New...

• Select the Advanced radio button
• Open the Selector list and choose a:visited
• In the Define In box, make sure mystyles.css is selected
• Click OK.

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

• Right-Click (Control-Click) anywhere on the page.
• From the popup menu, choose CSS Styles- New...

• Select the Advanced radio button
• Open the Selector list and choose a:hover
• In the Define In box, make sure mystyles.css is selected
• Click OK

• Set a:hover Text Decoration to none.
• Set Color to #CCCCCC.
• Leave the Style Definition window open.

Setting a background color

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

• Enter #333333 in the Background Color field.
• Click OK

creating the a:active selector

• Right-Click (Control-Click) anywhere on the page.
• From the popup menu, choose CSS Styles- New...
• Select the Advanced radio button
• Open the Selector list and choose a:active
• In the Define In box, make sure mystyles.css is selected
• Click OK

When the Editor window opens:

• Set color to #333333 (just like a:link)
• Click OK and we're done!

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...

• Open the page to which you want to link your style sheet.
• Open the CSS Panel (Window: CSS Styles)
• Click the Attach Style Sheet icon along the bottom of the panel

The Select Style Sheet File window will open.

• In the File/URL box, enter the path to your style sheet (or browse to it)
• Leave Add as set to Link
• Click the OK button.

Next: Creating Multiple CSS Link Styles

PVII Link Styles Series:

• CSS Link Styles- Defined
• Creating the Default Link Selectors
• Next: Creating Multiple CSS Link Styles- Overview
• Creating Multiple CSS Link Styles- Preparatory Steps & Test Page Creation
• Creating Multiple CSS Link Styles- Creating the 2nd & 3rd Link Styles