Shorthand list-style property

The list-style property may be used as a replacement for all three other properties related to CSS list styling; these are list-style-type, list-style-image and list-style-position.

The list-style property contains following information:

value: [<list-style-type>, <list-style-position>, <list-style-image>] or inherit;
initial: depends on individual properties;
applies to: list elements;
inherited: yes;
percentages: N/A;
media: visual;
computed value: depends on individual properties.

If the list-style-image was added as the type then list-style-type values, if any, have to be ignored.

Example

CSS list-style property example:

<html>
<head>
<title>CSS tutorial</title>
<title>CSS tutorial</title>
<style type="text/css">

h5 {
	color:#44ae31;
}
ul {
	list-style:square inside;
}
ul ol {
	list-style:lower-roman outside;
}
ul ol > li {
	font-size:0.9em;
}
</style>
</head>

<body>

<h5>Example of nested lists:</h5>
<ul>
	<li>Cake ingredients:</li>
	<ol>
		<li>egg</li>
		<li>cup of milk</li>
		<li>two spoons of sugar</li>
		<li>etc...</li></ol>
	<li>Soup ingredients:</li>
	<ol>
		<li>one leek</li>
		<li>one regular onion</li>
		<li>a teaspoon of salt</li>
		<li>etc...</li></ol>
</ul>

</body>
</html>

›› go to examples ››

Shorthand list-style property

Example

CSS list-style property example:

Comments

About

Contact

Get Connected