Why cant I just do a simple reset of:
* { margin: 0; padding: 0; font-size: 100% }
instead of:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
A CSS Reset style sheet is a list of rules that 'reset' all of the default browser styles. We reset the browser styles for two primary reasons: Not all browsers apply the same default rules. They may be similar, but not exact.
Wildcard Selectors (*, ^ and $) in CSS for classesWildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard.
Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings.
A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers.
First of all you can.
Answering the question: because you probably don't want to have all elements with specified parameters. For example you do not have inputs, buttons etc. there.
Maybe because type selectors have more specificity than the universal selector.
Or because this CSS reset doesn't want to match all elements, like input
s.
Applying all those styles to all elements would result in unanticipated styling. Please check out the following textbox, dropdown, and textarea reset with all your reset styles:
<input type="text" value="foo" />
<select>
<option>Foo</option>
<option>Bar</option>
</select>
<textarea rows="10" columns="30">foo</textarea>
http://jsfiddle.net/esm63r30/
Pretty bare!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With