How to Style a Link with CSS

A web page with two different looking styles of links.

Web page hyperlinks have many properties you can style. You can change color, underlining, background and many other aspects of appearance with CSS. Here are a few tips to get you started.

Things You'll Need

• Basic CSS knowledge
• Basic HTML knowledge
• HTML editor
• Nothing new is needed for this section

Instructions

Link styles for all your links

1. The CSS selector for hyperlinks is the A selector. The correct term is anchor, not link, but A elements are commonly called links. A elements can be targeted with CSS pseudo class selectors, based on the state of the link. The most common pseudo classes use these CSS selectors:

   a:link
   a:visited
   a:hover
   a:active

2. CSS rules for various link states determine font, text-decoration (whether or not the link is underlined), color, background-color or background-image, display properties such as inline or block, border, padding, margin and other CSS properties

3. This simple set of rules first makes all A element display in bold. It then goes through the individual link states to set different colors and text-decoration values for each state.

   a {
   font-weight: bold;
   }

   a:link {
   color: #660066;
   text-decoration: none;
   }
   a:visited {
   color: #663366;
   text-decoration: none;
   }
   a:hover {
   color: #660066;
   text-decoration: underline;
   }
   a:active {
   color: #660066;
   text-decoration: none;
   }

4. Rules like the examples in Step 3 apply to any links on an entire page. Properties such as background-color, border and others can all be added to rules such as the example in Step 3.

Link styles for specific areas of a web page

1. Most web pages are laid out in divisions or areas that can be identified with an id or class. When you put links in a div or other web page section identified with an id or class, you can create descendant selectors to style the links with rules that apply only in that section.

2. The image at the opening of this article showed an example of a page with links using different styles based on descendant selectors. Assume the two areas of the web page were created with divs with assigned ids. The content div uses the id "content" and the navbar div uses the id "navbar."

3. Use the id (or classes) that identify various divisions of a web page to create selectors that work only in that part of the page. Using the assumptions made in Step 2, rules for these selectors would create different styles in two areas of a page:

   #content a:link
   #content a:visited
   #content a:hover
   #content a:active

   #navbar a:link
   #navbar a:visited
   #navbar a:hover
   #navbar a:active

4. Suppose your page uses a class called "blogpost" for each entry. You can style links individually for just those areas of the page, too. Descendant selectors for the links in only that area of the page might look like this:

   .blogpost a:link
   .blogpost a:visited
   .blogpost a:hover
   .blogpost a:active

Tips & Warnings

• A less-commonly-used pseudo class selectors is a:focus.

• To find out how to make a link display like a navbar, see the article How to Style a List with CSS

• For best results, keep the rules in your stylesheet in this order: L-V-H-A, or link, visited, hover, active.

Resources

• CSS Tutorial