Introduction to CSS List Styles -
Lesson 8
Publisher : Attitude Academy
What is List-
Style CSS
Lists are very helpful in conveying a set of either numbered or bulleted
points. This chapter teaches you how to control list type, position, style
etc., using CSS
There are three choices for values:
• List-style-type
• List-style-image
• List-style-position
(Note: Or you can control them individually)
LIST-
STYLE
List Style Type
You can control the type of bullet ordered and unordered lists use wit
the list-style-type property
Values
• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• lower-alpha
• upper-alpha
• none
list-style-type:disc;list-style-type:disc;
List Style Image
list-style-image: url(path/images-nam.jpg,png,gif,etc);
You can use an image for the bullet of unordered lists with the list-
style property
list-style-image: url(path/images-nam.jpg,png,gif,etc);
LIST-
STYLE
LIST-
STYLE
List Style Position
You can control the position of ordered and unordered lists with
the list-style-position property
There are two choices for values:
• Inside
• Outside
Visit Us : Attitude Academy
Visit Us : Attitude Academy

Introduction to CSS List Styles - Lesson 8

  • 1.
    Introduction to CSSList Styles - Lesson 8 Publisher : Attitude Academy
  • 2.
    What is List- StyleCSS Lists are very helpful in conveying a set of either numbered or bulleted points. This chapter teaches you how to control list type, position, style etc., using CSS There are three choices for values: • List-style-type • List-style-image • List-style-position (Note: Or you can control them individually)
  • 3.
    LIST- STYLE List Style Type Youcan control the type of bullet ordered and unordered lists use wit the list-style-type property Values • disc • circle • square • decimal • lower-roman • upper-roman • lower-alpha • upper-alpha • none list-style-type:disc;list-style-type:disc;
  • 4.
    List Style Image list-style-image:url(path/images-nam.jpg,png,gif,etc); You can use an image for the bullet of unordered lists with the list- style property list-style-image: url(path/images-nam.jpg,png,gif,etc); LIST- STYLE
  • 5.
    LIST- STYLE List Style Position Youcan control the position of ordered and unordered lists with the list-style-position property There are two choices for values: • Inside • Outside
  • 6.
    Visit Us :Attitude Academy
  • 7.
    Visit Us :Attitude Academy