Header margins values blocked by normalize css

HTML/CSS
1

Hi there,
I’m just going through the vertical spacing section in the HTML/CSS course and I was using the normalize css style sheet in conjunction with my own (I think that’s what he suggested to do on all boiler plates)
and when I set h1 margin the, normalize css sheet is somehow overriding those values
so they have no effect.
I’m not sure now whether to use normalize or not in the future or maybe only for certain needs.

2

Hi,
The order in which you refer to CSS stylesheet is important.

Here is an example.

image
image1201×846 55.9 KB

As you can see all styles are applied from both styles1.css and styles2.css, but because styles 2 comes next, it overrides previous styles.

Now I reverse the order of the style sheets and the result is different.

image
image1199×836 55.6 KB

Regards.

P.S. : What I mean by that is should you want a css files to override already applied styles, you should use the one that is referenced last or better create one you’ll put last and use that.
In ASP projects they provide us with a site.css for our needs

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    @*<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />*@
</head>

And I see there is even an optional css file after that but site.css just do.

1 Like
3

Hi there
Thanks for taking the time to write such a detailed explanation. I wasn’t thinking order of CSS links in html and it makes perfect sense, of course.
Thanks again :+1:t3: