164 Chapter 3: Elements of Style Example : HTML and CSS for displaying ordered list style types (continued) style="list-style-type: style="list-style-type: style="list-style-type: style="list-style-type: style="list-style-type: style="list-style-type: style="list-style-type: style="list-style-type: decimal;" decimal-leading-zero;" lower-roman;" upper-roman;" lower-alpha;" upper-alpha;" lower-greek;" armenian;" Figure : An ordered list showing eight different style types There is order even in unordered lists. The list-style-type property sets the type of list as well as the marker used. An ordered list element behaves just like an unordered list element if the list-style-type value is disc, circle, or square. Likewise, an unordered list element behaves just like an ordered list element if its list-style-type value is. | 164 Chapter 3 Elements of Style Example HTML and CSS for displaying ordered list style types continued body ol li style list-style-type decimal li li style list-style-type decimal-leading-zero li li style list-style-type lower-roman li li style list-style-type upper-roman li li style list-style-type lower-alpha li li style list-style-type upper-alpha li li style list-style-type lower-greek li li style list-style-type armenian li ol body html Figure An ordered list showing eight different style types There is order even in unordered lists. The list-styl e-type property sets the type of list as well as the marker used. An ordered list element behaves just like an unordered list element if the list-style-type value is disc circle or square. Likewise an unordered list element behaves just like an ordered list element if its l i st-styl e-type value is one of the keywords for an ordered type. Every list has an internal counter that keeps track of the array of list items no matter if From the Library of Wow eBook List StyLES 165 the list tag is ul ol menu or dl. If the value of the l i st-styl e-type property is one of the sets of numbers or alphabets the number or letter corresponding to the counter value is used as the marker for that list item. This is illustrated in Figure which was generated with the HTML and CSS code shown in Example . The last list item in the second list illustrates the syntax for using the list-style-image property. Example HTML and CSS for mixed list-style-type values DOCTYPE html html head title Example title style type text css body padding 1em font-family sans-serif ol ul float left margin auto style head body ol li This li li style list-style-type circle is li li style list-style-type lower-roman an li li style list-style-type square ordered li li list li ol ul li This li li style list-style-type circle is li li style list-style-type decimal an li li style list-style-type lower-latin UNordered li li style
