How can you resize li labels without resorting to coupling or absolute sizes?

Tags: css,xhtml

Problem :

I am under the impression that the best way to style a list item is to wrap its content, apply a style to ol, and override that style via the wapper (as discussed on Make ABC Ordered List Items Have Bold Style).

This is straightforward and fine, but since relative sizes are calculated based on inherited size, the "overriding" step requires a degree of otherwise unnecessary coupling between the li and its content. For instance:

HTML:

<ol>
<li><p>First item</p></li>
<li><p>Second item</p></li>
</ol>

CSS:

ol {
  font-size 2em;
}
p {
  font-size: .5em;
}

The above would correctly double the font size for the ol, and cut that doubled size in half for the contained p (i.e. it would maintain the original size). Hopefully you can see the issue here -- if I wanted to triple the font size for the li I would also have to change the p's font-size to .33 to counter the relative increase.

I would like to use relative sizes in the name of best practice, but would also like to avoid this obnoxious coupling. Is there a way I can have my cake and eat it too? I know it isn't a big deal, and normally this is just how relative sizes work, but the coupling resulting from what is almost a hack to begin with makes me feel somewhat dirty so I thought I would ask around.

---

Solution :

Why not creating a rule such as

ol p { font-size:2em; }

where you specify the font size as you want, this way there is no coupling, the only problem is that there is no relative font size, unless of course you use percentages as opposed to fixed sizes for the font.