Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- CSS Crib Sheet, cheatsheets, shortcut lists, syntax lists, & others


SuzyUK - 10:08 pm on Sep 13, 2004 (gmt 0)


Tips 'n'Tricks: Part 5

2. Shorthand Properties continued..

list-style Shorthand

list-style [w3.org] is a shorthand property for:

  • list-style-type
  • list-style-position
  • list-style-image

    list-style {<list-style-type> <list-style-position> <list-style-image>;}

    the individual properties are not seperated by commas, can be used in any order and all parts are optional ~ but if an individual property is not declared they are still understood to be there and an element will take on their individual defaults instead.

    Example:
    ul {
    list-style {square inside none;}
    }

    is the equivalent of:
    ul {
    list-style-type: square;
    list-style-position: inside;
    list-style-image: none;
    }

    Example 2:
    ul {
    list-style: square;
    }

    is the equivalent of:
    ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
    }

    Note: setting a list-style using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.

    If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use a longhand list-style property as this will only affect that particular property.

    Example:
    ul {
    list-style-type: disc;
    }

    Note:
    ul {
    list-style: none;
    }

    will set both <list-style-type> and <list-style-image> to none

    Note: <li> items will inherit list-style values from their <ol> and <ul> parent elements and setting the list style on a <ul> or an <ol> is the recommended way to control the overall lists, then descendant selectors (specificity) will enable you to target individual <li> elements if required.
    Example:
    ol ol li {list-style: disc;}
    ul li {list-style: square;}

    ... more to follow ....


    Thread source:: http://www.webmasterworld.com/css/4514.htm
    Brought to you by WebmasterWorld: http://www.webmasterworld.com