CSS: working with lists
With CSS, you can create bulleted and numbered lists, and also use an image as a substitute for list item.
Table 1 gives a list of properties of the elements designed to create and edit lists.
Table 1. Properties of CSS to control lists.
| Property | Value | Description | Example |
|---|---|---|---|
| list-style |
disc | Bulleting type. First three are used to create bulleted lists, and the rest for numbered. | LI {list-style: circle} LI {list-style: upper-alpha} |
| list-style-image |
none | Assigns as a bulleted symbol any image file. |
LI {list-style-image: url |
| list-style- position |
outside | Defines the position of the bulleted items relative to the block of text line. | LI {list-style-position: inside} |
Since <LI> tag inherits the style properties of tag <OL> or <UL>, which act as parents, you can set the style for the selector UL, and for selector LI. In Example 1 selector UL is used, the style parameters are set for it.
Example 1. Creating bulleted list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
ul {
list-style: square; /* Square bullet items */
list-style-position: outside; /* Items are positioned outside the text block */
color: navy; /* Color of the text list */
}
</style>
</head>
<body>
<ul>
<li>Header must have less than three lines.</li>
<li>When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.</li>
<li>Before using a specialized term or word, decide whether or not it understood by the reader.</li>
<ul>
</body>
</html>In this example, you can see square items and their positioning relative to the external text. Color - dark blue.
- Header must have less than three lines.
- When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.
- Before using a specialized term or word, decide whether or not it understood by the reader.
To select the desired image instead of usual items use the parameter list-style-image, as shown in Example 2.
Example 2. Using images as list items.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
li {
list-style-image: url('images/check.gif'); /*Path to the file with item */
}
</style>
</head>
<body>
<ul>
<li>Header must have less than three lines.</li>
<li>When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others. </li>
<li>Before using a specialized term or word, decide whether or not it understood by the reader.</li>
</ul>
</body>
</html>The result of this example is shown below. Instead of bullets a small image is used.
- Header must have less than three lines.
- When the selecting the header, use well-established terms, such as guest book, chat, link, home page and others.
- Before using a specialized term or word, decide whether or not it understood by the reader.
Some examples of creating different bulleted lists are shown below in Table 2.
Table 2. Different list types.
| HTML code | Example |
|---|---|
| <li style="list-style: disc"> | What to consider when testing a web-site:
|
| <li style="list-style: circle"> | What to consider when testing a web-site:
|
| <li style="list-style: square"> | What to consider when testing a web-site:
|
| <li style="list-style: decimal"> | Numbered list with Arabic numerals:
|
| <li style="list-style: lower-roman"> | Numbered liNumberedst with lowercase Roman numerals:
|
| <li style="list-style: upper-roman"> | Numbered list with upper-case Roman numerals:
|
| <li style="list-style: lower-alpha"> | Numbered list with lowercase letters of Latin alphabet:
|
| <li style="list-style: upper-alpha"> | Numbered list with uppercase letters of the alphabet:
|
