Skip to main content

Style Properties for the Anchor Tag

Text tagged with the anchor tag, used to reference other hypertext links, is usually shown underlined and in blue text. After a link has been followed the text is shown in a purple text. These styles can easily be controlled with a style sheet using the following selectors: 

Selector Description Example
a:link sets the style for an unvisited link a:link {font-family:Arial; color:red; text-decoration:none}
a:visited sets the style for a visited link a:visited {font-family:Arial; color:green; text-decoration:none}
a:active sets the style for the link when it is linking
a:hover sets the style for the link while the mouse pointer is hovering over the text a:hover {font-family:Arial; color:black; text-decoration:none}

The following table shows some of the properties you can assign to the above selectors:

Property Description
background-color sets the background colour for the link
color sets the colour for the link
font-family sets the font type for the text
text-decoration none, underline, overline, strikethrough

For example:

Here is a hypertext link to the BBC's homepage. If you place the mouse cursor over the link the text should turn black. Note: the text-decoration:none setting - this switches off the underlining that is associated with hypertext links.