CSS Properties - Hyperlinks

After learning how to create hyperlinks, the first thing most novice web designers want to know is how to remove the underlining. The CSS properties in the table below cover this and other tweaks you can make to the appearance of hyperlinks on your web page. You can simply apply them to the A element or you can apply them to advanced selectors using link and dynamic pseudo-classes. These include the following:

Property Name	Some Possible Values	What It Does
text-decoration	underline | overline | none	Is the link text underlined?
cursor	crosshair | default | help	Sets the mouse pointer style
background	(Any color)	Rollover background color
display	block | inline	Set link as block element?

NOTES:

• Pseudo-classes ~ Since a hyperlink is dynamic in nature, what you probably want to do is have its appearance change according to its current status. This can be accomplished by using an advanced selector that combines the A element with a special suffix known as a pseudo-class. These are described in the following:
  
  
  • A:link - The A element combined with the :link pseudo-class can be used to set what CSS properties are applied to a hyperlink that has not been visited. Example:
    
    
    A:link {color: blue;}
  • A:visited - The A element combined with the :visited pseudo-class can be used to set what CSS properties are applied to a hyperlink that has been visited. Example:
    
    
    A:visited {color: purple;}
  • A:active - The A element combined with the :active pseudo-class can be used to set what CSS properties are applied to a hyperlink that is currently being activated (clicked). Example:
    
    
    A:active {color: red;}
  • A:hover - The A element combined with the :hover pseudo-class can be used to set what CSS properties are applied to a hyperlink when the user's mouse pointer hovers over it. Example:
    
    
    A:hover {color: red;}
• Text decoration ~ This CSS property is used to define whether text is underlined or not. It applies to all elements but you'll probably find it most useful when applying it to hyperlinks. Here are some possible values:
  
  
  • underline - This will underline your hyperlink text.
  • overline - This will apply a line on top of your hyperlink text.
  • none - This will remove the underlining normally applied to hyperlink text.
  As an example, you can use the following code in an embedded or external stylesheet to remove underlining from all hyperlinks:
  
  A {text-decoration: none;}
• Cursor ~ You can use the cursor property to define the style of mouse pointer displayed when the user hovers over a hyperlink (cursor can also be used with other elements). Some possible values are:
  
  
  • crosshair - This will render the cursor as a crosshair. (show me)
  • default - This will render the cursor as an arrow. (show me)
  • help - This will render the cursor with a question mark. (show me)
• Background ~ This property is covered extensively on the Backgrounds page but I should mention here that it can be used along with the A:hover selector to apply a background color when the user hovers over your hyperlinks (which is kind of cool).
  
  To see this in effect, hover your mouse pointer over the following test link:
  
  TEST LINK
  
  Here's the code you would use in an embedded or external stylesheet:
  
  A:hover {background: yellow;}
• Display ~ Among many other things, the display property is especially useful for turning hyperlinks into block elements. This will then allow you to apply dimensions like width, height and padding in order to make the clickable area of your hyperlink as big as you want. Here's an example:
  
  
  This entire yellow box is a hyperlink. You can click anywhere inside it.

  
  <a style="display: block; width: 150px; border: 1px solid black; padding: 10px; background: yellow; text-decoration: none;" href="#display">This entire yellow box is a hyperlink. You can click anywhere inside it. </a>
  
  
  View source code  View result