Lesson Twenty Three: How it Works - CSS
-
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.
-
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.
-
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.
-
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