The text-decoration property
This CSS property is very useful in decorating ext. It helps in styling text in a way that text gets highlighted.It is used with inline elements.
Values it takes:- There are five values that this property takes. They are given below:-
- none: none defines no text-decoration,it means text will be normal. It is default value of text-decoration property.
- overline: draws a horizontal line above the text.
- underline: draws a horizontal line below the text
- line-through: draws a horizontal line through the text
- blink: it makes the text blink, it is valid value but most browsers ignore it.
Example: Below is the illustration of text-decoration property,have a look at this:-
HTML Code:
<body>
<body>
<p class="none" > This is default style of text.</p>
<p class="blink"> This paragraph has a blink effect on text.</p>
<p class="overline" > This is overline text.</p>
<p class="underline" > This is underline text.</p>
<p class="line-through" >This is lined-through text.</p>
<p class="blink"> This paragraph has a blink effect on text.</p>
<p class="overline" > This is overline text.</p>
<p class="underline" > This is underline text.</p>
<p class="line-through" >This is lined-through text.</p>
</body>
CSS Code :
p.none{
text-decoration: none;
}
p.inherit{
text-decoration: blink;
}
Result:
CSS Code :
p.none{
text-decoration: none;
}
p.inherit{
text-decoration: blink;
}
p.overline{
text-decoration: overline;
}
text-decoration: overline;
}
p.underline{
text-decoration: underline;
}
text-decoration: underline;
}
p.line-through{
text-decoration: line-through;
}
text-decoration: line-through;
}
Try it Yourself!
Comments
Post a Comment
If you have any doubt, ask here