CSS in Hindi – Introduction to CSS Width Properties

  • CSS width property in Hindi 
  • max-width property in Hindi
  • min-width property in Hindi 

Width Property

अगर आप css सिख रहे है | तो width property आपको अच्छे से सिख लेनी चाहिए क्योकि बिना width property के हम html tags के width को control नही कर सकते है |

जैसा की हम जानते है | html मे हर tags का एक पर्टिकुलर width होता है जो by default apply होता है | हमारे tags के ऊपर for example table, iframe, embed आदि |

वैसे तो html मे बहुत सारे tags है | जिनका width by default apply होता है | तो इन सब tags को control करने के लिए ही width property का use करते है |

उदाहरण के लिए आप किसी table को create करते है और table का width increase करना चाहते है तो आप width property का use कर सकते है और हा table का width by default होता है लेकिन आपके content पर depend करता है की वह word कितना लम्बा है या फिर वह कितने कालमस मे बनाया गया है |

width property की value या तो pixel मे दी जाती है या percentage मे दी जाती है | एक value और है जो हम width property के साथ use करते है | उसका नाम auto है जब आप auto value का use करते है तो web page पर width property automatic हो जाती है यानी आपके browser या windows के हिसाब से खुद ही अपना width adjust कर लेता है |

Syntax of width Property

width : auto | numbers-px | numbers-% ;

ऊपर दिया गया syntax width property को represent करता है जिसकी value pixel या percentage या auto मे दी जाती है |

Pixel – जब आप pixel मे value देते है तो उतना ही width apply होता है जितना आप pixel मे value दिये है और जादा तर value pixel मे दी जाती है |

Auto – यह value browser या windows के हिसाब से खुद ही width adjust कर लेता है | आपका content कितना भी लम्बा हो |

( % ) Percentage – जब आप percentage value का use करते है तो आपके page के हिसाब से width apply होती है | क्योकि percentage मे only 100% तक ही value दिया जा सकता है |

Example

<html>
<head>
<style type="text/css">
div { width: auto; border: 2px solid red; }
#img2 { width: 500px; }
#img3 { width: 50%; }
</style>
</head>
<body>
<div>Easy Hindi Tutorials is a best blog of computer programming</div>
<img src="1.jpg" id="img2">
<img src="1.jpg" id="img3">
</body>
</html>

max-width Property 

CSS मे width property के साथ साथ max-width property भी use की जाती है | इस property का use किसी भी html element की maximum width define करने के लिए किया जाता है |

अगर आप max-width property का use करते है तो आप जितना width max-width property के अन्दर use करेंगे उससे जादा width browser पर नही show होगी |

उदाहरण के लिए मान लीजिये 500px width define किये है तो वह element किसी भी device पर 500px से नाही कम होगी और नाही जादा होगी |

इस property का use min-width property के साथ किया जाता है इन दोनों property के द्वारा maximum और minimum width define की जाती है |

इन दोनों properties की value pixel या percentage मे दी जाती है | अब निचे दिये गये code को देखे और समझे |

<html>
<head>
<style type="text/css">
#p1 { max-width: 100px; }
#p2 { max-width: 10%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>

min-width Property

Css मे min-width property का use minimum width define करने के लिए किया जाता है | और min-width property मे use किया गया width minimum width होता है | यानी आपका device अगर बड़ा है तो भी उतना ही width show होगा जितना हम min-width property मे define किये है |

min-width property का भी value pixel या percentage मे दी जाती है | अब निचे दिये गये example को देखे और समझे |

<html>
<head>
<style type="text/css">
#p1 { max-width: 100px; min-width: 400px; }
#p2 { max-width: 10%; min-width: 50%; }
</style>
</head>
<body>
<p id="p1">Easy Hindi Tutorials is a best blog of computer programming</p>
<p id="p2">Easy Hindi Tutorials is a best blog of computer programming</p>
</body>
</html>
CSS List Properties CSS Height Properties
Previous Next