CSS के 40 इंटरव्यू प्रश्न और उत्तर | 40 important CSS interview, viva questions in hindi

CSS के प्रश्न और उत्तर, CSS interview questions and answers in hindi, [CSS mcq, viva questions], BCA के notes, computer notes, CSS notes, कंप्यूटर notes, CSS question pdf, CSS के mcq, CSS के नए प्रश्न, CSS for fresher, CSS for experienced, btech computer notes in hindi.

क्या आप भी एक CSS developer बनना चाहते है, और इसके लिए इंटरव्यू की तैयारियों में लगे हुए है? या फिर आप एक student है, जो अपने CSS के concept को काफी मजबूत करना चाहते है, और इसमें और अच्छा बनना चाहते है?

इन दोनों में से आप भी कोई भी क्यों ना हो,आज आप बिल्कल सही जगह पे आए है, जहाँ हम CSS से समन्धित कुछ ऐसे topics के बारे में जानने वाले है, जो अमूमन interview या किसी viva में पूछे जाते आए है।

यहां, हर एक interview के साथ ही बड़ी कंपनियों में भी पूछे जाने वाले वास्तविक प्रश्न मिलेंगे, जो आपकी तैयारियों को और भी ज्यादा मजबूत करेंगे। और साथ ही यहाँ हर एक प्रश्न के साथ उसके उत्तर भी दिए गए है, ताकि तैयारी के समय की बचत हो सके।

यह आर्टिकल आपको अपने CSS के कौशल को और ज्यादा साफ़ करने और अपना आत्मविश्वास वापस पाने और किसी नौकरी के लिए तैयार होने में काफी मदद करेगी। साथ ही यह उन छात्रों की भी काफी ज्यादा मदद करेगी जो, इस विषय में अपने ज्ञान को और बढ़ाना चाहते है। 

तो आइये अब हम जानते है,ऐसे ही प्रश्नों के बारे में जो experts और teacher द्वारा इस विषय में काफी ज्यादा पूछे जाते है –

CSS क्या होता है? (What is CSS in hindi)

CSS का मतलब “Cascading Style Sheet” होता है। यह एक लोकप्रिय कंप्यूटर स्टाइलिंग भाषा है, जिसका उपयोग HTML के साथ में वेबसाइटों को डिजाइन करने के लिए किया जाता है। साथ ही इसका उपयोग plain XML, SVG, और XUL सहित किसी भी XML documents के साथ भी किया जा सकता है। 

CSS की उत्पत्ति कहा से हुई है?

इसका origin, SGML (Standard Generalized Markup Language) है, और यह एक ऐसी भाषा है जो की markup भाषाओं को परिभाषित करती है।

CSS के विभिन्न रूप या प्रकार क्या हैं?

इसके कई विभिन्न तरह के प्रकार होते है, जैसे की –

• CSS1
• CSS2
• CSS2.1
• CSS3
• CSS4

CSS को किसी वेब पेज में कैसे integrate कर सकते है?

CSS को किसी वेब पेज में तीन तरीको से integrate किया जा सकता है, जो की है –

1. Inline method – इसका इस्तेमाल HTML documents में style sheet शीट डालने के लिए किया जाता है।

2. Embedded/Internal method – इसका इस्तेमाल किसी single document में एक unique style को जोड़ने के लिए किया जाता है।

3. Linked/Imported/External method – इसका इस्तेमाल तब किया जाता है, जब हम एक से अधिक pages में बदलाव करना चाहते हैं।

CSS के क्या-क्या फायदे हैं? 

इसको इस्तेमाल करने के कई सारे फायदे मौजूद है, जैसे की –

• सरल उपयोग (Accessibility)

• अच्छी बैंडविड्थ (Bandwidth)

• साइट-व्यापी स्थिरता (Site-wide consistency)

• पेज रिफॉर्मेटिंग (Page reformatting)

• प्रस्तुति से अलग सामग्री (Content separated from presentation)   आदि। 

CSS को इस्तेमाल करने की सीमाएं क्या हैं?

इसको इस्तेमाल करते समय हमें काफी सारी सीमओं को ध्यान में रखना पड़ता है, जिनके परे हम इसका इस्तेमाल नही कर सकते, जैसे की –

• यहाँ vertical control में limitations होते है। 

• इसमें किसी तरह के expressions नही होते है। 

• इसमें column का declaration नही कर सकते। 

• यहाँ selectors द्वारा ascending करना संभव नही होता। 

• इसमें dynamic behaviour के द्वारा Pseudo-class को control नही किया जा सकता। 

• यहाँ किसी specific text का styles, targeting, आदि संभव नही होता है।  आदि।

