CSS tutorial series: Styling links and lists.

You're probably already familiar with links, lists, and their types.

This post will cover the default styling of links and lists as well as the various properties that can be used to change that default styling.

Links

If you take a look at the example below, Can you enumerate the default styling of a link?

A link's is by default:

• underlined.
• colored blue.
• has the cursor property set to pointer by default.
• A visited link will have the color purple.
• A link that is active, or being clicked on, will be highlighted in red. (Holding down a click on a link will allow you to test this.)

visited and active are states of a link which you might guess that they can be modified using pseudo-classes which will get to in a moment.

Now that we know the default styles of a link, let's get into the properties that allow us to modify them.

We've already came across this one in the previous tutorial CSS tutorial series: CSS Typography, and it is text-decoration.

Using text-decoration will allow us to take away the underline of the link by setting it to none.

a {
  text-decoration: none;
}

pseudo-classes as mentioned in a previous post CSS tutorial series: CSS pseudo-classes and at the start of this post,

pseudo-classes specify a special state of the selected element

Let's discuss the states that a link has:

1. a:link - a normal that is not visited
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked

As we previously mentioned, we can alter these states, as we saw in the prior tutorial by using the ':hover' pseudo-class we changed the color of the text that was contained inside the span element.

the same concept can be applied using these pseudo-classes

Modify List styling

We can change the list styling using a range of properties.

These are two examples using both ordered and unordered list.