CSS Tutorial
Styling Lists In CSS
CSS provides several properties for styling and formatting the
most commonly used unordered and ordered lists.
These CSS list properties typically allow you to:
>Control the shape or appearance of the marker.
>Set the distance between the marker and the text in the list.
>Specify an image for the marker rather than a bullet point or number.
Following are the properties provided by CSS for styling any
list:
⚪ list-style-type
The list-style-type property allows us to control the shape or
style of marker in the list.
For unordered lists possible values are:
>none
>disc
>circle
>square
For ordered lists possible values are:
| Value | Description | Example |
|---|---|---|
| Value | Description | Example |
| decimal | Number | 1,2,3,4,5 |
| decimal-leading-zero | 0 before the number | 01, 02, 03, 04, 05 |
| lower-alpha Lowercase alphanumeric | characters | a, b, c, d, e |
| upper-alpha Uppercase alphanumeric | characters | A, B, C, D, E |
| lower-roman Lowercase | Roman numerals | i, ii, iii, iv, v |
| upper-roman | Uppercase Roman numerals | I, II, III, IV, V |
By default, the marker of each list item is positioned outside of their display boxes
However, we can also position these markers or bullet points inside of the list item's display boxes using the list-style-position property along with the value inside
In this case the lines will wrap under the marker instead of being indented
⚪ list-style-image
We can also set an image as a list marker using the property list-style-image .
Example:
Example:
ul li
{
list-style-image: url("images/bullet.png");
}
The style rule in the above code assigns a PNG image “bullet.png" as the list marker
Creating Nav Bar Using Lists
HTML lists are frequently used to create horizontal navigation
bar or menu that typically appears at the top of a website.
But since the list items are block elements, so to display them
inline we need to use the CSS display property.
Example:
ul
{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li
{
display: inline-block;
}
ul li a
{
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover
{
color: #fff;
background: #939393;
}