Go to Previous Section:
ContentThis is the 10th section of the CSS Getting Started tutorial; it describes how you can use CSS to specify the appearance of lists. You create a new sample document containing lists, and a new stylesheet that styles the lists.
Information: Lists
If you took the challenge on the last section, then you saw how you can add content before any element to display it like a list item.
CSS provides special properties that are designed for lists. It is usually more convenient to use these properties whenever you can.
To specify the style for a list, use the list-style property to specify the type of marker.
The selector in your CSS rule can either select the list item elements (for example, <li>), or it can select the parent list element (for example, <ul>) so that the list elements inherit the style.
Unordered lists
In an unordered list, each list item is marked in the same way.
CSS has three types of markers, and here is how your browser displays them:
disccirclesquare
Alternatively, you can specify the URL of an image.
These rules specify different markers for different classes of list item:
li.open {list-style: circle;}
li.closed {list-style: disc;}
When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):
<ul> <li class="open">Lorem ipsum</li> <li class="closed">Dolor sit</li> <li class="closed">Amet consectetuer</li> <li class="open">Magna aliquam</li> <li class="closed">Autem veleum</li> </ul>
The result might look like:
Ordered lists
In an ordered list, each list item is marked differently to show its position in the sequence.
Use the list-style property to specify the type of marker:
decimallower-romanupper-romanlower-latinupper-latin
This rule specifies that in <ol> elements with the class info, the items are identified with capital letters.
<ol class="info"> <li>Lorem ipsum</li> <li>Dolor sit</li> <li>Amet consectetuer</li> <li>Magna aliquam</li> <li>Autem veleum</li> </ol>
ol.info {list-style: upper-latin;}
The <li> elements in the list inherit this style:
The list-style property is a shorthand property. In complex stylesheets you might prefer to use separate properties to set separate values. For links to these separate properties, and more details of how CSS specifies lists, see the list-style reference page.
If you are using a markup language like HTML that provides conventional tags for unordered (<ul>) and ordered (<ol>) lists, then it is good practice to use the tags in the way they were intended. However, you can use CSS to make <ul> display ordered and <ol> display unordered if you wish.
Browsers differ in the way they implement the styles for lists. Do not expect your stylesheet to give identical results in all browsers.
Counters
Note: Some browsers do not support counters. The CSS contents and browser compatibility page on the Quirks Mode site contains a detailed chart of browser compatibility for this and other CSS features. Individual pages in the CSS Reference on this site also have browser compatibility tables.
You can use counters to number any elements, not only list items. For example, in some documents you might want to number headings or paragraphs.
To specify numbering, you need a counter with a name that you specify.
In some element before the counting is to start, reset the counter with the property counter-reset and the name of your counter. The parent of the elements you are counting is a good place to do this, but you can use any element that comes before the list items.
In each element where the counter increments, use the property counter-increment and the name of your counter.
To display your counter, add ::before or ::after to the selector and use the content property (as you did on the previous page, Content).
In the value of the content property, specify counter() with the name of your counter. Optionally specify a type. The types are the same as in the Ordered lists section above.
Normally the element that displays the counter also increments it.
This rule initializes a counter for every <h3> element with the class numbered:
h3.numbered {counter-reset: mynum;}
This rule displays and increments the counter for every <p> element with the class numbered:
<p class="numbered">Lorem ipsum</p> <p class="numbered">Dolor sit</p> <p class="numbered">Amet consectetuer</p> <p class="numbered">Magna aliquam</p> <p class="numbered">Autem veleum</p>
body {
counter-reset: mynum;
}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}
The result looks like this:
You cannot use counters unless you know that everyone who reads your document has a browser that supports them.
If you are able to use counters, they have the advantage that you can style the counters separately from the list items. In the example above, the counters are bold but the list items are not.
You can also use counters in more complex ways—for example, to number sections, headings, subheadings and paragraphs in formal documents. For details, see Automatic counters and numbering in the CSS Specification.
Action: Styled lists
Make a new HTML document, doc2.html. Copy and paste the content from here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document 2</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h3 id="oceans">The oceans</h3>
<ul>
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>
</body>
</html>
Make a new stylesheet, style2.css. Copy and paste the content from here:
/* numbered paragraphs */
h3.numbered {counter-reset: mynum;}
p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}
If the layout and comment are not to your taste, change them.
Open the document in your browser. If your browser supports counters, you see something like the example below. If your browser does not support counters, then you do not see the numbers (and probably not even the colons):
Add a rule to your stylesheet, to number the oceans using Roman numerals from i to v:
|
The oceans
|
Change your stylesheet to identify the headings with capital letters in parentheses like this:
|
(A) The oceans . . . (B) Numbered paragraphs . . . |
See solutions to these challenges.
What next?
Go to Next Section:
BoxesWhen your browser displays your sample document, it creates space around the elements when it lays them out on the page. The next page describes how you can use CSS to work with the underlying shapes of elements, boxes.