CodeBlanks Logo Icon CodeBlanks
Login Register

Inline styles

Learn to write inline styles with the style attribute as an object.

Inline styles

An inline style is passed as an object to the style attribute: <div style={{color: "red"}}>. The double braces are easy to forget.

Because values are JavaScript, you write backgroundColor (camelCase), not background-color. Numbers are treated as pixels: padding: 8.

Inline styles are for quick prototypes; in big projects prefer CSS or Modules.

Dynamic styling

The power of inline styles is binding values to variables: style={{color: isError ? "red" : "green"}}. The color then changes with state.

You can do the same with className: className={isError ? "err" : "ok"}. Pick whichever is cleaner.

Inline styles do not support pseudo-classes (:hover); for those you need CSS.

Practice Dynamic colored box

Complete the skeleton. Write an AlertBox component; import useState. Define const [err, setErr] = useState(true);. Return <div style={{color: err ? "red" : "green"}}>Status</div>. Export it.

Starter code

App.jsx
import { useState } from "react";

// Define AlertBox here

Sample solution

App.jsx
import { useState } from "react";

function AlertBox() {
  const [err, setErr] = useState(true);
  return <div style={{ color: err ? "red" : "green" }}>Status</div>;
}

export default AlertBox;

Questions and answers

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

1 How is background color written in inline styles?

App.jsx
CSS dashes become camelCase.
  • backgroundColor Correct answer
  • bgcolor
  • background-color
  • background

Explanation: JavaScript object keys use camelCase.

2 Inline styles: fill in the missing part

Question 
<div style={{ ____: "red" }}>Note</div>
Answer 
<div style={{ color: "red" }}>Note</div>

Explanation: The color key sets the text color.

3 Inline styles: match the terms

Term Meaning
style={{}} Inline object
backgroundColor camelCase
padding: 8 Pixel number
:hover Not inline

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