Shorthand Lists

Contact Us or call 1-877-932-8228
Shorthand Lists

Shorthand Lists

The list-style property is used to set the list-style-type, the list-style-position and the list-style-image properties. The order of values is not important.

selector {
	list-style: list-style-type list-style-position list-style-image;
}
CSS Initial Values for the list-style Property
Property Initial Value
list-style-type disc/decimal
list-style-position outside
list-style-image none

Code Sample:

CssShorthand/Demos/ListStyle.html
---- C O D E   O M I T T E D ----
ul.one {
	/* No styling applied. */
}

ul.two {
	list-style: none; /* This sets the list-style-type to none removing the disc. */
}

ul.three {
	list-style: url('Images/listArrow.gif'); /* This list uses an image. */
}

ul.four {
	list-style: square url('Images/ImageNotReal.gif'); /* This list uses an image.  If the image file is not found, the list will resort to square as the list-style-type value. */
}

</style>
</head>

<body>
	<div>
		<p>This list has no special formatting.</p>
		<ul class="one">
			<li>list item 1</li>
			<li>list item 2</li>
		</ul>
	</div>
	
	<div>
		<p>This list sets the <code>list-style-type</code> value to "none" which removes the disc that is usually at the beginning of a list item.</p>
		<ul class="two">
			<li>list item 1</li>
			<li>list item 2</li>
		</ul>
	</div>
	
	<div>
		<p>This list uses an image for the glyph.</p>
		<ul class="three">
			<li>list item 1</li>
			<li>list item 2</li>
		</ul>
	</div>
	
	<div>
		<p>This list uses an image that doesn't exist.  As the image isn't found, the "backup value" of "square" will be used.</p>
		<ul class="four">
			<li>list item 1</li>
			<li>list item 2</li>
		</ul>
	</div>
</body>
</html>

Code Explanation

The above code will render the following:Screen capture: The list-style shorthand property values

Next