Call (877) SITE-OPT (748-3678)

Code: List-style shorthand property

From Chapter 7: CSS Optimization

The list-style property sets list-style-type, liststyle- position, and list-style-image in one abbreviated notation. The syntax is as follows:

list-style: <list-style-type> <list-style-position> <list-style-image> inherit

For example, this:

ul { list-style: none; }

sets all unordered lists to not display a list-item marker. The following example sets all ordered lists to uppercase Roman numerals:

ol { list-style: upper-roman inside; }

A final example illustrates the entire shorthand rule. Note that specifying a liststyle-type of disc is a fallback for when the image is not available.

ul { list-style: url("http://example.com/bullet.png") disc outside; }

The preceding code is shorthand for the following:

ul {
    list-style-image: url("http://example.com/bullet.png");
    list-style-marker: disc;
    list-style-position: outside;
}

Note that the "outside" property is the default, and is optional in the preceding shorthand version. For more information, see http://www.w3.org/TR/CSS21/generate. html#propdef-list-style-position and http://www.w3.org/TR/css3-lists/.

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In