HTML and CSS Reference
In-Depth Information
Figure 4-46
Outline design styles
No outline is displayed
Outline is dotted
Outline is dashed
Outline is a single solid line
Creates the effect of an outline carved into the page
Creates the effect of an outline raised from the page
Creates the effect of an outline embedded in the page
Creates the effect of an outline coming out of the page
Outline is a double line
All of the outline styles can be combined into the shorthand property
outline: width color style ;
just as you did with the margin, padding, and border styles. Note that there are no separate
outline styles for left, right, top, or bottom. The outline always surrounds an entire element.
Outlines often are used to highlight interesting or important page content. Another use
is to diagram your layout as an aid in page design. Because outlines take up no space,
you can use them to mark the size and location of every page element by using the fol-
lowing style rule:
* {
outline: 1px solid red;
Adding an Outline
• To add an outline around an element, use the style property
outline: width color style ;
where width , color , and style are the outline width, outline color, and outline style,
You'll try this now with the Cycle Pathology page to highlight the placement of each
of the page elements you've displayed thus far.
Search WWH ::

Custom Search