CSS List Style Properties

List Style properties are very important properties to set of either Bullet Points or Numbered. In this Chapter, you will learn how to control list type, style, position, etc. with the of CSS (Cascading Style Sheet)
There are following Five CSS properties, which are used to control CSS Lists Properties-

List-style-Position

List-style-position also knows as Bullet position, in CSS list style, list-style-position properties used to set whether the bullets appear means that bullets appear inside the list item, or bullets appear themoutside before the start of every item. Basically, the default value is.outside
Example-


list-style-position
The list-style-position properties help you to set the points should appear inside or outside of the box containing, there are more than two values which used to set the bullets points inside and outside the box.

Sr. No. Value Discription
1 inside If you want to set the bullets points inside the containing box used inside value.i.e. If you set the value to inside, then the bullets points will sit inside the lines
2 outside If you want to set the bullets points outside the containing box used outside the value i.e bullets points to sit outside the list items
3 none NA

list-style-type

List-style-type

List-style-type such as bullet style properties in CSS it allows you to set the what type of bullets you want to use for the bullet points, in this properties we can set the order list to use uppercase alpha or upper roman, etc. numerals.



you can control the style or shape of bullets point in the case of an unordered list (ul) and you can use the style of numbering characters in the case of an ordered list (ol).
as given below table the values which can be used for in the case of an unordered list (ul)

Sr. No. Value Discription
1 disc (deafult) A filled circle bullets points list style
2 square A filled square bullets points list style
3 circle An empty circle bullets point list style
3 none NA

List-style-image

In List-style-image properties used custom bullet image.


list-style-image