I have an ordered list and I would like to stylize the numbers to be very large, in color and in a different typeface than the lists that they represent.
Can this be done with CSS or CSS3 without using images?
Hm, yes and no.
It can if you manually create the numbers yourself. I don’t believe you can style the browser-generated numbers consistently if at all with CSS (or even Javascript).
This isn’t an ordered list, but an example of what you can do with CSS alone (not great in IE<9): http://www.scooterverzekeren.com/content/vragen click on any of the links in the ordered list; the styling I’m talking about is in the definition list below.
You can use a proper ol for semantics, set it to list-style: none, and then use CSS generated content to create a number :before the li and style it somewhat.
Depending on how many browsers you want to support, you can go further and instead of explicitly writing the number in your CSS and having a different class or id on each li, you could use the (old) counter() css function to count for you.
https://developer.mozilla.org/en/CSS_Counters
Even though it’s old, browser support for this has been kind of recent, really. I mean, it works in the latest webkit… lawlz.
But if you’re supporting everyone and their brother, then you’ll want to do it old-fashioned:
<ol>
<li><span>1</span>blah blah</li>
<li><span>2</span>blah blah</li>
<li><span>3</span>blah blah</li>
<li><span>4</span>blah blah</li>
<li><span>5</span>blah blah</li>
<li><span>6</span>blah blah</li>
</ol>
ol {
list-style: none;
}
li {
styles;
}
li span {
style your numbers;
}
etc.
by adding a separate class/id on each li I meant, if you wanted to not use counter() but did want to use content:
<ol>
<li class=“foo1”>blah blah</li>
<li class=“foo2”>blah blah</li>
<li class=“foo3”>blah blah</li>
<li class=“foo4”>blah blah</li>
<li class=“foo5”>blah blah</li>
<li class=“foo6”>blah blah</li>
</ol>
then
li:before {
styles;
}
.foo1:before {
content: “1 \a0”;
}
.foo2:before {
content: “2” \a0";
}
etc
yeah… Stommey beat me to the punch again.
Alternatively… i was also going to suggest this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul,li,p {margin:0; padding:0;/* gneral reset*/}
.lg {list-style-type:upper-roman; padding-left:6em; }
.lg li {font-size: 250%; padding-top:.5em}
.lg li >p{font-size: 40%;}
</style>
</head>
<body>
<ol class="lg">
<li><p>This is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p>
<p>Remember to us an OL not a UL. </p> </li>
<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
<li><p> twill probably hold up to XVII in roman numbers if you need longer numbers you will need to adjust the space on the left</p></li>
</ol>
</body>
</html>
.lg li >p{font-size: 40%;} mean it wont support IE6 , of course... but you can just add a class manually to direct children of your LIs if you really need IE6. One of the big draw backs to this or any other method is that you will have to estimate how much space you need on the left yourself.
Hope that helps
Here is an HTML and CSS of stylized Order list number .You can design using this CSS.
<ol>
<li>
<p>This is first line</p>
</li>
<li>
<p>Here is second line</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>
Go to this link for CSS styling this order list numbers,
Sorry, p tags don’t belong inside an li tag. They are not needed at all, as the li is the list’s equivalent of the p tag.
The only time you’d have something else inside the <li> besides an image or anchor or what not, is a <span> or something like that.
Basically to style a specific word. Dr John is correct, there is absolutely no reason for a <p> there. In your example, there is nothing you can’t just style to the <li> tag that you can to the <p> (if I worded that right :)).
And this is where lists get fuzzy. As has been stated, P tags / dives, etc dont really belong with an LI. THAT’S ASSUMING your is composed of all singe “paragraph” content. So an P within an LI is perfectly valid but is only semantic SOMETIMES.
If you find that your content is just if you always intend to have LI P then you might as well get rid of the P (or replace it with SPAN with DISPLAY:BLOCK) as it is a redundant block element in THAT PARTICULAR CASE.
They are not needed at all, as the li is the list’s equivalent of the p tag.
Did you miss what they’re doing? It could be a span (semantically makes more sense anyway), but the point is to have the styles you place on “li” get overridden on everything you see in the li (by putting new styles on the child… p, span, whatever), while the browser-created numbers get hit with the li styles.
They are adding HTML for styling reasons, but not because they believe a li needs a p in it. Would be nicer if we could say:
li {
styles;
}
li * {
other styles;
}
where “*” here could hit the anonymous inline boxes of the text inside them. But we can only style elements, not loose text.
Certainly my suggestion of
<li><span>1</span> list item</li>
sucks plenty of donkey balls here, if you take a listen to the page or get it without CSS. 1. 1 list item?? nyan nyan nyan