List Customization Properties:

List

CSS lists are one of the most versatile elements of web design. Aside from being used for making, well, lists, they are also used for navigation, layouts, slideshows, carousels, and so on.

Let’s see some of their properties.

List-style

The list-style CSS property is shorthand for the list-style-type, list-style- image, and list-style-position properties. These properties are actually the values that the list-style CSS property supports. We’ll see all these properties next.

Description

The list-style property supports one, two, or three values, in any order. If a value isn’t declared, it will use its default value.

CSS:

/Default values*/

ul { list-style: disc outside none; }

/One value, the other two are default/

ul { list-style: circle; }

/Two values, the other one is defaults/

ul { list-style: lower-roman inside; }

/Three values/

ul { list-style: decimal outside url(../images/list-bullet.png):)

List-style-type

The list-style-type CSS property defines the type of graphic or marker (also called bullet) the list will use. The color of the marker is determined by the color of the text of the element it’s applied to.

Description

The list-style-type property supports many values, but we’ll list 15 of the most commonly used ones: armenian, circle, decimal, decimal-leading-zero, disc, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, none, square, upper-alpha, upper-latin, and upper-roman.

CSS:

/Style: 01, 02, 03.../

ul { list-style-type: decimal-leading-zero; }

/Style: a, B. y.../ ul list-style-type: lower-greek; } /style: A, B, C.../

ul list-style-type: upper-latin; )

list-style-position The list-style-position CSS property defines the location of the marker.

Description

The list-style-position property supports two keyword values: inside and outside.

Inside:

When the inside value is applied, the marker will appear inside the text. If there’s a line that wraps, the marker will be flushed to the left and not “sticking out” like in traditional lists.

Outside:

The default value is outside. When this value is applied (or not, since it’s the default), the marker will appear outside the text. If there’s a line that wraps, the marker will be outside the text block. It will “stick out” just like in traditional lists.

CSS:

ul (

list-style-position: inside;

Specifying the list-style-type Property

The list-style-type property lets you customize the list marker to a variety of different values.

The list-style-type property lets you specify one of three types of markers for a list. You can choose a symbol, a numbering system, or an alphabetical system. CSS allows a wide variety of marker values. Remember to test support for these mark- ers in different browsers. Tables 5-8, 5-9, and 5-10 list the different values and their descriptions.

List-style-image

The list-style-image property lets you easily attach an image to a list and have it repeated as the marker symbol.

The list-style-image property lets you replace the standard symbol with an image of your choice. The following code shows the style rule that attaches an image to a bulleted list: ul {list-style-image: url(pawprint.gif);}

Figure 5-24 shows the result of the style rule. The image is

repeated whenever a list element is used.

The list-style-image CSS property allows us to replace the default markers with a custom image.

Description

The list-style-image property supports one keyword value and one function: none and url().

• none: No image is used to replace the marker
• url(): It’s used to define the path to the image that will replace the marker

CSS:

ul {

list-style-image: url(../images/list-bullet.png);

Here's a demo in CodePen with all HTML lists: http://tiny.cc/html-lists

Customizing Bulleted and Numbered Lists:

The list-style properties let you control the visual characteristics of elements that have a display property value of list-item, which are the numbered and bulleted lists signi- fied by the <ol> and <ul> elements. These properties let you set the appearance of the marker that indicates each item within the list. With CSS, the marker can be a symbol, number, or image. You can also determine the position of the marker next to the list content.

The two common elements that have a default display value of list-item are <ul> and <ol>. which generate a bulleted (unordered) and ordered list, respectively. The following code shows a sample of each type of list:

<!-- Bulleted List --> <h3>Things to do...</h3>

<ul>

<li>Buy dog food</li>

<li>Clean up the house</li> <li>Take a rest</li>

</ul>

<!-- Ordered List --> <h3>Places to go...</h3>

<ol>

<li>Paris</li>

<li>Sydney</li>

<li>Cairo</li>

</ol>

 

List Style Shorthand Property in CSS

The List Style Shorthand Property in CSS is a convenient and efficient way to style lists by combining three individual list-related properties into one. With this shorthand, you can control the appearance of list items in ordered and unordered lists with ease.

The shorthand property is list-style, and it allows you to set the following three properties simultaneously:

1. list-style-type: Specifies the type of marker used for list items. It can take values like “disc,” “circle,” “square” for unordered lists, and “decimal,” “lower-roman,” “upper-roman,” etc., for ordered lists.
2. list-style-position: Determines the position of the marker relative to the list item’s content. It can be set to “inside” to place the marker within the content area or “outside” to place it outside the content area, to the left.
3. list-style-image: This property lets you use a custom image as the marker for list items, replacing the default marker specified by list-style-type.

The list-style shortcut property lets you state the following list-style properties in one concise style rule:

• List-style-type
• List-style-image
• List-style-position

You can specify values in any order. In the following style rule, the list is set to lowercase alphabetical letters that are inside the list box:

ol {list-style: lower-alpha inside;}

List-style-position:

This property defines where the marker or numbering should appear in relation to the content of the list item.

• “outside” (default): The marker appears outside the content’s margin.
• “inside”: The marker appears inside the content’s margin.

Example:

ul { list-style-position: inside; /* Place unordered list markers inside the list item content */ }

List-style-color:

This property sets the color of the list item marker. It’s supported in some browsers but not universally.

ul { list-style-color: red; /* Set the color of unordered list item markers to red */ }

Remember that not all properties are supported by all browsers, so it’s a good idea to test your customized lists on different browsers to ensure they appear as intended.