CSS Links

Links are an essential part of any website. They allow users to navigate between different pages and access external content. In this tutorial, we will learn how to style links using CSS to enhance the user experience.

Basic Link Styling

By default, links are styled with an underline and a default color (usually blue). We can use CSS to change the appearance of links by targeting the a tag.

a {
    text-decoration: none; /* remove underline */
    color: #FF0000; /* change text color to red */
    font-weight: bold; /* make text bold */
}

With the CSS code above, we have removed the underline from the link, changed the text color to red, and made the text bold.

Hover Effects

We can also add hover effects to links to provide visual feedback to users when they hover over a link. This can include changing the text color, adding an underline, or changing the background color.

a:hover {
    text-decoration: underline; /* add underline on hover */
    color: #00FF00; /* change text color to green on hover */
    background-color: #FFFF00; /* change background color to yellow on hover */
}

With the CSS code above, the link will have an underline, green text color, and yellow background color when the user hovers over it.

Visited Links

Visited links are links that the user has already clicked on. We can style visited links differently from regular links to provide users with feedback on which links they have visited.

a:visited {
    color: #0000FF; /* change text color to blue for visited links */
}

With the CSS code above, visited links will have blue text color, while regular links will have red text color.

Link States

In addition to regular, hover, and visited states, links also have active and focus states. The active state occurs when a user clicks on a link, and the focus state occurs when a link is selected using the keyboard.

a:active {
    color: #FFA500; /* change text color to orange for active links */
}

a:focus {
    outline: none; /* remove default focus outline */
    border-bottom: 2px solid #000000; /* add bottom border for focus state */
}

With the CSS code above, active links will have orange text color, and focus links will have a black bottom border to indicate selection.