Web Design with HTML and CSS

194

Self study

Web Design with HTML and CSS Digital Classroom

Self study

1 In the Creating a style for the active page ex ercise, you learned how to add IDs to the body

tag of your Home, About Us, and Contact pages. Create a fully functional navigation bar

by following the directions in that exercise to add similar code for the Recipes, Submit a

Recipe, and Forum pages.

2 Try experimenting with diff erent background images and applying them to your

sidebar and maincontent columns. Although this requires an image editor such as Adobe

Photoshop for best results, you can use the background graphic supplied for you in your

images folder. Add the following code to your #sidebar rule:

background-image:url(images/sidebar_bg.png);

background-repeat:repeat-x;

background-color:#EAB8C3;

Note that the background-color property seamlessly matches the color in the

sidebar_bg.png graphic, thereby creating a transition between the image and the sidebar

background color. This eff ect is often used to keep your graphic fi les small. In addition,

this technique avoids the problem of predicting how tall a column needs to be.

Review

Questions

1 What is the diff erence between an HTML inline image and a CSS background image?

Indicate the optimal conditions for use each?

2 What is the purpose of the a:hover property in CSS?

3 What is the default behavior of an element that is absolutely positioned?

Answers

1 An HTML inline image is an image on your page that originates from the

HTML <img> tag. A CSS background image is an image that originates from the

background-image property in CSS. Inline images are most suited for important

content within a page (such as a product image). CSS background images are generally

reserved for decorative elements (such as a pattern).

2 The a:hover property allows you to choose a style for a hyperlink that is triggered

when a user rolls over, or “hovers” over a link.

3 If you add the position:absolute property to an element in CSS, you can specify

positional values for it, (most often top and left). These values will always position the

object based on the corners of the browser page.