Step 5

  • Let's change the presentation of content by aligning to center! Add the following style attribute to the <body> tag.
<body style="text-align: center;">
  • We can further change the text and background colors.
<body style="text-align: center; 
    color: #7FDBFF; 
    background-color:#001f3f;"
>
  • Save the index.html file; refresh the index page in the browser. Notice the changes to the presentation of content.

#7FDBFF and #001f3f are hexadecimal values representing colors. I selected these by inspecting the elements on sleepyti.me website. This sort of inspection can be done using your browser's developer tools. You can also use various HTML color picker tools for such purposes.

The <style> element

  • Suppose we write elaborate styling for a commonly used HTML element like the <p> element (which represents a paragraph). We many have several dozens <p> elements. We would have to rewrite the same elaborate (lengthly) style attribute for each <p> element. This way of writing styles can easily become unwieldy.

  • A better way is to collect all the inline styles into what is called an internal Cascading Style Sheets or CSS using a <style> element.

  • Add the following to the end of <head> element (right before the closing tag </head>):

<style>
    body {
        text-align: center; 
        color: #7FDBFF; 
        background-color: #001f3f;
    }
</style>

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 fourteen minutes to fall asleep.</p>
    <p>If you head to bed right now, you should try to wake up at one of the following times:</p>
    <p>11:44 PM or 1:14 AM or 2:44 AM or 4:14 AM or 5:44 AM or 7:14 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 <style> section (right before the closing tag </style>):
div {
    margin: 1em 5em 1em 5em;
    border: 3px solid white;
}

  • The border property is descriptive; you may want to look up the CSS margin property and CSS units.

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

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".

<div class="output">
  • Update the div CSS selector to .output
.output {
    margin: 1em 5em 1em 5em;
    border: 3px solid white;
}

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.