[Top 50] CSS Interview Questions and Answers in Hindi 2023

आज हम आपके लिए CSS interview questions और उनके answers ले कर आये हैं जो की अधिकतर web designers और developers से interview या exam में पूछे जाते हैं।

हमने इसे हिंदी में सिर्फ इसलिए तैयार किया है ताकि इसे आसानी से समझा जा सके। यदि आपका कोई इंटरव्यू नही है तो भी आप इसे पढ़ सकते हैं इससे आपको CSS के बारे में और अधिक जानकारी मिलेगी। हमें उम्मीद है CSS से जुड़े ये सारे सवाल और जवाब आपके जरूर काम आयेंगे।

CSS Interview Questions in Hindi

1. CSS क्या है?

CSS का full form Cascading Style Sheets है। इसका उपयोग वेब डिजाईन में web page को design करने के लिए किया जाता है। CSS के जरिये HTML element पर style apply किया जाता है। CSS के जरिये कई सारे web pages के layout को एक साथ control किया जा सकता है।

और अधिक जानकारी के लिए पढ़ें: CSS क्या है? इसके क्या फायदे हैं?

2. CSS को अपने web page पर कितने तरीके से apply किया जा सकता है?

आप तीन तरीके से CSS को अपने पेज पर integrate कर सकते हैं:

  1. Inline method
  2. Internal method
  3. External method

3. CSS के क्या advantages हैं?

  • Website की loading speed fast हो जाती है
  • Design और content को separate किया जा सकता है 
  • Design को manage करना आसान होता है
  • डिजाईन को consistent रखने में मदद मिलती है 
  • Offline browsing किया जा सकता है 

4. External style sheet use करने के क्या-क्या फायदे और नुकसान हैं?

Advantages:

  • एक ही style sheet को अलग-अलग कई documents पर use किया जा सकता है। 
  • एक ही फाइल से आप अलग-अलग page के design को control कर सकते हैं। 
  • Large website को manage करना आसान होता है। 
  • एक बार यह file cache में लोड हो जाए तो अगली बार वेबसाइट की स्पीड बढ़ जाती है।  

Disadvantages:

  • Website को extra file download करना पड़ता है। 
  • जब तब external style sheet load नही हो जाता पेज पर styles apply नही होंगे।  
  • अगर बहुत ही कम CSS codes use हो रहें हैं तो इसके लिए external style sheet बनाने का कोई फायदा नही है। 

5. External style sheet को link करने के का क्या syntax है?

<link rel="stylesheet" href="cssfile.css" style="text/css">

6. Embedded style sheet के लिए कौनसा syntax use होता है? 

Embedded style sheet यानि internal CSS में CSS के कोड को HTML page के <head> section में <style> tag के अंदर लिखा जाता है जैसे:

<head>
<style>
   p{color: red;} 
   h1{background-color: green;}
</style>
</head>

7. CSS में selector क्या है यह कितने प्रकार का होता है?

CSS में selector यह बताता हम किस element पर style apply करना चाहते हैं। कुछ प्रमुख selectors इस प्रकार हैं:

  • Tag selector
  • Universal selector
  • Class selector
  • ID selector
  • Descendant selector
  • Adjacent sibling selector:
  • Child selector
  • Attribute selectors

और अधिक जानकारी के लिए पढ़ें: CSS में code कैसे लिखें? Selectors क्या होते हैं?

