Basics of Web Design
HTML5 & CSS   Sixth 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 using CSS to add nteractivity to hyperlinks with pseudo-classes and use CSS to style navigation in unordered lists. You will configure a single-page website using hyperlinks to named fragments. You will build many page layout skills in this chapter.. Resource websites and chapter links are listed below.

CSS Tutorials

• CSS-Tricks CSS Snippets
• 20 Fresh CSS3 Tutorials
• Brainjar CSS Positioning Tutorial
• Max Design - Listamatic
• CSS Sprites
• W3C CSS Learning List
• Front-end Development Tutorials
• 6 Keys to Understanding...

Sprites

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:

• CSS Tricks CSS Sprites
• The Mystery of CSS Sprites
• CSS Sprites Generator
• CSS Sprite Generator
• Sprite Cow
• SpritePad

More CSS Resources

• QuirksMode
• MeyerWeb
• CSS-Tricks

Chapter Updates

• No updates have been reported for this chapter.

Questions or Comments

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