Inline CSS works, but why not External CSS?

Question

Here's my code of index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeWare</title>
    <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <div class="hero">
        <h1>Coding</h1
        <h1>Redefined.</h1>
    </div>
</body>
</html>

Styles.css:

:root {
  --color-Primary: #ff0505;
}

html {
  font-size: 62.5%;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.hero {
  background-color: var(--color-Primary);
  height: 50rem;
}

h1 {
  padding-left: 2rem;
  padding-top: 2rem;
  color: #ffffff;
  margin-top: 0px;
  font-size: 9rem;
  font-weight: 700;
}

In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me

Is the path to your css file correct? Should be in the same folder as your html file. You can check in your browser's developer tools whether the file was loaded, but also from where your h1 tag gets its styles... — Laurent S.
– Laurent S., Commented Mar 2, 2021 at 7:49

adampweb · Accepted Answer · 2021-03-02 07:54:40Z

1

You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)

answered Mar 2, 2021 at 7:54

adampweb

1,4691 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavlov Serhiy · Accepted Answer · 2021-03-02 08:35:45Z

1

You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.

All you need to do is to include normalize.css first.

<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">

answered Mar 2, 2021 at 8:35

Pavlov Serhiy

3241 silver badge4 bronze badges

Collectives™ on Stack Overflow

Inline CSS works, but why not External CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related