in

CSS LINKS | Learn How to Structure Beautiful Links On Web Documents

In this tutorial we will be discussing about CSS Links and how you can create and beautify links using CSS styles. In our previous tutorial we discussed about CSS images and how you can structure them on your web document. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS Images | Learn How to Design Image Properties in Web Document

CSS LINKS

We can set up different properties of our hyperlink using CSS. Some of the properties include:

  • The link property
  • The visited property
  • The hover property
  • The Active property

Please note: In css we have this link properties placed accordingly in other for them to be effective. For example, a:hover property will come after a:link property and a:visited property in the CSS for the link styling to be effective. Also, a:active property come after a:hover property in the CSS. The syntax for this is shown below.

<style type = "text/css">
   a:link {color: red}
   a:visited {color: blue}
   a:hover {color: green}
   a:active {color: yellow}
</style>

The link property

we can set the color of links using the syntax below

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a{
         color: red;
      }
   </style>
   <title>CSS links  illustration</title>
</head>
<body >
   <a href="https://develoferd.com/css-links/" target="_self"> MY LINK </a> 
</body>
</html>

Result

CSS links illustration MY LINK

The visited Link Property

The below example shows how to structure the color of a visited link.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a:visited{
         color: red;
      }
   </style>
   <title>CSS visited link color  illustration</title>
</head>
<body >
   <a href="https://develoferd.com" target="_self"> MY LINK </a> 
</body>
</html>

Result

CSS links illustration MY LINK

The hover link property

The below example shows how to structure the color of link when a mouse pointer hovers over it

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a:hover{
         color:green;
      }
   </style>
   <title>CSS hover link  illustration</title>
</head>
<body >
   <a href="https://develoferd.com/css-links/" target="_self"> MY LINK </a> 
</body>
</html>

Result

CSS links illustration MY LINK

We can make this more beautiful by adding two properties to the link. For example we set the link visited color to red and hover color to green

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a:visited{color:red;}
      a:hover{ color:green;}

   </style>
   <title>CSS links  illustration</title>
</head>
<body >
   <a href="https://develoferd.com" target="_self"> MY LINK </a> 
</body>
</html>

Result

CSS links illustration MY LINK

The Active property

The below example shows how you can change the color of an active link. Recall that an active link is a link in which the user is currently clicking. So the color of the link changes when you click on it.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      a:active{ color:yellow;}

   </style>
   <title>CSS Active link  illustration</title>
</head>
<body >
   <a href="https://develoferd.com/css-links/" target="_self"> MY LINK </a> 
</body>
</html>

Result

CSS links illustration MY LINK

conclusion

The link properties listed above are needed when styling your links for a web document. A good understanding of this properties will enable you make good web page links formatting and structure. Lets move on to the next topic on CSS TABLES

What do you think?

css images

CSS Images | Learn How to Design Image Properties in Web Document

css tables

CSS TABLES | Learn How to Structure Tables on Web Pages Using CSS