Lesson Twenty Three: How it Works - CSS

  1. body { color: maroon;
    background-color: tan;
    margin: 40px;
    padding: 20px;
    line-height: 1.6em;
    font-size: large;
    font-family: Georgia, "Times New Roman", Times, serif; }
    All of these items refer to the entire body of the HTML file: color indicates maroon for all text, background color indicates that the entire body background will be tan, margin indicates a 40 pixel margin around the entire body section of the page, padding indicates an additional 20 pixels to the inside margin of the body, line-height provides additional space between the lines of text, font-size establishes the default size of the body text, and font-family establishes the default font for the body of the page.

  2. input { color: maroon;
    background-color: tan;
    padding: 2px;
    font-size: 100%;
    border: 2px solid maroon;
    margin: 10px;
    width: 150px; }
    This section overrides the body design when the browser determines the specific design to use for the input elements. color and background-color are still maroon and tan, however you can easily experiment with new colors using these items, padding establishes a 2 pixel margin inside the input border, font-size keeps the font large by using 100% of the large font established in the body element, however the size of the font can quickly be adjusted to larger or smaller by altering the percentage, border establishes a 2 pixel solid maroon border around the input elements (the select buttons), margin establishes a 10 pixel margin on the outside of the border, width establishes a 150 pixel width for the input elements.

  3. div { border: 2px solid maroon;
    margin: 5px; }
    Divs will surround each section of questions in order to emphasize that each group of questions is a separate part of the overall quiz. The border establishes a 2 pixel solid maroon border around each set of divs. The margin provides a 5 pixel separation from the body border.

  4. p { font-size: 120%; }
    The font-size of 120% increases the size of the body large font by 20%.

Lesson Twenty Four: How it Works - JavaScript