How to Use the CSS list-style Shorthand Property

  • google plus

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 Register

Instructions

  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 is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss