HTML and CSS Reference
Code Challenge: Add More Colors to the Page
1. Add a rule set with the selector #newsletter and the declarations color: white ; background-
color: #00ACDF; .
2. Add a rule set with the selector #footer and the declarations background-color: #ccc;
background-image: url(“../images/bg-footer.jpg”); .
3. Add a rule set with the selector .showcase .button:hover and the declaration background-
color: #00ACDF; .
4. Below the rule set input[type=”submit”][class=”button”] , add a new rule set with the select-
or input[type=”submit”][class=”button”]:hover and the declaration background-
color: #d4326d; .
Project files update (ch04-01): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
A unit is a measurement consisting of a number immediately followed by a unit identifier, such as 5cm or 20%, used
for properties such as height , width , and font-size . Only when a unit of length is 0 can the unit identifier be
omitted. There are numerous types of unit; percentages, lengths, and time to name a few.
By using a percentage, you tell the browser how much space an element should take up, relative to its containing ele-
ment. To change the width of the content area:
1. In styles.css, add the following:
2. Save styles.css.
At present, the content area is contained in the div with ID of main , which has a default width of 100%. This
means the main area will fill the full size of the viewport (the area in which the page is rendered). Now that you've
given the content area a width of 65%, try resizing your web browser to see that area expand and shrink to always be
65% of the viewport width.
Using percentages is a great way to make an element's size relative to another element's size. When making a re-
sponsive layout, you rely on percentages to allow for the changing of a web page's structure so it best fits the device
on which it is being viewed.