CSS width Property
Introduction to CSS width Property
CSS width property द्वारा आप किसी भी element की width define कर सकते है। Width वह space होता है जितना कोई element webpage में horizontally occupy करता है।
सभी elements की default width अलग अलग होती है। जैसे की table की default width columns के content के अनुसार होती है और किसी पैराग्राफ की default width 100% होती है।
लेकिन यह जरुरी नहीं है की default width को ही आप use करें। CSS width property द्वारा आप अपनी आवश्यकतानुसार elements की कितनी भी width define कर सकते है।
उदाहरण के लिए आप किसी paragraph के text को quote के रूप में show करना चाहते है। लेकिन paragraph की default width 100% होती है। इस situation में आप width property द्वारा उस paragraph की width को अपने according कम define कर सकते है।
इसी प्रकार आप जिस भी element की जितनी भी width चाहते है इस property द्वारा define कर सकते है। केवल उन्हीं elements की width define नहीं की जा सकती है जिनका display inline होता है। उदाहरण के लिए आप element की width नहीं define कर सकते है।
Syntax of CSS width Property
निचे CSS width property का general syntax दिया जा रहा है।
width : auto | number-px(pixles) | number% ;
जैसा की आप ऊपर दिए गए syntax में देख सकते है width property की 3 possible values हो सकती है।
जब आप width property की value auto define करते है तो element की default width set की जाती है।
जब आप width property की value pixels में define करते है तो उतने ही pixels की width वह element cover करता है।
आप width property की value % में भी define कर सकते है। एक webpage की width 100% होती है। इसलिए आप किसी element की width 100% तक कुछ भी define कर सकते है।
Example of CSS width Property
CSS width property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>CSS width Property Demo</title>
<style>
p
{
width:30%;
border:1px solid #eeeeee;
}
</style>
</head>
<body>
<p>CSS is very powerful. HTML is used to build basic webpage structure. And CSS is used to design that structure.</p>
</body>
</html>
ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।
CSS max-width Property
CSS में width property के अलावा max-width property भी available है। यह property किसी भी element की maximum width define करने के लिए use की जाती है। जब आप किसी element के लिए यह property define करते है तो उस element की width इस property द्वारा define की गयी value से अधिक नहीं हो सकती है।
उदाहरण के लिए यदि आप किसी paragraph की maximum width 300 pixels define करते है तो उस paragraph की width किसी भी device पर 300 pixels से अधिक show नहीं होगी।
इस property को min-width property के साथ use किया जाता है। इन दोनों properties से किसी element की maximum और minimum width define की जाती है। ऐसा करने से वह element minimum width से लेकर maximum width तक के किसी भी device पर automatically adjust हो जाता है।
CSS में ये दोनों properties elements को responsive बनाने के लिए use की जाती है।
इस property की value भी आप pixels और percentage में दे सकते है। इस property को निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS max-width Property Demo</title>
<style>
p{
max-width:300px;
}
</style>
</head>
<body>
<p>Once was a man they called him mad but the more he gave the more he had.</p>
</body>
</html>
ऊपर दिए गए उदाहरण में चाहे किसी भी device पर देखा जाए लेकिन paragraph की width 300 pixel से अधिक show नहीं होगी। यह उदाहरण निचे दिया गया output generate करता है।
CSS min-width Property
किसी भी element की minimum width set करने के लिए min-width property use की जाती है। जब आप किसी element के लिए यह property define करते है तो उस element की width इस property द्वारा define की गयी value से कम नहीं हो सकती है।
इस property की value भी आप pixels और percentage में दे सकते है। इसे निचे उदाहरण द्वारा समझाया जा रहा है।
<html>
<head>
<title>CSS min-width Property Demo</title>
<style>
p
{
min-width:300px;
max-width:500px;
}
</style>
</head>
<body>
<p>No circumstances are bigger than you. The person who is willing to do it will find a way and the person who is not willing to do it will find an excuse.</p>
</body>
</html>
ऊपर दिए गए उदाहरण में paragraph की width 600 pixels से कम नहीं होगी। यह उदाहरण निचे दिया गया output generate करता है।
