🔹 Section 1: Basic CSS Questions
1. What is CSS?
CSS (Cascading Style Sheets) is used to style and design web pages, including layout, colors, fonts, and spacing.
2. What are the types of CSS?
- Inline CSS
- Internal CSS
- External CSS
3. What is the difference between class and ID in CSS?
| Class | ID |
|---|---|
| Can be reused | Unique for one element |
Uses . | Uses # |
| Multiple elements | Single element |
4. What is the CSS box model?
It defines how elements are structured:
- Content
- Padding
- Border
- Margin
5. What is the difference between padding and margin?
- Padding: space inside element
- Margin: space outside element
🔹 Section 2: CSS Selectors
6. What are CSS selectors?
Selectors are used to select HTML elements to apply styles.
7. Types of selectors:
- Universal selector
* - Class selector
. - ID selector
# - Group selector
- Descendant selector
8. What is specificity in CSS?
Specificity determines which CSS rule is applied first.
Order:
Inline > ID > Class > Element
🔹 Section 3: CSS Properties
9. What is display property?
It defines how an element is displayed.
Values:
- block
- inline
- inline-block
- none
10. Difference between display: none and visibility: hidden?
| display: none | visibility: hidden |
|---|---|
| Removes element | Hides element |
| No space taken | Space remains |
11. What is position in CSS?
Used to position elements.
Types:
- static
- relative
- absolute
- fixed
- sticky
12. Difference between relative and absolute positioning?
| Relative | Absolute |
|---|---|
| Moves from normal position | Moves relative to parent |
| Keeps space | Does not keep space |
🔹 Section 4: Flexbox & Layout
13. What is Flexbox?
Flexbox is a layout system used to align items easily in rows or columns.
14. Important Flexbox properties:
- display: flex
- justify-content
- align-items
- flex-direction
15. What is justify-content?
It aligns items horizontally.
16. What is align-items?
It aligns items vertically.
🔹 Section 5: Grid Layout
17. What is CSS Grid?
CSS Grid is used for two-dimensional layouts (rows and columns).
18. Difference between Flexbox and Grid?
| Flexbox | Grid |
|---|---|
| 1D layout | 2D layout |
| Row or column | Rows and columns |
| Simple layout | Complex layout |
🔹 Section 6: Advanced CSS
19. What are pseudo-classes?
They define special states of elements.
Example:
- :hover
- :focus
- :nth-child
20. What are pseudo-elements?
Used to style specific parts of elements.
Example:
21. What is z-index?
It controls stacking order of elements.
Higher value = front layer
22. What is opacity?
It defines transparency of an element (0 to 1).
🔹 Section 7: Responsive Design
23. What is responsive design?
It makes websites fit all screen sizes (mobile, tablet, desktop).
24. What are media queries?
Used to apply CSS based on screen size.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}🔹 Section 8: CSS Units
25. Types of CSS units:
- px (pixels)
- % (percentage)
- em
- rem
- vh / vw
26. Difference between em and rem?
| em | rem |
|---|---|
| Relative to parent | Relative to root |
| Can be affected | More consistent |
🔹 Section 9: Performance & Best Practices
27. How to improve CSS performance?
- Use external CSS
- Avoid unnecessary selectors
- Minify CSS
- Use shorthand properties
28. What is shorthand property?
Combining multiple properties in one line.
Example:
margin: 10px 20px 30px 40px;🔹 Section 10: Real Interview Questions
29. Why is CSS called cascading?
Because styles are applied based on priority and hierarchy.
30. What happens if multiple CSS rules apply?
The rule with higher specificity is applied.
31. What is inheritance in CSS?
Some properties are inherited from parent to child elements.
32. Is CSS a programming language?
No, CSS is a style sheet language, not a programming language.
33. What is !important in CSS?
It overrides all other styles.
34. What are transitions in CSS?
Used to create smooth animations between states.
35. What are animations in CSS?
Used to create keyframe-based animations.