Default Base CSS Selectors for every Project

Code March 9, 2008

Here is my mini short listing of my default CSS selectors when I begin a new project:


* {
margin: 0;
padding: 0;
outline: none;
}

body {
font-size: 100%;
}


Even though I am not sure if throwing it all under the “*” selector is detrimental or not, sometimes I’ll just do:


/************************************/
/*------------ CSS RESET ------------*/
/************************************/
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
table {
border-collapse: collapse;
}


I’ve come across the following at Monofactor.com - Design Graphics Blog - Onur Oztaskiran » Blog Archive » 6 Default Selectors on my Base CSS for every Project, which I think interesting, but I am not sure if I feel them absolutely needed:

6 Default Selectors on my Base CSS for every Project

Settings for Headings

Because IE6 displays the font-size and margin/padding properties for headings different than other browsers, I define preliminary standard values for the heading properties:

h1,h2,h3 {

margin:1em 0;

}

E6 renders the font sizes for headings differently (mostly for the typefaces like Georgia, Trebuchet MS, etc), so they need to be standardized for all browsers:

h1 { font-size:138.5%;}

h2 { font-size:123.1%;}

h3 {font-size:108%;}

h1,h2,h3,h4,h5,h6 {font-weight:bold;}


Hiding the Horizontal Rules

As I sometimes divide content into divisions, it looks better and more organized by dividing with horizontal rules when site is viewed without stylesheet.
And of course, I hide them inside css:

hr { display:none;}

Paragraph Margins

Giving a default top and bottom margin to paragraphs to be interpreted same on all browsers:

p { margin:15px 0px 15px 0px; }

Clear Fix

I usually pick name for the clearer div class from a comic hero. Mostly I name it spiderman/batman =)