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.

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

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

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, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.