CSS frameworks क्या होते है?

यह पहले से मौजूद preplanned libraries होते है, जो की किसी वेब पेज की styling को और भी ज्यादा standard और compliant बनाते है। अक्सर इस्तेमाल होने वाले CSS frameworks है –

• Bootstrap
• Semantic UI
• Foundation
• Gumby
• Ulkit

CSS2 और CSS3 में क्या अंतर है?

CSS2 और CSS3 के बीच मुख्य अंतर यह है कि CSS3 को विभिन्न sections में divide किया गया है, जिन्हें की modules के रूप में भी जाना जाता है। और CSS2 के विपरीत, CSS3 modules कई ब्राउज़रों द्वारा support किये जाते हैं।

इसके अलावा, CSS3 में नए General Sibling Combinators शामिल हैं, जो की दिए गए elements के साथ sibling elements के मिलान के लिए जिम्मेदार होता हैं।

Embedded Style Sheet क्या होता है?

एंबेडेड स्टाइल शीट HTML के साथ उपयोग किया जाने वाली एक CSS स्टाइल specification method होता है। और हम इस स्टाइल element का इस्तेमाल करके संपूर्ण stylesheet को HTML documents में embed कर सकते हैं। 

उदहारण के लिए –

<style>     body {         background-color : linen;     }     h1 {         color : Purple;         margin-left : 70px;     }      </style>

Embedded Style Sheets के advantages क्या है?

इसे इस्तेमाल करने के काफी सारे फायदे है, जसी की –

• हम documents में एक से अधिक टैग के प्रकारों का इस्तेमाल करने के लिए अलग-अलग classes बना सकते है   

• किसी जटिल यानि की complex situations में styles को लागू करने के लिए, हम selector और grouping methods का उपयोग कर सकते हैं।

• साथ ही जानकारी को import करने के लिए हमे किसी भी अतिरिक्त डाउनलोड की आवश्यकता नहीं होती है।    आदि।

CSS selector किसे कहा जाता है?

यह एक तरह का स्ट्रिंग है, जो उन elements की पहचान करती है, जिन पर एक विशेष declaration लागू होती है। साथ ही इसे HTML documents और स्टाइल शीट के बीच एक कड़ी के रूप में भी जाना जाता है। और यह HTML elements के बराबर ही होती है। CSS में कई तरह के selector होते हैं, जैसे की –

• CSS Id Selector
• CSS Element Selector
• CSS Class Selector
• CSS Group Selector
• CSS Universal Selector  

CSS के कुछ style components के नाम बताए?

इसमें इस्तेमाल होने वाले कुछ style components है –

• Selector
• Value
• Property

Background और color दो अलग-अलग properties क्यों है?

इनके अलग-अलग होने के दो कारण है, जो की है –

1. यह स्टाइल शीट की legibility को बढ़ाता है। क्युकी background property खुद एक काफी जटिल संपत्ति है, इसीलिए इसे color के साथ नही जोड़ा जाता, ताकि इसकी जटिलता और ना बढ़े 

2. रंग एक inherited property होता है, जबकि background। जिस कारण इनका एक होना, काफी confusion पैदा कर सकता है।

CSS Opacity का क्या इस्तेमाल है?

इसका इस्तेमाल किसी element की transparency को specify करने के लिए किया जाता है। आसान भाषा में, यह किसी image की clarity को specify करता है। अगर इसे तकनीकी शब्दों में समझे तो, Opacity को उस डिग्री के रूप में परिभाषित किया जाता है जिस तक light को किसी object के माध्यम से यात्रा करने की अनुमति दी जाती है। 

उदहारण के लिए –

<style>     img.trans {         opacity: 0.7;         filter: alpha(opacity=70);  /* For IE8 and earlier */     }     </style>

Universal selector क्या होता है?

Universal selector किसी विशिष्ट यानि की specific प्रकार के elements का चयन करने के बजाय, किसी भी प्रकार के elements के नाम से मेल खाता है।

उदहारण के लिए –

<style>     * {        color : Purple ;        font-size : 30px;     }      </style>

किसी element के background color को specify करने के लिए किस property का इस्तेमाल किया जाता है?

Element के background color को specify करने के लिए “background-color” property का उपयोग किया जाता है। 

उदहारण के लिए –

