Basic Questions
Q1: What is the CSS Box Model?
Layout model with content, padding, border, and margin.
Q2: Difference between id and class in CSS?
id is unique (#id), class is reusable (.class).
Q3: Difference between padding and margin?
Padding is space inside the border; margin is outside.
Q4: What is :hover in CSS?
Applies a style when the mouse hovers over the element.
Q5: Difference between inline and block elements?
Inline flows with text, block takes full width and new line.
Q6: What does display: none do?
Hides the element from the layout and view.
Q7: What is border-radius?
Rounds the corners of a box or image.
Q8: How do you make text uppercase in CSS?
Use text-transform: uppercase.
Q9: RGB vs HEX color in CSS?
RGB uses decimal values; HEX uses hexadecimal codes.
Q10: What does opacity do in CSS?
Sets the transparency level from 0 (invisible) to 1 (opaque).
Mid Level Questions
Q1: What is z-index used for?
Controls layer stack of overlapping elements.
Q2: What is Flexbox?
A layout system for aligning items in rows or columns.
Q3: How do you center a div using Flexbox?
Use display: flex, justify-content: center, align-items: center.
Q4: What does position: absolute do?
Positions the element relative to its nearest positioned ancestor.
Q5: What is a media query?
It applies styles based on screen size or device type.
Q6: What are pseudo-elements like ::before?
Insert content before or after an element via CSS.
Q7: What does background-size: cover do?
Scales the background image to cover the whole container.
Q8: What is !important in CSS?
Overrides all other rules even if they`re more specific.
Q9: Difference between position: relative and fixed?
Relative moves element slightly; fixed locks it on screen.
Q10: What is CSS Grid?
A layout system for building two-dimensional designs (rows + columns).