CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation:

Difference between these CSS reset methods

I would like to know if there is any difference between these two methods.

body,ul,li,p,h1,h2,h3,h4,h5{padding:0; margin:0; list-style-type:none;}

and 

body,ul,p,h1,h2,h3,h4,h5{padding:0; margin:0;}
li{list-style-type:none;}

without the need to use the global selector * The real issue here is that, I have mentioned list-style-type:none; in the first example, even though this attribute applies to the li tag on. But, I find myself something in need to group all elements and just give them values , even if some values don't apply to some elements.

So, is there a negative side to that aside from clarity issues?

Upvotes: 1

Views: 101

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The difference is that the second set of rules does not set margin and padding on li elements.

Regarding the question about setting list-style-type on elements other than li, it is not an error and does not cause problems as such. It may have an effect, though, since those elements still have the property and their children may inherit it. For example, if another style sheet sets h2 { display: list-item }, then it matters what the list-style-type value for h2 is.

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 240938

I would go with the second reset.. although I always use Eric Meyers..

The first reset applies padding:0; margin:0; list-style-type:none; to all the tags. This is really redundant, as list-style-type:none has absolutely no effect on h1, h2, etc. Why apply it if it has no effect on those elements? Don't.

list-style-type:none only has effect on <ul> and <li> therefore it should only be applied to those, as in the second example.

Of those 2 options, use the following:

body,ul,li,p,h1,h2,h3,h4,h5{padding:0; margin:0;}
ul,li{list-style-type:none;}

Upvotes: 2

Related Questions