0

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.

Improve this question
5
  • Hey Sarah, If you want to include css in your html, you gotta put them in your public folder and use '%PUBLIC_URL%' as the path to your css. source answer link Commented Jun 26, 2022 at 1:02
  • Hi, I tried moving the style.css file to public folder and changed the link to HTML as <link rel="stylesheet" href="%PUBLIC_URL%/style.css" />, however the CSS is still not reflecting. Commented Jun 26, 2022 at 1:12
  • can you please create a sandbox example, a guidline about how to create a minimal, Reproducible Example :) Commented Jun 26, 2022 at 1:16
  • How you building this? Is it Create React App/Webpack or something like Vite? Commented Jun 26, 2022 at 1:49
  • @SarahBarlis import your style file inside the index.js file. Commented Jun 26, 2022 at 17:24
Related questions
2
webpage is receiving css file but not implementing it
0
React component is not reading my css file
0
Path issue that makes a CSS file not read (React App)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.