SO - Applying CSS to Ordered List

Updated answer by arttronics for: http://stackoverflow.com/q/11035157/1195891

by Gilbert Suarez

HTML

<link rel="stylesheet" href="http://carolineelisa.com/indigo/2012/wp-content/themes/indigo/style.css">
<div id="secondary" class="sidebar aside">
    <div id="secondary-html-content-2" class="widget content2_block widget-content2_block">
        <div class="widget-wrap widget-inside">
            <h2>Booking tips</h2>
            <ol>
               <li>You may change your course or accommodation during your stay with 2 weeks notice. A fee may apply.</li>
               <li>Want to study with your friends or colleagues? Have a specific timetable in mind? We can arrange a special package for you. Prices on request.</li>
               <li>Accommodation prices depend on location, standard and season. Be aware that over New Year and Carnival prices triple at least!</li>
            </ol>
        </div>
    </div>
</div>

<!-- The entry below is to examine certain aspects of the @font-face font. For example, the native line height at 14px can be seen on the Computed Layout panel. -->
<span style="font-family:'Rock Salt',cursive; font-size: 14px; line-height: normal;">A quick brown fox jumps over the lazy dog<br />0123456789 - @font-face "Rock Salt"</span>

CSS

/*    jsFiddle Goal: The ol li numbers should be a different color than the text, and yet both have the same background-color.

        Rev 2 - No jQuery or JavaScript required.
        W3C CSS Validated at pure CSS 2.1 profile, with exception of @font-face font used below.

        The websites style.css file is loaded as a jsFiddle Asset File.
*/


/* Setup the @font-face font used in the number section in the li list.
The auto-generated CSS Style below was obtained via:  http://fonts.googleapis.com/css?family=Rock+Salt
Side note:  The .woff file seen in the URL below can be loaded as a jsFiddle asset, thus jsFiddle becomes a pre-loader for @font-face fonts! */
@font-face {
  font-family: 'Rock Salt';
  font-style: normal;
  font-weight: 400;
  src: local('Rock Salt'), local('RockSalt'), url(http://themes.googleusercontent.com/static/fonts/rocksalt/v4/Q94aHXFHGip10K5uxi1jOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

/* The main DIV that has the ol to modify. */
#secondary ol{
    /* Deactivate the default list style that is native to this 'ol'.
    The generated numbers via this method can't be CSS styled, but using generated numbers from CSS counter() can be! */
    list-style-type: none;
    
    /* Just in case, 'ol' should be a 'ul' when designing from scratch, but we are working with fixed HTML here. */
    
    /* Define a variable name to use, lets make it orangeNumbers. */
    counter-reset: orangeNumbers;
    
    /* Align the ol list left.
    The CSS imported file, style.css, has a reserved margin at line 108 used by list-style-type that is no longer needed. */
    margin-left: 0px;
    
    /* Set the background-color to be the same as li's background-color.
    This will become the background-color of the number section. */
    background-color: #F2F2F0;
}

#secondary ol li{
    /* The black text color in the box */
    color: #333;
    
    /* Create a pocket of space to the left of li so different colored numbers can be used, and styled via...

JavaScript

// http://stackoverflow.com/q/11035157/1195891