Best Hindi Tutorials

CSS in Hindi:Styling fonts

Styling fonts

  • Introduction to CSS font properties in Hindi
  • Setting font family with CSS in Hindi
  • Setting font style with CSS in Hindi
  • Setting font variant and other properties in Hindi

Introduction to CSS font properties

CSS के द्वारा आप fonts की size, style, weight, line-height आदि को change कर सकते है। इन सभी changes के लिए अलग से एक एक property बनायीं गई है। आइये इन properties के बारे में जानते है।

font-family property 

किसी भी HTML element के font की family set करने के लिए आप font-family property को यूज़ करते है। इस property की value के रूप में आप किसी भी font family का नाम देते है। निचे कुछ font families की list दी जा रही है जिन्हें आप value के रूप में इस्तेमाल कर सकते है।

  • Times New Roman
  • Verdana
  • Arial
  • Courier 
  • serif

आइये font family property को एक उदाहरण से समझने का प्रयास करते है।

CSS file

p
{
     font-family:Arial;
}

     

HTML file

<html>
<head>
<title>Font Family Property Demo</title>
</head>

<body>

<p>This is an example of CSS font-family property. This font will be shown in Arial.  </p>

</body>

</html>




font-style property 

CSS की मदद से font style change करने के लिए आप font-style property यूज़ करते है। इस property की values normal, italic और oblique हो सकती हैं। इसका उदाहरण निचे दिया जा रहा है। 

CSS file 

h1
{
    font-style:italic;
}



HTML file 

<html>
<head>
<title>Font style Property Demo </title>
</head>


<body>

<h1>This heading will be in italic</h1>
<p>This is an example of font style property and this is a paragraph</p>

</body>

</html>




font-variant property

इस property की मदद से आप font के variants define कर सकते है। इस property की मदद से आप fonts को capital letters में show कर सकते है। इस property की values normal और small-caps हो सकती है। इसका उदाहरण निचे दिया गया है। 

CSS file 

p
{
    font-variant:small-caps;



HTML file 

<html>
<head>
<title>font variant property example</title>
</head>

<body>

<p> This paragraph will be in capital letters. This is an example of font-variant</p>

</body>

</html>



font-weight property 

इस property से आप font का weight define कर सकते है। ये property define करती है की font कितना bold होगा। इस property की values bold, bolder और lighter हो सकती है। आप कोई custom font weight भी define कर सकते है। इसका उदाहरण आगे दिया गया है। 

CSS file 

table
{
   font-weight:600px;
}




HTML file 

<html>
<head>
<title>font-weight property</title>
</head>

<body>

<table>
<tr>
<td>Hello</td><td>World!</td>
</tr>
</table>

</body>

</html>




font-size property

इस property के द्वारा आप किसी भी HTML element के font का size change कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसका उदाहरण निचे दिया जा रहा है। 

CSS file

h1
{
  font-size:20px;
}

p
{
    font-size:12px;
}



HTML file

<html>
<head>
<title>font size property demo </title>
</head>

<body>

<h1> This is heading and its size will be more than paragraph</h1>

<p>This is a paragraph and its size will be less than heading</h1>

</body>

</html>

            


font-size-adjust property

इस property के द्वारा आप font की size को adjust कर सकते हैं। इस property के द्वारा font की height ज्यादा किया जा सकता है। इस property की value कोई भी number हो सकता है। इसका उदाहरण निचे दिया जा रहा है। 

CSS file 

p
{
   font-size-adjust:1;
}



HTML file 

<html>
<head>
<title>font size adjust property demo</title>
</head>

<body>

<p> This is a paragraph and its font height will be 1</p>

</body>

</html>



font-stretch property

इस property के द्वारा आप font को stretch कर सकते है। इस property की value normal, wider, narrower और condensed आदि हो सकती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है। 


CSS file 

p
{
     font-stretch:wider;
}





HTML file

<html>
<head>
<title>font stretch property demo</title>
</head>

<body>

<p>This font is stretched wider than normal fonts</p>

</body>

</html>


      DMCA.com Protection Status

 Leave a comment