CSS Interview Questions
1Q: What is the purpose of the <style> tag in HTML?
Answer:
It is used to embed CSS rules within the HTML document, usually inside the <head>
section, allowing you to define the style of elements directly in the same file.
2Q: Explain the difference between class selector and ID selector in CSS.
Answer:
A class selector uses a dot (.class) and can be applied to multiple elements, while an
ID selector uses a hash (#id) and should be unique per page.
3Q: What does the universal selector * do in CSS?
Answer:
It selects all elements on the page and applies the defined styles to them.
4Q: Explain the Box Model in CSS and list its components.
Answer:
The CSS Box Model consists of four areas: content, padding, border, and margin. It
determines how elements are sized and spaced on the page.
5Q: How does inline, block, and inline-block differ in layout behavior?
Answer:
inline elements don’t start on a new line and can’t set width/height. block elements
start on a new line and take full width. inline-block allows setting width/height but
flows inline.
6Q: What is the difference between em and rem units in CSS?
Answer:
em is relative to the font size of the parent, while rem is relative to the root (html)
font size.
7Q: How does the z-index property affect overlapping elements?
Answer:
It controls the stacking order of elements. Higher z-index values appear on top of
lower ones.
8Q: What is the purpose of media queries in CSS?
Answer:
They allow the application of CSS rules conditionally based on screen size, resolution,
or device type to support responsive design.
9Q: Define Responsive Web Design (RWD). Why is it important in modern web
development?
Answer:
RWD is an approach to design that makes web pages adapt to different screen sizes.
It ensures usability and accessibility across all devices.
10Q: Explain the difference between min-width and max-width in media queries.
Answer:
min-width applies styles from that width and up, useful for mobile-first design. max-
width applies styles up to that width, typically used for desktop-first design.
11Q: Write a CSS style to change the font color of all paragraphs to blue using a tag
selector.
Answer:
Use the selector p { color: blue; } to apply the style to all <p> elements.
12Q: Write the CSS style to give an element with ID box1 a green background and
white text.
Answer:
Use #box1 { background-color: green; color: white; }.
13Q: A developer wants to give a box 20px padding, 2px black border, and 10px
margin. Can you write the CSS for this?
Answer:
Use the rule: box { padding: 20px; border: 2px solid black; margin: 10px; }.
14Q: Calculate the total width of a box that has 200px width, 10px padding, 5px
border, and 15px margin on all sides.
Answer:
Total width = 200 + (10×2) + (5×2) + (15×2) = 260px.
15Q: A student created two boxes with same width but one has padding and one has
border. Which one occupies more space? Explain why.
Answer:
The one with padding takes more space in content-box model because padding adds to
the content width. In border-box, the total size remains constant.
16Q: Write a media query that applies a red background color to the body only when
the screen width is less than 600px.
Answer:
@media (max-width: 600px) {
body {
background-color: red;
}
}
17Q: How would you hide an element with class .menu on screens smaller than
480px using CSS?
Answer:
Use:
@media (max-width: 480px) {
.menu {
display: none;
}
}
18Q: You are building a responsive layout that breaks on tablets. Suggest how you
would fix this using responsive techniques.
Answer:
Use media queries targeting tablet widths (e.g., 768px–1024px) and apply
appropriate layout adjustments like changing flex direction or element width.
19Q: A media query is not applying even though screen width matches the condition.
What could be the possible mistake in the syntax?
Answer:
Possible mistakes include missing parentheses, forgetting the @media keyword, or
syntax errors like min-width instead of max-width.
20Q: Explain how percentage-based widths can help in making a layout responsive,
and write a CSS example to justify your answer.
Answer:
Percentage widths allow elements to scale relative to their parent container.
Example: .container { width: 80%; } adjusts automatically as screen resizes.
