Introduction to CSS (Q1-Q6)
1. What does CSS stand for?
a) Computer Style Sheets
b) Cascading Style Sheets
c) Creative Style System
d) Colorful Style Syntax
Answer: b) Cascading Style Sheets
2. Which HTML attribute is used for inline CSS?
a) css
b) style
c) class
d) font
Answer: b) style
3. Where is external CSS linked in HTML?
a) <body>
b) <head>
c) <footer>
d) <div>
Answer: b) <head>
4. Which method overrides all other CSS rules?
a) Inline CSS
b) Internal CSS
c) External CSS
d) All have equal priority
Answer: a) Inline CSS
5. How do you write internal CSS?
a) <style> tag in <head>
b) <css> tag in <body>
c) @css rule
d) <link> tag
Answer: a) <style> tag in <head>
6. What is the correct syntax to link [Link]?
a) <link rel="stylesheet" src="[Link]">
b) <style href="[Link]">
c) <link rel="stylesheet" href="[Link]">
d) <css file="[Link]">
Answer: c) <link rel="stylesheet" href="[Link]">
CSS Selectors (Q7-Q16)
7. Which selector targets id="header"?
a) .header
b) #header
c) header
d) *header
Answer: b) #header
8. What does [Link] select?
a) All <p> elements
b) <p> elements with class="intro"
c) <p> elements with id="intro"
d) The first <p> element
Answer: b) <p> elements with class="intro"
9. Which has the highest specificity?
a) p
b) .class
c) #id
d) *
Answer: c) #id
10. Which selector targets all <p> elements?
a) .p
b) #p
c) p
d) *p
Answer: c) p
11. Which selector targets all <a> tags with class="btn"?
a) a .btn
b) [Link]
c) a, .btn
d) a > .btn
Answer: b) [Link]
12. What does div p select?
a) All <p> elements inside a <div>
b) Sibling <p> elements of <div>
c) Only direct child <p> of <div>
d) <div> and <p> elements
Answer: a) All <p> elements inside a <div>
13. Which selector targets direct children only?
a) div p
b) div > p
c) div + p
d) div ~ p
Answer: b) div > p
14. What does ul li:first-child select?
a) All <li> elements
b) The first <li> in each <ul>
c) The last <li>
d) Only odd-numbered <li> elements
Answer: b) The first <li> in each <ul>
15. Which selects all visited links?
a) a:active
b) a:hover
c) a:visited
d) a:link
Answer: c) a:visited
16. What does input[type="text"] target?
a) All <input> tags
b) Text input fields
c) Checkboxes
d) Buttons
Answer: b) Text input fields
Text & Layout (Q17-Q26)
17. Which text-align value centers text?
a) middle
b) center
c) align-center
d) horizontal-center
Answer: b) center
18. What does text-align: justify; do?
a) Aligns text to the left
b) Aligns text to the right
c) Spreads text evenly between margins
d) Centers text vertically
Answer: c) Spreads text evenly between margins
19. Which aligns text to the right?
a) end
b) push-right
c) right
d) align-right
Answer: c) right
20. What is the default text-align for English paragraphs?
a) justify
b) center
c) left
d) start
Answer: c) left
21. Which property centers a div horizontally?
a) align: center;
b) margin: 0 auto;
c) text-align: center;
d) position: center;
Answer: b) margin: 0 auto;
22. How do you make text bold?
a) font: bold;
b) font-weight: bold;
c) text-style: bold;
d) bold: true;
Answer: b) font-weight: bold;
23. Which property adds space inside an element?
a) margin
b) padding
c) spacing
d) gap
Answer: b) padding
24. What does margin: 10px 20px; mean?
a) Top/bottom: 10px, left/right: 20px
b) All sides: 10px
c) Top: 10px, bottom: 20px
d) Left: 10px, right: 20px
Answer: a) Top/bottom: 10px, left/right: 20px
25. Which property rounds corners?
a) border-round
b) corner-radius
c) border-radius
d) round-border
Answer: c) border-radius
26. How do you hide an element but keep its space?
a) display: none;
b) visibility: hidden;
c) opacity: 0;
d) Both b and c
Answer: d) Both b and c
Advanced CSS (Q27-Q30)
27. Which selector applies to odd table rows?
a) tr:odd
b) tr:nth-child(odd)
c) tr:first-child
d) tr:alternate
Answer: b) tr:nth-child(odd)
28. What does z-index control?
a) Horizontal position
b) Vertical stacking order
c) Font size
d) Background depth
Answer: b) Vertical stacking order
29. Which property adds shadow to text?
a) text-effect: shadow;
b) text-shadow
c) font-shadow
d) shadow: text;
Answer: b) text-shadow
30. Which text-align value inherits from parent?
a) parent
b) copy
c) inherit
d) same
Answer: c) inherit
Q1. Which property enables Flexbox layout?
a) display: grid;
b) display: flex;
c) display: block;
d) display: inline-flex;
Answer: b) display: flex;
Q2. What does justify-content: center; do?
a) Centers items vertically
b) Centers items horizontally
c) Stretches items to fill space
d) Aligns items to the start
Answer: b) Centers items horizontally
Q3. Which property aligns items vertically in a flex container?
a) align-contentsssss
b) justify-items
c) align-items
d) vertical-align
Answer: c) align-items
Q4. What is the default flex direction?
a) column
b) row
c) row-reverse
d) column-reverse
Answer: b) row
Q5. How do you make flex items wrap to the next line?
a) flex-wrap: nowrap;
b) flex-wrap: wrap;
c) flex-direction: column;
d) flex-flow: wrap;
Answer: b) flex-wrap: wrap;
Q6. Which property distributes space between flex items evenly?
a) justify-content: space-around;
b) justify-content: space-between;
c) align-items: space-evenly;
d) gap: 10px;
Answer: b) justify-content: space-between;
Q7. What does flex: 1; do?
a) Fixes the item’s size
b) Allows the item to grow/shrink
c) Aligns the item to the end
d) Disables flexbox
Answer: b) Allows the item to grow/shrink
Q8. How do you reverse the order of flex items?
a) flex-direction: reverse;
b) flex-direction: row-reverse;
c) order: -1;
d) flex-order: reverse;
Answer: b) flex-direction: row-reverse;
Q9. Which property aligns a single flex item differently from others?
a) align-self
b) justify-self
c) flex-align
d) order
Answer: a) align-self
Q10. What does gap: 20px; do?
a) Adds space inside items
b) Adds space between items
c) Sets margin around the container
d) Pads the container edges
Answer: b) Adds space between items
Box Model Questions (Q11-Q20)
Q11. Which CSS property controls inner spacing?
a) margin
b) padding
c) border
d) spacing
Answer: b) padding
Q12. What is the correct order of the box model layers (outer to inner)?
a) Margin → Border → Padding → Content
b) Margin → Border → Padding → Content
c) Padding → Border → Margin → Content
d) Content → Padding → Border → Margin
Answer: b) Margin → Border → Padding → Content
Q13. Which property adds space outside an element?
a) margin
b) padding
c) gap
d) border-spacing
Answer: a) margin
Q14. How do you set a 2px solid black border?
a) border: solid black 2px;
b) border: 2px solid black;
c) border-style: 2px black solid;
d) border-width: 2px; border-color: black;
Answer: b) border: 2px solid black;
Q15. What does box-sizing: border-box; do?
a) Excludes padding/border from width/height
b) Includes padding/border in width/height
c) Adds a shadow box
d) Disables margins
Answer: b) Includes padding/border in width/height
Q16. Which property collapses margins between elements?
a) margin-collapse: true;
b) margin: 0 auto;
c) overflow: hidden;
d) (No CSS property; it’s automatic)
Answer: d) (No CSS property; it’s automatic)
Q17. How do you center a block element horizontally?
a) text-align: center;
b) margin: 0 auto;
c) align-items: center;
d) position: center;
Answer: b) margin: 0 auto;
Q18. What is the default box-sizing value?
a) border-box
b) content-box
c) padding-box
d) margin-box
Answer: b) content-box
Q19. Which property adds space between borders of adjacent elements?
a) margin
b) padding
c) border-spacing
d) gap
Answer: c) border-spacing (Note: Only for tables)
Q20. How do you hide an element’s content but keep its space?
a) display: none;
b) visibility: hidden;
c) opacity: 0;
d) Both b and c
Answer: d) Both b and c