Tuesday, 12 April 2016

CSS Links

A link or hyperlink is a connection from one web resource to another.

Styling Links with CSS

A link has four different states — linkvisitedactive and hover. These four states of a link or hyperlink can be styled differently through CSS properties using the pseudo-classes of anchor element, depending on what state they are in.
Here're the CSS pseudo-classes associated with HTML <a> tag that you can use to define the different styles for the different states of a hyperlink.
  • a:link — Set styles for a normal or unvisited links that has no mouse pointer over it.
  • a:visited — Set styles for a link the user has visited but has no mouse pointer on it.
  • a:hover — Set styles for a link when the user place the mouse pointer over it.
  • a:active — Set styles for a link that is in the process of being clicked.
You can specify any CSS property you'd like e.g. colorfont-familybackground, etc. to each of these selectors to redefine the style of links, just like you'd do with the normal text.

Example

  • a:link {    /* unvisited link */
  •     color: #FF0000;
  •     text-decoration: none;
  • }
  • a:visited {    /* visited link */
  •     color: #00FF00;
  • }
  • a:hover {    /* mouse over link */
  •     color: #FF00FF;
  •     text-decoration: underline;
  • }
  • a:active {    /* active link */
  •     color: #0000FF;
  • }
The order in which you are setting the style for several link states is important, as what defines last takes precedence over the earlier CSS code.
 
Note:The order of the pseudo classes should be the following: :link:visited:hover:active:focus in order for these to work properly.

Standard Link Styles

In all major web browsers, links on the web pages have underlines and use the browser's default link colors, if you don't set the styles specifically for them.
For instance, the default link colors in Gecko based web browsers like Firefox are — blue for unvisited, purple for visited and red for the active link.

Setting the Color of Links

Following is the example which demonstrates how to set the link color.

Example

  • a:link {    /* unvisited link */
  •     color: #FF0000;
  • }
  • a:visited {    /* visited link */
  •     color: #00FF00;
  • }
  • a:hover {    /* mouse over link */
  •     color: #FF00FF;
  • }
  • a:active {    /* active link */
  •     color: #0000FF;
  • }

Removing the Default Underline from Links

The text-decoration CSS property is generally used to remove the default underlines from links. The following example demonstrates how to remove or set the text-decorationproperty for the different states of a hyperlink.

Example

  • a:link {    /* unvisited link */
  •     color: #FF0000;
  •     text-decoration: none;
  • }
  • a:visited {    /* visited link */
  •     color: #00FF00;
  •     text-decoration: none;
  • }
  • a:hover {    /* mouse over link */
  •     color: #FF00FF;
  •     text-decoration: underline;
  • }
  • a:active {    /* active link */
  •     color: #0000FF;
  •     text-decoration: underline;
  • }

No comments:

Post a Comment