CSS Lists
Unordered Lists:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Ordered Lists:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
HTML Lists and CSS List Properties
There are two primary list kinds in HTML:
- Unordered lists (<ul>) have bullets to indicate the list items.
- organized lists (<ol>): each item in the list has a letter or number assigned to it.
With the CSS list properties, you can:
- For ordered lists, use separate list item identifiers.
- For unordered lists, use various list item identifiers.
- Make a picture the list item marker.
- List items can have background colors added to them.
Different List Item Markers
The type of list item marker is specified by the list-style-type property.
Some of the available list item markers are displayed in the example that follows:
Example
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Note: Some of the values are for unordered lists, and some for ordered lists.
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:
Example
ul {
list-style-image: url('sqpurple.gif');
}
Position The List Item Markers
The list-item markers’ (bullet points’) location is specified by the list-style-position property.
The bullet points will be outside the list item if “list-style-position: outside;” is used. A list item’s beginnings will all be oriented vertically. By default, this is:
........CHART MUKVO......
The bullet points will be inside the list item if “list-style-position: inside;” is used. Given that it is a list item, it will appear in the text and precede the text:
........CHART MUKVO......
Example
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Remove Default Settings
You may also get rid of the bullets and markers by using the list-style-type:none parameter. Observe that the list’s default padding and margin are also present. Add margin:0 and padding:0 to <ul> or <ol> to get rid of this:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
Example
ul {
list-style: square inside url("sqpurple.gif");
}
The property values are listed in the following sequence when utilizing the shorthand property:
- list-style-type (if a list-style-image is given, the value of this property will be shown in case the image isn’t able to be displayed for some reason)
- list-style-position (indicates whether the content flow should contain list-item markers or not).
- list-style-image (designates a picture as the marker for the list item)
In the event that any of the aforementioned property values are missing, the default value will be added.
Styling List With Colors
To add a little more interest to lists, we can also decorate them using colors.
While properties added to the <li> tag will effect each individual list item, anything added to the <ol> or <ul> tag will affect the entire list:
Example
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}
Result:
.............BOX MUKAVU............
All CSS List Properties
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |
