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.


    CSS Howto..

    How to make two divs side by side using inline-block?

    How to set the select to have the width of the selected option

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to force the border color of a cell in a html table

    How can i prevent divs from moving while resizing the page

    How to create a variable from CSS class attribute?

    How to use CSS to surround a number with a circle?

    How to make a border in css that is actually on the very edges

    How to position an inner - inner tag at different position?

    How to Apply CSS to Facebook Login Button [closed]

    How to fade a box shadow in CSS?

    How to select nth line of text (CSS/JS)

    CSS - How to align content to middle using bootstrap?

    Css: how to combine table and column specification into a single selector?

    How do i shrink my link menu

    how to make a title div center aligned

    How to create a jQuery scroll to edit CSS?

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    How to change Label color in flex Using CSS?

    PNG background image not showing in IE 8< using html5?

    How to add a space between paragraphs when using css reset? [closed]

    How to embed link HTML into CSS file for menus?

    How to make expand-collapse different div heights according to device width using css/javascript

    How to keep indent in lists with CSS?

    How to create a scrolling background image with css/jquery/html

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    how the rises up and down button is made?

    Toggle radio button on javascript hide/show of div

    show css icon with select icon class selcetbox

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?