CSS : Hyperlinks
Feb 7th, 2008 by Geekess
There are fours states of links you can give properties to in your style sheets. The important thing to remember is the order in which they must be set out and defined within the style sheet. If not kept in the following order the last two states will not effective.
a:link unvisited links
a:visited visited links
a:hover what happens when you mouse over the link
a:active what happens when the link is selected
Now you can specify all or some of the following properties for each of the above states in your style sheets.
color: #FFF stets a color for the text link
background: #FF0 sets a background color for the text link
text-decoration: underline sets it as underlined or none for no underline
font-size: 130% changes the font size
font-family: helvetica changes the font family
a:link a:visited
{
color: #969
text-decoration: none
font size: 110%
}
a:hover a:active
{
color: FFF
background-color: 969
font-size: 160%
}
The above would cause all links on a page to be slightly larger then the rest of the text and in a dark blue shade with no underlines. When moused over or selected those same links would increase in size and become white type on a dark blue background. Using these properties you can make your links stand out or blend in as little or much as you want into your page designs.
Learn More with: "Defining CSS : Cascading Style Sheets", "CSS : Backgrounds", "CSS Basics", "CSS : Text & Fonts", "CSS : Margins & Positioning", "CSS : Borders", "CSS : Lists", "CSS : Setting Dimensions", "CSS : Displaying Elements"