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 के बारे में जानते है।
HTML file
font-family property
किसी भी HTML element के font की family set करने के लिए आप font-family property को यूज़ करते है। इस property की value के रूप में आप किसी भी font family का नाम देते है। निचे कुछ font families की list दी जा रही है जिन्हें आप value के रूप में इस्तेमाल कर सकते है।
आइये font family property को एक उदाहरण से समझने का प्रयास करते है।
CSS file
- Times New Roman
- Verdana
- Arial
- Courier
- serif
आइये font family property को एक उदाहरण से समझने का प्रयास करते है।
CSS file
p
{
font-family:Arial;
}
|
<p>This is an example of CSS font-family property. This font will be shown in Arial. </p>
|
font-style property
CSS की मदद से font style change करने के लिए आप font-style property यूज़ करते है। इस property की values normal, italic और oblique हो सकती हैं। इसका उदाहरण निचे दिया जा रहा है।
CSS file
h1
{
font-style:italic;
}
|
HTML file
font-variant property
इस property की मदद से आप font के variants define कर सकते है। इस property की मदद से आप fonts को capital letters में show कर सकते है। इस property की values normal और small-caps हो सकती है। इसका उदाहरण निचे दिया गया है।
CSS file
HTML file
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
<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;
}
|
HTML file
font-size-adjust property
इस property के द्वारा आप font की size को adjust कर सकते हैं। इस property के द्वारा font की height ज्यादा किया जा सकता है। इस property की value कोई भी number हो सकता है। इसका उदाहरण निचे दिया जा रहा है।
CSS file
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
HTML file
<html>
<head>
<title>font stretch property demo</title>
</head>
<body>
<p>This font is stretched wider than normal fonts</p>
</body>
</html>
|
No comments:
Post a Comment