Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi everyone,
Im planning to clean up my html and was wondering about the importance of (global) reset. Does anyone have some suggestion on what properties are important to reset? I saw some resetting style sheets of other people, but I think i should create my own reset style sheet to get more control depending on the needs of my page. For now i can only think about the global margin and paddings reset, bullets, links and something for the fonts . . i dont know a proper way to reset the font, i see some people use percentage, others use percentage dividing a number, any suggestions ?
thnx -
-
CommentAuthoradjustafresh
- CommentTimeJul 25th 2007
I used to just use the star/universal selector and nuke everything's padding and margins. Eric Meyer advised against this at An Event Apart earlier this year and made a good case against it--mostly with regard to defaults set on form fields and buttons. He has posted his CSS reset 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;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
This works well, and leaves form elements to their defaults. I have had to customize the color and background properties on the body element. -
-
thank you for the reset style Adjustafresh
Can anyone explain why the font-size is set to 100% ? does this mean i still have to use percentage later on in my css or can i just use EM and pixels as usual. Furthermore, is it better to include different style sheets or just put all ur styles in one css files ?
thnx -
Thanks, I needed this.
-
- CommentAuthorlatinomigs
- CommentTimeJul 26th 2007
cavinc,
I believe the font-size is set to 100% so that all the font-sizes for the tags listed as type selectors will be defaulted to the same size (the default size of all tags?). How the reset styles affect the rest of your styles depends on where you add them. So if you <link /> the reset.css before any other styles, any conflicting styles that follow will overwrite the styles in the reset.css file. So you can use whatever you want for a font-size or any styles for that matter. -
Thanks for the clarification latinomigs !
-
use font-size:100.01% fixes bugs in various browsers
you should specify fonts for your divs later -
aahh ok thnx. I've read the font-size:100,01% but didnt know what the use for it. thnx
-
Just resurrecting this thread to ask for help understanding why a style reset is recommended. I just find myself having to redefine element styles, which results in longer/difficult to read style sheets.
-
-
CommentAuthoradjustafresh
- CommentTimeJan 24th 2008
Styles should be reset to eliminate default browser styles. Resetting helps ensure complete designer/developer control over the padding, margins, borders, font sizes, etc. of HTML elements. It helps ensure that designs will render similarly cross-browser. -
-
Interesting outcome of the questions I posted at http://www.opendesigns.org/forum/discussion/1695/css-reset.
-
That Jen girl apparently doesn't understand her job....
She doesn't get the point of why you might do this..(include might)...what she should do...is ...
upload the reset to one of her pages and see what happens to her design.... -
I know exactly what would happen to my design....
I have been coding XHTML & CSS for many years and understand my job perfectly, but thank you for your input in the discussion anyhow.
I also "get the point" as to why some might do this, but I don't think you should need to rely on them. I get on perfectly fine without them and still manage to code cross browser compatible, XHTML 1.0 Strict designs in an hour or so.
I do think the idea of creating your own margins/paddings etc. for elements and saving them as a standard file that you can re-use is a good one though. I have only ever seen resets being discussed as setting everything to 0 (e.g. Eric Meyers example) which is what I am disagreeing with. -
insterd of using
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-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
we can use
*{ margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
is that better??
1 to 14 of 14