> For the complete documentation index, see [llms.txt](https://shopify-1.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shopify-1.gitbook.io/react/exercises/1.-productlist-light/step-3.md).

# Step 3

Now that you have your components ready, let's add some style to them. Create a CSS file for each of your components and import them by doing:

```css
/* Title.css */
.Title {
  font-size: 24px;
}

/* ProductList.css */
.ProductList {
  background: white;
}
```

```javascript
// Title.js
import './Title.css'

render() {
  return (
    <div className="Title">
      ...
    </div>
  )
}

// ProductList.js
import './ProductList.css'

render() {
  return (
    <table className="ProductList">
      ...
    </table>
  )
}
```

⚠️ Like for importing JSON, importing a CSS file is made possible because you are using `create-react-app`. Under the hood, `create-react-app` has a webpack configuration that allows you to import CSS files.

If you inspect the source of your app, you will see that the CSS is inlined in the page. ⚠️ You are using plain CSS here, it is not CSS modules, so if you use same class names, you will have collision.