LISTS

LISTS The XHTML specifications contain special codes for creating lists of items Create lists Plain Numbered Bulleted Lists of definitions Nest one kind of list inside another

Creating Ordered and Unordered Lists Ordered list is perfect for explaining step-by-step instructions Anywhere in the body section of your HTML document Unordered lists are probably the most widely used lists on the Web <ol>…</ol>for an ordered list <ul>…</ul> for unordered list <li> … </li> for the first list item

Choosing Your Markers (Bullets) When you create a list, be it ordered or unordered, you can also choose what sort of markers (bullets or numbers) should appear to the left of each list item Markers: disc : circle : square : decimal : 1,2,3, … upper-alpha : A, B, C, … lower-alpha : a, b, c, … upper-roman : I, II, III, … lower-roman : i, ii, iii, … li { list-style-type:upper-roman; }

Choosing Where to Start List Numbering You might want to start a particular ordered list’s numbering somewhere other than 1 (default) You can determine the initial value of an entire list’s numbering scheme: To change the numbering of a given list item: <ol start=“2”> <li value=“2”>

Using Custom Markers If you get tired of circles, squares … you can create you own custom marker with an image <li class=“new”> One click page layout </li> li.new { list-style-image:url(mine.gif) }

Controlling Where Markers Hang By default, lists are indented from the left margin (of their parent) Your markers can either begin halfway to the right of that starting point inside @ outside li.new { list-style-image:url(mine.gif); list-style-position:inside }

Setting All List-Style Properties at Once CSS has a shortcut property for the list-style features To set all the list-style properties at once: li.new { list-style:url(mine.gif) inside }

Creating Definition Lists (X)HTML provides a special tag for creating definition lists e.g. a dictionary <h1> A DICTIONARY </h1> <dl> <dt>animation</dt> <dd><span class="nouns"> n </span>technique of making cartoon film</dd> </dl>

Styling Nested Lists You may insert one type of list in another This is particularly useful with an outline rendered with ordered lists, where you may want several levels of items While you can style nested lists using classes or ids, there’s an easier way

<h1> ONE, TWO, THREE, FOUR</h1> <ol> <li>One </li> <li>One, one, one</li> <li>Two, two, two</li> </ol> <li>Two </li> <li>Four, four, four</li> <li>Five, five, five</li> <li>Three, three, three</li>