1. Cascading Style Sheets 1

2. About Lists HTML list code ul, ol, dldl CSS list-item style properties http://faculty.wwu.edu/~granier/info/css/CSS_Lists/css_lists/ http://www.w3schools.com/Css/css_list.asp http://www.tizag.com/cssT/list.php Cascading Style Sheets 2

3. Customizing Lists list-style properties control visual characteristics of list-item elements sets appearance of the markers for each item Symbol, Number, Image sets position of the marker next to the list content Cascading Style Sheets 3

4. Applying Styles to Lists To specify the list marker displayed by the browser, you can apply the style list-style-type: type Most browsers place the list marker to the left of the block, lining up the markers with each list item list-style-position: position CS202 4

5. Customizing Lists Specifying the list-style-type Allows customization of the list marker list-style-type Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower alpha | lower- latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hira-ganairoha | katakana-iroha | none Initial: disc Inherited: yes Cascading Style Sheets 5

6. Numerical List Values disc Default value decimal Decimal (1, 2, 3..) decimal-leading-zero Decimal (01, 02, 03..) lower-roman Lower case roman (i, ii) upper-roman Upper case roman (I, II) Hebrew, armenian, georgian, hiragana,| katakana Self explanatory Cascading Style Sheets 6

7. Customizing Lists Specifying list-style-image Allows customization of list marker to an image list-style-image Value: | none | inherit Initial: none Applies to: elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 7

8. Customizing Lists Specifying the list-style-position Allows placement of the list marker, either inside or outside the list-item content box list-style-position Value: inside | outside | inherit Initial: outside Applies to: elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 8

9. Customizing Lists Specifying the list-style Shorthand Property Allows writing of a single rule to specify all the list- item properties list-style shorthand property description Value: [ || || list-style- image>] | inherit Applies to elements with ‘display: list-item’ Inherited: yes Cascading Style Sheets 9

10. Summary The list-style properties controls The visual characteristics of elements creating bulleted lists ordered lists The appearance of list-item markers The positioning of list-item markers Cascading Style Sheets 10