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>
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook