Adding Presentational Styles - CSS3 Foundations - page 69

The border styles page can be found in the project files ch05-00, named border-styles.html .
You'll be able to see the border after you specify a border-width ...I promise!
border-width
Initial value: medium | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
The border-width property sets the thickness of a border.
1. In styles.css, underneath the border-style declaration, add the following:
border-width: 1px;
2. Save styles.css.
Now finally, you can see a thin border applied around the main content area.
For border-width , you can specify all values of length as well as the keywords thin , medium , and thick .
border (Shorthand)
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
When CSS properties share similarities, you can use one shorthand declaration in place of multiple declarations.
The border property is a shorthand way of writing the three properties you just added. Go ahead and change those
declarations into just one declaration:
1. In styles.css, in the #main rule set, remove the following declarations:
border-color: #ccc;
border-style: solid;
border-width: 1px;
2. Add the shorthand border declaration:
border: #ccc solid 1px;
3. Save styles.css.
The border property requires three values (in any order), separated by spaces. By adding this shorthand declara-
tion, you achieve the same effect using less code and less time!