Why is some of my CSS code crossed out?

  • List item The picture below shows my code for the project. For some reason my first header (the one that reads Dasmoto’s Arts and Crafts) is way bigger than what it should be. I’m guessing it’s because some of my code is crossed out. Is this the case? If so, why is this happening? In VSC my code doesn’t appear that way. Furthermore, I don’t have the slightest as to where did the “user agent stylesheet” came from. What causes my code to be crossed out?
    -Thanks!

Hey Eduardo, how are you doing?
That is the “cascading” effect of CSS.
As you see are “crossed out” only font-size and font-weight, the rules of <h1> are being applied instead of those same rules of the <header>.

Check this out: Cascade and inheritance - Learn web development | MDN

1 Like

Hey @usernamegiapreso! I’m good, thanks for asking.
Ok, so I went through the document you pointed me to. I understand what’s happening, but I don’t get where that “user agent stylesheet” is coming from. Is that some predetermined CSS stylesheet? Is there a way to just erase it or something?
-Thanks!

Is that some predetermined CSS stylesheet? Is there a way to just erase it or something?

Kind of yeah. The user-agent is basically your browser, you can override it in different ways, the simplest is to just style that particular element differently.

In your case user-agent is beating up the inheritance, so add a rule to your CSS file that targets directly your <h1> and you should fix it.

1 Like

Awesome, thanks a lot!

1 Like

You’re welcome, happy to help :slight_smile:

1 Like