Print this chapterPrint this chapter

Text Links

2. Text Links states using pseudo-classes


          In this module, you will learn how to use CSS to style links. The CSS selector to be discussed is a, and there are four link states (also called pseudo-classes) that can be styled individually. They are listed as follows:

  • a:link – a normal, unvisiited link
  • a:visited – a link that the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
          All four link states are used together to create a whole cohesive look for a link that complements the web page's overall layout. Some CSS properties that can be used to style are listed as follows:


Underline, overline, line-through Solid, wavy, dotted, dashed, double For more, read on CSS textdecoration Property (https:// www.w3schools.com/cssref/ pr_text_text-decoration.asp)
Property Description Possible Values
color Sets the font color of the clickable text in the link Color values (Hex, RGB, color names)
text-decoration Sets the style/decoration of the clickable text in the link Underline, overline, line-through, solid, wavy, dotted, dashed, double. For more, read on CSS textdecoration Property (https:// www.w3schools.com/cssref/ pr_text_text-decoration.asp)
background-color Sets the background color of the area covered by the <a> tag Color values (Hex, RGB, color names)
text-align Sets the horizontal alignment of the clickable text in the link Center, left, right, justify
padding Sets a space around the clickable text inside the link Numerical values with CSS units of measurement
 border Sets a border around the area covered by the <a>  tag Color Numerical values with CSS units of measurement Dotted, dashed, solid, double, etc. For more, see CSS Borders


Example

          Given below are some screenshots of links in their different link states and the corresponding code. Note that the CSS selectors of the link states must be listed in the same order below as the code.

          The sample code also used some of the CSS properties that were discussed earlier. You can mix and match later according to your preferences. Take note to always choose styles that are cohesive with the overall layout of the webpage.