CSS: Strip Away all Styling

Every browser has its own set of default styling for web pages. In case a particular website doesn’t provide enough styling for a certain element, it applies these instead. The differences between browsers can result into unforeseen results. A good example of this behavior is the difference in margins and paddings defined for lists (<ul>, <ol>, <dl>).

One technique you could use is:

* {
margin: 0; padding: 0;
}

Yes, this will neutralize everything to 0 margin and padding, but it’ll also have its effects on headings, forms, blockquotes, etc. Everything will be aligned crisply to the left side of the page, while this may not entirely be your intention.

@charset "utf-8";
/*-- Initialization Stylesheet --*/

/* v2.1, by Faruk Ates - www.kurafire.net
Addendum by Robert Nyman - www.robertnyman.com */

/* Neutralize styling:
Elements we want to clean out entirely: */
html, body, form, fieldset {
margin: 0;
padding: 0;
font: medium Calibri, Arial, Verdana, Helvetica, sans-serif;
}

/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}

/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}

/* Miscellaneous conveniences: */
form label {
cursor: pointer;
}
fieldset {
border: none;
}

/* Form field text-scaling */
input, select, textarea {
font-size: 100%;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s