Two Column Layout And Vertical Menu Tutorial
Add Rollover Animation to Navigation Links
Lesson 9
Two Column Layout And Vertical Menu Tutorial
Add Rollover Animation to Navigation Links
Lesson 9
The a element has various states: link (unvisited), visited and hover states. These are states are changed based on the user interacting with the link.
The a element uses the web browser styling by default. There is an underscore for the text. There is also a color for a link (unvisited), visited, and hover states.
In this lesson you override those state a element properties using the CSS pseudo classes :link, :visited and :hover
You will create the #nav a to target all the a elements in the #nav container element. Then you can set styling that applies to all states of the a element in that selector. In particular we want to remove the underscore for all states.
Then you create a selector for each of the a element’s states for the color property.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
Exercise Steps
HTML Source Code
This is the index.html file. Nothing has changed since the previous lesson.
In the site.css file in your practice folder add lines 17-29, then save.
CSS Source Code
This is the site.css file.
On line 18 the text-decoration property is used to remove the underscores from the link text in all a elements. Line 19 applies bold to all the link text in all the a elements.
Lines 22, 25 and 28 are toggling the link text color depending on the
Property References: