HTML and CSS Reference
Figure 5-11 The main content area with a subtle gray box shadow and red inset box shadow.
Code Challenge: Add More Border and Box Shadow Styles
In styles.css, do the following:
1. Add a declaration of border: rgba(0,0,0,0.1) solid 5px; to the #newsletter rule set.
2. Add a declaration of border-radius: 8px; and border: 2px solid white; to the .button
3. Add a new rule set for #header nav > ul with the declarations border-radius: 20px; and
border: #ccc solid 1px; .
4. Add a new rule set for .showcase with a declaration of box-shadow: 0 -3px 8px 0 #ccc; .
Project files update (ch05-01): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
In the preceding chapter, you applied a background color to a couple of elements, as well as a background image to
the body of the page. CSS has many other properties to allow you to style a background.
Initial value: transparent | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
As you saw in the preceding chapters, you specify a background color using the background-color property
and can give it a variety of values, such as RGB, RGBA, HSL, HSLA, and color keywords: