HTML and CSS Reference
In-Depth Information
Figure 4-46
Outline design styles
Value
Description
none
No outline is displayed
dotted
Outline is dotted
dashed
Outline is dashed
solid
Outline is a single solid line
groove
Creates the effect of an outline carved into the page
ridge
Creates the effect of an outline raised from the page
inset
Creates the effect of an outline embedded in the page
outset
Creates the effect of an outline coming out of the page
double
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,
respectively.
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.
