Style (by which I mean color, sizing, shadows, and all the other good stuff) is added to our newly structured layout with the help of CSS (or more specifically, CSS3). First, create a new file called style.css in the public directory. The HTML file already has the tag to include this CSS file:

      <link href="style.css" rel="stylesheet">

The CSS file contains declarations that describe the style of the HTML elements in our document:

    /*
    Initialize the body to have no padding and margin so that
    our aplication can occupy the entire screen
    */
    body{
      margin:0;
      padding: 0;
    }

    /*
    We use flexbox for our layout structure.
    Flexbox is a feature introduced in CSS3 to make it 
    simpler to align
    and size elements in a layout. It also makes your layout 
    more predictable
    when accomodating different screen sizes.
    */
    .container {
      display: flex;
      font-family : sans-serif;
      width: 100%;
    }

    /*
    Assign a width to the containers. Since we have two
     containers,
    and we want there to be space in between, we need to make 
    each of them
    lesser than 50% of the total width, which is why 40% is 
    assigned.

    The top and bottom margin is set at 20px, while the left
    and right margins are
    set to auto, so that both containers will center 
    themselves.

    We also want the text inside these containers to align
     itself centrally
    */
    .container > div {
      width: 40%;
      margin: 20px auto;
      text-align: center;
      /*
      To give the display a natural rounded shape, and to
     give it the appearance of
      "popping out", we have assigned a border radius and box 
    shadow CSS property
      */
      border-radius: 10px;
      box-shadow:0px 0px 3px -1px rgba(100,100,100,0.75);  
    }

    /*
    We choose some light colors as the background colors of 
    our displays
    */
    .temperature{
      background-color: #ffcdd2
    }

    .humidity{
      background-color: #c5cae9
    }

    /*
    We want our title to have a large size, and our value to 
    have the largest
    size
    */
    .container .title {
      font-size: 1.2em;
    }

    .container .value {
      font-size: 2em;
    }

    /*
    We style our header so that it occupies the entire upper 
    band of the screen, and
    also add a box-shadow so that we get a sense of it 
    popping out.
    */
    header {
      text-align: center;
      font-size: 2em;
      padding: 15px;
      box-shadow:0px 3px 3px -1px rgba(0,0,0,0.75);
      background-color: #efebe9;
    }

After adding CSS, open the app on your favorite browser:

Your dashboard looks much more pleasant now.