Creating Default Link Selectors

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: #00c;}
    a:visited { color: 00c;}
    a:hover { color: #00c; text-decoration: none; }
    a:active { color: #00c;}

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

Check It Out!

I use Dreamweaver MX 2004, actually the entire Macromedia suite so, all examples are written in Dreamweaver.

Creating the a:link selector

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

Creating a new Selector

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.

Saving a new Style Sheet

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.

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

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

Setting a:hover properties

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.

Setting a:hover background properties

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

Clicking the Attach Style Sheet icon

The Select Style Sheet File window will open.

Attaching an external style sheet

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.