So I am working on a personal project and trying to add style to my JSX. For some reason, the changes that I am trying to do is not reflected in the result. Everything is linked properly. Did I miss something?
import React from "react"
export default function Header() {
return (
<header className="header">
<img
src="./images/troll-face.png"
className="header--image"
/>
<h2 className="header--title">Meme Generator</h2>
<h4 className="header--project">React Course - Project 3</h4>
</header>
)
}
* {
box-sizing: border-box;
}
body {
font-family: "Karla", sans-serif;
margin: 0;
}
.header {
display: flex;
align-items: center;
height: 65px;
background: linear-gradient(90deg, #303030 1.18%, #a626d3 100%);
color: white;
padding: 20px;
}
.header--image {
height: 100%;
margin-right: 6px;
}
.header--title {
font-size: 1.25rem;
margin-right: auto;
}
.header--project {
font-size: 0.75rem;
font-weight: 500;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="../src/style.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js"></script>
</body>
</html>
here’s how my files are arranged
And here is the output in the browser
I do not know why the CSS is not reading. Thanks for the help in advance.