Default Stylings for List Elements.

All HTML elements are given browser-specific default CSS properties. While default styles can be helpful and save you time by giving elements useful functionalities, other times these default properties can be cumbersome and need to be changed to give the element the desired look or positioning.

As a relatively green web-dev I’ve found that there are several elements whose default styles I need to change practically every time I use them. These elements are the: <ul>/<ol> and <li> tags.

The <ul> or unordered-list element takes the property “list-style-type”, which can be shortened as “list-style”, it’s default value is “disc”.

Here is an example of a list of different animals:

<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Frogs</li>
<li>Hampsters</li>
<li>Gerbils</li>
</ul>

Without adding any styles yourself the list will look like this:

Let’s take a look at some other values for list-style-type: lower-greek and lower-roman:

list-style-type: lower-greek
list-style-type: lower-roman

You can even make your own custom list-style by passing an image file, like a .png or .svg instead of one the regular values.

ul {
list-style-image: url(star.svg)
}
from the Mozilla Developer Network CSS resource (url below)

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists

Most of the of time, I’ve found that list elements aren’t use to present literal text lists, like our list of animals above. Rather they’re used to organize several repeating elements such as a list of links in a navigation or a series of images in a photo gallery.

In these instances we don’t want our list to have any sort of graphical flourish in front of all our list items. So we can style our list by changing the list-style-type property to none like so:

<ul> {
list-style-type: none;
}
our list of animals with list-style-type: none

Lists also come with a default amount of padding-left, so we will need to remove that for many common list uses.

<ul> {
list-style-type: none;
padding: 0;
}

An unordered list on it’s own isn’t very useful it needs to filled with list items, which also carry their own default stylings that often need to be changed.


We can also effect the same stylistic changes above by styling the list-item elements directly. By default <li> elements have a default display value of list-item. What does this actually mean and how can we change it?

<li> {
display: inline-block;
}

If we give our <li> elements a display value of something other than list-item like say inline-block it will remove the padding and bullet points all at once.

Now this doesn’t look ideal for presenting our list of animals or any other actual list for that matter. However it is more useful for setting up a gallery, navigation or other more common uses of lists elements when building a website.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.