Course: Section

Get Started with Modern React: Learn by Doing

Episode: Title

S03・V04: CSS Styling

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objective
  • We will show you how to add CSS styling to the page.
Watch Video
Duration: 3m 36s

CSS Styling

As usual, make sure your development server is running in Terminal, and that the app is showing in the browser.

Currently, we have just one component in our app: the Game component in the index.js file.

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const Game = () => {
  return (
    <div>
      Game
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Let’s go to the index.css file.

We will add some styling to the body of the page.

src/index.css
body {
  background-color: #444;
  color: white;
}

Let’s switch back to the index.js file. Under the third-party package imports, we will import the CSS file that we edited.

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const Game = () => {
  return (
    <div>
      Game
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

You will now see the styling update in the browser.

Let’s go back to index.css. We will add some margin to the body. Finally, let’s make the font size bigger, and use a different font family.

src/index.css
body {
  background-color: #444;
  color: white;
  margin: 20px;
  font: 32px "Century Gothic", Futura, sans-serif;
}

Inspect Elements in Chrome’s DevTools

We can see how “Create React App” adds the styles to our index.html page by using Chrome’s Developer Tools, where we can “Inspect Elements”.

With the "Elements" tab selected, unfold the head tag. You will see a style tag under the title tag. Unfold it to see more detail. Here you can see the styles we added to our app. Now, the title tag above our styles reads React App. This also shows on our browser tab.

Let’s change the title. Open the index.html file in the public folder.

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Select the React App text within the title tag. Delete the text, and replace it with Tic-Tac-Toe-Hooks.

public/index.html
    <title>Tic-Tac-Toe-Hooks</title>

Check that our browser tab changes its title.

Summary

We added some basic CSS styles to the body of our page, and we updated the title.

Next Up…

In the next video, we will create additional components in a parent-child relationship to each other.