Styling ordered list

Hi Gents.

By default most of the browsers displays numbers in the list with the same font style as list body. Below you can see some small tutorial about ordered list (ol) and paragraph (p) elements for ordered lists styling.

Demo

Overview

What is needed it is style list with font Gorgia, and then set font Arial for p element (in ol):

1. HTML code

Create ordered list. Do not forget to wrap your text with p:

<ol>
  <li>
    <p>
      This is line one
    </p>
  </li>
  <li>
    <p>
      Here is line two
    </p>
  </li>
  <li>
    <p>
      And last line
    </p>
  </li>
</ol>

Here is how ordered list will be displayed by default:

2. ol element

Style for ol element: ol { font: italic 1em Georgia, Times, serif; color: #999999; }

Now it looks like this:

3. ol p element

New style for ol p element: ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }

The result should look like this:

Demo

Thanks for your reading.