The CSS properties shown in this tutorial can be used to design lists. The specifications refer to the HTML elements ul and ol. You can therefore customize ordered and unordered lists according to your wishes.
General information about the list
list-style is a summary of the following three properties:
- list-style-type
- list-style-position
- list-style-image
The type of graphic display of the bullets before lists and their indentation can be influenced via list-style. These specifications are each separated from each other by a comma. The order does not matter. In addition, a value does not have to be specified for each property.
Here is an example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> ul { list-style:square; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>In the browser it looks like this:
Graphical bullets
You can specify your own graphic as a bullet point. The list-style-image property is used for this. The following values are possible:
- url - the file name and possibly the path of the graphic
- none - no graphic is displayed.
An example:
ul { list-style-image: url(bullet.gif); }
Make sure that the path to the graphic specified under URL is correct.
If an incorrect path is specified, the browser should fall back to a standard bullet character.
The position of the bullets
The list-style-position defines how numbering or bullets should behave with regard to indentation.
- inside - the first line is indented so that the bullet point and list entry are left-aligned.
- outside - the bullet point is positioned to the left of the list entry.
In the following example, the two values inside and outside are used.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> ul.a { list-style-position:inside; } ul.b { list-style-position:outside; } </style> </head> <body> <p>An inside list:</p> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <p>An outside list:</p> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>You can see directly what different effects these two values actually have.
Defining the appearance of the bullets
You can explicitly define the appearance of bullet characters. The appearance of numbered lists can also be influenced. The list-style-type property is used for this. The following values are permitted for this property:
- decimal - for ol lists: numbering 1, 2, 3 etc.
- lower-roman - for ol lists: numbering i., ii., iii. etc.
- upper-roman - for ol-lists: numbering I., II., III., IV. etc.
- lower-alpha or lower-latin - for ol-lists: numbering I., II., III., IV. etc.
- upper-alpha or upper-latin - for ol lists: numbering A., B., C., D. etc.
- disc - for ul-lists: filled circle as bullet character
- circle - for ul-lists: empty circle as bullet character
- square - for ul-lists: rectangle as bullet character
- none - neither bullet character nor numbering
- lower-greek - for ol lists: numbering with Greek letters
- hebrew - for ol lists: numbering with Hebrew letters
- decimal-leading-zero - for ol-lists: numbering with leading zero 0: 01., 02., 03., 04. etc.
- cjk-ideographic - for ol-lists: numbering with ideographic characters
- hiragana - for ol-lists: Japanese numbering (with lower case letters)
- katakana - for ol-lists: Japanese numbering (with capital letters)
- hiragana-iroha - for ol-lists: Japanese numbering (with lower case letters)
- katakana-iroha - for ol-lists: Japanese numbering (with capital letters)
The following example uses some of the variants listed.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> ul.a { list-style-type:circle; } ul.b { list-style-type:square; } ol.c { list-style-type:upper-roman; } ol.d { list-style-type:lower-alpha; } </style> </head> <body> <ul class="a"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <ul class="b"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li>
</ul> <ol class="c"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <ol class="d"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html>The following image appears in the browser:
Counter
Content can be numbered using ol lists. However, this form of numbering is not really practical for more complex applications. CSS offers an alternative for this with counters.
Below I will show you how counters can be used.
First of all, I create a new counter for the body element.
body { counter-reset: chapter; }Thanks to this definition, the counter chapter exists in the document. You can now use this counter.
h1 { counter-increment: chapter; }
With the syntax shown, the counter is automatically incremented by the value 1 each time a new h1 element appears. The problem with this is that the counter is not yet visible. This can be easily changed by using pseudo elements.
h1::before { content: counter(chapter) ". "; }
A complete application could look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset: chapter; } h1 { counter-increment: chapter; } h1::before { content: counter(chapter) ". "; } </style> </head> <body> <h1>chapter</h1> <h1>chapter</h1> </body> </html>And here is the result in the browser:
In the example shown, ::before displays the respective number at the beginning of the h1 element. So that the number is not directly attached to the heading text, a period and a space are inserted after the number.
content: counter(chapter) ". "
Nested counts are also possible. To do this, define the counter at the point where it should ultimately start again from the beginning.
h1 { counter-increment: chapter; counter-reset: subchapter; }In this example, the counter is always reset when a new h1 element appears. The following example shows a typical application for nested counters.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> body { counter-reset:chapter; } h1 { counter-reset:subchapter; } h1:before { counter-increment:chapter; content: counter(chapter) ". "; } h2:before { counter-increment:subchapter; content:counter(chapter) "." counter(subchapter) " "; } </style> </head> <body> <h1>Chapter</h1> <h2>Subchapter</h2> <h2>Subchapter</h2> <h2>Subchapter</h2> <h1>Chapter</h1> <h2>Subchapter</h2> <h2>Subchapter</h2> <h2>Subchapter</h2> </body> </html>The whole thing looks like this in the browser:
The examples have shown how powerful counters are.
