Reset not letting me change H1 size

Question

So this is a strange bug I cant seem to figure out.

Im using Meyers reset in my app. But when I edit my main css file to change the h1 font size, it will not change it. But when I put it in the body tag it works. Could anyone explain this to me?

Example

base.css.scss

h1 {
 font-size: 2em;    //--This doesnt work
}

body {
     width: 100%;
     height: 100%;

    h1 {
     font-size: 2em;  //-- This works
    }
}

Answer 1

Make sure to include the reset file before your base.css.scss file. Looks like it overwrites the h1 rule.

Answer 2

There are three possible causes to this issue. First, make sure you are not trying to use SASS in the browser. It will need to be fully converted to plain CSS before you can use it there. Second, make sure the selector you're using has a higher specificity. That is, make sure the selector is more specific than another selector setting the property. body h1 has a higher specificity than just h1. Though, in Meyer's reset, that shouldn't be a problem. Third is order. If two selectors have the same level of specificity, the one that comes later gets priority. Make sure your reset comes before any other CSS on your page.

Answer 3

you've redefined, so the second assignment of H1 does not work, although you can use! important but I'd better not

Answer 4

Because the second one has a more specificity than the first one: in this case body h1 has more power than h1

Answer 5

The issue you are having is two-fold. There is a specificity issue as well as a cascading issue. You aren't going to be able to override a style before it is declared without using and !important. So your override should be after the reset.

You will also want to match the selector you are trying to override. So if your reset is targeting the element with the body and h1 selectors, do the same to override the styles.

body h1 { font-size: 2em; }