The four properties used to format and style the contents of list elements are list-style-type, list-style-position,list-style-image, and list-style.
1. list-style-type
The list-style-type property is used to specify the shape or style of bullet points (or markers) and can be used with <ul>, <ol>, or <li> element. The property is inherited and the values taken depend on whether it is used to style an unordered (<ul>) or ordered (<ol>) element. Table 17.1 lists the values and Figures 17.1 and 17.2 show how it is used and the result.
2. list-style-image
The list-style-image property allows an image to be used as a bullet point. It is inherited and takes two values: url() (which specifies the location of image) and none. Figures 17.3 and 17.4 show how the property is used and the result. The url() value says that the image (oval.png) to use for the bullet point is in the “images” folder.
3. list-style-position
The list-style-position allows you to specify whether markers (i.e., bullet points) should be inside or outside the box containing list-items. It is inherited and the values it takes are outside (which places marker outside the box), and inside (which places marker inside list-item box, after which the content follows). Figures 17.5 and 17.6 show how the property is used and the result.
4. list-style
The list-style property is shorthand for specifying list styles. It is inherited and used to specify list-style-type, list-style-image, and list-style-position properties all at once in any order. In theory, list-style-type and list-style- image would not be specified together, since you cannot have two different things as a marker. Figure 17.7 shows how the property is used and says to use a square marker and place it inside the list-item box. Figure 17.8 shows the result.
5. Styling Lists with Generic Properties
Lists can also be styled using most of the generic properties already introduced, such as :nth child pseudo-classes (in Chapter 8), background- color and color (in Chapter 9), width, padding, margin, border, border- radius, box-shadow (in ), text-styling properties (in Chapter 14), linear- gradient, radial-gradient, and background-image (in Chapter 15). Here some examples are presented.
5.1. Styling <ol> and <ul> Elements with Generic Properties
The <ol> and <ul> elements would usually be styled using similar techniques, since they are similar in structure. Figures 17.9 and 17.10 show an ordered list styled using various generic properties and Figure 17.11 the result. You will notice that dot leaders, such as used in table of contents, are used. CSS as of time of writing does not yet provide special properties for implementing these. The approach used in the example is simplistic but serves the purpose. It involves pushing the prices right, then a little in again, and then adding dots and spaces between them and the content on the left as appropriate. Various more sophisticated techniques can be found on the Web for doing the same thing.
In the example, the body {} rule says to make the text of the page Arial and bold and move it away from the left edge of the window. In the ol{} rule, width sets the width of the list; padding sets the space between the <li> elements and all the four border edges of the <ol> element; list-style- position says to place the list items’ markers inside the list-item boxes; background-image sets to use the image “beach.jpg” for <ol> element’s background; border-radius makes the corners of the element’s box round; and box-shadow creates two inner shadows (orange and blue) around the border. In the span{} rule, float pushes the <span> elements, which contain the prices, to the right edge of the <li> elements’ boxes so that they are aligned. The li:nth-child(2n+l){} rule says to give the border of alternate <li> elements solid line style. This is so that the borders of adjacent elements do not meet to form double lines. In the ol li{} rule, padding sets the space between all four edges of each <li> element’s box and its content. The right padding is made bigger so that it can push in the content (i.e., the prices) and not make each line too long; the margin property horizontally centers the <li> elements inside the <ol> element; background-color gives the background of the <li> elements #cce5ff color; and border-style says to give the right and left edges of the <li> elements solid line style and #b3d9ff color. This also gives any existing visible border edges the same color (i.e., those created by the li:nth-child (2n+l) rule).
5.2. Styling Definition Lists
Definition lists can look very bland and without contrasts to guide the eyes easily between the terms and definitions. Styling the terms (i.e., the <dt> elements) can help enable them to stand out from the definitions. Figure 17.12 shows an example that specifies background color for the <dt> elements and bold for the text. Figure 17.13 shows the result. The indentation of the <dd> element is because it has a default margin-left (or margin-inline-start) value of 40px.
6. Converting Other Elements to list-items
CSS allows you to make other elements behave like a <li> element by using the list-item value with the display property. Once an element is converted, any of the list-specific properties already introduced can be used to style it. This means, for example, that you can dynamically take the content of a <p>, <div>, or <span> element, usually using scripting, and display it as a list item. Figure 17.14 shows how this is done and Figure 17.15 shows the result.
In the example, the first <div> element and the contained <span> elements behave as normal, since they are not converted. In contrast, the .tolist{} rule makes the <span> elements of class=“tolisf ’ behave like a <li> element.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.