Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

2,161 views

Published on

The basics of working with HTML lists.

Published in: Self Improvement, Technology
  • Be the first to comment

  • Be the first to like this

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

×