CSS tutorial series: Styling links and lists.
Tags: beginners, webdev, tutorial, css
Published: 2023-01-19 18:21:37

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?

![links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44nys96pj8hxhmaw4vj4.png)

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._

![states of a link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae3i6jg7dnjwhaknqypq.png)

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] (https://dev.to/fullstackjo/css-tutorial-series-css-typography-font-text-transform-and-other-properties-10mh), and it is `text-decoration`.

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

``` CSS
a {
  text-decoration: none;
}

```
`pseudo-classes` as mentioned in a previous post [CSS tutorial series: CSS pseudo-classes](https://dev.to/fullstackjo/css-tutorial-series-css-pseudo-classes-40j4) 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.

![ordered list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szr8vhewbpzs3fhfv9y5.png)


![unordered list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm93nzvi3tozrslym05w.png)