? External CSS Files in React

? Quick Overview

One of the most common and traditional ways to style React components is by using external CSS files. You write normal CSS in a separate .css file and then import it into your React component.

• Separates styling from JavaScript logic.
• Makes it easy to reuse styles across multiple components.
• Supports all regular CSS features (media queries, animations, pseudo-classes, etc.).
• Works nicely with preprocessors like SASS or LESS.

? Key Concepts

• External CSS file: A separate file like App.css that holds your styles.
• Importing CSS: Use an import "./App.css"; statement inside your component file.
• className attribute: In React, you use className instead of class.
• Global scope: External CSS is global by default and can affect multiple components.
• Component-specific CSS: Create one CSS file per component to keep things organized.

? Syntax & Theory

A basic setup with external CSS in a React project usually looks like this:

// Basic project structure with external CSS
? src/
 ┣ ? App.js
 ┣ ? App.css
 ┗ ? index.js

In your React component, you import the CSS file at the top of the file:

// Importing a CSS file inside a React component
import "./App.css";

Then you attach CSS classes using the className attribute:

// Using className to apply styles from App.css
function App() {
  return (
    <div className="container">
      <h2 className="title">External CSS Example</h2>
    </div>
  );
}

? Full Example: Using External CSS

Here is a complete example showing how App.css and App.js work together.

// App.css - styles used by the App component
.container {
  background-color: #f1f1f1;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.title {
  color: #007bff;
  font-weight: bold;
}

.button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// App.js - React component that uses styles from App.css
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="container">
      <h2 className="title">External CSS Example</h2>
      <button className="button">Click Me</button>
    </div>
  );
}

export default App;

⚙️ Scoped Styling Issue (Global CSS)

By default, external CSS files are global. That means a class name defined in one file can affect any component that uses the same class name, which may cause style conflicts.

Consider this example where both the header and footer use a .title class:

// Header.css - styles for the Header component
.title {
  color: red;
}

// Footer.css - styles for the Footer component
.title {
  color: blue;
}

If both Header.css and Footer.css are imported globally, whichever file is imported last will override the previous styles for .title. This can lead to unexpected results in larger applications.

✅ A common solution is to use CSS Modules so that styles are scoped to a specific component (covered in the next lesson).

? Component-Specific CSS Files

A good practice is to create a separate CSS file for each component. This keeps styles close to where they are used and makes the project easier to maintain.

// Organizing each component with its own CSS file
? src/
 ┣ ? components/
 ┃ ┣ ? Card.js
 ┃ ┗ ? Card.css
 ┗ ? App.js

// Card.js - reusable UI component
import React from "react";
import "./Card.css";

function Card() {
  return (
    <div className="card">
      <h4 className="card-title">Reusable Card</h4>
      <p>Styled with a component-specific CSS file.</p>
    </div>
  );
}

export default Card;

// Card.css - styles for the Card component only
.card {
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 6px;
  padding: 15px;
  margin: 10px 0;
}

.card-title {
  color: #007bff;
}

? When to Use External CSS

• ✅ Small-to-medium projects with straightforward styling requirements.
• ✅ When you want consistent, global styles across multiple pages/components.
• ✅ When mixing frameworks like Bootstrap or Tailwind CSS with custom styles.
• ⚠️ For very large apps, avoid too much global CSS — consider CSS Modules or styled-components for better isolation.