How to Use the CSS list-style Shorthand Property
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.
- Leave the styles for the
ul.one
selector as they are. This will demonstrate thelist-style
default values.ul.one { /* No styling applied. */ }
- For
ul.two
, set the value oflist-style
tonone
. This will remove the bullet to the left of the list items.ul.two { list-style: none; }
- For
ul.three
, set the value oflist-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 threelist-style
properties. Note that if the image exists, it will override the value you set forlist-style-type
. Also note that setting list-style-position toinside
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:
<!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>