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: