Do you have a reset css file that sets things to default values?
Seems this is a wildly discussed topic on the net - just wondering what my trusted colleagues here on the forum think!
Thanks!
Printable View
Do you have a reset css file that sets things to default values?
Seems this is a wildly discussed topic on the net - just wondering what my trusted colleagues here on the forum think!
Thanks!
I have never heard of it before but I normally just use css files depending on which browsers need to be targeted.
I'm thinking of using this
This link goes into the topic heavily.Code:html, body {padding: 0; margin: 0;}
html {font-size: 1em;}
body {font-size: 62.5%;} /* 1em now equals 10px */
a img, :link img, :visited img {border: 0;}
http://sixrevisions.com/css/a-compre...to-css-resets/
I typically go with something simple like:
Code:*{margin:0;padding:0;}
*:focus{outline:0;} /* This is bad for accessibility if you don't account for it with other styles */
body{font-size: 62.5%;}
img,fieldset{border:0;}
I've read that the "*" wildcard removes those settings from too many elements - some need them.
I am using that 62.5% though - and I'm going to use 1.5 em and such for font everywhere else.
Currently I'm using the following - but it's still a work in progress.
Code:/* Reset Styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
}
body {font-size: 62.5%;}
a img, :link img, :visited img {border: 0;}
I do replace margin and padding on certain elements further down the style sheet (the amounts of which are varying), but I want the starting assumption to be 0, for everything.Quote:
I've read that the "*" wildcard removes those settings from too many elements - some need them.
What's not already in this block anyway?
I'd rather zero everything, then redefine the special cases myself, as-desired. It may be less efficient, but I'll take it.Code:html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
I agree with this. I even go further than resetting only the margins for everything:Quote:
Originally Posted by SambaNeko
Code:* {
border: 0;
font-family: arial, helvetica, tahoma;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
I don't like *{border:0;} because of what it does to <input> and <button> elements: once you take off the default border, you can put one back, but you can't restore the system default appearance of the element (right?), which is sometimes desired.
And I don't like putting a font-family on * because I've run into situations like this:
So I prefer the font-family on the body{} declaration (plus another declaration for textarea).Code:<style>
* { font-family: arial; }
p.someStyle { font-family: tahoma; }
</style>
<p class="someStyle">This is in tahoma like I want it to be, <em>but this is in arial, when I wanted tahoma.</em></p>
I dislike reset stylesheets greatly. I think of them more as a CSS learning convenience, not something to use as a base for each and every case. I don't want to redefine all styles each time, for example, I like that those headers have their default margins in the main content. Also, I find it much more valuable to teach that browsers do have their default styles and how to deal with those defaults ie. when someone gets extra trouble on margins ("why there is a top margin but I've set it to zero?") you learn something new on CSS: that margins can jump from child elements to their parent element. This may even be desired in some cases! An example: a special case header with a child image could have some extra margin to push it further down, and this would happen automatically by having the img tag there. No need to add an extra class attribute for just that.
So instead of reset stylesheet I do resetting only on elements I actually want to reset (html & body is the most common). And even then I don't think of it as resetting, instead it is just setting the style I want to have. The most common critique for reset CSS is that you first reset everything an in the other hand then redefine everything. Kind of doubling the work; and in some cases creating work that wouldn't otherwise be there. I used reset CSS for a while and noticed it only increased my workload.
One of the neatest things to do if you want your fields to have the same font as everything else:
input,select,textarea { font-family: inherit; }
I feel the same way about using resets; regardless of what you call it, the whole point is getting the style that you want. If you want to leave the browser defaults alone, then by all means. And if you want everything to start at zero, then you can use these methods that are known as "resets."Quote:
And even then I don't think of it as resetting, instead it is just setting the style I want to have.
There are different meanings behind all this stuff...
* { margin: 0; padding: 0; }
Hard reset, or what you call "zero style".
Reset stylesheet:
A stylesheet that aims to make default browser styles null and void, ie. every browser looks exactly the same after applying the stylesheet no matter what element you use.
Then there is the HTML5 boilerplate stylesheet that also introduces HTML5 elements into the picture. It can be considered quite useful at the moment for old browser support. It doesn't take long and it just becomes a regular reset stylesheet when old browsers become insignificant.