Chapter 5 Assignments

Section 5.1 Assume that the size of the base font on a system is 12 points.

1. How big is a 36-point font in ems?
Answer: 3 ems.

2. How big is a 9-point font in ems?
Answer: 0.75 ems.

3. How big is a 24-point font in picas?
Answer: 2 picas.

4. How big is a 12-point font in inches?
Answer: 1/6 inch.

5. How big is a 1-inch font in picas?
Answer: 6 picas.

Section 5.2 Fill in the blanks in the following statements:

1. Using ________ the element allows authors to use external style sheets in their pages.
Answer: link.

2. To apply a CSS rule to more than one element at a time, separate the element names with a(n) ________.
Answer: comma

3. Pixels are a(n) ________-length measurement unit.
Answer: relative.

4. The ________ pseudoclass is activated when the user moves the mouse cursor over the specified element.
Answer: hover.

5. Setting the overflow property to ________ provides a mechanism for containing inner content without compromising specified box dimensions.
Answer: scroll.

6. ________ is a generic inline element that applies no inherent formatting and ________ is a generic block-level element that applies no inherent formatting.
Answer: span, div.

7. Setting property background-repeat to ________ tiles the specified background-image vertically.
Answer: repeat-y.

8. To begin a block of styles that applies to only the print media type, you use the declaration ________ print, followed by an opening curly brace ({).
Answer: @media

9. The ________ property allows you to indent the first line of text in an element.
Answer: text-indent

10. The three components of the box model are the ________, ________ and ________.
Answer: padding, border, margin

Section 5.3 Answer the question

Write a CSS rule that makes all text 1.5 times larger than the base font of the system and colors the text red.
Answer:
body {
    color: red;
    font-size: 150%;
}

Section 5.4 Answer the question

Write a CSS rule that places a background image halfway down the page, tiling it horizontally. The image should remain in place when the user scrolls up or down.
Answer:
body {
    background-image: url('myBackgroundImage.gif');
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position-y:50%;
}

Section 5.5 Answer the question

Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a dashed border style and a margin of 0.5 ems.
Answer:
h1,h2{
    padding:0.5em;
    border:dashed;
    margin:0.5em;
}

Section 5.6 Answer the question

Write a CSS rule that changes the color of all elements containing attribute class = "greenMove" to green and shifts them down 25 pixels and right 15 pixels.
Answer:
.greenMove{
    color:green;
    padding-top:25px;
    padding-left:15px;
}

Section 5.9 Answer the question

Make a navigation button using a div with a link inside it. Give it a border, background, and text color, and make them change when the user hovers the mouse over the button. Use an external style sheet. Make sure your style sheet validates at . Note that some warnings may be unavoidable, but your CSS should have no errors.
Answer: