How to create styles for HTML tags using CSS
Part six of an eight-part series of blogs

This is the second of a three-part online training series of blogs on CSS style sheets.  This blog shows how to create styles for specific HTML tags (the first part covers the principles of CSS style sheets, and the third part gives a worked example of CSS).

  1. CSS Styles for Specific HTML Tags
  2. Block Elements (Heading, Div and Paragraph Tags)
  3. Inline Tags - Span, Em and Strong
  4. Styling Images - the IMG Tag
  5. Styles for Ordered and Unordered Lists  - ul, ol and li
  6. Hyperlinks (the A Tag) (this blog)
  7. Table Styles
  8. Setting CSS for Other Tags in HTML

This blog is part of a larger online ASP.NET online tutorial series. Wise Owl's main business is running classroom-based training courses - have a look at our other .NET courses.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Hyperlinks (the A Tag)

Here's a simple HTML hyperlink tag, and what it produces:

The HTML for a hyperlink A hyperlink in normal view
The <a> hyperlink tag. What it would show.


Thus the title tag gives the pop-up yellow caption, and the href tag tells you where to go to when you click on the link. 

Although hyperlinks are easy to create in HTML, they are one of the more complicated tags to style effectively - read on!

Hyperlink Pseudo-Classes 

You can set 5 classes for a hyperlink and its pseudo-classes (as they are called, weirdly):

Tag How used
a The basic hyperlink (setting the default font size, for example).
a:link Additional effect when the hyperlink hasn’t already been used.
a:visited Additional effect for a link to a page which has already been visited.
a:hover Set how the hyperlink appears when you hover over it.
a:active Set how the hyperlink appears when you click on it and hold the mouse down.

Examples of Styles for Hyperlinks

Here are some styles that you could set:

/* hyperlinks appear without underlining by default */



text-decoration: none;


/* unvisited links show in red */



color: red;


/* links which have previously been used in green */



color: green;


/* hover over link to change cursor and underline */



text-decoration: underline;

cursor: pointer;


/* colour when someone clicking on link */



background-color: Red;

color: white;


You must specify these tags in your CSS style sheet in a certain order (the order shown above works, and is as good a one to use as any).

This blog has 0 threads Add post