Your Search Results

    Lists Redirect 1

    This 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:

    • disc
    • circle
    • square

    Alternatively, you can specify the URL of an image.

    Example

    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:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum

    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:

    • decimal
    • lower-roman
    • upper-roman
    • lower-latin
    • upper-latin
    Example

    This rule specifies that in <ol> elements with the class info, the items are identified with capital letters.

    ol.info {list-style: upper-latin;}
    

    The <li> elements in the list inherit this style:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum
    More details

    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.

    Example

    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.numbered:before {
      content: counter(mynum) ": ";
      counter-increment: mynum;
      font-weight: bold;}
    

    The result looks like this:

    Heading

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    More details

    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):

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    Challenges

    Add a rule to your stylesheet, to number the oceans using Roman numerals from i to v:

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

     

    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?

    When 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.

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,