Dar estilo a las listas ordenadas con CSS

Desde hace un tiempo he estado buscando la forma para dar estilo a las listas ordenas (o listas numeradas) con css sin conseguirlo, más precisamente, dar estilo a los números en la lista para diferenciarlos de su contenido y acentuarlos mejor. La solución la encuentro en webdesignerwall, que es realmente sencilla y se la muestro a continuación:

1. La estructura html

Como sabrán, las listas numeradas se consiguen con las etiquetas <ol> y <li> y si se aplican estilos a cualquiera de estas, las repercusiones caen tanto en la numeración como en el contenido, por lo que hay que auxiliarse con otro elemento para poder diferenciarlos, como bien puede ser la etiqueta <p>. Así, tendríamos una estructura de código html como la siguiente:

<ol>
  <li>
    <p>Primer elemento</p>
  </li>
  <li>
    <p>Segundo elemento</p>
  </li>
  <li>
    <p>Tercer elemento</p>
  </li>
</ol>

Este código se visualiza de la siguiente forma:



2. Dando estilo a todos los elementos

La etiqueta <ol> contiene a todos los elementos, al darle estilo, lo heredará todo dentro de ella. Definamos, por ejemplo, los siguientes:

ol {
font:bold 18px times;
font-weight:;
color:#99CCCC;
}

Dando como resultado:



3. Dando estilos al contenido

Para diferenciar el contenido de la numeración damos estilos a la etiqueta <p>, por ejemplo:

ol p {
font:normal 10px Verdana;
color:#000000;
}

Que da como resultado final:

Finalmente, la etiqueta <ol> es la que da estilo a la numeración y <p> al contenido. Un problema de implementar esto en tu blog o web, es que muy seguramente no tengas este esquema de código, pero puedes aplicar una clase a <ol> y no afectar a todas las listas que hallas hecho con anterioridad.

Son solo 2 estilos y los resultados pueden ser tan buenos como tu habilidad con css, es de las cosas que hacen decir “¿cómo no se me ocurrió a mi?”.