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.
Ordered List: Numbering Style Options 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 Code for Ordered List: Numbering Style Options
<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>
Ordered List: Start Attribute
- To continue numbering from the first list onto the second list, the
startattribute of the secondolelement is set to"4".
Ordered List: Start Attribute 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 Code for Ordered List: Start Attribute
<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.
Ordered List: Value Attribute Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code for Ordered List: Value Attribute
<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.
Unordered List: Square Bullets Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code for Unordered List: Square Bullets
<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>
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.
Unordered List: Circle Bullets Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code for Unordered List: Circle Bullets
<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>
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.
Unordered List: Custom Bullets Using List-Style-Image Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code for Unordered List: Custom Bullets Using List-Style-Image
<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>
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.
Unordered List: Custom Bullets Using Background Image Example
- List item #1
- List item #2
- List item #3
- List item #4
- List item #5
- List item #6
HTML Code for Unordered List: Custom Bullets Using Background Image
<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>
CSS Code for Unordered List: Custom Bullets Using Background Image
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;
}
Definition List
- The
dlelement containingdtelements that are followed bydlelements is used to markup related items that might have multiple properties.
Definition List 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 Code for Definition List
<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>