<style>     h2,p{         background-color: #b0d4de;     }     </style>

Background में image repetition को control करने के लिए किस property का इस्तेमाल किया जाता है?

“background-repeat” property background में मौजूद image को horizontally और vertically repeat करता है। साथ ही कुछ images को केवल horizontally या vertically रूप से ही दोहराया जा सकता है।

उदहारण के लिए –

<style>     body {     background-image: url(“paper1.gif”);     margin-left:100px;     }     </style>

Background में किसी image के position को control करने के लिए किस property का इस्तेमाल किया जाता है?

किसी image के position को control करने के लिए “ background-position” प्रॉपर्टी का इस्तेमाल किया जाता है। इसके इस्तेमाल से बैकग्राउंड इमेज की शुरुआती position को परिभाषित किया जाता है। और default रूप से, background में किसी image को वेबपेज के top-left में रखा जाता है। हम किसी image को 5 स्थितियों में सेट कर सकते हैं, जैसे की –

• top
• center
• bottom
• right
• left

उदहारण के लिए –

background: white url(‘hello-morning.jpg’);   background-repeat: no-repeat;   background-attachment: fixed;   background-position: center;

Background में image scroll को control करने के लिए किस property का इस्तेमाल किया जाता है?

“background-attachment” प्रॉपर्टी का इस्तेमाल यह निर्दिष्ट करने के लिए किया जाता है, कि क्या background image फिक्स है, या ब्राउजर विंडो में बाकी पेज के साथ स्क्रॉल कर सकता है। साथ ही अगर हम बैकग्राउंड इमेज को fix करते हैं, तो ब्राउजर में scroll करने के दौरान इमेज move नहीं होती है। तो आइये अब जानते है, एक fix बैकग्राउंड image कैसे सेट किया जाता है। 

उदहारण के लिए –

background: white url(‘bbb.gif’);   background-repeat: no-repeat;   background-attachment: fixed;

CSS में ruleset का क्या उपयोग है?

Ruleset का उपयोग यह पहचानने के लिए किया जाता है, कि selectors को अन्य selectors के साथ जोड़ा जा सकता है या नही। इसके दो भाग होते हैं, जो की है –

• Selector – यह उन HTML element को indicate करता है, जिन्हें हम style करना चाहते है।

• Declaration Block – इसमें एक या एक से ज्यादा declarations हो सकते हैं, जिन्हें semicolon से अलग किया जाता है।

class selectors और id selectors में क्या अंतर होता है?

यहा class selector को एक overall ब्लॉक दिया जाता है, जबकि एक id selector अन्य elements से अलग केवल एक ही element लेता हैं।

Class selector का उदहारण है –

<style>     .center {         text-align: center;         color : purple;     }     </style>

Id selector का उदहारण है –

<style>     #para1 {         text-align : center;         color: blue;     }     </style>

inline, embedded और external style sheets में क्या अंतर होता है?

Inline – इनलाइन स्टाइल शीट का उपयोग कोड के केवल एक छोटे से टुकड़े को स्टाइल करने के लिए किया जाता है।

इसका syntax है –

<htmltag style=”cssproperty1:value; cssproperty2:value;”>  </htmltag>

Embedded – एंबेडेड स्टाइल शीट <head>…</head> टैग के बीच में रखी जाती हैं।

इसका syntax है –

<style>     body {         background-color : white ;     }     h1 {         color : blue;         margin-left : 70px;     }      </style>

External – इसका उपयोग केवल एक स्टाइल शीट को बदलकर अपनी वेबसाइट के सभी पेजों पर स्टाइल लागू करने के लिए किया जाता है।

इसका syntax है –

<head>     <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>     </head>

External style sheets को इस्तेमाल करने के क्या फायदे होते हैं?

इसे इस्तेमाल करने के काफी सारे फायदे मौजूद है, जैसे की –

• इसमें हम कई documents में दोबारा उपयोग करने के लिए classes बना सकते हैं।

• इसका उपयोग करके, हम एक फ़ाइल से कई documents की styles को नियंत्रित कर सकते हैं।

• साथ ही जटिल परिस्थितियों में, हम styles को लागू करने के लिए selectors और grouping methods का उपयोग भी कर सकते हैं।      आदि।

RWD क्या होता है?

RWD का मतलब “Responsive Web Design” होता है। इस तकनीक का इस्तेमाल किसी डिज़ाइन किए गए पेज को प्रत्येक तरह के स्क्रीन आकार और device, उदाहरण के लिए, मोबाइल, टैबलेट, डेस्कटॉप, लैपटॉप, आदि पर पूरी अच्छी तरह से display करने के लिए किया जाता है। साथ ही इसका उपयोग करने से हमे प्रत्येक तरह के device के लिए एक अलग पेज बनाने की आवश्यकता नहीं होती है।

logical tags और physical tags में क्या अंतर होता है?

• फिजिकल टैग्स को presentational मार्कअप कहा जाता है, जबकि लॉजिकल टैग्स किसी तरह के appearances के लिए बिलकुल बेकार होते हैं।

• फिजिकल टैग नए संस्करण हैं, दूसरी ओर, लॉजिकल टैग पुराने हैं, और यह content पर concentrate यही की ध्यान केंद्रित करते हैं।

CSS sprites के क्या फायदे होते है?

अगर किसी वेब पेज में बड़ी संख्या में images हैं, तो वे load होने में अधिक समय लेते हैं, क्योंकि प्रत्येक image अलग से एक HTTP request भेजती है। इसीलिए CSS sprites के concept का उपयोग वेब पेज के loading समय को कम करने के लिए किया जाता है, क्योंकि यह विभिन्न छोटी images को एक ही image में जोड़ देता है। यह HTTP requests की संख्या को कम करती है, जिस कारण और images के लोडिंग समय में काफी कमी आती है।

CSS Box model क्या होता है?

इसका उपयोग CSS के elements के डिजाइन और layout को परिभाषित करने के लिए किया जाता है।

CSS Box model के elements क्या-क्या है?

इसमें चार तरह के elements होते है, जो की है –

• Margin – यह border के आस-पास के area को हटा देता है। साथ ही यह transparent भी होता है।  

• Border –  यह padding के आस-पास के area को represents करता है।

• Padding – यह content के आस-पास के area को हटा देता है। साथ ही यह भी transparent होता है।  

• Content – यह text, images, आदि जैसे content को  represents करता है।

W3C का मतलब क्या होता है?

W3C का मतलब “World Wide Web Consortium” होता है। और इसका काम वर्ल्ड वाइड वेब (www) की जानकारी पहुंचाना होता है। साथ ही इसके अलावा यह web के लिए नए नियम और दिशानिर्देश को भी विकसित करते है।

Tweening किसे कहा जाता है?

• यह दो images के बीच intermediate फ्रेम बनाने की प्रक्रिया होती है।

• यह प्रक्रिया ऐसा आभास देता है, कि पहली image आसानी से दूसरी में evolved हो गई है।

• साथ ही यह सभी प्रकार के animations में उपयोग की जाने वाली एक महत्वपूर्ण method है।

• CSS3 में, Transforms (matrix, translate, rotate, scale) मॉड्यूल का उपयोग Tweening को प्राप्त करने के लिए किया जा सकता है।

visibility: hidden aur display: none में क्या अंतर है?

visibility: hidden किसी element को छुपाता है, लेकिन यह space occupy करता है और documents के layout को भी affect यानि की प्रभावित करता है।

उदहारण के लिए –

<!DOCTYPE html>   <html>   <head>   <style>   h1.vis {       visibility: visible;   }     h1.hid {       visibility: hidden;   }   </style>   </head>   <body>   <h1 class=”vis”>It is visible</h1>   <h1 class=”hid”>It is hidden</h1>     <p> Note – Second heading is hidden, but it still occupies space. </p>   </body>   </html>

वही display: none भी element को छुपाता है, लेकिन यह किसी तरह का space occupy नही करता है। साथ ही यह document के layout को भी affect नही करता है।

उदहारण के लिए –

<!DOCTYPE html>   <html>   <head>   <style>   h1.vis {       display: block;   }     h1.hid {        display: none;   }   </style>   </head>   <body>   <h1 class=”vis”>It is visible</h1>   <h1 class=”hid”>It is hidden</h1>     <p> Note – Second heading is hidden and does not occupy space. </p>   </body>   </html>

CSS के उपयोग से default property value को कैसे restore किया जा सकता है?

हालाँकि, ब्राउज़र द्वारा उपयोग किए जाने वाले  default values को restore करने का कोई आसान तरीका नहीं होता है। मगर सबसे नजदीकी उपाए  ‘initial’ property value का इस्तेमाल करना होता है, जो ब्राउज़र की default styles के बजाय default CSS के values को restores कर देता है।

FAQ (Frequently Asked Questions)

आशा करता हूं कि आज आपलोंगों को कुछ नया सीखने को ज़रूर मिला होगा। अगर आज आपने कुछ नया सीखा तो हमारे बाकी के आर्टिकल्स को भी ज़रूर पढ़ें ताकि आपको ऱोज कुछ न कुछ नया सीखने को मिले, और इस articleको अपने दोस्तों और जान पहचान वालो के साथ ज़रूर share करे जिन्हें इसकी जरूरत हो। धन्यवाद।  

Also read –

Html के 50 इंटरव्यू प्रश्न और उत्तर

JavaScript के 60 इंटरव्यू प्रश्न और उत्तर