CodeBlanks Logo Icon CodeBlanks
Login Register

Styling with CSS

Learn to style with className from an external CSS file.

Styling with CSS

The simplest styling method in React is using an external CSS file with className. In JSX you write className, not class.

Example: <button className="btn">Save</button>. A CSS rule .btn { color: blue; } paints this button.

You import the CSS file into JSX; Vite/Webpack loads it automatically. This method is familiar and works in big projects.

Importing a CSS file

You import the CSS file at the top of the component file: import "./Button.css". The bundler adds it to the page automatically.

With this method styles are global; if two components use the same class name they clash. This is why CSS Modules or scoped solutions are preferred.

For now we learn the simplest method; Modules come later.

Practice Styled button

Complete the skeleton. Write a SaveButton component that returns <button className="btn">Save</button>. Export it.

Starter code

App.jsx
// Define SaveButton here

Sample solution

App.jsx
function SaveButton() {
  return <button className="btn">Save</button>;
}

export default SaveButton;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which attribute is used for styling class in JSX?

App.jsx
class is a reserved word in JavaScript.
  • style
  • class
  • className Correct answer
  • css

Explanation: React uses className instead of class.

2 Styling with CSS: fill in the missing part

Question 
<button className="____">Save</button>
Answer 
<button className="btn">Save</button>

Explanation: You styled with className btn.

3 Styling with CSS: match the terms

Term Meaning
className Style class
import "./x.css" Load CSS
.btn CSS selector
global Clash risk

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu