CSS Links

Previous Page Next Page

Customizing Links with CSS

Links, also known as hyperlinks, play a vital role in website navigation, allowing visitors to move around the site. Therefore, it's crucial to style links effectively to enhance user experience.

For more information on links and how to create them, you can refer to the HTML links tutorial.

A link can exist in four different states: link, visited, active, and hover. Each of these states can be styled differently using anchor pseudo-class selectors.

a:link — styles for normal or unvisited links.
a:visited — styles for links that have been visited.
a:hover — styles for links when the mouse hovers over them.
a:active — styles for links when they are being clicked.

You can apply various CSS properties such as color, font, background, border, etc., to each of these selectors to customize link styles just like regular text.

Example

Try this code »

a:link {    /* unvisited link */
color: #ff0000;
text-decoration: none;
border-bottom: 1px solid;
}
a:visited {    /* visited link */
color: #ff00ff;
}
a:hover {    /* mouse over link */
color: #00ff00;
border-bottom: none;
}
a:active {    /* active link */
color: #00ffff;
}

The order in which you define styles for different link states is important because the last defined style takes precedence over earlier ones.

Note: Typically, the order of pseudo-classes should be: :link, :visited, :hover, :active, :focus for proper functionality.

Customizing Default Link Styles

In most web browsers like Chrome, Firefox, and Safari, links on web pages appear with underlines and default link colors if not styled explicitly.

By default, text links display as follows in most browsers:

An unvisited link appears as underlined blue text.
A visited link appears as underlined purple text.
An active link appears as underlined red text.

However, there's no change in appearance for hovered links; they remain blue, purple, or red depending on their state (unvisited, visited, or active).

Now, let's see how to customize links by overriding their default styles.

Setting Custom Link Colors

You can use the CSS color property to specify the color of links for each state. Ensure that users can distinguish between regular text and links by choosing appropriate colors.

Check out the example below to understand how it works:

Example

Try this code »

a:link {
color: #1ebba3;
}
a:visited {
color: #ff00f4;
}
a:hover {
color: #a766ff;
}
a:active {
color: #ff9800;
}

Removing Default Underline from Links

If you prefer not to have the default underline on links, you can use the CSS text-decoration property to remove it. Alternatively, you can apply other styles to links like background color, bottom border, bold font, etc., to make them stand out from regular text.

The example below demonstrates how to remove or set underlines for different link states:

Example

Try this code »

a:link, a:visited {
text-decoration: none; 
}
a:hover, a:active {
text-decoration: underline;
}

Transforming Text Links into Buttons

You can transform regular text links into button-like elements using CSS. To achieve this, you'll need to utilize additional CSS properties such as background-color, border, display, padding, etc. You'll learn more about these properties in upcoming chapters.

Check out the following example to see how it's done:

Example

Try this code »

a:link, a:visited {
color: white;    
background-color: #1ebba3;    
display: inline-block;
padding: 10px 20px;
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;  
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}

Previous Page Next Page