CSS Lesson 7: Links

2
12

Links

Links are very useful in CSS. Usually, there are four types of CSS links: unvisited, visited, hover, and active. You’ve learned about the links and their usage as text in HTML Lesson 6 Text Links. But in CSS we’ll teach you how to design the links.

Just a quick recall of your link knowledge.

Links are used to define the path of a webpage. a represents the link. It has four different natures or types

  • Unvisited link: Means the user has not visited the link. It’s also known as the normal state of link. Its syntax is a:link
  • Visited link: Means the user has visited the link. Its syntax is a:visited
  • Hover link: Have you seen a link which changes its color when you move a mouse over it? It’s because of the hover effect. Its syntax is a:hover
  • Active link: The moment when you click the link it become active. Its syntax is a:active

Apply Style to links

Normally, all types of links have the same appearance. Therefore, CSS plays its role to differentiate them with the help of different colors. By default, the browser has set some colors, but you can change them as per your design requirements. For example,

  • a:link – underlined blue text
  • a:visited – underlined purple text
  • a:hover – not set by default
  • a:active- underlined red text

But with the help of CSS you can change the colors.

Source Code Output




Background Color

You can change the background color of link as well using background-color property.

Source Code Output




Link – Text decoration

By default, a link has an underline. As you can change the colors of a link, similarly, you can change the text decoration with the text-decoration property. Here is a demonstration:

Source Code Output




[tooltip]Generally, the text-decoration property is used for removing the underline of a link.[/tooltip]

Summary

  • Links has 4 states: unvisited, visited, hover and active.
  • Change the color of a link with the CSS color property.
  • Change the background color of a link with CSS background-color property.
  • Use the text-decoration property to remove the underline from a link.

Next Lesson

In the next lesson you will learn about the CSS List.

2 COMMENTS

  1. […] learned in detail about the link states in the CSS lesson Links. However, what we didn’t tell you (cause we are sneaky) was about the Pseudo class. You saw […]

Leave a Reply