CSS | Links

19 Jan, 2022
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  
html
<!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>
Output:  
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:  
html
<!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>
Output:  
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:  
html
<!DOCTYPE html><html>    <head>        <style>            /*Initial 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>                   
Output:  
Text-Decoration: This property is basically used to remove/add underlines from/to a link. Syntax:  
a {
    text-decoration: none;
}
Example:  
html
<!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>
Output:  
background-color: This property is used to set the background color of link. Syntax:  
a {
    background-color: color_name;
}
Example:  
html
<!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>
Output:  
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:  
html
<!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>
Output:  
 
varshagumber28
CSS-Basics
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property