Text decoration and shadow
Add effects to text with text-decoration and text-shadow.
Text decoration
To draw a line under, over or through text, use the text-decoration property. Common values: underline, overline, line-through and none.
To remove the default underline of links, write text-decoration: none;. Color and style can be added: text-decoration: underline red wavy; draws a wavy red underline.
Text shadow
To add a shadow to text, use the text-shadow property. The value has four parts: horizontal offset, vertical offset, blur radius and color.
For example, text-shadow: 2px 2px 4px rgba(0,0,0,0.5); gives the text a semi-transparent black shadow shifted 2 pixels right and down, with a 4 pixel blur.
A blur of 0 gives a sharp-edged shadow; larger values spread more softly.
Exercise Add decoration and shadow to the heading
Open a block for the h1 selector. Add these two declarations inside: text-decoration: underline; and text-shadow: 2px 2px 4px rgba(0,0,0,0.5);.
Show example solution
h1 {
text-decoration: underline;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}Test yourself
-
Which value removes a link's underline?
- text-decoration: none;
- text-decoration: underline;
- text-decoration: overline;
- text-decoration: line-through;
Show answer
text-decoration: none; — Correct. text-decoration: none; removes all line effects.
-
Underline the heading
h2 { text-decoration: ____; }Show answer
h2 { text-decoration: underline; } -
Match each text-shadow part to its meaning
- First number
- Horizontal offset
- Second number
- Vertical offset
- Third number
- Blur radius
- Last value
- Shadow color
-
Which text-shadow value gives the softest shadow?
- text-shadow: 2px 2px 0px gray;
- text-shadow: 2px 2px 1px gray;
- text-shadow: 2px 2px 2px gray;
- text-shadow: 2px 2px 8px gray;
Show answer
text-shadow: 2px 2px 8px gray; — Correct. A blur radius of 8 pixels gives the widest spread; the shadow is softest.