HTML & CSS Interview Questions

Semantic HTML uses tags that describe the meaning of content — <header>, <nav>, <main>, <article>, <footer>, <section>. This helps screen readers, improves SEO, and makes code readable for other developers.

<article>
  <header><h1>Blog Post Title</h1></header>
  <p>Content here...</p>
  <footer>Published March 2025</footer>
</article>

Instead of <div class="article"> everywhere.

• What’s the difference between <section> and <article>?
• Does semantic HTML affect SEO?
• When is a <div> still appropriate?

• Using <div> for everything
• Using <b> instead of <strong> for importance
• Skipping heading hierarchy (h1 → h4)

In your portfolio project, replace generic divs with semantic tags. Interviewers often ask you to review your own HTML.

Every element is a rectangular box with four areas: content, padding (inside border), border, and margin (outside border). Total width = content + padding + border + margin (in default box-sizing: content-box).

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: border-box; /* width includes padding + border */
}

• What does box-sizing: border-box do?
• How does margin collapse work?
• What’s the difference between padding and margin?

• Forgetting that width doesn’t include padding by default
• Using margin for spacing inside a component instead of padding
• Not knowing about margin collapse

When your navbar was 20px wider than expected, it was probably box model + padding.

Specificity determines which CSS rule wins when multiple rules target the same element. Order: inline styles (1000) > IDs (100) > classes/attributes/pseudo-classes (10) > elements/pseudo-elements (1). !important overrides everything (avoid overusing).

#nav .link { color: blue; }    /* 110 */
p.link { color: red; }           /* 11 */
/* #nav .link wins */

• What happens with !important?
• How do you keep specificity low?
• What’s the specificity of :not()?

• Using IDs for styling (hard to override)
• Adding !important everywhere instead of fixing specificity
• Not understanding why Bootstrap overrides fail

In your project, if a global style broke a component, specificity was likely the cause.

Flexbox is a CSS layout model for arranging items in a row or column. The parent is a flex container; children are flex items. Key properties: display: flex, justify-content (main axis), align-items (cross axis), flex-wrap, gap.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

• Difference between justify-content and align-items?
• What does flex: 1 mean?
• Flexbox vs Grid — when to use which?

• Using floats for layout in 2024
• Confusing main axis and cross axis when direction is column
• Not using gap and using margins instead

Your navbar, card rows, and centering a login form — all Flexbox candidates.

CSS Grid creates a 2D layout with rows and columns. You define a grid on the parent and place children in grid cells. Use Grid for page layouts, card grids, and dashboards. Use Flexbox for navigation bars and small component layouts.

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

• How is Grid different from Flexbox?
• What is fr unit?
• How do you make a responsive grid?

• Using Grid for a simple navbar (overkill)
• Not using repeat() and minmax() for responsive grids
• Confusing grid-template-areas with flex order

A product listing page with cards in rows and columns is a classic Grid use case.

Responsive design adapts layout to screen size using: (1) fluid layouts (%, fr, max-width), (2) media queries for breakpoints, (3) responsive images, (4) mobile-first CSS (start small, add complexity), (5) viewport meta tag.

/* Mobile first */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 1200px; }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• What breakpoints do you use?
• Mobile-first vs desktop-first?
• How do you test responsiveness?

• Only testing on laptop
• Using fixed pixel widths everywhere
• Forgetting the viewport meta tag

Show your project on mobile during the interview — or explain your breakpoints.

Pseudo-classes style elements in a specific state: :hover, :focus, :nth-child(), :not(). Pseudo-elements style specific parts: ::before, ::after, ::first-line. Pseudo-classes use one colon; pseudo-elements use two (CSS3).

button:hover { background: #0056b3; }
input:focus { outline: 2px solid blue; }
p::first-line { font-weight: bold; }

• :nth-child vs :nth-of-type?
• What can ::before be used for?
• How do you style a checkbox without an image?

• Confusing pseudo-classes with pseudo-elements
• Removing focus outlines without providing alternatives (accessibility)
• Overusing ::before for content that should be in HTML

Custom styled form inputs in your project likely use pseudo-classes.

display: none — element removed from layout, takes no space, not focusable. visibility: hidden — invisible but still takes space in layout. opacity: 0 — invisible but takes space and can still receive pointer events unless you add pointer-events: none.

Use display: none for toggling components. Use opacity for fade animations. Use visibility: hidden rarely — mainly for accessibility tricks.

• Which is accessible for hiding content from screen readers?
• How do you animate hiding an element?
• What about aria-hidden?

• Using display: none on focusable elements without managing focus
• Thinking all three behave identically
• Using opacity for modals without handling click-through

Your modal/dropdown toggle logic depends on knowing these differences.

static — default, normal flow. relative — offset from normal position, still in flow. absolute — removed from flow, positioned relative to nearest positioned ancestor. fixed — relative to viewport. sticky — hybrid: relative until scroll threshold, then fixed.

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
}

