CSS Lists
CSS
There are some CSS properties that can be used to control the list.
CSS list properties
➔ The CSS list properties is used to control the list.
➔ Lists can be classified as ordered lists, unordered lists and definition lists.
➔ The following CSS properties can be use to style the lists.
list-style-typelist-style-imagelist-style-positionlist-style(shorthand)
CSS list-style-type
➔ The CSS list-style-type property determines the appearance of list item markers.
➔ It can be bullets or numbers.
Syntax
list-style-type: value;
Property values
| Common Value | Description |
|---|---|
| disc | A filled circle. This is default. |
| circle | A hollow circle. |
| square | A filled square. |
| none | No marker is displayed |
| decimal | e.g. 1, 2, 3 |
| decimal-leading-zero | e.g. 01, 02, 03 |
| lower-alpha lower-latin | e.g. a, b, c |
| upper-alpha upper-latin | e.g. A, B, C |
| lower-roman | i, ii, iii |
| upper-roman | I, II, III |
| armenian | The marker is the traditional local numbering for armenian. |
| cjk-ideographic | The marker is the traditional local numbering for Chinese characters (Hanzi), Japanese Kanji, and Korean Hanja. |
| georgian | The marker is the traditional local numbering for georgian. |
| hebrew | The marker is the traditional local numbering for Hebrew. |
| hiragana | The marker is the traditional local numbering for hiragana. |
| katakana | The marker is the traditional local numbering for katakana. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
#p1 {
list-style-type: circle;
}
#p2 {
list-style-type: square;
}
#p3 {
list-style-type: lower-alpha;
} Click on the "Try it Now" button to see how it works.
CSS list-style-image
➔ The CSS list-style-image property specifies an image to use as a list item marker.
➔ This replaces the default markers in the list of <ul> or <ol>.
Syntax
list-style-image: none|url()|initial|inherit;
Property values
| Value | Description |
|---|---|
| none | No image is used as a marker. This is default. |
| url() | Specifies the path to the image resource to use as a marker. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS list-style-image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
#p1 {
list-style-type: circle;
list-style-image: url("resources/images/star3.png");
}
#p2 {
list-style-type: square;
}
#p3 {
list-style-type: none;
}
</style>
</head>
<body>
<h1>CSS list-style-image Example</h1>
<ul id="p1">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p2">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p3">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
CSS list-style-position
➔ The list-style-position property determines where the list item marker will be placed relative to the list item's content.
➔ It accepts two values, outside (default) and inside.
Syntax
list-style-position: inside|outside|initial|inherit;
Property values
| Value | Description |
|---|---|
| outside | The marker is placed outside the main block box of the list item. This is default. |
| inside | The marker is placed inside the content flow of the list item. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS list-style-position Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
#p1 {
list-style-type: circle;
list-style-position: outside;
}
#p2 {
list-style-type: square;
list-style-position: inside;
}
#p3 {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>CSS list-style-position Example</h1>
<ul id="p1">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p2">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p3">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
CSS list-style property
➔ CSS list-style properties are used to define the appearance and position of list item markers.
➔ This is a shorthand property that combines the three individual properties.
➔ The values can be specified in any order.
Syntax
list-style: list-style-type list-style-position list-style-image|initial|inherit;
Property values
| Name | Value | Description |
|---|---|---|
| list-style-type |
For ul: disc (default), circle, square, none For ol: decimal (default), decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha |
Specifies the type of list item marker. |
| list-style-position | outside (default), inside | Determines the position of the marker relative to the contents of the list item. |
| list-style-image | url("myimage.png"), none | Specifies a custom image as the list marker. |
| initial | initial | Sets the property to its default value. |
| inherit | inherit | The element inherits the property value from its parent element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS list-style Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
#p1 {
list-style:circle outside url("resources/images/star3.png");
}
#p2 {
list-style:square inside url("resources/images/star2.png");
}
#p3 {
list-style-type: disc;
}
</style>
</head>
<body>
<h1>CSS list-style Example</h1>
<ul id="p1">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p2">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<ul id="p3">
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.