Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

226 CHAPTER 5 More HTML5

After the selector is added, you can right-click the style rule and choose Build Style to dis-

play a menu of styles to apply. Clicking List in the Category menu displays the styles that can

be applied to a list. Figure 5-10 shows the Modify Style window.

FIGURE 5-10 he Modify Style window showing menu-based style settingsT

By using the Modify Style window, you can easily override the default setting of the

list-style-type and list-style-position. In addition, you can provide a list-style-image when the

bullet symbols are not what you want. In this example, set the list-item-style to none and click

OK. The style sheet now contains the modified style rule as follows.

li {

list-style-type: none;

}

Try rendering the webpage and note that no bullets are displayed. Try many of the other

settings to see how they render.

Instead of using the Modify Style window, you can type the style rules. When you’re typing

the rules, IntelliSense helps reduce the number of keystrokes. When the IntelliSense menu

appears, you can select an item and press the tab key. In the CSS file, insert the following style

rules.

body {

counter-reset: section;

}