Tripoli CSS Reset

The Tripoli Reset, used by such design/business heavyweights as Mint.com, is a comprehensive and well-crafted generic CSS Reset, which doesn’t just carefully reset all browser standards – it rebuilds them too, quietly and with cutting-edge web development in mind.

For that reason, it has been referred to as a ‘framework’, but according to Hellsing,

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

You can click here to jump to the scripts, or keep reading for some discussion…

Not sure what he means? Again, Tripoli is comprehensive. It really covers most everything… however it seems to fly in the face of keeping your CSS Reset as small and specific as possible.

What Tripoli is good for:

  • Resetting and rebuilding all browser defaults for maximum compatibility
  • Forming a generic standard for rendering tags in HTML4
  • Unifying all browser defaults for maximum compatibility across browsers
  • Taking care of deprecated HTML4 tags by disabling them in the CSS
  • To simplify the creation of well-design webpages for designers and developers of all skill levels

CSS Tripoli Reset Code:

* {
margin: 0; 
padding: 0; 
text-decoration: none; 
font-size: 1em; 
outline: none;
}

code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {
font: inherit; 
font-size: 1em; 
white-space: normal;
}

dfn, i, cite, var, address, em {
font-style: normal;
}

th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {
border: none;
}

table {
border-collapse: collapse; 
border-spacing: 0;
}

caption, th, td, center {
text-align: left; 
vertical-align: top;
}

body {
line-height: 1; 
background: white; 
color: black;
}

q {
quotes: "" "";
}

ul, ol, dir, menu {
list-style: none;
}

sub, sup {
vertical-align: baseline;
}

a {
color: inherit;
}

hr {
display: none;
} /* we don't need a visual hr in layout */

font {
color: inherit !important; 
font: inherit !important; 
color: inherit !important;
} /* disables some nasty font attributes in standard browsers */

marquee {
overflow: inherit !important; 
-moz-binding: none;
}

blink {
text-decoration: none;
}

nobr {
white-space: normal;
}