HTML CSS Links
CSS can be used to change the color of links, visited links, links your cursor hovers over, focused on and active. Links can also be styled using the same font selectors as font tags. They can also be treated as text objects. If you need to brush up on HTML links, I encourage you to return to the HTML tutorial on links
- a:link {color: blue ;} (Sets color of link when nothing is happening)
- a:visited {color: red ;} (Sets color of link after page has been visited)
- a:hover {color: white ;} (Sets color of link when mouse cursor hovers over link)
- a:focus {color: yellow ;} (Sets color of link when keyboard tabs to link)
- a:active {color: green ;} (Sets color of link when it is pressed)
Important Tip!
The a:link and the a:visited elements must be declared before you declare a:hover . You also must declare a:hover before you declare a:active .
- Declare in this order
- a:link
- a:visited
- a:hover
- a:active
Link Class Example;
.myLink a:link {
background-color: green ;
color: yellow ;
padding: 12px 20px;
text-align: center;
text-decoration: underline;
display: inline-block;
font-style: italic;
font-weight: bold;
font-size: large;
}
.myLink a:visited{
background-color: blue ;
color: yellow ;
}
.myLink a:hover, a.myLink:active {
background-color: red;
color: lime ;
}
Here I have declared a class called "myLink" in the head of the page.
As you can see, you have a large number of options for styling the link.
This is what the link would look like.
Go ahead and click it. It just reloads the page.
I hope you will join us for the next lesson Lesson 12) Lists
Additional Resources