CSS List of Roman Numerals

/ CSS / By

The ordered lists in HTML are represented by OL tag. And by using CSS we can alter the type of ordered list we want it to be.

For this we have the list-style-type property. With it we can indicate that the numbers in the list are Roman. We can also indicate that they are in upper or lower case. This is why we have two values ​​for the list-style-type: upper-roman for uppercase and lower-roman for lowercase.

What we are going to do to define a list CSS of Roman numerals is to define two styles: «romanos_upper» and «romanos_lower», which we will use with the lists on our website.

The definition of the styles will be as follows:

.romanos_upper{
  list-style-type:upper-roman;
}
.romans_lower{
  list-style-type:lower-roman;
}

We will only have to use the class attribute of OL element to assign them one style or another. Let’s see how the code would look:

  1. First element
  2. Second element
  3. Third element
  4. Fourth element
  5. Fifth element


And in this simple way we have a list CSS of Roman numerals.