ReDsgn

This is a simple technique for creating large heading style list numbers while maintaining normal text sizes in the content of my list.

The Problem: HTML Lists don’t allow you to style the list counters separate form the contents of the list.

Here is the markup for my Ordered List. (note the span tag that wraps the content… this is important)

<ol>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
</ol>

The basic Idea here is to overcome the limitations of styling the list numbers separate from the content. In order to accomplish this I use the span tag to wrap the content.

Now for the CSS

ol {
color:#225E8A;
font-size:1.5em;
font-weight:900;
}
ol li span {
color:#696969;
font-size:0.7em;
font-weight:normal;
}

Whats going on?

I am setting the color and size of the font on the “ol” element, to a 1.5em larger size from its parent size (the body) and making it bold and blue. This will style the list numbers and the content. Now I need to reset the content of my list items to use a smaller font of regular color and weight. To do this I simply style the span that is wrapping the content to a smaller size and normal color and weight.

I use a .7em here to say I want to make my font .7em of its parent size which was 1.5em larger than my base size. So if my body font size is 12px, 1.5em makes my “ol” font size 18px. Now I want to re-size my lists content font to roughly 12px, so .7em of the “ol” font size (18px) we will get 12.6px. (A closer number would be .67em.) I am also resetting the color and weight to match the rest of the page text.

Example

for more information read my other post on Calculating ems.