Skip to Content

Basics of Web Design
HTML5 & CSS3 Second Edition

Chapter 7 – Page Layout Basics

You've already configured centered page layout with CSS; we'll add to your toolbox of CSS page layout techniques in this chapter. You'll explore floating and positioning elements with CSS. You'll be introduced to a technique for configuring images called CSS sprites. You will also learn to use CSS to add interactivity to hyperlinks with pseudo-classes.

CSS Tutorials


A sprite is an image file that contains multiple small graphics that are configured as background images for various web page elements using the CSS background-image, background-repeat, and background-position properties. The single image saves download time because the browser only needs to make one http request for the combined image instead of many requests for the individual smaller images. Check out the following resources for more informaiton on sprites:

Chapter Updates

  • Page 215 #3 The last line in the code sample should be:
    #floatright { float: right; margin: 10px; }
  • JavaJam Case Study
    Page 225, Task 2
    The h3 element selector's background color was configured in Chapter 5. So, instead of adding a new style declaration, change the existing background-color style declaration to configure the value #E2D2B0 for the backround color.

Questions or Comments

The author would like to hear from you!
Feel free to complete the contact form with your questions or comments.

Book Cover

Review Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

CSS Resources

Share |