CSS Reset vs * wild card

Question

Why can't I just reset from:

* { margin: 0; padding: 0; font-size: 100% }

instead:

 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; } 

Answer 1

First of all, you can.

Answering the question: because you probably do not want to have all the elements with the specified parameters. For example, you do not have input, buttons, etc.

Answer 2

Maybe because type selectors have more specificity than a universal selector.

Or because this CSS reset does not want to map all elements, for example input s.

Answer 3

Applying all of these styles to all elements will result in an unexpected style. Please check out the following text box, drop-down list and text area 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 naked!

Answer 4

Using CSS reset is a powerful way to quickly reach a good starting point for your design, allowing you to save time and clutter when coding. Instead of explicitly resetting everything, you need to find the tags that you usually want to use reset, and choose the default values ​​that work well for each project individually.

Using Reset Wildcard

You can use reset for each HTML tag, which may or may not have a style attached to it using CSS wildcard. Although it is quick and easy, it can also have undesirable consequences.

By removing all default formatting from all HTML tags, you force yourself to create custom styles for these tags. Remember that you can only think of div, span, ul, li and other common elements, completely forgetting about abbr, pre and cite.

Answer 5

This is a general method called CSS reset. Different browsers use different default values, which causes sites to look different. * Means "all elements" (universal selector), so we set all elements to zero fields and zero padding, which makes them the same in all browsers.