CSS Links Tutorial - codeswithpankaj.com
CSS provides a variety of properties to style links, making them an integral part of web design. This tutorial will cover link states, text decoration, color, background color, and hover effects.
1. Link States
Links can be styled differently depending on their state. There are four states of a link:
a:link
- A normal, unvisited link.
a:visited
- A link the user has visited.
a:hover
- A link when the user mouses over it.
a:active
- A link the moment it is clicked.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Link States - codeswithpankaj.com</ title >
< style >
a :link {
color : blue ;
}
a :visited {
color : purple ;
}
a :hover {
color : red ;
}
a :active {
color : orange ;
}
</ style >
</ head >
< body >
< a href = "https://codeswithpankaj.com" >Visit codeswithpankaj</ a >
</ body >
</ html >
In this example, the link changes color based on its state.
2. Text Decoration
The text-decoration
property is commonly used to remove the underline from links or add other text decorations.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Text Decoration - codeswithpankaj.com</ title >
< style >
a {
text-decoration : none ;
color : blue ;
}
a :hover {
text-decoration : underline ;
}
</ style >
</ head >
< body >
< a href = "https://codeswithpankaj.com" >Visit codeswithpankaj</ a >
</ body >
</ html >
Here, the underline is removed from the link, but it appears when the link is hovered over.
3. Color
The color
property changes the text color of the link.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Link Color - codeswithpankaj.com</ title >
< style >
a {
color : green ;
}
a :hover {
color : red ;
}
</ style >
</ head >
< body >
< a href = "https://codeswithpankaj.com" >Visit codeswithpankaj</ a >
</ body >
</ html >
In this example, the link color is set to green and changes to red when hovered.
4. Background Color
The background-color
property can be used to change the background color of links.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Link Background Color - codeswithpankaj.com</ title >
< style >
a {
background-color : yellow ;
color : black ;
padding : 5 px ;
text-decoration : none ;
}
a :hover {
background-color : orange ;
}
</ style >
</ head >
< body >
< a href = "https://codeswithpankaj.com" >Visit codeswithpankaj</ a >
</ body >
</ html >
Here, the link has a yellow background that changes to orange when hovered.
5. Hover Effects
Links can have various hover effects to make them more interactive.
Example:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >CSS Link Hover Effects - codeswithpankaj.com</ title >
< style >
a {
color : blue ;
text-decoration : none ;
transition : color 0.3 s , background-color 0.3 s ;
}
a :hover {
color : white ;
background-color : blue ;
}
</ style >
</ head >
< body >
< a href = "https://codeswithpankaj.com" >Visit codeswithpankaj</ a >
</ body >
</ html >
In this example, the link changes color and background color with a transition effect when hovered.
This tutorial covers essential CSS properties for styling links. For more tutorials and examples, visit codeswithpankaj.com .
Last updated 3 months ago