HTML and CSS Reference
In-Depth Information
list-style : <list-style-type> + <list-style-image> + <list-style-position>
In the following example, the type and position values of the list-style are set,
which are inherited to the list items.
<ul style="list-style: inside square;">
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
Keep in mind that list properties can not only style the list containers <ul> and <ol>
but also style an individual list item <li> .
Counters
Elements can be numbered automatically in CSS using the counter-increment and
counter-reset properties. The counter-reset property specifies the name of the
counter. It is optionally followed by the counter's initial value, which is zero by default.
/* Create a counter named chapter */
body { counter-reset: chapter; }
The counter-increment property takes the counter's name followed by an optional
number. The number, which sets how much the counter is incremented for every
occurrence of the element, is 1 by default.
/* Increment the counter at each <h1> */
h1:before { counter-increment: chapter; }
The final step of creating a counter is to display it by using the CSS counter()
function with the name of the counter as its argument. In this example, the chapter
number is shown before the <h1> elements:
/* Increment and display the counter */
h1:before {
content: "Chapter " counter(chapter) " - ";
counter-increment: chapter;
}
The counter now adds the chapter number before <h1> elements.
<h1>First</h1> <!-- Chapter 1 - First -->
<h1>Second</h1> <!-- Chapter 2 - Second -->
<h1>Third</h1> <!-- Chapter 3 - Third -->
 
Search WWH ::




Custom Search