CSS Icons

CSS text decoration in Hindi

by

HTML में लिखा normal text बहुत ही boring होता है इसे attractive बनाने के लिए CSS के text decoration property का use करते है। इसके मदद से आप text में colour, style और बहुत सी चीजे दे सकते है। इसके साथ कुछ और भी property का use किया जाता है जो इस प्रकार है।

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

आइये इसे एक – एक करके समझने का प्रयास करते है।

CSS text-decoration-line

CSS में इस property का use किसी भी text के ऊपर, निचे और बीचोबीच एक लाइन देने के लिए करते है।

Syntax 
element{
 text-decoration-line: none;
 text-decoration-line: under;
 text-decoration-line: overline;
 text-decoration-line: line-through;
 text-decoration-line: initial;
 text-decoration-line: inherit;
}
Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-decoration-line Example by Technalay </title>
  </head>
  <body>
  	<p style="text-decoration-line:underline;">Hello, this is <b>underline</b> example by Technalay</p>
  	<p style="text-decoration-line:overline;">Hello, this is <b>overline</b> example  by Technalay</p>
  	<p style="text-decoration-line:line-through;">Hello, this is <b>line-through</b> example  by Technalay</p>
  	<p style="text-decoration-line:initial;">Hello, this is <b>initial</b> example  by Technalay</p>
  	<p style="text-decoration-line:inherit;">Hello, this is <b>inherit</b> example  by Technalay</p>
  </body>
</html>
HTML
Preview
CSS text-decoration-line Example

Hello, this is underline example



Hello, this is overline example



Hello, this is line-through example



Hello, this is initial example



Hello, this is inherit example



CSS text-decoration-color

CSS में इस property का use किसी भी text line को colour define करने के लिए किया जाता है। 

Example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS text-decoration-line Example by Technalay </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">Hey , this is <b>underline</b> example</p>
      <p id="p2">Hey, this is <b>overline</b> example</p>
      <p id="p3">Hey, this is <b>line-through</b> example</p>
  </body>
</html>
HTML
Preview
CSS text-decoration-line Example by Technalay

Hey , this is underline example



Hey, this is overline example



Hey, this is line-through example



CSS text-decoration-style

CSS में इस property का use किसी भी text line को style देने के लिए किया है। 

Example
<!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">Hey , this is <b>unaderline, double style</b> example</p>
  	<p id="p2">Hey , this is <b>underline, dashed style</b> example</p>
  	<p id="p3">Hey , this is <b>overline, dotted style</b> example</p>
  	<p id="p4">Hey , this is <b>overline, wavy style</b> example</p>
  </body>
</html>
HTML
Preview
CSS text-decoration-style Example

Hey , this is unaderline, double style example



Hey , this is underline, dashed style example



Hey , this is overline, dotted style example



Hey , this is overline, wavy style example



CSS text-decoration-thickness

CSS में इस property का use किसी भी text line के मोटाई को set करने के लिए किया जाता है। 

Example
<!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-thickness:2px;
      }
      #p2{
        text-decoration-line:underline;
        text-decoration-color:red;
        text-decoration-thickness:4px;
      }
      #p3{
        text-decoration-line:overline;
        text-decoration-color:blue;
        text-decoration-thickness:5px;
      }
      #p4{
        text-decoration-line:overline;
        text-decoration-color:blue;
        text-decoration-thickness:px;
      }
    </style>
  </head>
  <body>
  	<p id="p1">Hey , this is <b>unaderline, thickness:2px </b> example</p>
  	<p id="p2">Hey , this is <b>underline, thickness:4px </b> example</p>
  	<p id="p3">Hey , this is <b>overline, thickness:5px </b> example</p>
  	<p id="p4">Hey , this is <b>overline, thickness:3px </b> example</p>
  </body>
</html>
HTML
Preview
CSS text-decoration-style Example

Hey , this is unaderline, thickness:2px example



Hey , this is underline, thickness:4px example



Hey , this is overline, thickness:5px example



Hey , this is overline, thickness:3px example



Leave a comment