8. Class selector और ID selector में क्या अंतर है?

  • Class को define करने के लिए dot (.) का use करते हैं जबकि id के लिए hash (#) use होता है। 
  • Class को किसी html element पर apply करने के लिए class attribute use होता है जबकि id के लिए id attribute का उपयोग होता है।
  • Class को multiple elements पर apply कर सकते हैं जबकि id को सिर्फ एक ही एलिमेंट पर apply करना चाहिए।

9. Attribute selector का क्या काम है?

हम किसी element को उसके attribute के द्वारा भी select कर सकते हैं इसके लिए attribute selector use किया जाता है। Example:

[href]{color:green;}

10. Universal selector क्या है?

किसी पेज के सभी elements को select करने के लिए इसका use होता है।

*{margin:0;padding:0;}

11. Descendant selector को समझाईये? अगर किसी ऐसे एलिमेंट पर स्टाइल अप्लाई करना हो जो की किसी दुसरे element के अंदर हो तब इसका use होता है। example के लिए यदि <p> के अंदर <b> element है और हमें इस <b> पर स्टाइल apply करना है तो इसके लिए कुछ इस प्रकार कोड लिखेंगे:

p b{ color: green; }

12. CSS में comments कैसे लिखते हैं?

कमेंट लिखने का syntax कुछ ऐसा होता है:

/* your comment here. */

13. किसी element के background में color set करने के लिए कौनसी property use की जाती है?

इसके लिए background-color property use किया जाता है।

और अधिक जानकारी के लिए पढ़ें: CSS में Background Properties क्या हैं? इसे कैसे use करें

14. किसी element के background में image set करने के लिए कौनसी property use की जाती है?

इस काम के लिए background-image property use होता है।

15. Background image की position को कैसे control किया जाता है?

background-position property से हम बैकग्राउंड इमेज के position को change कर सकते हैं।

16. किसी element को rounded shape में कैसे बदलें?

आप border-radius में जरुरत के हिसाब से value दे कर किसी भी element के corner को rounded बना सकते हैं।

17. कौन से property से letters के बीच के space को control किया जा सकता है?

Letters के बीच space देने के लिए letter-spacing का use किया जाता है।

18. CSS में text-decoration property का क्या काम है?

इससे आप किसी text पर underline, overline, strike-through लगा सकते हैं।

और अधिक जानकारी के लिए पढ़ें: CSS में Text Formatting कैसे करें

19. CSS में text-transform property का क्या उपयोग है?

Text को uppercase, lowercase आदि में बदलने के लिए इसका उपयोग होता है।

20. CSS में float property का क्या काम है?

Float के जरिये आप किसी एलिमेंट को horizontally align कर सकते हैं।

21. Position property की क्या-क्या value हो सकते हैं?

इसके 4 value हो सकते हैं:

  1. static
  2. relative
  3. absolute
  4. fixed

अधिक जानकारी के लिए पढ़ें: CSS Positioning – Elements की Position कैसे set करें?

22. CSS में Font face कैसे change किया जाता है?

Text का font face change करने के लिए font-family use होता है।

23. Pseudo elements क्या हैं?

Pseudo elements के जरिये आप किसी element के particular part को style कर सकते हैं। जैसे यदि आप किसी paragraph के पहले लाइन को किसी अलग color में दिखाना चाहते हैं या किसी एलिमेंट के पहले या बाद में कुछ text या symbol add करना चाहते हैं तो Pseudo element यह काम कर सकते हैं।

p::first-line { ... }
.button::after { ... }

24. Pseudo classes क्या हैं?

यह Pseudo element जैसा ही है बस अंतर यह है की इससे किसी element पर style तब apply किया जाता है जब वह किसी निश्चित state पर हो। example के लिए किसी hyperlink को आप अलग-अलग states जैसे जब उसपर mouse hover किया गया हो, जब उस पर क्लिक किया जाय, जब वह active state पर हो आदि के अनुसार अलग-अलग कलर दे सकते हैं।

.link:hover { ... }
.link:active { ... }

25. Web page में किसी link का color कैसे change करें?

a:link{ color: red;}

26. !important का क्या काम है?!important के जरिये आप किसी property की value को override कर सकते हैं।
उदाहरण:

a{color:red;}
p a{ color:blue !important;}

27. Web safe fonts और fallback fonts क्या हैं?

सभी ऑपरेटिंग सिस्टम और ब्राउज़रों में सभी fonts install नही होते। web safe fonts वे common fonts हैं जो लगभग सभी system में उपलब्ध रहते हैं आप इन्हें उपयोग कर सकते हैं। लेकिन यदि आप कोई ऐसा font use कर रहे हैं जो सभी के पास नही होता तो इस स्थिति में आपको fallback fonts जरुर specify करना चाहिए ताकि पहला font अगर न installed न हो तो उसकी जगह fallback font display हो सके।

28. CSS box model क्या है?

किसी वेब पेज के सारे HTML elements rectangular shape में होते हैं और इनको design करने के लिए CSS में box model का उपयोग होता है इसके 4 parts होते हैं:

  1. Margin
  2. Padding
  3. Border
  4. Content

अधिक जानकारी के लिए पढ़ें: CSS Box Model और उनके Properties Hindi में

29. Z-index का use क्यों किया जाता है?

कई बार हमें कुछ elements को एक के ऊपर एक display करना होता है इसके लिए position property use होता है और किस element किसके बाद दिखाना यह z-index से तय किया जाता है जिसकी z-index value सबसे highest होती है वह सबसे ऊपर दिखाई देता है

30. किसी element को inline या block element बनाने के लिए कौन सी property use की जाती है?

इसके लिए display:block; और display:inline; का use होगा।

31. Inline और block element में क्या अंतर है?

  • Inline element: element की जितनी width होती है यह उतना ही space लेता है। ex: <span>, <a>
  • Block element: element उस line की पूरी width का use करता है इसके बार एक line break आ जाता है यानी उस line पर सिर्फ वही content दिखाई देता है। जैसे: <h1>, <div>

32. CSS के जरिये किसी element को hide करने के लिए क्या किया जाता है?

इसके लिए तीन तरीके अपनाए जा सकते हैं:

  1. display:none;
  2. visibility:hidden;
  3. opacity:0;

33. Box shadow और text shadow का code कैसे लिखें?

इसके लिए कुछ इस प्रकार कोड लिखें:

box-shadow: 7px 5px 3px #fffff;
text-shadow: 7px 5px 3px #fffff;

34. किसी element की opacity कैसे change करें?

इसके लिए opacity property use करें इसकी value 0 से 1 तक होती है। 0 value वह content hide होजाता है जबकि 1 से वह पूरी तरह दिखाई देता है।

35. Cell padding और cell spacing में क्या अंतर है?

  • Cell-padding: इससे content और cell के border के बीच space दिया जा सकता है।
  • Cell-spacing: cells के बीच में space देने के लिए उपयोग होता है।

36. Media query क्या है? इसका क्या काम है?

CSS में media query का उपयोग responsive design बनाने के लिए किया जाता है। इसका काम कुछ इस प्रकार होता है:

  • Device की height और width पता करना 
  • Viewport की height और width पता करना 
  • Orientation check करना 
  • Resolution check करना 

अधिक जानकारी के लिए पढ़ें: CSS Media Queries – Inroduction in Hindi

37. किसी element से border को कैसे remove करें 

इसके लिए border:none; उपयोग करें।

38. Cursor के type को बदलने के लिए क्या करें?

इसके लिए cursor property use करें।

39. CSS image sprite क्या है?

किसी website में कई सारे अलग-अलग images use करने से उसकी loading speed कम हो जाती है। इस लिए Image sprite का उपयोग करते हैं। इससे कई सारे images को एक ही image में add कर दिया जाता है।

40. Hyperlink से underline कैसे हटायें?

a{text-decoration:none;}

उम्मीद है ये CSS interview questions and answers आपके लिए उपयोगी साबित होंगे और आपको इससे अपनी इंटरव्यू की तैयारी करने में मदद मिलेगी। आपको आपके आने वाले इंटरव्यू या exam के लिए हमारी ओर से शुभकामनाएं।

41. Multiple elements को एक साथ टारगेट करके styling कैसे कर सकते हैं?

multiple elements को comma (,) से separate करके एक साथ styling कर सकते हैं। मान के चलिए हमें h1 और h2 दोनों का color red करना है तो उसके लिए कुछ इस तरह कोड लिख सकते हैं:

h1,h2{color:red;}

42. क्या CSS में semicolon का use करना जरुरी है?

semicolon का उपयोग multiple properties को separate करने के लिए किया जाता है। last property में semicolon लगाना जरुरी नही है। अगर किसी selector में सिर्फ एक property apply कर रहे हैं तो उसमे भी semicolon लगाना जरुरी नही है।

Example:

p{
color:#000000;
font-size: 16px;
text-decoration: underline
}

h2{
font-size:20px
}

43. CSS Flexbox क्या है?

Flexbox या flexible box CSS3 का एक ऐसा तरीका है जिससे हम आसानी से responsive layout डिजाईन कर सकते हैं। Flexbox के जरिये items के alignment और space को आसानी से manage किया जा सकता है।

44. किसी div को flexbox बनाने के लिए कोड कैसे लिखें?

div{
display:flex;
}

45. flex-direction property का क्या उपयोग है?

किसी flexbox के अंदर items एक row में दिखाई देंगे या column में यह flex-direction property से define किया जाता है।

46. Justify-content और Align-items property में क्या अंतर है?

Elements को horizontally position देने के लिए justify-content और vertical position सेट करने के लिए align-items का उपयोग होता है।

47. flex items के लिए css property “order” का क्यों उपयोग किया जाता है?

items किस order में दिखाई देंगे यह order property से define किया जाता है इसकी default value 0 होती है।

48. flex container के items को center में लाने के लिए कोड कैसे लिखें?

.flex-container{
display:flex;
align-items: center;
justify-content: center;
}

49. CSS में VH/VW (viewport height/ viewport width) क्या है?

CSS में vh और vw एक प्रकार की unit है जो की viewport height और viewport width को measure करने के लिए किया जाता है। यह percentage के फॉर्म में होता है। जैसे यदि हम 1vh लिखते हैं तो इसका मतलब है viewport की जितनी height है उसका 1% ठीक इसी तरह से vw भी काम करता है।

50. किसी 5 CSS Frameworks के नाम बताइए?

  1. Bootstrap
  2. Tailwind CSS
  3. Foundation
  4. Bulma
  5. Skeleton
CSS Tutorials in Hindi

आगे पढ़ें:

Vivek Vaishnav
Vivek Vaishnav

नमस्कार, मैं विवेक, WebInHindi का founder हूँ। इस ब्लॉग से आप वेब डिजाईन, वेब डेवलपमेंट, Blogging से जुड़े जानकारियां और tutorials प्राप्त कर सकते हैं। अगर आपको हमारा यह ब्लॉग पसंद आये तो आप हमें social media पर follow कर हमारा सहयोग कर सकते हैं|

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *