Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

CSS Link Styles

Want to know how to create CSS link styles (pseudoclasses)? It's easy! Just follow along and you'll be a master in no time.

link style syntax

Default link styles look like this in a style sheet:

a:link { 
	color: #333333;
	}
a:visited { 
	color: #FFFFFF;
	}
a:hover { 
	color: #CCCCCC;
	background-color: #333333;
	text-decoration: none;
	}
a:active { 
	color: #333333;
	}

A Style, in CSS jargon, is called a Rule. A rule has several component parts. Let's take the first default link style depicted above and inspect its parts:

a:link {color: #333333}

The first part of the Rule (a:link)is called the Selector. This tells the browser which element on the page to work with.

The curly bracket pair contains the Declaration, which is comprised of a Property (color) and a Value (#333333). Here's the syntax defined:

Selector { property: value }

The Selector a:link can roughly be translated to mean:

Mr. Browser, I'd like you to act upon <a> tag contents that have not been visited. Moreover, the user's mouse should be neither hovering over it nor pressed down upon it.

why don't we set the font family?

Notice that our 4 link styles (link, visited, hover, and active) declare neither font-family nor font-size. It's all about efficiency and inheritance. Your page will look better if your hyperlinks use the same font and font size as the surrounding text. By omitting these properties from the declaration, we ensure that all undeclared properties are inherited from the rule that is used by the element in which the link exists.

So, if the link is in a paragraph, it will inherit its font and size from that paragraph.

what is a link... really.

Links are links because they are wrapped inside anchor <a> tags:

This sentence, containing this link to thislink.htm looks like this in the source code:

<p class="techparacontent">This sentence,
containing <a href="thislink.htm">this link</a> to
thislink.htm looks like this in the souce code:</p>

Notice that the actual hyperlinked words —this link— are contained between an opening <a> tag and a closing </a> tag. The rest of the sentence falls to either side of the <a> tag pair and the whole affair is wrapped inside a pair of paragraph <p> tags. Whatever text (or images) fall between the <a> tag pair become hyperlinks. Your browser informs the world that this is so by causing the cursor to change into a pointing finger when it passes over the contents of an <a> tag.

Tip: <a> is short for anchor- because <a> tags anchor one page to another.

The browser knows about <a> tags very well. All browsers come with default instructions for how to render them in the absence of more specific instructions (like those contained in CSS). An unstyled hyperlink is blue. A visited hyperlink is purple. An active hyperlink is red.

CSS allows us to override and enhance a browser's default link styles in some very creative and aesthetically pleasing ways.

link styles are pseudoclass selectors in CSS-Talk

CSS specifications refer to link styles as Pseudoclasses... which are special classes that describe styles for elements that only apply under certain circumstances. It sounds intimidating but is quite simple:

a:link

Describes any hyperlink that has not been visited by the user's browser. In other words, the page linked to is not present in the browser's local memory.

a:visited

Describes any hyperlink that has been visited and is present in the browser's local memory.

a:hover

Describes a hyperlink while the user's mouse happens to be hovering over it. This class is recognized by all version 4 and higher browsers, except Netscape 4.

a:active

Describes a hyperlink that has been clicked but not yet released. This class is recognized by all version 4 and higher browsers, except Netscape.

Next: Creating the Default Link Selectors

PVII Link Style Series: