HTML and CSS Reference
In-Depth Information
Code Challenge: Add More Colors to the Page
In styles.css:
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
Units
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.
Percentages
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:
#content {
width: 65%;
}
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.
