The css styling does not work?

The css styling does not work?


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!

  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.


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?


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


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?


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