Step 7

More styling!

Let's put a border around the "output" (the stuff we shall display once the zzz button is clicked).
Wrap the content after zzz button in a <div></div> tag:

<div>
    <p>It takes the average human 14 minutes to fall sleep.</p>
    <p>
    If you head to bed right now, you should try to wake up at one of the
    following times:
    </p>
    <p>
    12:15 AM<br />
    1:45 AM<br />
    3:15 AM<br />
    4:45 AM<br />
    6:15 AM<br />
    7:45 AM
    </p>
    <p>A good night's sleep consists of 5-6 complete sleep cycles.</p>
</div>

HTML <div> tag defines a division or a section in an HTML document. You can think of it as a container for other HTML elements - which is then styled with CSS or manipulated with JavaScript.

Now add the following to the end of the <style> section (right before the closing tag </style>):

div {
    border: 3px solid white;
    margin-top: 20px;
}

The border and margin-top properties are descriptive. The px is short for pixel, a unit used to express length.
Save the index.html file; refresh the index page in the browser.
There are several different units for expressing length. For example, try the following:

div {
    border: 3px solid white;
    margin: 1em 5em 1em 5em;
}

You may want to look up the CSS margin property and CSS units.

The <div> is a common element. If we were to expand this web app in the future, we would likely have many more div elements. The above styling will be applied to all div elements. It would be forward-thinking to ensure the styling is applied only to the div that contains the "output."

Add the following class attribute to the <div> element.

<div class="output">

Update the div CSS selector to .output

.output {
    border: 3px solid white;
    margin: 1em 5em 1em 5em;
}

Classes allow CSS (and Javascript) to select and access specific elements. Note the style selector for a class starts with a dot as in .output.

Save the index.html file; refresh the index page in the browser.