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.
Summary
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. |
/ 20 
