We use cookies. More

CSS Basics Part 10: CSS Links

CSS
f t g+ in

In this tutorial we will go over how to style links with CSS by giving some examples.

Advertisement

Welcome to the 10th part of the CSS Basics series where I will talk about styling links and anchors with CSS.

First of all, you should know that you can style links on a web page just like styling any other element using any property you want. As an example, the below code makes all the links black, bold, 12px in size and without underlines:

a {
font-size: 12px;
color: black;
font-weight: bold;
text-decoration: none;
}

The above code will affect all the links on the web page. If you want to style links within a specific element, you should use something like this:

#footer a {
color: blue;
font-weight: bold;
}

The above code will style only the links within the footer element.

Unlike other elements on a page, links are active elements and they can be styled depending on their state. For example, there are a number of states a link can have such as active, hover, focus and visited.

a:link is used to style a normal link. This style will set how a link looks like when there is no interaction with it.

a:link {
color: #aa1405;
text-decoration: none;
}

a:visited is used to style a visited link. This will be in effect when you visit a link on a web page.

a:visited {
color: #450600;
text-decoration: none;
}

a:hover styles the hover state of a link, that is when you bring the cursor over that link.

a:hover {
color: #750b00;
text-decoration: underline;
}

a:focus sets the style of a link when it is just clicked or tabbed. It is visible at the instant you click a link or if you are cycling through the links using the tab key on your keyboard. Actually, although this is not something that I use at all, I realized now that it will certainly be useful for visitors who don't use a mouse.

a:focus {
color: #ff1800;
text-decoration: none;
}

a:active is used to style a link at the instant it is clicked.

a:active {
color: #faa1405;
text-decoration: underline;
}

Try and see what you can do with all these link styles. You can use any other property like background-color, font-weight, border etc. as you wish. Just keep in mind that, when styling links, a:hover must come after a:link and a:visited. Also, a:active must come after a:hover.

I will give some nice link styling examples in the following posts, now I will continue with CSS lists on the next part.

Advertisement

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in