CSS List Styles

CSS List Styles

OK for those of you who got an email about this… My apologies this is a CSS technique page one of many I’ve posted but normally do not display. Apparently I hit the publish page when I started it and my subscriber software took it upon itself to send out a notice to everyone…. Anyway mea culpa. I normally would not publish anything this dry but if your interested this is a basic tutorial about ordered lists in CSS, I’ll be updating this page with descriptions of how to use images and custom text next. So stay tuned to the thrilling conclusion…

Ordered Lists

<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>

</ol>

Display as:

  1. Item one
  2. Item two
  3. Item three
  4. Item four

Unordered List

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>

</ul>

Display as:

  • Item one
  • Item two
  • Item three
  • Item four

These two basic styles of lists can be further customized as follows:

For Unorderd List:

  • disc
    Filled circle marker (●).
  • circle
    Circle marker (○).

For Ordered List:

  • decimal
    Decimal numbers, beginning with 1.
  • decimal-leading-zero
    Decimal numbers padded by initial zeros (e.g., 01, 02, 03, …, 98, 99).
  • lower-roman
    Lowercase roman numerals (i, ii, iii, iv, v, etc.).
  • upper-roman
    Uppercase roman numerals (I, II, III, IV, V, etc.). [Example B]
  • lower-greek
    Lowercase classical Greek alpha, beta, gamma, … (α, β, γ, …)
  • lower-latin
    Lowercase ascii letters (a, b, c, … z).
  • upper-latin
    Uppercase ascii letters (A, B, C, … Z).
  • armenian
    Traditional uppercase Armenian numbering.
  • georgian
    Traditional Georgian numbering (an, ban, gan, …, he, tan, in, in-an, …).
  • lower-alpha
    Lowercase ascii letters (a, b, c, … z).
  • upper-alpha
    Uppercase ascii letters (A, B, C, … Z).
  • none
    Specifies no marker
  • inherit
    Takes the same specified value as the property for the element’s parent.

Positioning List Items:

You can use :

list-style-position:

  • inside- Indents the marker and the text. The bullets appear inside the content flow
  • outside- Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default
  • inherit- List style is inherited from parent object

Or use standard positioning: e.g.

#sampleContent ol {
padding: 0 0 1em 1.75em; }

Custom Number Character Lists

Require a bit more coding to effect the change say you want to use  1-, 2-, 3-,.. or 1) , 2) , 3) ,… to sequentially display your data this is the base code you would use.

#sampleContent ol {
counter-reset: item; /*sets a counter*/
padding: 0 0 1em 2em; /* good ol’ padding */
}
#sampleContent li {
display: block; /*makes the item display like a paragraph or heading */
}
#sampleContent li:before { /*note the before pseudo-class, pseudo-classes are cool…*/
display: inline-block; /* the item is displayed on the same line as a block level item */
content: counter(item) “) “; /*you set the counter to item above now your defining it as the counter with a “) ” after it */
counter-increment: item; /* now you increment it without this you just get zeros or whatever you initially defined*/
width: 1.5em; /* this specifies the width between the list item counter item and text*/
}

What you will get is something like this:

  1. Item one
  2. Item two
  3. Item three… etc.

Custom Graphic Lists

There are two ways to do custom graphic lists the easy way and the not so easy way. The easy way only requires one line of code (and a suitable graphic file) the hard way takes a bit more but offers better control over the images placement.

First the easy way.

#sampleContent2 ul#listStyleImage {
padding: 0 0 1em 1em;
list-style-image: url(http://armandgilbert.com/wp-content/uploads/2013/04/ring.png); /* this is basically it folks… */
}

Which should give you something that looks like this:

  • Item one
  • Item two
  • Item three
  • Item four

Now the not so easy way.

/* background image rules */
ul#backgroundImage {
padding: 0 0 1em 0; /* notice no left padding on this one */
}

ul#backgroundImage li {
list-style-type: none; /* this removes the unordered list image */
background-image: url(http://armandgilbert.com/wp-content/uploads/2013/04/ag-list-item.png); /*assigns a background image*/
background-position: bottom left; /*centers it left on the line */
background-repeat: no-repeat; /*its a background if you set it to repeat it would fill the space*/
padding: 0 0 0 2em; /* and this adjusts the positioning to your hearts content*/
}

What you get is something like this:

  • Item one
  • Item two
  • Item three
  • Item four

For extra credit the following block of code will render this:

  1. Item one
  2. Item two
    1. Subitem one
    2. Subitem two
    3. Subitem three
  3. Item three
  4. Item four

As a legally styled nested list. Like this:

  1. Item one
  2. Item two
    1. Subitem one
    2. Subitem two
    3. Subitem three
  3. Item three
  4. Item four

Pretty neat huh?

/* Main items */
#legalContent ol {
padding: 0 0 1em 1em;
counter-reset: item;
}
#legalContent li {
display: block;
margin-left: 1em;
}
#legalContent li:before {
display: inline-block;
content: counter(item) “) “;
counter-increment: item;
width: 1.5em;
margin-left: -2em;
}

/* Sub items */
#legalContent ol ol { /*notice how this defines the subitem unordered list*/
padding: 0;
counter-reset: subitem;
}
#legalContent ol li ol li {/*this is really important to understand it defines the list element inside a list element… The list element inside that would be ol li ol li ol li (I kid you not!)*/
display: block;
margin-left: 1em;
}
#legalContent ol li ol li:before {
display: inline-block;
content: counter(item) “.” counter(subitem) “: “;
counter-increment: subitem;
width: 2em;
margin-left: -1.5em;
}

Leave a Comment

Your email address will not be published. Required fields are marked *