HTML and CSS Reference
In-Depth Information
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
rule set.
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
Backgrounds
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.
background-color
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:
body {
