Techniques

Some techniques you should know, to effectively use CleanSlate

Always use !important

The reset stylesheet is composed entirely of !important rules. Therefore, any CSS rules that you use on content affected by the reset stylesheet must also include !important

This won’t work:

.myContainer h1 {
    font-weight:bold;
}

Instead, add !important:

.myContainer h1 {
    font-weight:bold !important;
}

Always declare the border-color when adding a border

Because border-color should match the font color, it is impossible for CleanSlate to know what color it should be. So, if you haven’t already declared a border-color for an element, be sure to do so when you first declare the border-width:

.myContainer .someOtherThing {
    border-width:1px; /* won't work unless border-color is also set */
    border-color:red !important; /* this will declare the border's colour, or... */
    border:1px solid red !important; /* this will declare all border values in one line */
}

List items

list-style-position

list-style-position for li elements has been set to inside instead of the default outside value for reasons outlined below. p. Before we get into that here’s how you change this back – all you need to do is add the following into your guest stylesheet:

.myContainer li {
    list-style-position:outside !important;
}

This approach is taken for the following reasons: It is more common to want a list’s bullets (rather than its text) to line up with the left-hand edge of its container.If list-style-position is set to the default outside then left-margin on li elements or left-padding on ul elements needs to be set otherwise the bullets will be hidden in IE7. For CleanSlate to set these values is inappropriate because it cannot determine what is a suitable amount of margin or padding.p. (The difference between list-style-position:inside and outside is illustrated here: http://htmldog.com/examples/lists5.html)

list-style-type

CleanSlate does not disable bullets by setting list-style-type to none (as in Eric Meyer’s classic reset css) for the following reasons:
You probably want bullets on your lists (don’t you?)It is a simple one line change to turn it off… but it is much harder to turn it back on again, requiring several lines of code to re-create the nested list bullets.p. Please note the following exception to this: Bullets are turned off for lists within HTML5 nav elements (used for navigation) because you’d rarely want bullets in navigation lists.

IE6 Support

See the IE6 wiki page for some extra techniques to bear in mind when supporting Internet Explorer 6.