Top 15 CSS Q/A
Aman SrivastavQ1: What is CSS?
A: Cascading Style Sheets — used to style HTML elements.
Q2: Types of CSS?
A: Inline, Internal, External.
Q3: Difference between relative, absolute, fixed, and sticky positioning?
relative→ positioned relative to itself.absolute→ positioned relative to nearest positioned ancestor.fixed→ relative to viewport, stays in place on scroll.sticky→ toggles between relative & fixed based on scroll
One-line memory trick:
Relative = shift from self, Absolute = shift from parent, Fixed = stuck to screen, Sticky = sticks inside parent.
Q4: Difference between em, rem, px, %?
px→ fixed pixels.em→ relative to parent font-size.rem→ relative to root (html) font-size.%→ relative to parent element’s size.
| Unit | Based On | Key Point |
| px | Fixed pixel size | Absolute unit — doesn’t change with parent or root font size. |
| em | Parent element’s font size | Relative unit — 1em = current element’s parent font size. |
| rem | Root (html) element’s font size | Relative unit — 1rem = font size of <html> (default 16px in browsers). |
| % | Parent element’s size | Relative to parent’s width/height or font size depending on property. |
Q5: Difference between Flexbox and Grid?
A: Flexbox → 1D layout (row/column); Grid → 2D layout (rows & columns).
| Feature | Flexbox | Grid |
| Layout Direction | One-dimensional (row or column) | Two-dimensional (rows and columns) |
| Best For | Aligning items in a single line | Complex layouts with rows and columns |
| Item Size Control | Flexible item sizing along one axis | Precise control over both axes |
| Alignment | Easy alignment and spacing between items | Full control over alignment in both directions |
| Use Case | Navigation bars, buttons, simple layouts | Full page layouts, dashboards, complex grids |
Q6: How to center a div with Flexbox?
Explanation:
display: flex;→ Activates Flexboxjustify-content: center;→ Centers horizontallyalign-items: center;→ Centers verticallyheight: 100vh;→ Makes sure parent takes full screen height
Q7: Difference between relative and absolute paths in CSS background images?
| Path Type | Example | How it Works |
| Relative Path | background-image: url('images/bg.jpg'); | Path is relative to the location of the CSS file (or HTML file if styles are inline). Changes if file location changes. |
| Absolute Path | background-image: url('https://example.com/images/bg.jpg'); | Full URL or path from the root directory or external source. Works regardless of CSS file location. |
Q8: What is z-index?
In CSS, z-index decides which element appears on top when elements overlap. Higher z-index = in front, lower z-index = behind. It only works if the element’s position is not static.
Q9: Difference between inline, block, and inline-block?
| Type | How it Behaves | Example Tags |
| inline | Does not start on a new line, only takes up as much width as needed. You can’t set width/height. | <span>, <a>, <strong> |
| block | Starts on a new line and takes full width by default. You can set width/height. | <div>, <p>, <h1> |
| inline-block | Behaves like inline (doesn’t break line) but you can set width/height like block. | <img>, <button> |
inline = in line, no size control
block = big block, full width
inline-block = in line + size control
Q10: What are pseudo-classes and pseudo-elements?
| Term | What it Does | Example |
| Pseudo-class | Targets an element based on its state (like hover, focus, visited). | a:hover { color: red; } → Changes link color when mouse hovers. |
| Pseudo-element | Targets a specific part of an element and lets you style it. | p::first-line { font-weight: bold; } → Styles only the first line of a paragraph. |
Pseudo-class = state of element (one colon :)
Pseudo-element = part of element (two colons ::
Q11: What is a media query? Example?
A media query in CSS is used to apply styles only when certain conditions are true, like screen size, device type, or orientation. It’s mainly used for making responsive designs.
Q12: Difference between min-width and max-width in media queries?
| Property | When it Applies | Example |
| min-width | Applies styles when the screen width is equal to or greater than the given value. | @media (min-width: 768px) → Styles for tablets & larger screens. |
| max-width | Applies styles when the screen width is equal to or less than the given value. | @media (max-width: 600px) → Styles for mobile screens. |
Q13: Difference between absolute, fixed, and sticky in navbar design?
| Position Type | How Navbar Behaves | When to Use |
| absolute | Positioned relative to its nearest positioned ancestor; moves when page scrolls. | For navbars inside a specific section. |
| fixed | Stays in the same place relative to the viewport, even when scrolling. | For always-visible navbars at the top/bottom. |
| sticky | Acts like relative until a scroll threshold is reached, then sticks like fixed within its parent container. | For navbars that stick only after scrolling past a point. |
absolute = moves with content
fixed = always stuck to screen
sticky = sticks only when scrolled to a certain point
Q14: What are CSS variables? Example?
CSS variables (also called custom properties) let you store values in one place and reuse them throughout your CSS. They make styling easier to maintain and update.
Q15: Difference between transition and animation?
| Feature | Transition | Animation |
| Trigger | Needs a user action or state change (like hover, click). | Can run automatically without user interaction. |
| Keyframes | No keyframes — only from one state to another. | Uses @keyframes for multiple steps. |
| Control | Limited control (start & end). | Full control over steps, timing, looping, etc. |
| Use Case | Simple hover effects, color changes. | Complex movements, looping effects, loaders. |
Subscribe to my newsletter
Read articles from Aman Srivastav directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by