Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Links

CSS Links | CSS for Beginners - Class 6 PDF Download

With CSS, links can be styled in many different ways.
CSS Links | CSS for Beginners - Class 6

Styling Links


Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example

a {

  color: hotpink;

}

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

  • 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

Example

/* unvisited link */

a:link {

  color: red;

}


/* visited link */

a:visited {

  color: green;

}


/* mouse over link */

a:hover {

  color: hotpink;

}


/* selected link */

a:active {

  color: blue;

}

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Text Decoration


The text-decoration property is mostly used to remove underlines from links:
Example

a:link {

  text-decoration: none;

}


a:visited {

  text-decoration: none;

}


a:hover {

  text-decoration: underline;

}


a:active {

  text-decoration: underline;

}

Background Color


The background-color property can be used to specify a background color for links:
Example

a:link {

  background-color: yellow;

}


a:visited {

  background-color: cyan;

}


a:hover {

  background-color: lightgreen;

}


a:active {

  background-color: hotpink;

Link Buttons


This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:
Example

a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


a:hover, a:active {

  background-color: red;

}

More Examples


Example
This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}

a.one:visited {color: #0000ff;}

a.one:hover {color: #ffcc00;}


a.two:link {color: #ff0000;}

a.two:visited {color: #0000ff;}

a.two:hover {font-size: 150%;}


a.three:link {color: #ff0000;}

a.three:visited {color: #0000ff;}

a.three:hover {background: #66ff66;}


a.four:link {color: #ff0000;}

a.four:visited {color: #0000ff;}

a.four:hover {font-family: monospace;}


a.five:link {color: #ff0000; text-decoration: none;}

a.five:visited {color: #0000ff; text-decoration: none;}

a.five:hover {text-decoration: underline;}

Example
Another example of how to create link boxes/buttons:

a:link, a:visited {

  background-color: white;

  color: black;

  border: 2px solid green;

  padding: 10px 20px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


a:hover, a:active {

  background-color: green;

  color: white;

}

Example
This example demonstrates the different types of cursors (can be useful for links):

<span style="cursor: auto">auto</span><br>

<span style="cursor: crosshair">crosshair</span><br>

<span style="cursor: default">default</span><br>

<span style="cursor: e-resize">e-resize</span><br>

<span style="cursor: help">help</span><br>

<span style="cursor: move">move</span><br>

<span style="cursor: n-resize">n-resize</span><br>

<span style="cursor: ne-resize">ne-resize</span><br>

<span style="cursor: nw-resize">nw-resize</span><br>

<span style="cursor: pointer">pointer</span><br>

<span style="cursor: progress">progress</span><br>

<span style="cursor: s-resize">s-resize</span><br>

<span style="cursor: se-resize">se-resize</span><br>

<span style="cursor: sw-resize">sw-resize</span><br>

<span style="cursor: text">text</span><br>

<span style="cursor: w-resize">w-resize</span><br>

<span style="cursor: wait">wait</span>

Test Yourself With Exercises


Exercise:
Set the color of links to "red".
<style>

____ {

  color: red;

}

</style>


<body>

  <h1>This is a heading</h1>

  <p>This is a paragraph</p>

  <a href="http://w3schools.com">This is a link</a>

</body>

<style>

a {

  color: red;

}

</style>


<body>

  <h1>This is a heading</h1>

  <p>This is a paragraph</p>

  <a href="http://w3schools.com">This is a link</a>

</body>

The document CSS Links | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Summary

,

past year papers

,

shortcuts and tricks

,

Objective type Questions

,

Semester Notes

,

study material

,

Important questions

,

practice quizzes

,

pdf

,

ppt

,

MCQs

,

Previous Year Questions with Solutions

,

CSS Links | CSS for Beginners - Class 6

,

Exam

,

Sample Paper

,

Viva Questions

,

video lectures

,

Extra Questions

,

mock tests for examination

,

Free

,

CSS Links | CSS for Beginners - Class 6

,

CSS Links | CSS for Beginners - Class 6

;