# Styling React App with CSS

## Styling with CSS

We can use `className` property in `JSX` element to style an app with CSS.

{% tabs %}
{% tab title="Header.js" %}

```jsx
import React from "react"

function Header() {
    return (
        <header className="navbar">This is the header</header>
    )
}

export default Header
```

{% endtab %}

{% tab title="Footer.js" %}

```jsx
import React from "react"

function Footer() {
    return (
        <footer className="footer">This is the footer</footer>
    )
}

export default Footer
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React from "react"

import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"

function App() {
    return (
        <div>
            <Header />
            <Footer />
        </div>
    )
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))
```

{% endtab %}

{% tab title="style.css" %}

```css
body {
    margin: 0;
}

.navbar {
    height: 100px;
    background-color: #333;
    color: whitesmoke;
    text-align: center;
    font-size: 30px;

}

.footer{
    height: 100px;
    background-color: burlywood;
    text-align: center;
    font-size: 20px;
}
```

{% endtab %}
{% endtabs %}
