CSS Interview Questions in Hindi
Q.1) CSS क्या है?
answer: web page design करने के लिए CSS (fullform है Cascading Style Sheet) का उपयोग होता है | एक आकर्षित और responsive website बनाने में css का बड़ा role होता है |
Q.2) CSS कि विशेस्ताएं क्या हैं ?
- CSS में कई सारी properties और उसकी value होती हैं | जिससे वेबसाइट को मनचाही खूबसूरती दी जा सकती है |
- CSS से पुरे वेबसाइट की formatting को maintain करना आसान होता है | जिससे time भी बचता है और वेबसाइट की डिजाईन जल्दी होता है | पूरी वेबसाइट design की कोड को एक अलग file में लिखी जा सकती है, जिससे फिर इसमें बदलाव लाना आसान होता है |
- CSS से डिजाईन की वेबसाइट Browser compatible होती है | इसके properties अलग अलग device और browser में support करती है | इसीलिए CSS से एक responsive website design बनायी जा सकती है |
Q.3) CSS कितने प्रकार के होतें हैं ? types of CSS क्या है ?
एक webpage में css तीन तरह से लगायें जा सकतें हैं इसीलिए css type 3 तरह के होती हैं और वो है:
- inline css
- internal css
- external css
- Inline css
inline css body tag में उपयोग होता है | जिस element को style देना है उस element में style attribute के साथ css लिखी जाती है | और इसे inline css कही जाती है |
उदाहरण:
<p style="color: blue;">Inline CSS</p>2. Internal CSS
internal css में css को <head> tag में define की जाती है | जिस webpage css लगाना है उस webpage में, सारे css को <style> tag के अंदर लिखी जाती है |
उदाहरण:
<head>
<title>Internal Stylesheet Type</title>
<style>
p{ font-size: 20px; color: maroon; font-family: Arial;}
h1{ color: blue; background-color: yellow;}
</style>
</head>3. External CSS
इसमें हम सारे css कोड को, मतलब सारे style को एक अलग फाइल में लिखतें हैं | और उस फाइल का link HTML Page में देते हैं | external stylesheet का link, <link> tag के जरिये <head> tag में बताया जाता है |
एक वेबसाइट में कई सारे वेबपेज होतें हैं | हर पेज में css style लिखने से काम का बर्डन भी बढेगा और ये समय भी ज्यादा लेगा | इसीलिए सारे जरुरत के css style को एक फाइल में लिख कर, उसका उपयोग हर वेबपेज में कर सकतें हैं | इससे पुरे वेबसाइट का style को मैनेज करना आसान हो जाता है |
और अगर बाद में डिजाईन में कुछ बदलाव लाना है, तो बस एक ही फाइल में बदलाव करना पड़ता है | External CSS File को .css extension के जरिये save की जाती है |
External CSS file को किसी webpage में add करने के लिए <link> tag में href attribute के जरिये लिखी जाती है |
External CSS File को webpage में डालने का syntax:
<head>
<link rel="stylesheet" href="cssfilename.css">
</head>Q.4) Advantages of CSS (CSS के क्या फायदे हैं?)
- CSS code से पुरे वेबसाइट को डिजाईन करना आसान होता है | सारे css code को एक file में रख कर उस file की reference सारे webpage में डाल सकतें हैं | जिससे फिर अगर future कोई बदलाव लाना है या extra feature डालना है तो सिर्फ css file में काम करना होगा | और ये अपने आप दुसरे pages में बदलाव ले आएगा |
- CSS में कई सारे नए features डाले गयें हैं जिससे एक responsive website आसानी से बनायी जा सकती है |
- कई सारे अच्छे features जैसे की animation, transition, effects आदि का उपयोग करके एक वेबसाइट को बहोत ही ख़ूबसूरत और आकर्षित बनायी जा सकती है |
- CSS code reusable होतें हैं | पुरे वेबसाइट में जो भी style देना है, उसे एक file में रख कर उस file का बार बार उपयोग की जा सकती है | जिससे पुरे webpage में एक जैसी design को maintain की जा सकती है | और ये website को एक consistance website बनाती है |
- CSS website की speed को बढ़ाने में भी मदद करती है |
- Design code और Development code अलग अलग file में होने की वजह से developers को website में काम करना और उसे maintain रखने में भी काफी मदद मिलती है |
Q.5) Limitations of CSS / Disadvantages of CSS
- Website Security एक मुख्य कमी है CSS की |
- CSS में ऐसे कई सारे features हैं जो सारे browsers को support नहीं करता |
- CSS के कई versions हैं और सारे version के अलग अलग features जो beginner और developer को काफी confuse करता है |
Q.6) CSS Selectors क्या है और कितने तरह के होतें हैं ?
CSS Selector एक webpage में किसी भी element को select करने के लिए और उसमे css लगाने के लिए उपयोग होता है |
element को किस basis पे चुना जा रहा है उसीके हिसाब से css selectors को कई category में बाटां गया है | और वो css selectors type हैं :
1) Simple Selectors
2) Combinators Selectors
3) Attribute Selectors
4) Pseudo-Class Selectors
5) Pseudo-Element Selectors
Q.7) CSS Simple Selector क्या है और कितने प्रकार के होतें हैं ?
Simple Selectors के जरिये html element को उसके id, class, name के जरिये चुना जाता है और उसे फिर style दिया जाता है | 5 तरह के Simple Selectors होतें हैं और वोह हैं:
- element selector
- id selector
- class selector
- universal selector(*)
- grouping selector
- Element Selector: html element या tag को select करके उसे style देने के लिए element selector का उपयोग किया जाता है |
- Id Selector: html element को उसके id के basis पे select करके style देने के लिए id selector का उपयोग होता है | id selector को लिखने के लिए #(hash) symbol से सुरु की जाती है |
- Class Selector: class selector के जरिये कई सारे अन्य elements को एक जैसी style दी जा सकती है | class के जरिये style लिखने के लिए class name को .(dot) operator के साथ लिखा जाता है | syntax: .className{property:value;}
- Universal Selector: ये एक global selector है | किसी webpage में सारे html elements के लिए कुछ style एक जैसी देनी हो तो universal selector का इस्तेमाल होता है | इस selector को *(Asterik) चिन्ह से सुरु किआ जाता है | syntax: * { property : value;}
- Grouping Seletor: कई सारे elements या tags को एक जैसी style देने के लिए group selector का उपयोग होता है | इसके लिए जिन tags को style करना है उन सबको एक साथ comma(,) से अलग करके लिखी जाती है और फिर style दर्शायी जाती है | उदाहरण: h1, h2, p { font-family:arial;}
Q.8) CSS Combinator Selector क्या है?
CSS में combinators के जरिये दो selectors के बिच relationship बनाने में इस्तेमाल किआ जाता है | Selectors के बिच combinator एक सिंबल के जरिये लिखा जाता है |
combinators selectors 4 तरह के होतें हैं
1) descendant selector(space)
2) child selector(>)
3) adjacent sibling selector(+)
4) general sibling selector(~)
Q.9) Attribute Selectors क्या है?
Attribute Selectors में किसी element को किसी खास attribute के जरिये या फिर attribute value के जरिये select किया जाता है |
Q.10) Pseudo Element Selectors क्या है?
Pseudo Element Selector का इस्तेमाल element की एक विशिष्ट भाग को style करने के लिए किया जाता है | जैसे किसी element के content का पेहला शब्द या पेहली line को style करना | या किसी content के बाद या पेहले content डालना ये सब special cases के लिए Pseudo Element Selectors का उपयोग होता है |
pseudo element को : : चिह्न के साथ लिखा जाता है |
उदाहरण- h2::first-letter {color:blue;}
CSS में 6 तरह के Pseudo Element Selectors को दर्शाया गया है और वो हैं:
- : :first-letter
- : :first-line
- : :selection
- : :placeholder
- : : after
- : :brfore
Q.11) CSS Id Selector vs Class Selector (Id Selector और Class Selector में अंतर क्या है?)
Id Selector से element को उसके id के जरिये select की जा सकती है | Webpage में हर element की एक unique id होती है | इसीलिए id selector के जरिये बस एक ही element select की जा सकती है | id selector को #(hash) symbol से लिखी जाती है |
उदाहरण: #header{color:blue;}
Class Selector से उन सारे elements को select की जा सकती है जिन्हें एक ही class name दी गयी हो | इस selector के जरिये एके से अधिक elements को select करके उसे style दी जा सकती है | class selector को .(dot) symbol से सुरु किया जाता है |
उदाहरण– .class1{border:2px solid blue;}
Q.12) visibility:hidden और display:none में क्या अंतर है ?
जब किसी element को visibility:hidden set करते हैं तब वो element, hide हो जाती है | पर webpage में जिस जगह पे वो element होती है वो जगह खाली दिखायी देती है |
पर जब किसी element की property display:none सेट की जाती है तब वो element hide हो जाती है | और webpage में उस element की खाली जगह भी दिखाई नहीं देती | उस जगह पे उसके बाद वाली element आ जाती है |
उदाहरण:
<html>
<head>
<title>display and visibility property demo
</head>
<body>
<p id="p1">first paragraph</p>
<p id="p2">second paragraph</p>
<p id="p3">third paragraph</p>
</body>
</html>उदाहरण में हमने 3 पैराग्राफ लिया है जिसमे दूसरी पैराग्राफ hide करेंगे और उसका output देखेंगें |
<style>
#p2{display:none;}
</style>output
2nd paragraph की display:none property set करने के कारण वो 2nd paragraph hide हो गयी और उस जगह उसके निचे के paragraph ने लेली |
<style>
#p2{visibility:hidden;}
</style>output
पर जब हमने visibility:hidden property set किया तब 2nd paragraph, hide तो हो गयी पर उसकी खाली जगह output में दिखाई दे रही है |
display:none property, element और उसकी जगह को पूरी तरह हटा देती है | पर visibility:hidden property, element को तो hide कर देती है पर उसकी जगह को नहीं हटाती है |
Q. 13) what is the default value of the position property? CSS में html element की default value क्या है?
CSS में html element की default value static होती है |
Q.14) CSS Box-Model क्या है?
Box Model, CSS में वेब पेज की layout और design के बारे में बताता है | एक वेबपेज में जितने भी element होतें हैं सबको एक box की तरह माना जाता है | Box Model के हिसाब से हर element की 4 properties होतें हैं और वो हैं:
- Content – content उस area को दर्शाता है जितने में actual content रहता है | और ये content कोई text या image हो सकता है |
- Padding – Content के चारो तरफ की खाली जगह को padding केहते हैं | जरुरत के हिसाब से content की padding को सेट किया जाता है | top, bottom, right, left padding property से content को padding दी जा सकती है |
- Border – Content के चारो तरफ की border को box model में border property कहा जाता है |
- Margin – Margin property, border के चारो तरफ की खाली जगह को दर्शाता है | element और browser की बिच की जगह को Margin कहा जाता है | top, bottom, right, left margin property से border की चारों तरफ की margin को set की जा सकती है |
CSS Box Model concept को सही से समझ कर एक webpage में element को सही position और layout दी जा सकती है |
Q.15) Block-Level Element और Inline Element में क्या अंतर है?
Block level elements हमेसा एक नयी line से सुरु होता है | वो हमेसा full-width लेता है | और इसमें height, width दोनों property लगा सकतें हैं | सारे heading tags, <p>, <div> tag block elements हैं |
inline elements नयी line से सुरु नहीं होती | इस element को जहां पे लिखो वो वहीँ से सुरु होगी | ये element हमेसा अपनी content के जितना जगह लेती है | इस element में height, width property नहीं लगा सकतें हैं | span tag, bold tag, image tag , input tag ये सब inline tag हैं |
Q.16) inline-block element क्या है?
inline-block elements dual behave करता है मतलब elements एक line पे सजी हुयी रहती है और box के हिसाब से दिखाई देती है |
elements जिनकी default display inline होती हैं, हम उसमे width, padding और margin नहीं लगा सकतें | क्योंकि width, padding और margin properties अच्छे से काम नहीं करेंगी | पर requirement ये हे की elements को एक line भी दिखाना है और width, padding और margin properties भी लगाना है |
ऐसे condition में उन element की display property inline-block की जाती है | inline-block property, block और inline property की combination है |
Q. 17) CSS overflow Property auto और scroll value में क्या अंतर है?
Auto
overflow property auto value से किसी element में scrollbar लगायी जाती है ताकि overflow हो रहे content को scroll करके देखि जा सके |
पर auto value में scrollbar तभी दिखती है जब content element के साइज़ से अधिक हो जाये | अगर content कम हो तो scrollbar नहीं दिखती |
Scroll
overflow property scroll value से भी element में scrollbar लगायी जाती है | पर इस value से scrollbar हमेसा दिखाई देती है चाहे content ज्यादा हो या कम हो |
यानि content अगर element के साइज़ से कम भी हो तब भी scrollbar दिखाई देती है मगर वो scrollbar disable mode में रहती है | और content ज्यादा हो जाए तो scrollbar enable हो जाती है |
Q. 18) Background में image की position को कोनसी property के जरिये control की जा सकती है?
background-position property के जरिये background में image की position को control की जा सकती है |
Q. 19) Fixed Vs Sticky Position | CSS Fixed और Sticky Position में क्या अंतर है?
Fixed
जब हम किसी element की position को fixed सेट करतें हैं तो वो वेबपेज में fix रहता है | Fixed property से आप किसी भी element को वेबपेज के किसी भी position में fixed करके दिखा सकतें हैं | वो कभी भी browser में scroll नहीं हो सकता है |
Sticky
sticky position property से set element को browser relative और fixed दोनों की तरह बर्त्ताव करता है | मतलब sticky element browser में scroll हो सकता है पर जब वो viewport से बाहार जाने लगता है तब वो अपनी position value के हिसाब से fixed हो जाता है |
CSS3 Interview Questions and Answers in Hindi
Q 1: CSS3 की क्या विशेषताएं है?
Answer: CSS3, CSS का advanced version है | CSS3 में कई सारे नए features डाले गयें जिससे website को और ज्यादा अच्छा और responsive बनाई जा सकती है |
CSS3 की विशेषताएं है:
- CSS3 सारे नए ब्राउज़र को support करता है |
- CSS3 में कुछ नए color option दी गए हैं जिससे website के look और ज्यादा आकर्षित की जा सकती है | और वो colors हैं : rgba, hsla, hsl और gradient |
- CSS3 में website में animation डालना आसान हो गया है |
- कई तरह की transition effect feature CSS3 में डाले गएँ हैं |
- border-radius property से border के corner को आसानी से round की जा सकती है | पेहले अलग image या extra coding से border को मनचाहे shape दी जाती थी | पर border-radius feature अब काम को आसान कर दीया है |
- CSS3 box-shadow property के जरिये element में shadow लगा सकता है या हटा सकता है |
Q 2: z-index property क्या है?
Answer: z-index हमेसा position property के साथ इस्तेमाल होती है | position property value जब relative, absolute या fixed होती है उसके साथ z-index property लगायी जाती है |
z-index property से elements की position को ऊपर से निचे या फिर निचे से ऊपर की और ले जाया जा सकता है | जैसे stack order में रखी चीजें ऊपर से निचे सेट होती है, वैसे ही z-index से elements को ऊपर से निचे सजाई जाती हैं |
z-index की default value 0(zero) होती है | इसे positive या negative दोनों तरह की value दी जा सकती है | element जिसकी z-index value ज्यादा होगी वो ऊपर रहेगी | और जिस element की z-index value कम होगी वो निचे रहेगी |
उदाहरण: #div2{ background-color:green; position:absolute; top:20px; left:20px; z-index:2; }
Q 3: CSS3 Box Shadow Property क्या है?
Answer: किसी element में shadow लगाने के लिए box-shadow property का इस्तेमाल होता है |
Syntax: box-shadow: x-offset y-offset blur spread color;
उदाहरण: box-shadow: 3px 3px 6px 2px red;
Q 4: CSS3 में background के लिए क्या नयी properties add की गयीं हैं?
Answer: CSS3 में background के लिए जो नयी properties डालीं गयीं हैं वो है |
1) background-origin : background origin property से हम background image को कहाँ से लगाना है वो बतातें हैं | जब हम किसी वेबपेज या किसी container के अंदर background-image लगातें हैं | तब वो image, padding area यानी padding box से सुरु होता है |
पर background-origin से image की सुरुआत को बदल सकतें हैं | इस property से background image को content के साथ सुरु कर सकतें हैं या फिर border के साथ सुरु कर सकतें हैं |
इस property की 3 values हैं और वो है: 1. padding-box , 2.border-box, 3.content-box
2) background-clip: background clip property का इस्तेमाल background image या फिर background color की origin को बताने के लिए किआ जाता है | इसकी default value है border-box |
background clip property, border origin property की तरह काम करता है | पर ये border image और border color दोनों के लिए काम करता है |
3) background-size: background-size property से background image की चौडाई(width) और लम्बाई(height) को सेट कर सकतें हैं | और इस value को %(percentage) या pixel से दी जा सकती है |
css background-size को और 3 values से भी सेट की जा सकती है और वो values हैं : 1.auto, 2.contain, 3.cover
Q 5: Border-Image Property in CSS क्या है ?
Answer: border-image property के जरिये किसी भी element के border में image लगायी जा सकती है | इस property ग्रुप में अन्य properties हैं :
- border-image-source: इस property से image की पाथ सेट की जाती है | path को url के अंदर लिखी जाती है |
- border-image-slice: image की कितने हिस्से को border में लगानी है उसे इस property से बताई जाती है |
- border-image-width: border-image की width यानि चौडाई को सेट करने के लिए इस property का उपयोग होता है | इस property से border में लगने वाली image की size को control कर सकतें हैं |
- border-image-outset: इस property से element की content और उसकी border की दुरी को नियंत्रित की जाती है |
- border-image-repeat: ये property image को कैसे border में सेट करनी है वो बताती है | इसकी 3 values होती है और वो है : stretch, repeat, round |
Q 6: CSS Flexbox और Grid में क्या अंतर है?
| Flexbox | Grid |
| Flexbox के जरिये one-dimesional layout बनाना आसान होता है | यानि इसमें elements को linear arrangement दे सकते हैं | elements को row के हिसाब से या फिर column के हिसाब से सजा सकतें हैं | | Grid के जरिये two-dimesional layout बनाना आसान होता है | Grid में elements को row और column दोनों में arrange कर सकतें हैं | |
| Flexbox के जरिये responsive webpage बनाना आसान होता है वो भी बिना ज्यादा position और float property, css में लगाये | | Grid के जरिये complex और organized layout बनाने में मदद मिलती है | |
| container को flexbox बनाने के लिए display:flex; लिखनी पड़ती है | | container को grid बनाने के लिए display:grid; लिखनी पड़ती है | |
Q. 7) flex container के लिए क्या properties हैं?
Answer: css3 में flex container के लिए 7 properties हैं और वो हैं:
- display -> ये mandatory property है | किसी container को flexbox बनाने के लिए display:flex लिखना जरुरी है |
- Flex-direction -> ये property direction बताता है की किस तरह flex items, container में रहेंगे |
- Flex-wrap ->ये property container के अंदर items की wrapping control करने के लिए उपयोग में आता है |
- Flex-flow -> flex-flow, flex-direction और flex-wrap दोनों properties को एक साथ लिखने का shorthand है |
- Justify-content -> इस property के जरिये main axis के direction में items की alignment करने में मदद मिलती है |
- Align-items-> इस property के जरिये cross axis के direction में items की alignment करने में मदद मिलती है |
- Align-content->इस property के जरिये cross axis के direction में items की alignment करने में मदद मिलती है | पर इसमें items को multi-line में होना जरुरी है | इस property से items के बिच में space distribution भी किया जा सकता है |
Q. 8) flex items के लिए क्या properties हैं?
Answer: css3 में flex items के लिए 6 properties हैं और वो हैं:
- Order -> इस property से items की order को control किया जाता है | ये integer value लेता है और items जिन्हें एक जैसी order value दी जाती है वो same order में render होतें हैं |
- Flex-grow -> इस property से items को container में extra space लेने मदद मिलती है | इस property का default value 0(zero) होता है |
- Flex-shrink -> इस property से item को जरुरत के हिसाब से shrink करा सकतें हैं | इस property का default value 1 होता है | इसका मतलब है जब जरुरत पड़ी तो सारे items shrink हो सकतें हैं |
- Flex-basis -> flex items की initial width set करने के लिए इस property का उपयोग होता है | default value इसकी auto set होती है | इसकी value pixel, percetage या फिर दुसरे relative units से दी जा सकती है |
- Flex -> ये flex-grow, flex-shrink, flex-basis का shorthand property है |
- Align-self -> individual items की alignment को control करने के लिए इस property का उपयोग होता है |
Q. 9) CSS में Gradients क्या है और कितने प्रकार के हैं?
Answer: किसी element की background को ज्यादा आकर्षित बनाने के लिए CSS Gradient का इस्तेमाल होता है | CSS Gradients से दो या दो से अधिक colour mix करके smooth transition बनाया जाता है |
gradient function को background, background-image और border-image property में इस्तेमाल किया जा सकता है | इसमे colors को ,(comma) से separate करके लिखी जाती है |
CSS3 में Gradient 3 प्रकार के होतें हैं :
- Linear Gradient – Linear Gradient में colours एक side से दुसरे side में transition होता है | यानि colour line wise mix होके transition लाता है |
- Radial Gradient – radial gradient में color transition, center से या फिर किसी point से सुरु होता है |
- Conic Gradient – Conic Gradient में पेहली color से gradient एक point से बनना सुरु होता है | और पूरा gradient बनाकर उसी point पे आखिरी color से ख़तम करता है |
Q.10) CSS में multiple background images कैसे लगा सकतें हैं?
Answer: background-image property के जरिए एक से अधिक background image लगा सकतें हैं |इसके लिए images और उसके url को , (comma) से अलग करके background-image property में लिखी जाती है|
Syntax: { background-image : url(‘image1’), url(‘image2’), url(‘image3’) };
background-image property में जिस sequence में url लिखी जाएगी वैसे ही image एके के बाद एक सेट होगी | यानि image1 पेहले दिखेगी उसके पीछे image2 और उसके पीछे image3 दिखेगी |
उदाहरण:
<style>
body{
background-image : url('D:\\CSSExample\\images\\flower.jpg'),
url('D:\\CSSExample\\images\\lili.jpg'),
url('D:\\CSSExample\\images\\whiteflower.jpg');
background-repeat: no-repeat;
}
</style>
Q.11)Media Queries क्या होता है?
Answer: media query एक css3 का property है | इसके जरिये अलग अलग screen-resolution के लिए एक website को अलग अलग style दिया जा सकता है | ये website को responsive बनाने में मदद करता है |
media query के जरिए अलग device dimensions के लिए CSS Classes define करके, हर एक खास dimension पे कोई खास CSS लगा सकतें हैं |
Syntax:
@media <mediatype> and (dimension){
.....
}
उदाहरण
@media screen and (max-width:1100px)
{
body{
background-color: blue;
}
}