Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Universal selector will not remove all element default margins

Why does the universal selector remove the margins of the paragraphs, but not the first level heading? My objective is to create a baseline grid.

<body>
  <h1>Web Stuff</h1>
  <p>Text</p>
  <p>Text</p>
</body>

* {
     margin: 0;
}
Bogdan Cabaj
Bogdan Cabaj
16,349 Points
Bogdan Cabaj
Bogdan Cabaj
16,349 Points

I tested in chrome and it works as expected. Did you make sure that css is linked to you html if it's in a different file.

body { background: red; }

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I am using Chrome as well. My css is linked to my html as a matter of fact. The weird thing is that if I replace the h1 with a h2 or a h3 the margins for that element will be removed.

Bogdan Cabaj
Bogdan Cabaj
16,349 Points
Bogdan Cabaj
Bogdan Cabaj
16,349 Points

Hopefully somebody else can chip in.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I have a hunch that it has to do with my normalize.css settings. Not 100% sure though.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Is there another CSS file in your document that's overriding the styles for the H1 element?

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

There are no rules that apply to the h1 in my stylesheet.

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Benjamin,

Your hunch may be correct.

The universal selector has zero specificity, meaning that any other selector can beat it. That means if you're targeting any elements in your stylesheets and giving them a non-zero margin then they'll stay that way and not be affected by your universal selector to zero out the margins.

I don't know which version of normalize you're using but the latest is here: https://github.com/necolas/normalize.css/blob/master/normalize.css

I can see that the h1 is assigned a top and bottom margin of 0.67em

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

I don't see margins set for paragraphs or h2-h6.

This would seem to agree with the observations you've had up to this point.