• What is a positioned ancestor?
• When would you use sticky?
• What does inset: 0 mean?

• Using absolute without a relative parent (element flies to wrong place)
• Using fixed for elements that should scroll
• z-index wars without understanding stacking context

Dropdown menus, modals, and sticky headers in your project use positioning.

z-index controls stacking order, but only within the same stacking context. A new stacking context is created by: positioned elements with z-index, opacity < 1, transform, filter, etc. Without understanding contexts, z-index appears ‘broken’.

.parent { position: relative; z-index: 1; }
.child { z-index: 9999; } /* Still below another parent's z-index: 2 */

• How do you create a new stacking context?
• Why doesn’t z-index: 9999 always work?
• How do you debug stacking issues?

• Throwing z-index: 9999 at everything
• Not understanding parent stacking contexts
• Using z-index on static elements (no effect)

Modal appearing behind navbar? Stacking context issue.

CSS variables (custom properties) are defined with --name: value and used with var(--name). They cascade and can be changed at runtime via JavaScript — unlike Sass variables which are compile-time.

:root {
  --primary: #3498db;
  --spacing: 1rem;
}
.button {
  background: var(--primary);
  padding: var(--spacing);
}

• CSS variables vs Sass variables?
• Can you change them with JavaScript?
• What is :root?

• Not using variables for repeated values (colors, spacing)
• Confusing with Sass variables
• Not providing fallback in var(): var(--color, blue)

Theming in your project — dark mode toggle often uses CSS variables.

BEM = Block, Element, Modifier. .card (block), .card__title (element), .card--featured (modifier). Keeps class names predictable and avoids deep nesting in CSS.

<div class="card card--featured">
  <h2 class="card__title">Title</h2>
</div>

• BEM vs utility-first (Tailwind)?
• Is BEM still relevant?
• How do you name modifiers?

• Overly generic class names like .box, .item
• Deep nesting in CSS instead of flat BEM
• Using BEM with CSS Modules or scoped styles inconsistently

If your team project has messy CSS, mention you’d adopt BEM or a consistent convention.

Normal <script> — blocks HTML parsing, executes immediately. async — downloads in parallel, executes as soon as ready (order not guaranteed). defer — downloads in parallel, executes after HTML parsing (maintains order). Use defer for most scripts; async for independent scripts like analytics.

<script defer src="app.js"></script>
<script async src="analytics.js"></script>

• Where should scripts go — head or body?
• What is render-blocking?
• How does this relate to module scripts?

• Putting all scripts in head without defer/async
• Using async for dependent scripts
• Not knowing the performance impact

If your React app loads slowly, script loading strategy matters.

Data attributes (data-*) store custom data on HTML elements. Access in JS via element.dataset.userId (camelCase). Useful for storing IDs, config, or state without non-standard attributes.

<button data-product-id="42" data-action="add-to-cart">Add</button>

btn.dataset.productId // "42"

• data attributes vs classes for JS hooks?
• Can you query by data attribute?
• Are there naming restrictions?

• Using non-standard attributes like productid="42"
• Storing large JSON in data attributes
• Confusing dataset camelCase conversion

Event delegation on a product list often uses data-product-id.

Accessibility means making websites usable by people with disabilities — screen reader users, keyboard-only users, color-blind users. Developers should use semantic HTML, alt text, proper labels, keyboard navigation, sufficient color contrast, and ARIA only when HTML isn’t enough.

<img src="chart.png" alt="Sales grew 40% in Q3 2024">
<label for="email">Email</label>
<input id="email" type="email">
<button aria-label="Close dialog">×</button>

• What is ARIA?
• How do you test accessibility?
• What is keyboard trap in a modal?

• Empty alt on meaningful images
• Div buttons instead of <button>
• Removing focus outlines
• Using color alone to convey information

Even one accessibility improvement in your project is worth mentioning.

<em> = emphasis (changes meaning when read aloud). <i> = italic styling without semantic meaning (icons, foreign words). <strong> = strong importance. <b> = bold styling without semantic importance. Prefer semantic tags; use <i>/<b> only for stylistic bold/italic.

Use <strong> for warnings: <strong>Warning:</strong> This action is irreversible.

• Does <strong> always render bold?
• Screen reader behavior for these tags?
• When is <b> appropriate?

• Using <b> for all bold text
• Not understanding semantic meaning
• Using CSS font-weight instead of semantic tags for importance

Proper semantic markup in your blog/project shows attention to detail.

