How to Use the CSS list-style Shorthand Property

See CSS: Tips and Tricks for similar articles.

Shorthand properties are CSS properties that can take multiple values, with each value relating to a different regular CSS property. Values in shorthand properties are separated by spaces, as shown below.


selector {
	property: value1 value2 value3;
}

In this how to, you'll learn how to use the list-style shorthand property. The list-style shorthand property is used to set the list-style-type, the list-style-position, and the list-style-image properties.

Start with an HTML page containing four lists.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS List Style shorthand</title>
<style type="text/css" media="screen">
	div {
		margin: .75em;
		padding: .5em;
		border: 1px solid black;
		font: .75em verdana;
	}
	ul.one {
		/* No styling applied. */
	}

	ul.two {
		/* No styling applied. */
	}

	ul.three {
		/* No styling applied. */
	}

	ul.four {
		/* No styling applied. */
	}
</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>
	<ul class="two">
		<li>list item 1</li>
		<li>list item 2</li>
	</ul>
</div>

<div>
	<ul class="three">
		<li>list item 1</li>
		<li>list item 2</li>
	</ul>
</div>

<div>
	<ul class="four">
		<li>list item 1</li>
		<li>list item 2</li>
	</ul>
</div>
</body>
</html>

Leave the styles for the ul.one selector as they are. This will demonstrate the list-style default values.
```
ul.one {
	/* No styling applied. */
}
```
For ul.two, set the value of list-style to none. This will remove the bullet to the left of the list items.
```
ul.two {
	list-style: none;
}
```
For ul.three, set the value of list-style to the path to an image. This will cause the browser to use this image in place of the default disc.
```
ul.three {
	list-style: url('Images/listArrow.gif');
}
```
For ul.four, change all three list-style properties. Note that if the image exists, it will override the value you set for list-style-type. Also note that setting list-style-position to inside causes the bullets to be indented.
```
ul.four {
	list-style: square inside url('Images/listArrow.gif');
}
```
Open the HTML page in a browser. This code renders the following:

How to Use the CSS list-style Shorthand Property

Related Articles