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.

property	value	Description
list-style-type	circle, square,upper-roman, lower-roman	Some of these values are for ordered lists and others are for unordered lists, these values change the marker style of the list items
list-style-image	accepts an image's url as a value	alter the list item's marker to become the assigned image.
list-style-position	outside, inside	If the value is set to outside, the marker will be outside the li block box, and if it is set to inside, the marker will be inside its block box.
list-style	list-style-type, list-style-position, list-style-image	This property is a shorthand property it is used to set every previously mentioned list property in a single declaration. in the specific order that is mentioned in the value column

These are two examples using both ordered and unordered list.