CSS Links are used to style hyperlinks and control how they appear in different states such as normal, visited, hover, and active. They help improve the look and user experience of web navigation by customizing link colors, effects, and behaviors.
Four states of links:
- 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 that is just clicked.
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> Syntax:
a:link { color:color_name;}Properties of CSS Links
Some basic CSS properties of links are given below:
1. Color
This CSS property is used to change the color of the link text.
Syntax:
a {
color: color_name;
} 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> 2. Font-family
This property is used to change the font type of a link using font-family property.
Syntax:
a {
font-family: "family name";
} 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> 3. Text-Decoration
This property is basically used to remove/add underlines from/to a link.
Syntax:
a {
text-decoration: none;
} 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> 4. background-color
This property is used to set the background color of the link.
Syntax:
a {
background-color: color_name;
} 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> CSS links can also be styled using buttons/boxes. The following example shows how CSS links can be designed as buttons.
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>