Skip to Content

Basics of Web Design
HTML5 & CSS   Fifth Edition

Chapter 6 – More CSS Basics

You'll add to your CSS skill set in this chapter. You will be introduced to the CSS box model and configure margin, border, and padding. You'll also explore new CSS3 properties to round corners, apply shadow, and configure color with opacity. Resource websites and chapter links are listed below.

The Box Model

The Box Model

  • Content
    Text and web page elements in the container

  • Padding
    Area between the content and the border

  • Border
    Area between the padding and the margin

  • Margin
    Determines the empty space between the element and adjacent elements

Explore CSS layout techniques at Little Boxes

Browser Support of CSS Properties

CSS3 Code Generators

There are several handy CSS3 code generators that provide an easy way to quickly experiment with settings for CSS3 properties including border-radius, box-shadow, text-shadow, gradients and more. Several are listed below:


You can use HSLA color right now if you follow the principle of progressive enhancement and also provide an RGB color.

Chapter Updates

Pacific Trails Resort Case Study

  • Figures 6.33, 6.34, and 6.35 incorretly show a white margin on the left and right of the large hero image on each page, which is not part of the case study instructions. This area of the pages should look like Corrected Figures.
  • On page 213, the code  background-color: 100% 100% should be background-size: 100% 100%

Questions or Comments

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

Basics of Web Design 5th Edition

Review Activities

Review Games

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