UNDERSTANDING LISTS    by Ray Villalobos
WHAT ARE LISTS?
WHAT ARE LISTS?• Compound Tags
WHAT ARE LISTS?• Compound Tags•3   different types
WHAT ARE LISTS?• Compound Tags•3   different types • UL   - Unordered Lists
WHAT ARE LISTS?• Compound Tags•3   different types • UL   - Unordered Lists • OL    - Ordered Lists
WHAT ARE LISTS?• Compound Tags•3   different types • UL   - Unordered Lists • OL    - Ordered Lists • DL    - Definition Li...
UNORDERED LISTS<ul>  <li>Bread</li>  <li>Lunchmeat</li>  <li>Fruit</li></ul>
UNORDERED LISTS• Order   doesn’t matter   <ul>     <li>Bread</li>     <li>Lunchmeat</li>     <li>Fruit</li>   </ul>
ORDERED LISTS<ol>  <li>Private</li>  <li>Captain</li>  <li>General</li></ol>
ORDERED LISTS• Order   in the list has context                 <ol>                   <li>Private</li>                   <...
DEFINITION LISTS<dl>  <dt>Border-radius</dt>  <dd>A rule that let’s you specify rounded  edges in box elements.</dd>  <dt>...
DEFINITION LISTS• List   of terms and definitions   <dl>     <dt>Border-radius</dt>     <dd>A rule that let’s you specify r...
DEFINITION LISTS• List   of terms and definitions• Much     less common   <dl>     <dt>Border-radius</dt>     <dd>A rule th...
NESTING LISTS<h2>Nested List</h2><ul>  <li>Bread     <ul>       <li>Cuban</li>       <li>French</li>       <li>Croissants<...
NESTING LISTS<h2>Nested List</h2><ul>                         • Nest   lists inside other lists  <li>Bread     <ul>       ...
NESTING LISTS<h2>Nested List</h2><ul>                         • Nest   lists inside other lists  <li>Bread     <ul>       ...
BULLET STYLES
BULLET STYLES•   The type attribute
BULLET STYLES•   The type attribute•   For UL lists
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle        •   ul {list-style-typ...
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle        •   ul {list-style-typ...
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle        •   ul {list-style-typ...
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle        •   ul {list-style-typ...
BULLET STYLES•   The type attribute•   For UL lists    •   disc (default), square and circle        •   ul {list-style-typ...
CUSTOM IMAGES
CUSTOM IMAGES•   list-style-image
CUSTOM IMAGES•   list-style-image    •   ul {list-style-image: url(icons/icon-document.gif)};
SHORTCUT
SHORTCUT• list-style
SHORTCUT• list-style  •   ul {list-style: circle };
SHORTCUT• list-style  •   ul {list-style: circle };  •   ul {list-style: url(icons/icon-document.gif)};
SHORTCUT• list-style  •   ul {list-style: circle };  •   ul {list-style: url(icons/icon-document.gif)};  •   ul {list-styl...
NO BULLETS
NO BULLETS• Easily   get rid of Bullets
NO BULLETS• Easily   get rid of Bullets    •   ul {list-style:none;}
CONTROLLING SPACING   ul,ol {     list-style: none;     margin: 0;     padding: 0;   }
CONTROLLING SPACING• ULs   have margins, vary per browser                ul,ol {                  list-style: none;       ...
CONTROLLING SPACING• ULs    have margins, vary per browser• LIs   have padding, vary per browser                 ul,ol {  ...
CHANGING DISPLAY
CHANGING DISPLAY• ULs   and LIs are block level
CHANGING DISPLAY• ULs   and LIs are block level• display-inline
CHANGING DISPLAY• ULs   and LIs are block level• display-inline  • Can’t   modify widths of inline elements
CHANGING DISPLAY• ULs   and LIs are block level• display-inline  • Can’t   modify widths of inline elements• display-inlin...
CHANGING DISPLAY• ULs   and LIs are block level• display-inline  • Can’t   modify widths of inline elements• display-inlin...
THE END
Upcoming SlideShare
Loading in …5
×

Working with HTML Lists

1,665 views
1,577 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,665
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
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

    ×