CSS Link Styles Tutorial - Page 2

To simply remove underlines from all links:

Having done the initial two steps on the previous page, now:

Select a:link from the drop-down menu in the New Style Rule dialog box and click OK. This will open the Style Definition dialog box, which is where it all really happens. Here you can choose various CSS styles which, in this case, will be applied to unvisited links.

To remove underlines, under Decoration, check None, then click OK, then Save, which will bring you back to the Edit Style Sheet dialog box, where you can...

Select a:visited from the drop-down list this time, and do the same for it that you did for a:link, selecting the no-decoration option and saving.

Then, back at the Edit Style Sheet box, do the same for a:hover, and then for a:active. (Notice the order? One more time, all together: LINK! VISITED! HOVER! ACTIVE!) Click "Done", and you're done and can check the page in your browser.

Note: If removing underlines is all you're doing, it really isn't necessary to add the a:hover rule, but I left it in with the thought that you will probably create lots of CSS link styles now that you know how, and it's a good idea to just get used to doing all four of them in that order. (Did I mention about the order?)

To create text link rollovers (the "hover effect"):

With the four link pseudo-classes, you can define four different link states, for unvisited, being-hovered-over, active, and visited links. These different states can involve more than just color and underlining, but for now, let's create a set of style rules that make dark blue links that turn grey upon being moused over, turn red when active, and purple when visited, and let's remove the undies (underlines) from all of them.

After doing the initial steps on the previous page, select a:link from the drop-down list and click OK to get into the Style Definition box (which, as I mentioned before, is where it all really happens). For Decoration, check None. On the right-hand side of the box is a field labelled Color - in the text field, type #003399 (dark blue). Click OK, then Save.

Select a:visited, OK, and check Decoration - None, but this time define the color as #9966CC (purple). OK, Save.

Select a:hover, OK, check Decoration - None, and this time define the color as #CCCCCC (light grey). OK, Save.

Select a:active, OK, check Decoration - None, and this time define the color as #FF0000. OK, Save.

Click Done, and go try your page in a browser. Remember a:hover doesn't work in Netscape 4.x.

<--- To Page 1 - Link Styles Tutorial - To Page 3 --->