Skip to Content

Basics of Web Design
HTML5 & CSS3 Fourth 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 CSS3 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:

CSS3 HSLA Color


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

Chapter Updates

  • No updates have been reported for this chapter.

Questions or Comments

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

4th Edition Book Cover

Review Games

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

 

CSS Tricks

Visit CSS Tricks for more CSS3 resources and tutorials.


Share |