CSS - styling anchors (links) by Matt Ottewill

The technical term for a link tag in HTML is an anchor and it is defined with the letter "a". The simplest form of anchor tag is a hypertext link ...

<a href="http://www.planetoftunes.com/">Click here for the best site on the web!</a>

Simple text link states

A link such as the above will display the following default link states in a browser ...

  • link = no mouse event (blue underlined)
  • hover = mouse rollover
  • active = mouse down (red underlined)
  • visited = no mouse event (purple underlined)

The appearance of these default states can be re-defined in a CSS.

Advanced selector pseudoclass styles

You can use a "flavor" of CSS advanced selector styles, known as Anchor Pseudoclasses, to re-define the way that text links appear throughout your site, or just within a single <div> tag (using contextual selectors). The following CSS link states can be styled ...

  • a:link (how a link will appear on a page)
  • a:hover (how a link will appear when you move the mouse over it)
  • a:active (how a link will appear when you click on it)
  • a:visited (how a link will appear to show it has been clicked on already)

If you want a single link to be styled differently to the others, you can place the link in a unique <div id> and use a contextual selector...

#navigation a:hover {
font-weight: bold;
}

Re-defining default link styles in Dreamweaver

Once you have created your style sheet, click New CSS style in the CSS Styles palette ... ... and then choose Advanced as your Selector Type in the dialogue box that opens . You can then select each of the 4 link tags(link, hover etc) in turn from the Tag dialogue box and style them as usual.

Using CSS links to swap image files

Because the anchor pseudoclasses have a background image property, you can use CSS to switch image files for the 4 states. Here's how ...

  1. Make a <div id> tag.
  2. Place a simple text link in it and give it a Display property/value of "Block" and Height and Width values which match the size of your image.
  3. Create 4 contextual selectors (for a:link, a:hover etc) and assign each a different background image and a Display property/value of "Block", and Height and Width values which match the size of your image.
  4. Optional: In code view remove the text between the <a href> tags, but not the tag itself.

You can also use an unordered list as the basis for an image swapping series of links.

You can find examples under the CSS Image Links heading here.

CSS - examples

Click here for example html files and CSS stylesheets.

Related downloads

None at present

Related ads