3.11 add one style base cs

Now that the ExpenseItem component renders the date, description and amount, let's add a dedicated stylesheet. We create a new file next to the component file and call it ExpenseItem.css with a capital I, then paste the CSS rules into it. Take a moment to copy the snippet from the video onto your own machine.

Applying CSS classes in JSX

Back in the component file we import the stylesheet at the top and add a className attribute on each element. For the date we use expense-item__date, for the description block we use expense-item__description, and for the price we use expense-item__price. The most common typo here is the BEM-style double underscore __: it really has to be two underscores, otherwise the rule does not match.

// ExpenseItem.js
import "./ExpenseItem.css";

function ExpenseItem() {
  return (
    <div className="expense-item">
      <div className="expense-item__date">28 March 2022</div>
      <div className="expense-item__description">
        <h2>Car insurance</h2>
      </div>
      <div className="expense-item__price">290 euros</div>
    </div>
  );
}

Saving the file and refreshing the browser, the page now displays the expense styled the way the design demands: "28 March 2022", "Car insurance" and "290 euros" wrapped in a violet outlined card. The visual result confirms that the CSS class names match. See you in the next video for the next step of the project.

Summary

This lesson teaches how to add CSS styling to an expense tracker application. Students copy provided CSS code and apply CSS classes to HTML elements (date, description, price) to style the expense items. The lesson demonstrates how styled expenses display in the browser with proper formatting and color styling (purple for the price amount).

Key points

• Copy and apply provided CSS code to style expense item components
• Use CSS classes (expenses-item-date, expenses-item-description, expenses-item-price) to target specific expense properties
• Ensure correct CSS class naming with proper capitalization to match HTML elements
• Apply color and layout styling to improve visual presentation of expense entries
• Verify styled output displays correctly in the browser (date, description, and price formatted as intended)

FAQ

What CSS classes are used for styling expense items?

The lesson uses CSS classes for different parts of an expense item: expenses-item-date for the date field, expenses-item-description for the description (e.g., insurance car), and expenses-item-price for the amount. Each class targets its specific element.

Why is it important to use the exact CSS class names in the HTML?

The CSS class names must match exactly between your HTML and CSS file, including proper capitalization. Using incorrect or mismatched class names will prevent the styling from applying to the elements.

What visual result should you see after applying the CSS?

Once CSS is applied correctly, expense items display properly formatted with the date, description, and price each styled according to the rules. In this lesson, the price appears highlighted in purple and all elements are properly positioned within the expense entry layout.