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
- 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:
- CSS3 Generator
- CSS 3.0 Maker Border Radius
- css3.me
- CSS3 Generator
- Linear Gradients
- Ultimate CSS Gradient Generator
- CSS 3.0 Maker Gradient
CSS3 HSLA Color
You can use HSLA color right now if you follow the principle of progressive enhancement and also provide an RGB color.- W3C CSS HSLA Color Values
- Coding Colors Easily Using CSS3 hsl() Notation
- Colorhexa
- Work With Color: Color Converter
- CSS-Tricks HSLa Explorer
- CSS-Tricks Yay HSLA
- Named, HSL and RGB Color Chart
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.
Review Activities
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.