CSS text decoration in Hindi

📔 : CSS 🔗

text decoration का का मतलब है किसी text पर bottom या upper line के लिए color , style etc .. apply करना। CSS में text decoration के लिए दी गयी properties कुछ इस प्रकार हैं।

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration (shorthand)

CSS text-decoration-line

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

CSS text-decoration-line example

CopyFullscreenClose FullscreenRun
<!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>

CSS text-decoration-color

इस property का use define किये गए text decoration line का color define करने के लिए किया जाता है।

CSS text-decoration-color example

CopyFullscreenClose FullscreenRun
<!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>

CSS text-decoration-style

इस property का use define किये गए text decoration line की style define करने के लिए किया जाता है।

CSS text-decoration-style example

CopyFullscreenClose FullscreenRun
<!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>

CSS text-decoration-thickness

इस property का use define किये गए text decoration line की thickness (मोटाई) define करने के लिए किया जाता है।

CSS text-decoration-thickness example

CopyFullscreenClose FullscreenRun
<!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>

CSS text-decoration

यह 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

CSS text-decoration example

CopyFullscreenClose FullscreenRun
<!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>

Related Topics :

Rahul Kumar

Rahul Kumar

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

b2eprogrammers