Skip to Content

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

  • Page 195, Hands-On Practice 6.6
    In #3. b: The text should indicate 2em of left padding.
    In #3. e: The phrase "The nav a element selector." should only appear onece.

  • Page 203, Hands-On Practice 6.10
    Copy the chapter6/starter4.html file into your gradientch6 folder.
    In #5, the display should be similar to Figure 6.33.

  • Pacific Trails Resort Case Study
    • Page 206, Task 2, The body element Selector bullet point
      The second line of this bullet point begins with some extraneous text that ("linear gradient.") that should be removed.
      The term "liner gradient" should be "linear gradient".
    • Page 207, Task 3: Configure a div to display the coasthero.jpg image instead of the homehero.jpg image.

  • JavaJam Coffee HouseCase Study
    • Page 209, Task 2, In the final paragraph on the page replace "pacific.css" with "javajam.css".

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 Tricks

Visit CSS Tricks for more CSS3 resources and tutorials.


Share |