CSS Interviews – Top Questions & Answers for Web Developers
A complete and easy-to-understand guide for CSS3 interview preparation — written in a simple, memorable, and practical way.
Answer:
CSS (Cascading Style Sheets) is used to style and design web pages. It defines how HTML elements should look — like color, layout, font, and spacing.
Answer:
CSS3 introduced modules such as Flexbox, Grid, animations, transitions, media queries, gradients, and rounded corners — making responsive and interactive design easier.
Answer:
It means styles are applied in a hierarchy: browser default < external stylesheet < internal stylesheet < inline style. The latest rule overrides the earlier ones.
Answer:
- Inline — inside the HTML tag
- Internal — in
<style>tags - External — in a separate
.cssfile linked via<link>
Answer:
- Relative: Moves element relative to its normal position.
- Absolute: Positions element relative to its nearest positioned ancestor.
- Fixed: Stays fixed relative to the viewport (scrolling doesn’t affect it).
Answer:
z-index controls the stacking order of elements. A higher value means the element appears on top.
Answer:
Pseudo-classes define special states of an element — like :hover, :focus, or :active.
Answer:
Pseudo-elements let you style specific parts of elements, e.g.
::before– adds content before::after– adds content after
9. What is the difference between display: none and visibility: hidden?
Answer:
display: noneremoves the element from the layout.visibility: hiddenhides the element but keeps its space reserved.
Answer:
em– relative to the parent’s font sizerem– relative to the root (HTML) font size
Answer:
Every HTML element is a box — made of content, padding, border, and margin. This helps control spacing and layout precisely.
Answer:
- Margin: Space outside the element’s border.
- Padding: Space between content and border (inside the element).
Answer:
- Inline: Doesn’t start a new line; ignores width/height.
- Block: Takes full width; starts on a new line.
- Inline-block: Behaves like inline but accepts width/height.
Answer:
Media queries help make sites responsive by applying CSS based on screen size or device type.
Example:
@media (max-width: 600px) {
body { background: lightblue; }
}Answer: Flexbox makes layout alignment easy — it automatically adjusts element sizes and spacing in rows or columns.
Answer:
- Flexbox: Best for one-dimensional layouts (row OR column).
- Grid: Best for two-dimensional layouts (rows AND columns).
Answer:
Selects elements based on their order in a parent.
Example: li:nth-child(2) selects the second list item.
Answer: Transitions animate property changes smoothly over time. Example:
div {
transition: all 0.5s ease;
}Answer: They create frame-by-frame keyframe-based animations. Example:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Answer:
- Transition: Happens on state change (like hover).
- Animation: Runs continuously or can be triggered manually.
Answer:
position: static; — elements appear in the normal flow.
Answer:
float was used for layout hacks; Flexbox is a modern layout system with better alignment and responsiveness.
Answer:
It controls what happens when content exceeds an element’s box.
Values: visible, hidden, scroll, auto.
Answer: Modern way:
display: flex;
justify-content: center;
align-items: center;Answer: Variables store reusable values:
:root { --main-color: blue; }
div { color: var(--main-color); }Answer:
width: Fixed size.min-width: Minimum limit.max-width: Maximum limit for flexibility.
Answer: It creates custom shapes by clipping an element to a specific path.
Answer: Use:
img { width: 100%; height: auto; }Answer:
Controls how an image or video fits its container — like cover, contain, fill.
Answer:
calc() lets you do math inside CSS.
Example: width: calc(100% - 50px);
Answer: Gradients create smooth color transitions — linear or radial.
Example:
background: linear-gradient(to right, red, yellow);Answer: A tool (like SASS or LESS) that adds programming features (variables, loops) to CSS.
Answer: They apply effects like blur or brightness.
filter: blur(5px);Answer:
header { position: sticky; top: 0; }Answer:
Keyframes define how an animation changes over time using @keyframes.
Answer:
They ensure new features work across browsers.
Example: -webkit-, -moz-, -ms-.
Answer:
RGBA adds an alpha (opacity) channel:
rgba(255, 0, 0, 0.5) — 50% transparent red.
Answer:
Use box-shadow for elements and text-shadow for text.
Answer: Use:
border-radius: 10px;Answer: Transforms move, rotate, or scale elements.
transform: rotate(45deg);Answer: Combinators define relationships:
A B→ descendantA > B→ childA + B→ adjacentA ~ B→ sibling
Answer: Specificity decides which CSS rule wins when multiple apply. Inline > ID > Class > Element.
Answer:
* targets all elements.
Answer: Overrides all other rules — use sparingly as it breaks the cascade.
Answer:
<div>→ block<span>→ inline
Answer: It allows long words to break and wrap to the next line.
Answer: Controls how spaces and line breaks are handled.
Answer:
Use RGBA: background-color: rgba(0,0,0,0.3);
Answer: Hides or shows the back of an element when rotated in 3D.
Answer:
Use Flexbox or Grid with flexible units like %, fr, or auto.