In Brief...
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.
Take our Advanced CSS Training course for free.
See the Course Outline and RegisterInstructions
- Start with an HTML page containing four lists.
- Leave the styles for the
ul.oneselector as they are. This will demonstrate thelist-styledefault values.ul.one { /* No styling applied. */ } - For
ul.two, set the value oflist-styletonone. This will remove the bullet to the left of the list items.ul.two { list-style: none; } - For
ul.three, set the value oflist-styleto 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-styleproperties. Note that if the image exists, it will override the value you set forlist-style-type. Also note that setting list-style-position toinsidecauses 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>
Need CSS Training?
Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.