The Text-Decoration Property: Web Design Series: CSS Part 16


The text-decoration property

Let’s work with the text-decoration property in CSS a little more. The main purposes for this property are to add styles to text using lines or to take away any text decoration completely. See the images below for some examples of text-decoration usage. We are also going to incorporate CSS classes and the span element into this lesson to get you comfortable with using them. P.S. Disregard the line break tags (<br />). They are only there to make the displayed web page more visible for you.

text-decoration property code

text-decoration property display 1

We have quite a bit to go over here. We will start with the CSS. Our first two CSS rules are class rules named “overline” and “line-through“. They are recognized as class rules because of the period before the class name. If you remember, classes are recognized by a ( . ) and id’s by a number symbol( # ). The names of our two global class rules are exactly what style they add when applied to an element. They each contain a text-decoration property with the appropriate value. Finally, we have a p rule with a few declarations. Because we are not specific with the selector, this p rule will affect every p element on our page. In this rule, we add a font color, font size, line-height, and a text-decoration property with a value of underline.

Back to our example. In the HTML, we have one h4 and two p elements. We apply the class of line-through in the opening h4 tag. Next, we use a span element that applies a class of overline to a couple of words in our first paragraph. We did nothing to the second paragraph, but it will still get all of the styles that we specified in the p rule.

Looking at the displayed web page now, we see the results of the different ways we used the text-decoration property. Our h4 heading has a strike-through effect, the text in both paragraphs takes all of the styles that we specified in the p rule, and finally, the span element that we used to add the class of overline to the words SOME SPACE is displaying a line over the top of the two words. Remember that a span is used to format or style small pieces of content. In the example, we chose to affect two words. Anything that is in between the opening and closing span tags will be affected.

Now that we have used the text-decoration property in a few different ways, we are going to remove text decoration from an element. See the final example for this lesson below.

text decoration none code

text decoration none display

In the example above, we have added another CSS rule with a selector of This rule will affect p elements with a class of no-underline. All that we have this class doing is taking away any text-decoration values by using the value none. In the HTML code, we apply the class of no-underline to our second p element, and that’s where the new CSS rule is used. Take note that our second paragraph still takes all of the styles from the p rule, but the text-decoration: underline; is removed from it because we used the class and CSS rule.

That finishes up the text-decoration lesson. Some other things that you should be more familiar with are the line-height property, classes, and spans. As always, thanks for reading, I’ll see you next time.

Source Code

<!DOCTYPE html>
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
line-height: 1.5;
font-size: 20px;
color: #00ff00;
text-decoration: none;
<p>This is just some text to take up <span class="overline">SOME SPACE</span><br />
on the page. This is just some text to take up some<br />
space on the page.</p>
<p class="no-underline">Some more text for in a second paragraph.</p>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: