How to Change the Color of CSS Links
Internet Explorer, Firefox, Opera and Google Chrome, among other web browsers, have the same default setting for hypertext links. If the link has not been clicked or visited, the text is blue. If the website was visited or the text was clicked, the text is magenta. The following lists the steps needed to change the unvisited link's text color and the visited link's text color.
Other People Are Reading
Instructions
-
Setup, Style and Instructions
-
1
Create a standard XHTML document as shown, and save it as "link-color.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html> -
2
Type the following between the <title></title> tags, to give the HTML document a page title:
<title>CSS Link Color</title> -
-
3
Add the beginning and ending <style></style> tags between the <head></head> tags:
<head>
<title>CSS Link Color</title>
<style></style>
</head> -
4
Create a link to Google's homepage, as shown:
<a href="http://www.google.com">Google's Homepage</a>
Place this code between the <body></body> tags. -
5
Type the tag "a" between the <style></style> tags. Then, type a pair of curly braces "{}". Next, type "color: green;" between the curly braces, as shown:
<style>
a {color: green;}
</style>
By doing this, the <style></style> tags create a style sheet, which contains instructions for how elements on a webpage appear. In this case, every "a" tag on the webpage will have green text. The attribute "color" stands for font color. The value of the font color, in this case, is green. -
6
Hit the "Enter" key after the curly brace in Step 5. Type the second instruction, as shown:
a:visited {color: lime;}
The word "visited" is a pseudo-class, which means that after the user clicks the text between the "a" tag, the text turns lime-green. -
7
Save and upload your file. If you haven't visited Google today, then the link color will be green. Click on the link. Now hit the back button and refresh the page. Your link color should be lime-green.
-
1
