The document discusses different types of lists in HTML including unordered lists (UL), ordered lists (OL), and definition lists (DL). It describes the structure and semantics of each list type. The document also covers styling lists by changing bullet types and images, customizing spacing and margins, nesting lists, and changing the display of list elements.

1. UNDERSTANDING LISTS
by Ray Villalobos

2. WHAT ARE LISTS?

3. WHAT ARE LISTS?
• Compound Tags

4. WHAT ARE LISTS?
• Compound Tags
•3 different types

5. WHAT ARE LISTS?
• Compound Tags
•3 different types
• UL - Unordered Lists

6. WHAT ARE LISTS?
• Compound Tags
•3 different types
• UL - Unordered Lists
• OL - Ordered Lists

7. WHAT ARE LISTS?
• Compound Tags
•3 different types
• UL - Unordered Lists
• OL - Ordered Lists
• DL - Definition Lists

8. UNORDERED LISTS
<ul>
<li>Bread</li>
<li>Lunchmeat</li>
<li>Fruit</li>
</ul>

9. UNORDERED LISTS
• Order doesn’t matter
<ul>
<li>Bread</li>
<li>Lunchmeat</li>
<li>Fruit</li>
</ul>

10. ORDERED LISTS
<ol>
<li>Private</li>
<li>Captain</li>
<li>General</li>
</ol>

11. ORDERED LISTS
• Order in the list has context
<ol>
<li>Private</li>
<li>Captain</li>
<li>General</li>
</ol>

12. DEFINITION LISTS
<dl>
<dt>Border-radius</dt>
<dd>A rule that let’s you specify rounded
edges in box elements.</dd>
<dt>Browser Prefixes</dt>
<dd>Browsers implemented a set of prefixes
to each rule like –webkit border-radius that
allows for emerging CSS rules to be used
earlier.</dd>
<dt>CSS Animations</dt>
<dd>CSS Animations allow you to modify
transformations over time by the
use of keyframes.</dd>
</dl>

13. DEFINITION LISTS
• List of terms and definitions
<dl>
<dt>Border-radius</dt>
<dd>A rule that let’s you specify rounded
edges in box elements.</dd>
<dt>Browser Prefixes</dt>
<dd>Browsers implemented a set of prefixes
to each rule like –webkit border-radius that
allows for emerging CSS rules to be used
earlier.</dd>
<dt>CSS Animations</dt>
<dd>CSS Animations allow you to modify
transformations over time by the
use of keyframes.</dd>
</dl>

14. DEFINITION LISTS
• List of terms and definitions
• Much less common
<dl>
<dt>Border-radius</dt>
<dd>A rule that let’s you specify rounded
edges in box elements.</dd>
<dt>Browser Prefixes</dt>
<dd>Browsers implemented a set of prefixes
to each rule like –webkit border-radius that
allows for emerging CSS rules to be used
earlier.</dd>
<dt>CSS Animations</dt>
<dd>CSS Animations allow you to modify
transformations over time by the
use of keyframes.</dd>
</dl>

15. NESTING LISTS
<h2>Nested List</h2>
<ul>
<li>Bread
<ul>
<li>Cuban</li>
<li>French</li>
<li>Croissants</li>
</ul>
</li>
<li>Lunchmeat
<ul>
<li>Ham</li>
<li>Roast Beef</li>
<li>Turkey</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Pears</li>
<li>Apples</li>
</ul>
</li>
</ul>

16. NESTING LISTS
<h2>Nested List</h2>
<ul> • Nest lists inside other lists
<li>Bread
<ul>
<li>Cuban</li>
<li>French</li>
<li>Croissants</li>
</ul>
</li>
<li>Lunchmeat
<ul>
<li>Ham</li>
<li>Roast Beef</li>
<li>Turkey</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Pears</li>
<li>Apples</li>
</ul>
</li>
</ul>

17. NESTING LISTS
<h2>Nested List</h2>
<ul> • Nest lists inside other lists
<li>Bread
<ul>
<li>Cuban</li>
<li>French</li>
• Easy to mess up
<li>Croissants</li>
</ul>
</li>
<li>Lunchmeat
<ul>
<li>Ham</li>
<li>Roast Beef</li>
<li>Turkey</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Pears</li>
<li>Apples</li>
</ul>
</li>
</ul>

18. BULLET STYLES

19. BULLET STYLES
• The type attribute

20. BULLET STYLES
• The type attribute
• For UL lists

21. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle

22. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle
• ul {list-style-type: circle}

23. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle
• ul {list-style-type: circle}
• For OL lists

24. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle
• ul {list-style-type: circle}
• For OL lists
• upper or lower, alpha or roman

25. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle
• ul {list-style-type: circle}
• For OL lists
• upper or lower, alpha or roman
• decimal (default), decimal-leading-zero

26. BULLET STYLES
• The type attribute
• For UL lists
• disc (default), square and circle
• ul {list-style-type: circle}
• For OL lists
• upper or lower, alpha or roman
• decimal (default), decimal-leading-zero
• ol {list-style-type: lower-alpha}

27. CUSTOM IMAGES

28. CUSTOM IMAGES
• list-style-image

29. CUSTOM IMAGES
• list-style-image
• ul {list-style-image: url(icons/icon-document.gif)};

30. SHORTCUT

31. SHORTCUT
• list-style

32. SHORTCUT
• list-style
• ul {list-style: circle };

33. SHORTCUT
• list-style
• ul {list-style: circle };
• ul {list-style: url(icons/icon-document.gif)};

34. SHORTCUT
• list-style
• ul {list-style: circle };
• ul {list-style: url(icons/icon-document.gif)};
• ul {list-style: circle url(icons/icon-document.gif)};

35. NO BULLETS

36. NO BULLETS
• Easily get rid of Bullets

37. NO BULLETS
• Easily get rid of Bullets
• ul {list-style:none;}

38. CONTROLLING SPACING
ul,ol {
list-style: none;
margin: 0;
padding: 0;
}

39. CONTROLLING SPACING
• ULs have margins, vary per browser
ul,ol {
list-style: none;
margin: 0;
padding: 0;
}

40. CONTROLLING SPACING
• ULs have margins, vary per browser
• LIs have padding, vary per browser
ul,ol {
list-style: none;
margin: 0;
padding: 0;
}

41. CHANGING DISPLAY

42. CHANGING DISPLAY
• ULs and LIs are block level

43. CHANGING DISPLAY
• ULs and LIs are block level
• display-inline

44. CHANGING DISPLAY
• ULs and LIs are block level
• display-inline
• Can’t modify widths of inline elements

45. CHANGING DISPLAY
• ULs and LIs are block level
• display-inline
• Can’t modify widths of inline elements
• display-inline-block

46. CHANGING DISPLAY
• ULs and LIs are block level
• display-inline
• Can’t modify widths of inline elements
• display-inline-block
• Let’s you modify w

47. THE END