Si necesitamos mostrar una lista ordenada de elementos en nuestra página web o blog mediante HTML y CSS podremos hacerlo de una forma muy sencilla.

Tenemos varias formas de afrontar esta situación, insertando el código CSS en línea, dentro del atributo style de la etiqueta HTML o definiendo una clase.

Ejemplo en línea

Con el siguiente ejemplo, mostraremos una lista ordenada de elementos en formato de números romanos en minúsculas.

<ol style="list-style:lower-roman">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Vista:

1. Elemento 1
2. Elemento 2
3. Elemento 3

El siguiente ejemplo es similar al anterior, pero mostrando los números romanos en mayúscula.

<ol style="list-style:upper-roman">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Vista:

1. Elemento 1
2. Elemento 2
3. Elemento 3

Ejemplo mediante clase CSS

.romano-minuscula{
	list-style:lower-roman;
}

HTML:

<ol class="romano-minuscula">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Creamos otra clase para que la lista se vea con números romanos en mayúsculas.

.romano-mayuscula{
	list-style:lower-roman;
}

HTML:

<ol class="romano-mayuscula">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>