1. LISTS

2. 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

3. 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

4. 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; }

5. 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”>

6. 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) }

7. 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
outside
li.new {
list-style-image:url(mine.gif);
list-style-position:inside }

8. 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 }

9. 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>

10. 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

11. <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>