CSS Tutorial: Formatting Hyperlinks with Cascading Style Sheets (CSS)

Links are pieces of text that are hyperlinked to other web pages. They are 'clickable' meaning that a user can put their mouse cursor over the link, click, and go to the designated web page. There are four states that a link may be in on an HTML web page: the link, a visited link, an active link, and a hovered link.

The link, of course, is just the link as it appears when no action has been taken, and the cursor isn't over the link. The default color for links is blue, and they are usually underlined. However, with CSS, you can change this. A visited link is one that the user has visited, and it is usually no longer blue to the user - but it is still clickable.

An active link is a link that has just been clicked. The link turns a different color between the time that the user clicks the mouse button down and then let's goes of the mouse button, meaning that they have activated the link. A hovered link refers to the time that the user has their mouse cursor over a link, but has not clicked.

To manipulate these links, we use the following in our CSS:

When we put the above code within our HTML web page CSS, all of the links on the web page will be green. When the user puts their mouse cursor over the link, it will turn blue, and be underlined. When they click the link, it will temporarily turn red and be underlined, and when they return to this page, the link that they clicked will be gray.

The upper portion of the web page code now looks like this:

HTML allows us to format and manipulate text to make our web pages more attractive and appealing; however, Cascading Style Sheets enable us to make them even more attractive and appealing. This is one of the biggest benefits of CSS, other than the fact that using CSS saves loads of time when creating or changing web pages.

In the next section, you'll learn how to display tables with Cascading Style Sheets.

Previous	Next

  An Introduction to Cascading Style Sheets
  Creating a Basic HTML Page
  Embedding Cascading Style Sheets
  Using Cascading Style Sheets (CSS) to Specify Web Page Formatting
  Manipulating Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
  Formatting Hyperlinks with Cascading Style Sheets (CSS)
  Creating Tables within a Web Page with Cascading Style Sheets (CSS)
  Cascading Style Sheets (CSS) Classes and ID's
  Cascading Style Sheet Codes Chart - Property Index