Media queries apply CSS rules based on device characteristics — usually viewport width. Syntax: @media (min-width: 768px) { ... }. Mobile-first uses min-width; desktop-first uses max-width.

@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar { display: block; }
}

• What media features besides width?
• What is prefers-color-scheme?
• How many breakpoints should you use?

• Too many breakpoints (5+)
• Only designing for one screen size
• Using device-specific breakpoints (iPhone width) instead of content-based

Explain your project’s breakpoints and why you chose them.

Transitions animate property changes over time on state change (hover, class toggle). Animations use @keyframes for complex multi-step animations. Transitions are simpler; animations are more powerful.

.button {
  transition: background-color 0.3s ease;
}
.button:hover { background-color: #0056b3; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal { animation: fadeIn 0.3s ease; }

• transition vs animation?
• What properties can be animated efficiently?
• What is will-change?

• Animating width/height instead of transform (performance)
• Transitions without reduced-motion consideration
• Over-animating everything

Loading states, hover effects, and modal entrances in your UI.

Sass/Less add features like variables, nesting, mixins, and functions. They compile to regular CSS. Modern CSS now has native variables, nesting (2023+), and @layer. For new projects, native CSS + PostCSS is often enough; Sass is still common in existing codebases.

$primary: #3498db;
.card {
  padding: 1rem;
  &--featured { border: 2px solid $primary; }
}

• Sass vs native CSS nesting?
• What is PostCSS?
• When would you still use Sass?

• Thinking Sass runs in the browser
• Deep nesting creating high specificity
• Not knowing CSS now has native nesting

If your project uses Tailwind, you might skip Sass entirely — know why.

Cascade resolves conflicting rules by: (1) importance (!important), (2) specificity, (3) source order. Inheritance passes certain properties (color, font) from parent to child — but not layout properties (margin, padding, border).

A <p> inside <article> inherits color but not padding from the article.

• Which properties inherit?
• What is @layer in CSS?
• How do inline styles fit in the cascade?

• Expecting padding to inherit
• Not understanding why child styles override parent
• Ignoring source order when specificity is equal

Global styles in your project affecting components — cascade debugging.

CSS reset strips all default browser styles to zero (Eric Meyer’s reset). Normalize.css preserves useful defaults while fixing inconsistencies across browsers. Most projects today use Normalize or a minimal reset + their own base styles.

Tailwind’s Preflight is essentially a modern reset built into the framework.

• Why do browsers have different default styles?
• What does Tailwind Preflight do?
• Do you still need resets in 2024?

• Not using any reset (inconsistent margins on h1, p across browsers)
• Resetting too aggressively and losing useful defaults
• Not knowing the difference between reset and normalize

Starting a project from scratch — first thing you add after HTML skeleton.

Modern approaches: (1) Flexbox: display: flex; justify-content: center; align-items: center; on parent. (2) Grid: display: grid; place-items: center;. (3) For horizontal only: margin: 0 auto on block element with defined width.

.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

• How did people center before Flexbox?
• Center without flex on the parent?
• Center an unknown-size element?

• Using position: absolute; top: 50%; transform when flex works
• Not knowing multiple approaches
• Using <center> tag (deprecated)

Login page, empty states, loading spinners — all need centering.

Block: takes full width, starts on new line (div, p). Inline: flows with text, no width/height (span, a). Inline-block: flows with text but accepts width/height (button, img).

span.badge {
  display: inline-block;
  width: 24px;
  height: 24px;
}

• What is display: none vs block?
• What about inline-flex?
• How does display: flow-root help?

• Applying width/height to inline elements and wondering why it fails
• Using block when inline-block is needed
• Not understanding formatting context

Navigation links, badges, and tags often need inline-block.

Web fonts are loaded via @font-face or services like Google Fonts. Optimization: use font-display: swap (show fallback first), subset fonts (only needed characters), preload critical fonts, prefer woff2 format, limit font families/weights.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

• What is FOUT vs FOIT?
• Should you self-host Google Fonts?
• What is font-display: optional?

• Loading 6 font weights when you need 2
• No font-display strategy (invisible text flash)
• Not preloading critical fonts

Your portfolio’s custom font — mention how you handled loading.

clamp(min, preferred, max) sets a value that scales between min and max based on viewport. Great for fluid font sizes and spacing without many media queries.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Font scales smoothly from 1.5rem to 3rem based on viewport.

• clamp vs calc vs min/max?
• How do you choose clamp values?
• Browser support concerns?

• Fixed font sizes at every breakpoint instead of fluid
• Not testing clamp at extreme viewport sizes
• Using clamp without understanding the middle value

Responsive headings in your landing page without 5 media queries.