How to Use Cascading Style Sheets to Format Web Page Links
Links are pieces of text that are hyperlinked to other web pages. They are ‘clickable’ meaning that a user can put their mouse cursor over the link, click, and go to the designated web page. There are four states that a link may be in on an HTML web page: the link, a visited link, an active link, and a hovered link.
The link, of course, is just the link as it appears when no action has been taken, and the cursor isn’t over the link. The default color for links is blue, and they are usually underlined. However, with CSS, you can change this. A visited link is one that the user has visited, and it is usually no longer blue to the user – but it is still clickable.
An active link is a link that has just been clicked. The link turns a different color between the time that the user clicks the mouse button down and then let’s goes of the mouse button, meaning that they have activated the link. A hovered link refers to the time that the user has their mouse cursor over a link, but has not clicked.
To manipulate these links, we use the following in our CSS:
a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}
When we put the above code within our HTML web page CSS, all of the links on the web page will be green. When the user puts their mouse cursor over the link, it will turn blue, and be underlined. When they click the link, it will temporarily turn red and be underlined, and when they return to this page, the link that they clicked will be gray.
The upper portion of the web page code now looks like this:
<html>
<head>
<title>Your Page Title</title>
<style type= "text/css" title="styleid" media="all">
<!–
body { background-color: #000000; color: #ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: #ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}
–>
</style>
</head>
<body>
</body>
</html>
HTML allows us to format and manipulate text to make our web pages more attractive and appealing; however, Cascading Style Sheets enable us to make them even more attractive and appealing. This is one of the biggest benefits of CSS, other than the fact that using CSS saves loads of time when creating or changing web pages.
This concludes the CSS Formatting Hyperlinks tutorial. In the next lesson, you’ll learn about CSS Classes and ID’s.