How to Change the Font of Ordered or Unordered Lists Using CSS
In this tutorial, we go over how to change the font of lists in HTML- either ordered lists or unordered lists- using CSS.
By default, an unordered or ordered list may contain a font or font size which you don't like. These can be easily be adjusted in CSS to decrease or increase the font size and to choose a font-family which is desired to be displayed.
Below is an unordered list with a font and font size which comes up by default:
List of Things to Do
- Take Out the Garbage
- Wash the Dishes
- Wash the Car
- Do the Laundry
The HTML code to create the list above is:
This is how an unordered list will show up with no adjustments. However, we can style this above list to have a different font and font size.
This is done by the following CSS code:
These lines of code change the font to arial, san-serif, and increase the font size to 15px.
This changes the above unordered list to look like the one shown here below:
List of Things to Do
- Take Out the Garbage
- Wash the Dishes
- Wash the Car
- Do the Laundry
How to Change the Font of List Containing a Class
If the ul tag contains a class, then to modify the font type and size, we just reference the class in the CSS file and put the declaration block within that class name.
For example, if we have an ul tag with the class name "bigger", the HTML code to create the list would be:
The CSS to style this list of class "bigger" is:
CSS practices a concept called inheritance. Once we change the ul tag, the li tags will automatically inherit the properties of the ul tag, such as font-type and size.
This is how font-type and size can be changed using CSS. We can also change many other aspects during this process as well, such as the margin, the padding, whether there will be
any bullet points at all in the list, and the line-height between each list item. We will go over these during future tutorials.