The CSS properties are used to style Lists; You can learn about like; How to control list type, position, style, color, etc? by using CSS properties.
CSS List Properties
- list-style
- list-style-type
- list-style-position
- list-style-image
- list-style-offset
Types of Lists
Two types of list are used in the web page to make points like bullet, square, circle, numbers, letters, etc:
- Unordered Lists: The unordered list items are marked with bullets.
- Ordered Lists: The ordered list items are marked with numbers OR letters.
Property: List Style Type
The list-style-type property is used to defines the shape of the list item marker including unordered & ordered:
CSS Example: List Style Type
ul.circle {list-style-type: circle;} /* list style with circle */
ul.square {list-style-type: square;} /* list style with square */
ul.upper {list-style-type: upper-roman;} /* list style with upper roman */
ul.lower {list-style-type: lower-alpha;} /* list style with lower alpha */
HTML Code: List Style Type
Output
Unordered List With Circle
- Physics Book
- Chemistry Book
- Mathematics Book
Unordered List With Square
- Physics Book
- Chemistry Book
- Mathematics Book
Ordered List With Roman
- Physics Book
- Chemistry Book
- Mathematics Book
Ordered List With Alphabets
- Physics Book
- Chemistry Book
- Mathematics Book
Property: List Style Position
The list-style-position property is used to define the list item marker should appear inside OR outside of the box; including unordered and ordered list:
CSS Example: List Style Position
ul.circle {list-style-type: circle; list-stlye-position: inside;}
ul.square {list-style-type: square; list-stlye-position: outside;}
ul.upper {list-style-type: upper-roman; list-stlye-position: inside;}
ul.lower {list-style-type: lower-alpha; list-stlye-position: inside;}
HTML Code: List Style Position
Output
- Physics Book
- Chemistry Book
- Mathematics Book
- Physics Book
- Chemistry Book
- Mathematics Book
- Physics Book
- Chemistry Book
- Mathematics Book
- Physics Book
- Chemistry Book
- Mathematics Book
Property: List Style Image
The list-style-image property is used to specifies an image as the list item marker:
Example: List Style Image
ul {list-style-image: url('bullet.jpg');}
Output
- Physics Book
- Chemistry Book
- Mathematics Book
List: Default Setting
By default, the list-style-type is create markers/bullets. BUT supposed, If the list-style-type property set none, then it can remove the markers/bullets from list in both unordered and ordered list:
Example: Default Setting
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Output
Default list:
- Physics Book
- Chemistry Book
- Mathematics Book
Remore markers/bullets:
- Physics Book
- Chemistry Book
- Mathematics Book