Lesson 33 — CSS in React (Styling Basics Explained)

by

🧭 Introduction

Styling is a crucial part of building user-friendly React applications. Without proper styling, even the best functionality looks incomplete.

React supports multiple ways to apply CSS, starting from simple external stylesheets to advanced styling solutions. In this lesson, we’ll focus on the most basic and essential method — using CSS files in React.

In this lesson, you will learn:

  • How CSS works in React
  • How to add CSS files to a React app
  • How to apply styles to components
  • Common mistakes and best practices

❓ How Styling Works in React

React does not replace CSS.
It simply allows you to use CSS inside a component-based structure.

👉 React components use:

  • className instead of class
  • Standard CSS syntax

🧩 Why Learn Basic CSS First?

Before using advanced tools like:

  • CSS Modules
  • Tailwind CSS
  • Material UI

You must understand basic CSS in React, because:
✔ It works everywhere
✔ Easy to debug
✔ Foundation for all styling methods

🛠 Method 1: Using External CSS File (Most Common)

📄 Step 1: Create a CSS File

Create a file:

App.css

📄 App.css

.container {
  padding: 20px;
  background-color: #f4f4f4;
}

.title {
  color: #333;
  font-size: 24px;
}

📄 Step 2: Import CSS into Component

import "./App.css";

function App() {
  return (
    <div className="container">
      <h1 className="title">Welcome to React Styling</h1>
    </div>
  );
}

export default App;

✔ CSS applies globally
✔ Simple and beginner-friendly

🧠 Important Rule: className vs class

In React JSX:

<!-- ❌ Wrong -->
<div class="box"></div>

<!-- ✅ Correct -->
<div className="box"></div>

👉 class is a reserved keyword in JavaScript.

🧩 Styling Multiple Components

You can:

  • Use one global CSS file
  • Or create separate CSS files per component

Example:

Header.jsx
Header.css


import "./Header.css";

🧩 Example: Component-Specific CSS

📄 Header.css

.header {
  background: #222;
  color: white;
  padding: 10px;
}

📄 Header.jsx

import "./Header.css";

const Header = () => {
  return <div className="header">Header Component</div>;
};

export default Header;

⚠ CSS in React is Global by Default

Important to remember:

CSS class names are global, not scoped to a component.

❌ Risk:

  • Class name conflicts
  • Styles overriding each other

👉 This is why CSS Modules exist (next lessons).

🧩 Using CSS with Conditional Rendering

You can apply CSS conditionally:

const isActive = true;

<div className={isActive ? "active" : "inactive"}>
  Status
</div>

🧩 Dynamic Class Names Example

const error = true;

<p className={`message ${error ? "error" : ""}`}>
  Form message
</p>

⚠ Common Mistakes

❌ Using class instead of className
❌ Forgetting to import CSS file
❌ Duplicate class names across files
❌ Writing too much CSS in one file

🎯 Best Practices

✅ Use meaningful class names
✅ Keep CSS files small
✅ Prefer component-level CSS
✅ Avoid deep nesting
✅ Prepare for CSS Modules

❓ FAQs — CSS in React

🔹 Is CSS different in React?

No. CSS syntax is the same. Only JSX uses className.

🔹 Can I use normal CSS frameworks?

Yes. Bootstrap, Tailwind, etc., work perfectly.

🔹 Is CSS scoped by default?

No. CSS is global unless using CSS Modules.

🔹 Should beginners start with CSS or Tailwind?

Start with basic CSS first.

🧠 Quick Recap

✔ React uses normal CSS
✔ className replaces class
✔ CSS files must be imported
✔ Styles are global by default

🎉 Conclusion

CSS in React is simple and powerful when you understand the basics. Mastering this foundation prepares you for advanced styling techniques like Inline Styling, CSS Modules, Tailwind, and UI libraries.

You’ve now officially started SECTION 7 — Styling in React 🎨🚀

👉 Next Lesson (SECTION 7):
Lesson 34 — Inline Styling in React

Leave a Comment