Formatting Lists - HTML

Several CSS properties modify lists. You can change the list type, the position of the elements, and specify images to use instead of bullets. The list-related properties are covered in the following sections.

An overview of lists
There are two types of lists in standard HTML, ordered and unordered. Ordered lists have each of their elements numbered and are generally used for steps that must followed a specific order. Unordered lists are typically a list of related items that do not need to be in a particular order (commonly formatted as bulleted lists).

Ordered lists are enclosed in the ordered list or <ol> tag. Unordered lists are enclosed in the unordered list or <ul> tag. A list item tag (<li>) precedes each item in either list. The following code shows short examples of each type of list. shows the output of this code.

<ol>An ordered list<li>Step 1<li>Step 2<li>Step 3</ol><ul>An unordered list<li>Item 1<li>Item 2<li>Item 3</ul>

An example of an ordered and unordered list.

An example of an ordered and unordered list.

CSS lists—any element will do
An important distinction with CSS lists is that you don’t need to use the standard list tags. CSS supports the list-item value of the display property, which, in effect, makes any element a list item. The <li> tag is a list item by default.

Note:There is a list style shortcut property that you can use to set list properties with one property assignment. You can use the list-style property to define the other list properties, as follows:

list-style: <list-style-type> <list-style-position><list-style-image>

For example, to create a new list item you can define a class as a list item using the display property:

.item { display: list-item; }

Thereafter, you can use that class to declare elements as list items:

<p class=“item”>This is now a list item</p>

As you read through the rest of this section, keep in mind that the list properties can apply to any element defined as a list-item.

Note:Both bullets and numbers preceding list items are known as markers. Markers have additional value with CSS, as shown in the Generated content section later in this chapter.

List style type
The list-style-type property is used to set the type of the list and, therefore, what identifier is used with each item—bullet, number, roman numeral, and so on. The list-style-type property has the following valid values:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • none

The values are all fairly mnemonic; setting the style provides a list with appropriate item identifiers. For example, consider this code and the output shown immediately after:

HTML Code:

<ol style=“list-style-type:lower-roman;”> A Roman Numeral List<li>Step 1<li>Step 2<li>Step 3</ol> Output: A Roman Numeral List i. Step 1 ii. Step 2 iii. Step 3

You can use the none value to suppress bullets or numbers for individual items. However, this does not change the number generation, the numbers are just not displayed. For example, consider the following revised code and output:

HTML Code:

<ol style=“list-style-type:lower-roman;”> A Roman Numeral List<li>Step 1<li style=“list-style-type:none;”>Step 2<li>Step 3</ol>Output: A Roman Numeral List i. Step 1 Step 2 iii. Step 3

Note that the third item is still number 3, despite suppressing the number on item 2.

Positioning of markers
The list-style-position property can change the position of the marker in relation to the list item. The valid values for this property are inside or outside. The outside value provides the more typical list style, where the marker is offset from the list item and the entire text of the item is indented. The inside value sets the list to a more compact style, where the marker is indented with the first line of the item.

The difference between inside and outside positioned lists.

The difference between inside and outside positioned lists

Images as list markers
You can also specify an image to use as a marker using the list-style-image property. This property is used instead of the list-style-type property, providing a bullet-like marker. You specify the image to use with the url construct. For example, the following code references sphere.jpg and cone.jpg as images to use in the list.

<ol><li style=“list-style-image: url(sphere.jpg)”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<li style=“list-style-image: url(cone.jpg)”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</ol>

You can use images as list markers, such as the sphere and cone shown here.

You can use images as list markers, such as the sphere and cone shown here.

Note that you can use any URL-accessible image with the list-style-image. However, it is important to use images sized appropriately for your lists.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics