The css styling does not work?

HTML-CSS
1

Have 2 questions to ask regarding css styling not working;

  1. You can see from the codepen above that yadadada heading is placed with no margin as * selector has property margin equal to 0. But when I use those exact code and open up the html file in the google chrome browser, the yadadada has a margin-top space even though it’s supposed to be 0. I tried “inspect” by right clicking and I see that margin:0; is crossed out. Why is this?

  2. So I tried adding margin-top:0; to h1 selector and the the top space disappeared with everything working perfectly. Why does this happen? I’ve already declared margin to be 0 from * selector so why does it need me to declare again that h1 is 0?

  3. Continuing from the 2nd question, why doesn’t it work if set div as margin-top:0; even though it works when I set h1 as margin-top:0;?

thank you!

2

  1. Works fine for me in a chrome browser, in codepen or locally.

  2. It sounds like a specificity issue.

  3. They are two different elements - they can each have their own margins.

3

Ugh I need to somehow figure this out…

so for each of header, div, h1 and a , they all have their own border, padding, margin as a box?

4

hey, it’s working fine. I just checked it in, codepen, Chrome and Mozilla too.

5

ugh sorry about that, gave you the wrong code, this is the one that doesn’t work


seems to be working in codepen but doesn’t work. I use google chrome

*EDIT ok just figured it out, I omitted the normalize.css and it seems to work. What does normalize.css do? Doe it force everything to stick to default setting permanently?

6

hey, Sorry to say that, even it is working for me. Just checked it in the same webpage. Do clear the cache memory of the browser and check it again. Thanks