The Style Declarations I Make Almost Everytime I start a new site
When creating a site, no matter what the end design ends up being, there are certain standard css declarations that I end up making every time. These are what I would want browser defaults to be out of the gate.
body {padding:0;}- Removes the gap around the edges of the window body.
body {background:#fff;}(or whatever color is appropriate)- I used to take it for granted that white was the default background color for everyone's browser. Not so. Now I declare the color right off.
form {padding:0;margin:0;}- I remember how I frustrated I was the first time I realized that forms extra space by default. I was trying to line up a search box to be just right - I spent days playing with the various styles associated with the input tag until I realized it was the form, not the input. Never again.
ul {margin:0;padding:0;}- Even for
ulsthat aren't used as menus, I'd much prefer to start from 0 padding and 0 margin than the browser defaults. a img {border:0;}- If my image needs a border around it to indicate that it's clickable, I'll do it myself.
Your mileage may vary. I could probably add color of links to this list, as the default colors, specifically the visited link color, I find bland.
Comments (12)
JD said:
This is very good cheat sheet, because I cannot count how many times I've struggled with something that these would have fixed. This post is a good reminder to address issues before they become issues.
# November 30, 2006 11:02 AM
Mas Prema said:
I have been using
* {
padding: 0;
margin: 0;
}
and it seems to take care of a lot of stuff.
Great hint about the background color, I was like you and assumed everyone did white.
# November 30, 2006 8:23 PM
CSS Guy said:
@Mas - the universal selector is indeed useful. I had thought I came across some article that mentioned its 'dangers', but I can't find that article any more. Some of the warnings against it that I have found don't seem to hold much value, since they are about outdated browsers. Thanks for the tip.
# November 30, 2006 9:52 PM
mr. clayton said:
I often forget to do this - nothing is as frustrating as trying to figure out why something is out of whack because of a default browser style has been applied.
# December 6, 2006 5:12 PM
inti castro said:
if you are careful enough not to assume white as background color you should also not asume black as the default text color.
i would add a color: #333; on the body tag.
and about the universal selector, i remember reading an article about some issues with it. something related to form controls not behaving as expected but i'm almost positive that only happened on some old version of Firefox. it was a browser bug for sure.
# December 28, 2006 7:24 AM
minimal design said:
* {
margin: 0;
padding: 0;
}
is indeed the key to sanity ;)
(yes, I did reverse the order to have the margin first because I have the habit of ordering the different CSS rules from "outside" to "inside" the box model - definitely not a requirement, just my writing style I guess...)
# January 8, 2007 7:13 PM
Eddy Yanto said:
Nice articles. But setting all the margins and paddings to the value of zero is "dangerous" ? Can anybody please elaborate? Thanks. :)
# January 10, 2007 6:46 PM
CSS Guy said:
@Eddy
I wish I could remember the article that warned me not to use the universal selector to change all padding/margin to 0, but I can't. I guess if it were a real issue, we'd see more reasons not to use it. Instead, it's probably a good thing to use, and a good headache saver for cross-browser display consistency.
# January 10, 2007 7:06 PM
Gerald Cameron said:
Are these articles by Faruk Ateş the naysayers about global reset the one's you were trying to remember?
An article by Robert Nyman, that Faruk cites as his inspiration is another candidate.
# February 11, 2007 7:01 PM
CSS Guy said:
@Gerald:
Quite possibly those are the articles, but I honestly cannot remember them. Nice reads though. Thanks for commenting.
# February 11, 2007 8:14 PM
BHeel said:
Hi!
first time posting here.
everytime starting with:
body{
background-color:#ProjectBackgroundColor;
background-image:url(Images/BKG.jpg);
background-repeat:repeat-x; or repeat-y;
font-family:Arial;
font-size:100%;
margin:0px;
}
form{
padding:0;margin:0;
}
ul{
margin:0;padding:0;
}
a img{
border:0;
}
sometimes using dinamic variables to set the color values.. =)
# February 15, 2007 1:52 PM
bedava oyunlar said:
I often forget to do this - nothing is as frustrating as trying to figure out why something is out of whack because of a default browser style has been applied.
# February 21, 2008 12:09 PM