- Understanding CSS Link Styles
- Creating the Default Link Selectors
- Creating Multiple CSS Link Styles
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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: #FFFFFF}
a:hover { color: #CCCCCC; background-color: #333333; text-decoration: none}
a:active { color: #333333
Creating the a:link Selector
Let's begin by creating the a:link selector for the hyperlink that has not been visited by the user's browser.
Open a properly defined Dreamweaver site and right-click (Control-click) anywhere on the page.
We do not tell you how to define a Dreamweaver site or provide screen captures for every step in this article. We assume that anyone interested in learning about CSS should already have a good understanding of Dreamweaver basics, such as defining a Dreamweaver site, creating a new file, and inserting a table. If you do not yet know how to do these things, please refer to your Dreamweaver manual or the online help within Dreamweaver.
From the popup menu, choose CSS Styles, New Style.
Select the Use CSS Selector radio button.
-
Open the Selector list and choose a:link ( Figure 1).
Select the Define In radio button and select New Style Sheet File in its list.
Click OK.
){kind=link}
Creating a Linked Style Sheet File
Whoa! Not only are we learning about link classes, we're also learning how to create a linked style sheet! The only property we are going to set is Color.
-
As soon as you click OK, the Save Style Sheet File As window will open (Figure 2).
-
Make sure the Save In field is pointing to a directory within your defined site.
-
Type a name in the File name field (making sure you include the .css extension after the name).
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. The Style Definition Window will open and the title bar will read: for a:link in mystyles.css ( Figure 3).
-
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 if you prefer).
-
Click OK, and the Style Sheet window will appear with your new selector listed (Figure 4).
){kind=link}
){kind=link}
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)
){kind=link}
Creating the a:visited Selector
In this section we create the a:visited Selector. The only property we are going to set is Color.
Click the New button.
The New Style window will open again and will display the settings present when the previous style was created.
Select a:visited from the Selector list.
Click OK.
The Style Definition Window will open and the title bar will reference for a:visited in mystyles.css.
Enter #FFFFFF in the Color field.
Click OK.
The Style Sheet window will appear with your two Selectors listed
Creating the a:hover Selector
In this section, you set up the a:hover Selector that appears when the mouse hovers over a link.
-
Click the New button again and repeat the above procedure to add a third Selector (Figure 5).
Set a:hover Text Decoration to none.
Set Color to #CCCCCC.
Leave the Style Definition window open.
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.
){kind=link}
){kind=link}
Creating the a:active Selector
In this section you create the a:active Selector that indicates when a user that has clicked on a hyperlink but not yet released the mouse button.
Click the New button and create the fourth Selector a:active
Set a:active 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.
Right-Click (Control-Click) anywhere on your page, and, in the context menu that pops up, choose CSS Styles, Attach Style Sheet.
The Select Style Sheet File window will open ( Figure 7).
Select your Style Sheet file.
Click the Select button.
){kind=link}