Loading Please Wait...
HTML have three types of lists that are, unordered lists, ordered lists, and definition lists. Out of them unordered and ordered lists are widely used.
The CSS allow us to set the following properties of the list:
CSS provides the following properties to style the lists:
The CSS list-style-type property sets the marker (such as a disc, character, or custom counter style) of a list item element.
Keyword values: none, disc, circle, square, decimal, upper-roman, lower-alpha, georgian, trad-chinese-informal, kannada, etc.
String values: "-", "=>", "\1F44D", etc.
Counter style values: An identifier matching the value of a @counter-style or one of the predefined styles.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
list-style-type: none;
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: upper-roman;
list-style-type: lower-alpha;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;
/* string value */
list-style-type: "-";
list-style-type: "=>";
list-style-type: "\1F44D";
/* Identifier matching an @counter-style rule */
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
list-style-type: thumbs;
/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;
The CSS list-style-image property sets an image to be used as the list item marker.
Keyword values: none
Url values: Image path or URL.
Gradient color values: linear-gradient(to left bottom, red, blue), etc.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
list-style-image: none;
/* url values */
list-style-image: url("marker.png");
/* gradient values */
list-style-image: linear-gradient(to left bottom, red, blue);
/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;
The CSS list-style-position property sets the position of the ::marker relative to a list item.
Keyword values: inside, outside.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
list-style-position: inside;
list-style-position: outside;
/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;
The CSS list-style is a shorthand property allows you to set all the list style properties at once.
/* type */
list-style: square;
/* image */
list-style: url("../img/shape.png");
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url("../img/shape.png") outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved