The best CSS style list (ul) Tutorial In 2024, In this tutorial you can learn List,Different list item marker,Examples,As the image list item marker,Examples,Browser Compatibility Solutions,Examples,List - shorthand property,Examples,More examples,All CSS List Properties,
CSS List Properties role is as follows:
In HTML, there are two types of lists:
With CSS, you can list the style further, and can make an image list item marker.
list-style-type attribute specifies the type of list item marker is ::
Some values are unordered lists, and some is an ordered list.
To specify the image list item marker, use the list-style-image property:
The above example shows not the same in all browsers, IE and Opera display the image tags than Firefox, Chrome and Safari a little bit higher.
If you want to place the same image of the logo in all browsers, you should use a browser compatibility solutions, as follows
Also in all browsers, the following example will show the image tag:
Example explained:
You can specify a list of all the properties in a single property. This is called a shorthand property.
Use abbreviations property to the list, a list of style attributes are set as follows:
If you use the shorthand property value of the order is:
If these values are missing one of the remaining order is still specified, it does not matter.
All different list item marker
This example demonstrates all the different CSS list item marker.
Attributes | description |
---|---|
list-style | Shorthand property. For a list of all the properties is provided in a statement |
list-style-image | The image is set to sign a list of items. |
list-style-position | Set the position in the list the list item marker. |
list-style-type | Set the type of list item flag. |