CSS | Links

Link is a connection from one web page to another web pages. CSS property can be used to style the links in various different ways.

States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo classes.
There are four state of links given below:

  • a:link => This is a normal, unvisited link.
  • a:visited => This is a link visited by user at least once
  • a:hover => This is a link when mouse hovers over it
  • a:active => This is a link which is just clicked.

Syntax:

a:link {
    color:color_name;
}

color_name can be given in any format like color name (green), HEX value (#5570f0) or RGB value rgb(25, 255, 2). There is another state ‘a:focus’ which is used to focused when a user uses tab key to navigate through the links.

Default value of links:

  • By default the links created are underlined.
  • When mouse is hovered above a link, it changes to a hand icon.
  • Normal/unvisited links are blue.
  • Visited links a colored purple.
  • Active links are colored red.
  • When a link is focused, it has an outline around it.

Example

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>CSS links</title>
        <style>
            p {
                font-size: 25px;
                text-align: center;
            }
          
        </style>
    </head>
  
    <body>
    <p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks Simple Link</a></p>
    </body>    
</html>

chevron_right


Output:
link property

CSS Properties of Links: Some basic CSS properties of links are given below:

  • color
  • font-family
  • text-decoration
  • background-color

color: This CSS property is used to change the color of link text.
Syntax:

a {
    color: color_name;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Link color property</title>
        <style>
            p {
                font-size: 20px;
                text-align:center;
            }
          
            /*unvisited link will appear green*/
            a:link{
                color:red;
            }
          
            /*visited link will appear blue*/
            a:visited{
                color:blue;
            }
          
            /*when mouse hovers over link it will appear orange*/
            a:hover{
                color:orange;
            }
          
            /*when the link is clicked, it will appear black*/
            a:active{
                color:black;
            }
          
        </style>
    </head>
      
    <body>
        <p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a
         This link will change colours with different states.</p>
    </body>    
</html>

chevron_right


Output:
color decoration

font-family: This property is used to change the font type of a link using font-family property.
Syntax:

a {
    font-family: "family name";
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            /*Inintial link font family arial*/
            a {
                font-family:Arial; 
            }
            p {
                font-size: 30px;
                text-align:center;
            }
          
            /*unvisited link font family*/
            a:link{
                color:Arial;
            }
          
            /*visited link font family*/
            a:visited{
                font-family:Arial;
            }
          
            /*when mouse hovers over it will change to times new roman*/
            a:hover{
                font-family:Times new roman;
            }
          
            /*when the link is clicked, it will changed to Comic sans ms*/
            a:active{
                font-family:Comic Sans MS;
            }
        </style>
    </head>
  
    <body>
        <p><a href="https://www.geeksforgeeks.org/"
        id="link">GeeksforGeeks</a> a Computer Science
        Portal for Geeks.</p>
    </body>
</html>                    

chevron_right


Output:
link font family

Text-Decoration: This property is basically used to remove/add underlines from/to a link.
Syntax:

a {
    text-decoration: none;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Text decoration in link</title>
        <style>
          
            /*Set the font size for better visibility*/
            p {
                font-size: 2rem;
            }
              
            /*Removing underline using text-decoration*/
            a{
                text-decoration: none;
            }
            /*underline can be added using
            text-decoration:underline; 
            */
        </style>
    </head>
    <body>
        <p><a href="https://www.geeksforgeeks.org/" id="link">GeeksforGeeks</a> a Computer Science
        Portal for Geeks.</p>
    </body>    
</html>

chevron_right


Output:
link text decoration

background-color: This property is used to set the background color of link.
Syntax:

a {
    background-color: color_name;
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>background color</title>
        <style>
            /*Setting font size for better visibility*/
            p{
                font-size: 2rem;
            }
            /*Designing unvisited link button*/
            a:link{
                background-color: powderblue;
                color:green;
                padding:5px 5px;
                text-decoration: none;
                display: inline-block;
            }
          
            /*Designing link button when mouse cursor hovers over it*/
            a:hover{
                background-color: green;
                color:white;
                padding:5px 5px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p><a href="https://www.geeksforgeeks.org/" id="link">
         GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
    </body>    
</html>

chevron_right


Output:
link background color

CSS Link Button: CSS links can also be styled using buttons/boxes. The following example shows how CSS links can be designed as buttons.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Link button</title>
        <style>
            /*Setting font size for better visibility*/
            p{
                font-size: 2rem;
            }
            a {
                background-color: green;
                color:white;
                padding:5px 5px;
                border-radius:5px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p><a href="https://www.geeksforgeeks.org/" id="link">
     GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
    </body>        
</html>

chevron_right


Output:
link button



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.