CSS Tutorials

Links In CSS
Previous Home Next

Applying CSS to your links allows you to do all sorts of nice roll-over effects and advanced text highlighting. You will also be able to have many sets of links on a single page, all with different formatting. Links can be styled with any CSS property (e.g. color, font-family, background, etc.)

In addition, links can be styled differently depending on what state they are in.

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked
Simple Example
/* unvisited link */
a:link {
/* visited link */
a:visited {
color: #FF00FF;
/* mouse over link */
a:hover {
color: #0000FF;
/* selected link */
a:active {
color: #0000FF;
<h1><a href="C:/xampp/htdocs/r4r_advance/css1/fonts_in_css.shtml" 
  target="_blank" >Click on a link</a></h1>
<p><i>Note:</i> Basically it is provide different types of linking in CSS.</p>

Target Attribute Values

  • _blank: Opens the linked document in a new window or tab
  • _self: Opens the linked document in the same frame as it was clicked (this is default)
  • _parent: Opens the linked document in the parent frame
  • _top: Opens the linked document in the full body of the window
Previous Home Next