Articles in The 'Universal-Selector-in-CSS' Tag

Universal Selector in CSS

by Shawn Escott

All browsers have built-in margins and padding for html and can impact the meticulous layout of a design. Browsers such as Internet Explorer, Firefox, and Safari may all render the spacing of the H1, p, ul, li,etc. differently.

To alleviate this problem and force the design to the margins and padding we specify, we must first set all of them to 0 pixels. This cancels out browser defaults. Now we can set our own heights and widths where needed. Below are two ways to accomplish this:

1.  List all elements of the html and set the margin and padding to 0 pixels like this:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0;
}

– OR –

2.  Use the Universal Selector which does the same as above, but in much lest code.

* {
margin:0;
padding:0;
}

Keeping your code clean and simple can decrease file size and ensure your pages load quickly.