CSS in Hindi

How to Create Responsive Text Using CSS in Hindi

इस आर्टिकल में हम आपको How to Create Responsive Text Using CSS in Hindi के बारे में बताने जा रहे है.

How to Create Responsive Text Using CSS in Hindi
How to Create Responsive Text Using CSS in Hindi

Responsive Text बनाना ज्यादा मुश्किल काम नही है इसके लिए आप font-size में इस्तेमाल होने वाली value का पता होना जरुरी है. अगर आपको CSS font के बारे में डिटेल में पता है तो आप इस tutorial को continue कर सकते है और अगर आपको इसके बारे में ज्यादा पता नही है तो आप हमारे CSS Font Tutorials in Hindi जो की part 12 है उसको चेक करके इसके बारे में पूरी जानकारी ले सकते है.

How to Create Responsive Text Using CSS in Hindi

  • हम CSS को 3 तरीके से CSS को अपने डॉक्यूमेंट में add कर सकते है .
  • हम सबसे पहले यहाँ पर inline CSS का example आपको बताएँगे

Example Code

<!DOCTYPE html>
<html>
 <head>
    <title>Responsive Text</title>
 </head>
    <body>

          <p style="font-size: 5vw">This text is <b>Responsive</b></p>
         <p style="font-size: 5em">This is not <b>Responsive</b></p>

    </body>
</html>

Without Browser Resize

Responsive Text without browser resize
Responsive Text without browser resize

With Browser Resize

Responsive Text Browser Resize
Responsive Text Browser Resize

तो इस प्रकार हम किसी text को responsive बना सकते है.

Internal Method for Responsive Text

अब हम आपको internal method बताएँगे. इस कोड को आप अपने editor में लिख कर भी चेक कर सकते है.

Example Code

<!DOCTYPE html>
<html>
<head>
     <title>Responsive Text</title>
     <style type="text/css">
            .res_text {
                       font-size: 5vw;
                   }
   </style>
</head>
     <body>

       <p class="res_text">This text is <b>Responsive</b></p>
      <p>This is not <b>Responsive</b></p>

      </body>
</html>

External CSS Method For Responsive Text

Css File

.res_text {
                       font-size: 5vw;
                   }

HTML File

<!DOCTYPE html>
<html>
<head>
     <title>Responsive Text</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
     <body>

       <p class="res_text">This text is <b>Responsive</b></p>
      <p>This is not <b>Responsive</b></p>

      </body>
</html>

इस प्रकार आप किसी भी text को responsvie बना सकते है.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close