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.

  1. Start with an HTML page containing four lists.
    2. 
<!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>
  2. Leave the styles for the ul.one selector as they are. This will demonstrate the list-style default values. 
    
ul.one {
	/* No styling applied. */
}
  3. 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;
}
  4. 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');
}
  5. 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');
}
  6. Open the HTML page in a browser. This code renders the following: list-style shorthand