CSS Different Padding Values for Cascading styles

Question

Hello!

If I do this:

*{padding:0}
div#myDiv{padding:10px;}

Will that behave like any normal styling in CSS with the last style applied overriding others? i.e. The element with the myDiv ID will have 10px padding? Or do I have to specify !important?

Will this work on all popular browsers?

Thank you!

Answer 1

Yes: the <div id="myDiv"> element will have a 10px padding, and this works on nearly every browser. Cascading means more specific selectors will override more general selectors.

The only time you'd really need to use !important is when you have a more general style that you want to take precedence over a more specific style, or when you have two different styles for the same selector, like to take advantage of quirks in older browsers that don't support !important.

Answer 2

i wouldn't recommend doing this. if you want to set padding for all elements to zero by default, i would recommend using a css reset page

but yes, that will work.

Answer 3

If declared as

div {padding: 30px;}
div#pro { padding: 0px; }

Every div will have 30px of padding all around, except for div#pro, regardless of the order of the stylesheet, it's based on how specific you are with your declarations. More general specifications are overridden by more specific ones.

Answer 4

The all(*) selector isn't supported in legacy browsers. I believe it is supported in all modern browsers.

As for your specific padding on #myDiv, this should work. The cascading in CSS means that elements inherit properties from parents but these can be overridden by more speciffic selectors targeting child elements.

If you like to reset or normalize all crossbrowser CSS try Eric Meyers reset css sheet. I use this file as a start in all my CSS templates. Its a great help. Als be sure to define XHTML strict as a doctype, this will save you much aggrevation.