<aside> 💡

Your app works. Now make it look like someone got paid to build it.

</aside>

1. Global CSS

One CSS file. Every component uses it.

🧑‍💻 Example

App.css:

.card {
  padding: 20px;
  background: whitesmoke;
}

import "./App.css";

function App() {
  return (
    <div className="card">
      <h1>Bashi Academy</h1>
    </div>
  );
}

Two things to remember: use className (not class), and these styles apply to the entire app, not just the file that imports them.

📌 Summary

Task Code
Import CSS import "./App.css"
Apply a class className="card"
Scope Global (every component)

2. CSS Modules

Global CSS has a problem. Two components both use .title:

import "./Hero.css";    // .title { color: blue }

function Hero() {
  return <h1 className="title">Welcome</h1>;
}

import "./Sidebar.css"; // .title { color: red }

function Sidebar() {
  return <h3 className="title">Menu</h3>;
}

Whichever file loads last wins. Your Hero turns red. You didn't change anything. The styles just broke. This is called a class name collision.

🛠 The Fix

Rename .css to .module.css. Import it as an object.

Hero.module.css: