Cascading Style Sheets 1

About ListsHTML list code

ul, ol, dlCSS 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

Customizing Lists list-style properties control

visual characteristics of list-item elementssets appearance of the markers for each item

Symbol, Number, Image

sets position of the marker next to the list content

Cascading Style Sheets 3

Applying Styles to ListsTo specify the list marker displayed by the

browser, you can apply the stylelist-style-type: type

Most browsers place the list marker to the left of the block, lining up the markers with each list itemlist-style-position: position

CS2024

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: discInherited: yes

Cascading Style Sheets 5

Numerical List Valuesdiscdisc Default valueDefault value

decimal decimal Decimal (1, 2, 3..)Decimal (1, 2, 3..)

decimal-leading-zerodecimal-leading-zero Decimal (01, 02, 03..)Decimal (01, 02, 03..)

lower-romanlower-roman Lower case roman (i, ii)Lower case roman (i, ii)

upper-romanupper-roman Upper case roman (I, II)Upper case roman (I, II)

Hebrew, armenian, Hebrew, armenian, georgian, hiragana,| georgian, hiragana,| katakanakatakana

Self explanatorySelf explanatory

Cascading Style Sheets 6

Customizing Lists Specifying list-style-image

Allows customization of list marker to an image

list-style-imageValue: <url> | none | inheritInitial: noneApplies to: elements with ‘display: list-item’Inherited: yes

Cascading Style Sheets 7

Customizing Lists Specifying the list-style-position

Allows placement of the list marker, either inside or outside the list-item content box

list-style-positionValue: inside | outside | inheritInitial: outsideApplies to: elements with ‘display: list-item’Inherited: yes

Cascading Style Sheets 8

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 descriptionValue: [<list-style-type> || <list-style-position> ||

list-style-image>] | inheritApplies to elements with ‘display: list-item’Inherited: yes

Cascading Style Sheets 9

SummaryThe list-style properties controls

The visual characteristics of elements creating bulleted lists ordered lists

The appearance of list-item markersThe positioning of list-item markers

Cascading Style Sheets 10