[CSS] Links

In most web-applications, the default styles (blue or purpue underlined) for hyperlinks (<a>) are not used. You might want links to look differently in different modes (link, visited, or hover).

1. Pseudoclasses

The <a> element needs to work differents depending on the circumstances. CSS uses a “pseudoclass” to define various states of user interaction with the element.

  • :link – for a link that has not been visited
  • :visited –  for a link that has been visited
  • :hover – in the act of hovering a mouse on a link
  • :active – in the act of clicking on a link


2. Colors

The “color” property is used to set the link text color.

a:link { color:#999; }
a:hover { color:Orange; }
a:active { color:Red; }


3. Removing Underlines

In most browsers, links are underlined by default. You can remove it using the “text-decoration” property.

a { text-decoration:none; }

Note that you can apply the common settings directly to the element without using the pseudoclass.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s