CSS3 List Styles tutorial for Beginners

1
CSS3 List Styles Tutorial Videos for Beginners by
2
Highlights

• List-style
• List-style-image
• List-style-position
• List-style-shorthand
• Creating Horizontal Lists

3
List Style

• HTML has mainly two types of lists, they are
  ordered list, unordered list.
• Ordered list lists the items with numbers or
  letters.
• Ordered list syntax ltolgt lt/olgt
• Unordered list lists the items with bullet
  points.
• Unordered list Syntax ltulgt ltulgt

4
List-style-image

• Specifies image as the list item indication.
• Initial value is none. Syntax list-style-image
  none
• Applicable to all the list items.
• It inherit the other list item. Syntax
  list-style-image inherit
• EX ltulgt ltligtproperty1lt/ligt ltligtproperty1lt/ligt
  lt/ulgt
• ul list-style-image url(" https//www.google.
  co.in/imgres?imgurlhtFmedia")

5
List-style-position

• Specifies list item markers should appear inside
  or outside the content flow.
• Syntax ltulgt list-style-position inside
  or outside or initial or inherit lt/ulgt
• Inside position Indicates the marker and the text
  of the text box.
• Outside property Keeps the marker outside and put
  the content inside of box.
• Initial value sets style position property to its
  default value.
• Inherit value Inherits style position property
  from its parent element. 

6
List-style-shorthand

• Sets all the list properties in one declaration.
• list-style-type, list-style-position,
  list-style-image are the properties that it sets.
• If any of the properties not mentioned it gives
  default values.
• Syntax list-style ltlist-style-typegt
  ltlist-style-positiongt ltlist-style-imagegt inherit
• EX ul list-style none sets all unordered
  lists to not display a list-item marker.
• The default value is disc or outside or none

7
Creating Horizontal Lists

• First create a unordered list.
• Syntax ltdiv id classgtltulgt ltligtitem1lt/ligt lt
  ligtitem2lt/ligt lt/ulgt lt/divgt
• Now remove the bullet points. class ul
  list-style-type none
• Remove padding and margins.
• class ul margin 0 padding 0
  list-style-type none
• Display inline class ul li display inline
• Removing text decoration class ul li a
  text-decoration none

8
Creating Horizontal Lists

•  Apply Padding around list items and add
  background color
• class ul li a
• text-decoration none
• padding .2em 1em
• color fff
• background-color 032
• Combine all the and execute the program,
  horizontal list would be created.

9
Feedback
Like It ? Hate It?
We would love to hear from you whatever you think
about the course.
Click HERE to share what you think!
10
Thank you
Thank You for Watching CSS3 Positioning Elements
Tutorial Videos for Beginner by
http//www.courseing.com