Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 5 247

2. After that style rule, insert another style rule that sets the

The current page background color is a dark blue. This background color needs to be

lightened, and the font-family needs to be set to Cambria with a backup font of Times

New Roman and final fallback of serif font. The font color needs to be set to match

the Contoso standard blue. Your body style rule should be modified to match the

following.

body {

background-color: hsl(255, 95%, 95%);

font-family: Cambria, 'Times New Roman' , serif;

color: #0068AC;

}

3. To add a new folder called Images to the project, right-click the project in the Solution
   Explorer window. Click Add, choose New Folder, and name the folder Images.


4. To add the image from the Resource folder, in the Solution Explorer window, right-click
   the Images folder that you just added.


5. Click Add, choose Existing Item, and select the ContosoLogo.png file that is located in
   the Chapter05 Resources folder.


6. After the body style rule, insert a header style rule that sets the height to 100 pixels
   and set the background image to the ContosoLogo.png file.


7. Set the background-repeat to no-repeat and set the top margin to 10 pixels by adding
   the header selector with the curly braces, right-clicking in the style rule, and clicking
   Build Style. When the Modify Style window is displayed, set the properties.
   The completed style rule should look like the following.
   header {
   height: 100px;
   background-image: url('../Images/ContosoLogo.png');
   background-repeat: no-repeat;
   margin-top: 10px;
   }


8. Add a style rule based on the element id equal to headerText. Set the position to abso-
   lute, set the top to 0 pixels, and set the left to 80 pixels, which will locate the header
   text to the right of the Contoso logo.


9. Set the width to 100 percent and set the margin top to 10 pixels as follows.
   #headerText {
   position: absolute;