If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
text decoration का का मतलब है किसी text पर bottom या upper line के लिए color , style etc .. apply करना। CSS में text decoration के लिए दी गयी properties कुछ इस प्रकार हैं।
CSS में text-decoration-line property का use text पर line decorate करने के लिए किया जाता है , इसकी कई values हैं जो कि इस प्रकार हैं।
element{
text-decoration-line: none|underline|overline|line-through|initial|inherit;
} Hello, this is underline example
Hello, this is overline example
Hello, this is line-through example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-line Example</title>
</head>
<body>
<p style="text-decoration-line:underline;">Hello, this is <b>underline</b> example</p>
<p style="text-decoration-line:overline;">Hello, this is <b>overline</b> example</p>
<p style="text-decoration-line:line-through;">Hello, this is <b>line-through</b> example</p>
<p style="text-decoration-line:initial;">Hello, this is <b>initial</b> example</p>
<p style="text-decoration-line:inherit;">Hello, this is <b>inherit</b> example</p>
</body>
</html>इस property का use define किये गए text decoration line का color define करने के लिए किया जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-line Example</title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-color:green;
}
#p2{
text-decoration-line:overline;
text-decoration-color:red;
}
#p3{
text-decoration-line:line-through;
text-decoration-color:blue;
}
</style>
</head>
<body>
<p id="p1">Hello, this is <b>underline</b> example</p>
<p id="p2">Hello, this is <b>overline</b> example</p>
<p id="p3">Hello, this is <b>line-through</b> example</p>
</body>
</html>इस property का use define किये गए text decoration line की style define करने के लिए किया जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-style Example</title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-color:green;
text-decoration-style: double;
}
#p2{
text-decoration-line:underline;
text-decoration-color:red;
text-decoration-style:dotted;
}
#p3{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-style:dashed;
}
#p4{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-style:wavy;
}
</style>
</head>
<body>
<p id="p1">Hello, this is <b>unaderline, double style</b> example</p>
<p id="p2">Hello, this is <b>underline, dashed style</b> example</p>
<p id="p3">Hello, this is <b>overline, dotted style</b> example</p>
<p id="p4">Hello, this is <b>overline, wavy style</b> example</p>
</body>
</html>इस property का use define किये गए text decoration line की thickness (मोटाई) define करने के लिए किया जाता है।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-thickness Example</title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-thickness:2px;
text-decoration-style: double;
}
#p2{
text-decoration-line:underline;
text-decoration-thickness:5px;
text-decoration-style:dotted;
}
#p3{
text-decoration-line:overline;
text-decoration-thickness:4px;
text-decoration-style:dashed;
}
#p4{
text-decoration-line:underline;
text-decoration-thickness:2px;
text-decoration-style:wavy;
}
</style>
</head>
<body>
<p id="p1">Hello, this is <b>unaderline, double style</b> example</p>
<p id="p2">Hello, this is <b>underline, dashed style</b> example</p>
<p id="p3">Hello, this is <b>overline, dotted style</b> example</p>
<p id="p4">Hello, this is <b>overline, wavy style</b> example</p>
</body>
</html>यह text decoration के लिए shorthand property है , इस property का use करके आप text-decoration-line , text-decoration-color , text-decoration-style , text-decoration-thickness सभी style को एक साथ apply कर सकते हैं।
element{
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;
}text-decoration : overline red solid 2px
text-decoration : underline green dashed 3px
text-decoration : underline rebeccapurple wavy 2px
text-decoration : line-through hotpink double 2px
text-decoration : underline yellowgreen solid
text-decoration : underline brown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration Example</title>
</head>
<body>
<p style="text-decoration:overline red solid 2px">text-decoration : <b>overline red solid 2px</b></p>
<p style="text-decoration:underline green dashed 3px">text-decoration : <b>underline green dashed 3px</b></p>
<p style="text-decoration:underline rebeccapurple wavy 2px">text-decoration : <b>underline rebeccapurple wavy 2px</b></p>
<p style="text-decoration:line-through hotpink double 2px">text-decoration : <b>line-through hotpink double 2px</b></p>
<p style="text-decoration:underline yellowgreen solid ">text-decoration : <b>underline yellowgreen solid</b></p>
<p style="text-decoration:underline brown">text-decoration : <b>underline brown</b></p>
</body>
</html>