We discussed text decoration in the HTML section. This page is an update for some of the text decoration properties with CSS. Other text properties will be discussed in other lessons.
The declaration form for text-decoration is:
text-decoration: value
The values for text-decoration are:
underline, overline, line-through and none.
Typically, text-decoration is used for only a few words at a time for special effect, so it will often be used in a style statement with the span tag:
<span style="text-decoration:underline">text</span>
text-decoration: underline underlines some text. In HTML, we would use: <u>text</u>.
<p>This paragraph has
some <span style="text-decoration: underline">underlined words</span> to emphasize them.</p>
This paragraph has some underlined words to emphasize them.
text-decoration: overline places a line over some text.
Sample code
<p>This paragraph has
some <span style="text-decoration: overline">overlined words</span> to emphasize them.</p>
This paragraph has some overlined words to emphasize them.
WebTV does not support text-decoration: overline.
PC Screensot (white page)
PC Screensot (black page)
text-decoration: line-through places a line through some text. You might use it to indicate a change in text or thought. This decoration replaces<strikethrough>text</strikethrough> in HTML.
<p>I thought <span style="text-decoration: line-through">better of</span> twice about going to the party.</p>
I thought better of twice about going to the party.
Example - cross an item off of a listtext-decoration: none defines normal text. This is the default for normal text, so why use it?
The anchor tag underlines text as a default. But if you don't want your links underlined, you can use text-decoration: none.
Sample code
<a style="text-decoration:none" href="http://www.htmlcookbook.com/html/">This link is not underlined.</a>
Looks like: This link is not underlined.
Some of the text decorations we've discussed replace HTML tags. We can make CSS rules for those HTML tags that get replaced and then use the tags themselves. We can also make classes to save on code in our pages.
Sample stylesheet
/* text decoration - tags */
u {
text-decoration: underline
}
s, strikethrough {
text-decoration: line-through
}
a:visited {
text-decoration: none
}
/* text decoration - classes */
.text_under {
text-decoration: underline
}
.text_over {
text-decoration: overline
}
.text_none {
text-decoration: none
}
.text_through {
text-decoration: line-through
}
Use text-decoration on a page. Post your page.
Happy coding!
Gnubee
