Working with HTML Lists

1,891 views

Published on

The basics of working with HTML lists.

Published in: Self Improvement, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,891
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Working with HTML Lists

    1. 1. UNDERSTANDING LISTS by Ray Villalobos
    2. 2. WHAT ARE LISTS?
    3. 3. WHAT ARE LISTS?• Compound Tags
    4. 4. WHAT ARE LISTS?• Compound Tags•3 different types
    5. 5. WHAT ARE LISTS?• Compound Tags•3 different types • UL - Unordered Lists
    6. 6. WHAT ARE LISTS?• Compound Tags•3 different types • UL - Unordered Lists • OL - Ordered Lists
    7. 7. WHAT ARE LISTS?• Compound Tags•3 different types • UL - Unordered Lists • OL - Ordered Lists • DL - Definition Lists
    8. 8. UNORDERED LISTS<ul> <li>Bread</li> <li>Lunchmeat</li> <li>Fruit</li></ul>
    9. 9. UNORDERED LISTS• Order doesn’t matter <ul> <li>Bread</li> <li>Lunchmeat</li> <li>Fruit</li> </ul>
    10. 10. ORDERED LISTS<ol> <li>Private</li> <li>Captain</li> <li>General</li></ol>
    11. 11. ORDERED LISTS• Order in the list has context <ol> <li>Private</li> <li>Captain</li> <li>General</li> </ol>
    12. 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. 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. 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. 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. 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. 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. 18. BULLET STYLES
    19. 19. BULLET STYLES• The type attribute
    20. 20. BULLET STYLES• The type attribute• For UL lists
    21. 21. BULLET STYLES• The type attribute• For UL lists • disc (default), square and circle
    22. 22. BULLET STYLES• The type attribute• For UL lists • disc (default), square and circle • ul {list-style-type: circle}
    23. 23. BULLET STYLES• The type attribute• For UL lists • disc (default), square and circle • ul {list-style-type: circle}• For OL lists
    24. 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. 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. 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. 27. CUSTOM IMAGES
    28. 28. CUSTOM IMAGES• list-style-image
    29. 29. CUSTOM IMAGES• list-style-image • ul {list-style-image: url(icons/icon-document.gif)};
    30. 30. SHORTCUT
    31. 31. SHORTCUT• list-style
    32. 32. SHORTCUT• list-style • ul {list-style: circle };
    33. 33. SHORTCUT• list-style • ul {list-style: circle }; • ul {list-style: url(icons/icon-document.gif)};
    34. 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. 35. NO BULLETS
    36. 36. NO BULLETS• Easily get rid of Bullets
    37. 37. NO BULLETS• Easily get rid of Bullets • ul {list-style:none;}
    38. 38. CONTROLLING SPACING ul,ol { list-style: none; margin: 0; padding: 0; }
    39. 39. CONTROLLING SPACING• ULs have margins, vary per browser ul,ol { list-style: none; margin: 0; padding: 0; }
    40. 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. 41. CHANGING DISPLAY
    42. 42. CHANGING DISPLAY• ULs and LIs are block level
    43. 43. CHANGING DISPLAY• ULs and LIs are block level• display-inline
    44. 44. CHANGING DISPLAY• ULs and LIs are block level• display-inline • Can’t modify widths of inline elements
    45. 45. CHANGING DISPLAY• ULs and LIs are block level• display-inline • Can’t modify widths of inline elements• display-inline-block
    46. 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. 47. THE END

    ×