Introduction to Links in CSS
Hello everyone, dear friends! Today, we would like to talk about links in CSS and the various styles that can be applied to them. Links serve as one of the key elements of web pages and their attractiveness can greatly enhance user experience. By using CSS, you can change the style and behavior of links in different states.
We typically manage links in various states, including: unvisited links, visited links, hover links, and active links. These states can be defined using CSS pseudo-classes. Correctly styling links can make them distinct and, in fact, may impress your users!
Styling Links with CSS
With CSS, you can define the color, size, font type, and various other characteristics for links. Additionally, you can add hover effects and specific transitions to links so that when a user interacts with them, these effects take place. This work can create a more engaging appearance for your site.
Code Example
<style>
a {
color: blue; /* Unvisited link color */
text-decoration: none; /* Remove the underline from the link */
}
a:visited {
color: purple; /* Visited link color */
}
a:hover {
color: red; /* Hover link color */
text-decoration: underline; /* Add underline on hover */
}
a:active {
color: green; /* Active link color */
}
</style>
<a href="#">This is a sample link</a>
Line-by-Line Code Explanation
a { Defines a general style for all links.
color: blue; Sets the color of links for unvisited and visited ones to blue.
text-decoration: none; Removes the underline from links for standard display.
a:visited { Sets the style for visited links.
color: purple; Changes the color of visited links to purple.
a:hover { Defines the style for links in the hover state.
color: red; Changes the link color to red when hovered over.
text-decoration: underline; Adds an underline to the link on hover.
a:active { Sets the style for links in the active state.
color: green; Changes the link color to green in the active state.
}</style> End of style definitions.
<a href="#">This is a sample link</a> Creates a sample link to demonstrate the styles.