Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Thinking HTML5 semantics CHAPTER 5 225

</ul>

</li>

<li>Boats

<ul class="level2">

<li>Sea Ray</li>

<li>Cobalt</li>

</ul>

</li>

</ul>

Figure 5-9 shows the rendered list with the default styles. The bullet shapes change with

each level of nesting, and each level of nesting is automatically indented.

FIGURE 5-9 he rendered output with default stylesT

In addition to font-related styles and color-related styles, there are also list-related styles

that you can alter to change the presentation of your list. In the rendered example, the

first-level list-style-type CSS property is set to disc, which displays as a filled-in circle. The

second-level list-style-type is set to circle, and the third-level list-style-type is set to square. In

addition, each of the levels’ list-style-position CSS property is set to outside, which means that

when the text wraps, the first character of the next line will align with the first character of the

previous line. If you set the list-style-position to inside, the first character of the next line will

align with the bullet symbol of the first line.

In Visual Studio Express 2012 for Web, you can open the CSS file and enter the selector as

follows.

li {

}