Home arrow Style Sheets arrow Page 8 - CSS Shorthand at a Glance

CSS Shorthand at a Glance

What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 32
February 08, 2005
  1. · CSS Shorthand at a Glance
  2. · Basic CSS rules
  3. · Font shorthand property
  4. · Background shorthand property
  5. · Margin shorthand property
  6. · Padding shorthand property
  7. · Border shorthand property
  8. · List-style shorthand property

print this article

CSS Shorthand at a Glance - List-style shorthand property
(Page 8 of 8 )

The syntax for the "list-style" shorthand property is described below:

list-style: | list-style-type | list-style-position | list-style-image;

This shorthand property comes in very handy when we’re styling lists, since they’re commonly used to display content in an appealing fashion. Available types for "list-style-types" are circle, disc and square.

The "list-style-position" property sets whether the list marker (bullet or number) is placed inside or outside the box outlined by the list item text. Another way to look at this property is that a setting of "inside" causes the text to wrap to the beginning of the line, whereas a setting of "outside" causes the text to wrap to the first character after the list marker on the first line.

Finally, the "list-style-image" property allows us to define a URL for an image that is to be used for the bullets in a list, or for a particular list item. A setting of "none" for a particular list item specifies that the default bullet should be used instead of an image, and can override an image specified for the list as a whole.

Let’s see an example for this shorthand property:

ul {

     list-style: square inside url("sqr.gif");


In this case, we’re defining an unordered list element to have an image to display list items ("sqr.gif"). If it’s not available, then a square bullet will be used instead, which is placed inside the box outlined by the list item text.

And that’s all for now. We’ve taken a quick look at the most used CSS shorthand properties, learning a little more about the power of CSS and its properties. Of course, there are many other shortcuts to define styles, but poor or even nonexistent browser support for them makes them impractical for use in websites.


As we can see, CSS shorthand properties are really easy to implement. In many cases, they’re faster and more efficient to use than standard CSS, making our code a lot tighter and concise. However, we should be aware of browser support, which usually varies significantly. Just make sure you have at hand a good CSS reference that includes information about browser compatibility for every feature discussed. It might be a straight and simple solution for most of your CSS related problems.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials