5.1 Assume that the size of the base font on a system is 12 points.
- How big is a 36-point font in ems? 3 ems
- How big is a 9-point font in ems? .75 ems
- How big is a 24-point font in picas? 2 picas
- How big is a 12-point font in inches? 1/6 inch
- How big is a 1-inch font in picas? 6 picas
5.2 Fill in the blanks in the following statements:
- Using the link element allows authors to use external style sheets in their pages.
- To apply a CSS rule to more than one element at a time, separate the element names with a(n) comma.
- Pixels are a(n) relative-length measurement unit.
- The hover pseudoclass is activated when the user moves the mouse cursor over the specified element.
- Setting the overflow property to scroll provides a mechanism for containing inner content without compromising specified box dimensions.
- span, div is a generic inline element that applies no inherent formatting.
- Setting property background-repeat to repeat-y tiles the specified background-image vertically.
- To begin a block of styles that applies to only the print media type, you use the declaration @media print, followed by an opening curly brace ({).
- The text-indent property allows you to indent the first line of text in an element.
- The three components of the box model are the padding, border and margin.
5.3 Write a CSS rule that makes all text 1.5 times larger than the base font of the system and colors the text red.
5.4 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.
5.5 Write a CSS rule that gives all h1 and h2 elements a padding of 0.5ems, a dashed border style and a margin of 0.5ems.
5.6 Write a CSS rule that changes the color of all elements containing attribute class="green-Move" to green and shifts them down 25 pixels and right 15 pixels.
5.7 Make a layout template that contains a header and two columns. Use divs for each layout component, and use float to line up the columns side by side. Give each component a border and/or a background color so you can see where your divs are.
5.8 Add an embedded style sheet to the XHTML document in Fig. 5.5. The style sheet should contain a rule that displays h1 elements in blue. In addition, create a rule that displays all links in blue without underlining them. When the mouse hovers over a link, change the link's background color to yellow.
5.9 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 http://jigsaw.w3.org/css-validator/. Note that some warnings may be unavoidable, but your CSS should have no errors.
