CSS में टेक्स्ट सजावट की शैली सेट करें

टेक्स्ट सजावट की शैली सेट करने के लिए text-decoration-style प्रॉपर्टी का उपयोग करें। आप निम्न मानों का उपयोग कर सकते हैं:

text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      span { 
        text-decoration: line-through; 
        text-decoration-color: blue; 
      } 
      .demo2 { 
        text-decoration: underline; 
        text-decoration-style: double; 
        text-decoration-color: red; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>विवरण</h1> 
    <p class="demo">परीक्षा केंद्र <span>XYZ कॉलेज</span> ABC कॉलेज के पास।</p> 
    <p class="demo2">परीक्षा सुबह 11 बजे शुरू होती है।</p> 
  </body> 
</html>

आउटपुट

एक और उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .demo { 
        text-decoration: overline; 
        text-decoration-color: blue; 
        text-decoration-style: wavy; 
      } 
      .demo2 { 
        text-decoration: overline; 
        text-decoration-style: dashed; 
        text-decoration-color: red; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>विवरण</h1> 
    <p class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</p> 
    <p class="demo2">परीक्षा सुबह 11 बजे शुरू होती है।</p> 
  </body> 
</html>

आउटपुट

व्याख्या: text-decoration-style लाइन की शैली नियंत्रित करता है: solid (डिफ़ॉल्ट), double (दो लाइनें), dotted (बिंदु), dashed (डैश), wavy (लहरदार)। text-decoration शॉर्टहैंड सभी उप-प्रॉपर्टीज़ सेट करता है।