Tutorialspoint.dev

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

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

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:

<!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://tutorialspoint.dev/slugresolver/">GeeksforGeeks</a
         This link will change colours with different states.</p>
    </body>    
</html>

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:

<!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://tutorialspoint.dev/slugresolver/"
        id="link">GeeksforGeeks</a> a Computer Science
        Portal for Geeks.</p>
    </body>
</html>                    

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:

<!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://tutorialspoint.dev/slugresolver/" id="link">GeeksforGeeks</a> a Computer Science
        Portal for Geeks.</p>
    </body>    
</html>

Output:
link text decoration

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

a {
    background-color: color_name;
}

Example:

<!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://tutorialspoint.dev/slugresolver/" id="link">
         GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
    </body>    
</html>

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:

<!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://tutorialspoint.dev/slugresolver/" id="link">
     GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
    </body>        
</html>

Output:
link button



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter