CSS Links | Links Styling in css - Codewithrandom

CSS Links | Links Styling in css - Codewithrandom

CSS Links | Links Styling in css - Codewithrandom

In CSS, we can style links by changing its properties (color, background-color, text-decoration etc.)

Link Defaults

By default:

  • links are underlined
  • unvisited links are blue
  • visited links are purple
  • hovering a link makes the mouse a little hand icon
  • focused links have an outline around them
  • active links are red

With CSS, of course we can change those properties or style them.

Styling Links

Before we can start styling links we first need to understand the concept of link states.

Link States

Link states are different states that a link can exist in which can be styled using pseudo-classes.

  • Link (unvisited): pseudo-class is :link; the default state, it isn't in any other state
  • Visited: pseudo-class is :visited; a visited link (exists in browser's history)
  • Hover: pseudo-class is :hover; a link that is being hovered (mouse over)
  • Focus: pseudo-class is :focus ; a link when it is being focused e.g. focused by pressing the Tab key
  • Active: pseudo-class is :active ; a link when it is being activated or clicked on

Link's Text Decoration

You may want to change or remove a link's text decoration which is an underline by default.

We can achieve it by using the text-decoration CSS property.


 a:link {  
   text-decoration: none;  
 }  
 a:visited {  
   text-decoration: none;  
 }  


Link's Background Color

You may want to add a link's background color.

We can achieve it by using the background-color CSS property.

 a:link {  
   background-color: lightgreen;  
 }  
 a:visited {  
   background-color: lightgreen;  
 }  

Adding Icons to Links

It's a good idea to add icons to links. For example if the link will open in a new tab.


 <!DOCTYPE html>  
 <html>  
 <head>  
   <title> Try It Yourself </title>  
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />  
 </head>  
 <body>  
   <p> Go to <a href="http://www.example.com">Example.com<i class="material-icons">launch</i></a>. </p>  
   <p><b> Note! </b> This demo requires internet connection. </p>  
 </body>  
 </html>  


Styling Links - Advanced

Here is an example of advanced way of styling links in CSS:, adding borders and padding etc.


Note: In the CSS definition, the :hover pseudo-class should come after the :link and :visited pseudo-classes. And the :active pseudo-class must come after the :hover pseudo-class.



 a {  
   outline: none;  
   text-decoration: none;  
   font-family: sans-serif;  
 }  
 a:link {  
   color: black;  
 }  
 a:visited {  
   background: lightgrey;  
 }  
 a:focus {  
   border: 1px solid red;  
   background: lightgrey;  
 }  
 a:hover {  
   border: 1px solid #f8f9f9;  
   background: #173459;  
   color: white;  
 }  
 a:active {  
   text-decoration: underline;  
   border: 1px solid lightgrey;  
   background: #d9534f;  
   color: white;  
 }  
Was that link not looking good? Yes, maybe!

So I challenge you to style it yourself and be creative.

You can try experimenting by changing the colors and backgrounds

Post a Comment

Previous Post Next Post