Your SlideShare is downloading. ×
Working with HTML Lists
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Working with HTML Lists

1,305
views

Published on

The basics of working with HTML lists.

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,305
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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