Printer-friendly page
Screen-friendly pageList Examples
Ordered List: Numbering Style Options
- The CSS
list-style-typeproperty is used to change the numbering style from the default, i.e. decimal to lower roman numbers, with the valuelower-roman.
HTML Example
- List 1 item #1
- List 1 item #2
- List 1 item #3
- List 2 item #4
- List 2 item #5
- List 2 item #6
HTML Source Code
<ol style="list-style-type: lower-roman">
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Start Attribute
- To continue numbering from the first list onto the second list, the
startattribute of the secondolelement is set to"4".
HTML Example
- List 1 item #1
- List 1 item #2
- List 1 item #3
- List 2 item #4
- List 2 item #5
- List 2 item #6
HTML Source Code
<ol>
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
</ol>
<ol start="4">
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
<li>List 1 item #1</li>
<li>List 1 item #2</li>
<li>List 1 item #3</li>
</ol>
<ol start="4">
<li>List 2 item #4</li>
<li>List 2 item #5</li>
<li>List 2 item #6</li>
</ol>
Ordered List: Value Attribute
- To number items in an ordered list differently from the default, i.e. in the increasing order from one ("1"), the
valueattribute of eachlielement in theolelement is defined to the number the item should have.
HTML Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Source Code
<ol>
<li value="6">List item #1</li>
<li value="5">List item #2</li>
<li value="4">List item #3</li>
<li value="3">List item #4</li>
<li value="2">List item #5</li>
<li value="1">List item #6</li>
</ol>
<li value="6">List item #1</li>
<li value="5">List item #2</li>
<li value="4">List item #3</li>
<li value="3">List item #4</li>
<li value="2">List item #5</li>
<li value="1">List item #6</li>
</ol>
Unordered List: Square Bullets
- The bullet style of the unordered list is changed from the default, i.e. disc, to black square by setting the CSS
list-style-typeproperty tosquare.
HTML Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Source Code
<ul style="list-style-type: square">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Circle Bullets
- The bullet style of the unordered list is changed from the default, i.e. disc, to empty circle by setting the CSS
list-style-typeproperty tocircle.
HTML Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Source Code
<ul style="list-style-type: circle">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using List-Style-Image
- An image is used as the bullet of the unordered list; the value of the CSS
list-style-imageproperty references the URL of the image. - There are no additional CSS properties related to the
list-style-imageproperty that allows modifying through CSS the properties of the image. - The position of the bullet image varies among browsers and the developer does not have control over the presentation of the bullet image when using the
list-style-imageproperty; the next example fixes this problem by using CSSbackground-imageproperty.
HTML Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Source Code
<ul style="list-style-image: url(images/bullet-2.PNG)">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
Unordered List: Custom Bullets Using Background Image
- An image is used as the bullet of the unordered list; the value of the CSS
list-style-imageproperty references the URL of the image. - Using the
background-imageproperty, the developer has fuller control over the properties of the bullet image, including the position, just as with a typical background image, while thelist-style-imageproperty does not provide any control over the properties of the image through CSS.
HTML Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Source Code
<ul class="backgroundbullet">
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
<li>List item #5</li>
<li>List item #6</li>
</ul>
CSS Source Code
ul.backgroundbullet li {
list-style-type: none;
text-align: center left;
background-image: url(../images/bullet-2.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 0 1.1em;
}
list-style-type: none;
text-align: center left;
background-image: url(../images/bullet-2.PNG);
background-position: center left;
background-repeat: no-repeat;
padding: .3em 0 0 1.1em;
}
Definition List
- The
dlelement containingdtelements that are followed bydlelements is used to markup related items that might have multiple properties.
HTML Example
- Term 1
- Definition 1 for Term 1
- Definition 2 for Term 1
- Definition 3 for Term 1
- Term 2
- Definition 1 for Term 2
- Term 3
- Definition 1 for Term 3
- Definition 2 for Term 3
HTML Source Code
<dl>
<dt>Term 1</dt>
<dd>Definition 1 for Term 1</dd>
<dd>Definition 2 for Term 1</dd>
<dd>Definition 3 for Term 1</dd>
<dt>Term 2</dt>
<dd>Definition 1 for Term 2</dd>
<dt>Term 3</dt>
<dd>Definition 1 for Term 3</dd>
<dd>Definition 2 for Term 3</dd>
</dl>
<dt>Term 1</dt>
<dd>Definition 1 for Term 1</dd>
<dd>Definition 2 for Term 1</dd>
<dd>Definition 3 for Term 1</dd>
<dt>Term 2</dt>
<dd>Definition 1 for Term 2</dd>
<dt>Term 3</dt>
<dd>Definition 1 for Term 3</dd>
<dd>Definition 2 for Term 3</dd>
</dl>