Top 40 HTML & CSS Interview Questions & Answers (2025)

Semantic HTML uses elements that convey meaning about their content: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>. Benefits: (1) Accessibility — screen readers navigate by landmarks. (2) SEO — search engines understand page structure better. (3) Maintainability — code is self-documenting. Avoid overusing <div> and <span> when a semantic element fits.

Block elements (div, p, h1-h6, section) take the full available width, start on a new line, and respect width/height/margin/padding on all sides. Inline elements (span, a, strong, em) flow with text, only take as much width as their content, and ignore top/bottom margins and width/height. Inline-block combines both: flows inline but respects width/height and all margins/padding.

Every HTML element is a rectangular box with four layers: content (the actual content), padding (space between content and border), border, and margin (space outside the border). By default (content-box), width and height apply only to the content. box-sizing: border-box includes padding and border in the declared width/height — far more intuitive and now used universally with a * { box-sizing: border-box } reset.

Specificity determines which CSS rule wins when multiple rules target the same element. It's calculated as a three-part score: (ID selectors, Class/attribute/pseudo-class selectors, Element/pseudo-element selectors). #id beats .class beats div. !important overrides everything (avoid it). Inline styles beat all selectors. When specificity ties, the last rule in source order wins.

relative: positioned relative to its normal position; still takes up space in layout. absolute: removed from flow, positioned relative to the nearest positioned (non-static) ancestor. fixed: removed from flow, positioned relative to the viewport — stays in place when scrolling (nav bars). sticky: hybrid — acts as relative until a scroll threshold, then acts as fixed until leaving its scroll container.

Flexbox is a one-dimensional layout system (main axis + cross axis) designed for distributing space among items in a container. Key properties: display:flex, flex-direction (row/column), justify-content (main axis alignment), align-items (cross axis), flex-wrap, flex (shorthand for grow/shrink/basis), gap. Use Flexbox for navigation bars, card rows, centering content, or any 1D layout pattern.

CSS Grid is a two-dimensional layout system (rows AND columns simultaneously). Define a grid with grid-template-columns, grid-template-rows, and gap. Position items with grid-column and grid-row. Flexbox is 1D — items are distributed along one axis. Rule of thumb: use Grid for page-level layouts (two-dimensional); use Flexbox for component-level layouts (one dimension at a time). They work well together.

Responsive design makes a layout adapt to different screen sizes. Tools: CSS media queries (@media (max-width: 768px) { }), fluid widths (percentages, max-width), relative units (rem, em, vw, vh), flexible images (max-width: 100%), CSS Grid auto-fit/auto-fill with minmax(), and Flexbox wrapping. The mobile-first approach writes base styles for mobile and uses min-width queries to add complexity for larger screens.

em is relative to the font-size of the element itself (for font-size) or the nearest ancestor with a defined font-size (for other properties). This nesting makes em hard to predict. rem (root em) is always relative to the root element's font-size (html { font-size: 16px } by default). Prefer rem for font sizes (predictable), em for spacing that should scale with local text size.

Pseudo-classes (:hover, :focus, :nth-child(), :not(), :checked) select elements based on their state or relationship. Pseudo-elements (::before, ::after, ::first-line, ::placeholder) create virtual elements or target specific parts of an element. ::before and ::after insert content without adding DOM nodes — useful for decorative elements. The double colon (::) distinguishes pseudo-elements from pseudo-classes.

z-index controls the stacking order of positioned elements (position other than static). Higher z-index is rendered on top. A stacking context is a conceptual layer where z-index comparisons happen — elements inside a stacking context are z-indexed relative to each other, not the entire page. New stacking contexts are created by: position + z-index, opacity < 1, transform, filter, and several other properties.

display: none removes the element from the document flow entirely — it takes up no space, is not accessible to screen readers, and cannot receive focus. visibility: hidden makes the element invisible but it still occupies space in the layout. A third option, opacity: 0, makes it invisible but it still occupies space and can receive pointer events (use pointer-events: none if needed).

CSS custom properties are defined with a -- prefix (--primary-color: #e85a2a) on a selector (usually :root for global scope) and accessed with var(--primary-color). They cascade and can be overridden in any scope. Unlike SASS variables (compiled away), CSS variables are live — you can update them with JavaScript at runtime, enabling dynamic theming without a full re-render.

BEM (Block, Element, Modifier) is a CSS class naming methodology: Block is the independent component (.card), Element is a part of the block (.card__title, .card__image — double underscore), Modifier is a state or variant (.card--featured, .card__title--large — double dash). BEM eliminates specificity battles (all classes are equally specific) and makes the relationship between HTML and CSS explicit.

Transitions animate a property change between two states smoothly: transition: background-color 0.3s ease. They trigger on state changes (:hover, class additions via JS). Animations (@keyframes) define multi-step sequences with from/to or percentage steps and can loop, delay, and run automatically: animation: spin 1s linear infinite. Transitions are for simple A→B; animations for complex sequences. For performance, animate transform and opacity only (GPU-composited).