Common HTML & CSS Interview Questions

HTML and CSS interviews rarely ask you to memorize trivia; they test whether you understand how the browser actually renders and lays out a page. Interviewers repeatedly probe the same handful of concepts — the box model, specificity, layout systems, and semantic markup — because these come up daily in real front-end work. This topic collects the questions you are most likely to be asked, along with concise, accurate answers you can adapt in your own words.

The box model describes how every element's rendered size is calculated from four layers: content, padding, border, and margin. By default (content-box), width and height apply only to the content area, so padding and border are added on top, making the element visually larger than the declared width. With box-sizing: border-box, the declared width and height include padding and border, so the content area shrinks to accommodate them instead of growing the box — this makes sizing far more predictable, which is why most reset stylesheets set border-box globally.

Specificity determines which rule wins when multiple selectors target the same element. It is calculated as a tuple of (inline styles, ID selectors, class/attribute/pseudo-class selectors, element/pseudo-element selectors). Inline styles beat any selector; an ID (#id) beats any number of classes; a class (.class), attribute ([type]), or pseudo-class (:hover) beats an element selector (div); and !important overrides normal specificity entirely (and should be avoided). When specificity ties, the rule declared later in the source wins.

Flexbox is a one-dimensional layout model — it lays items out along a single row or column and excels at distributing space, aligning items, and handling content that can wrap or reflow, such as navbars or button groups. Grid is a two-dimensional layout model that lets you define rows and columns simultaneously, making it better for full page layouts, card grids, or any design where items need to align on both axes at once. In practice, many UIs use Grid for the overall page skeleton and Flexbox for aligning content within individual components.

Semantic elements (header, nav, main, article, section, aside, footer, button) describe the meaning of content, not just its appearance. This improves accessibility because screen readers use these landmarks to let users navigate a page quickly; it improves SEO because search engines weigh semantic structure when indexing content; and it improves maintainability because developers can understand a document's purpose at a glance instead of parsing a wall of unlabeled divs.

Block elements (div, p, section) start on a new line, stretch to fill the available width by default, and accept width, height, and vertical margin/padding. Inline elements (span, a, strong) flow within a line of text, do not start a new line, and ignore width/height and vertical margin. Inline-block elements flow inline like text but, like block elements, accept width, height, and vertical margin/padding — useful for things like navigation links that need padding without breaking onto their own line.

static is the default; the element follows normal document flow and top/left/etc. have no effect. relative positions the element relative to its own normal position, without removing it from flow. absolute removes the element from flow and positions it relative to its nearest positioned ancestor (any ancestor with a position other than static), or the viewport if none exists. fixed positions relative to the viewport and stays put during scrolling. sticky behaves like relative until a scroll threshold is crossed, then behaves like fixed within its containing block.

px is an absolute unit that does not scale with user font-size preferences. em is relative to the font-size of the element itself (or its parent for non-font properties), which means em values can compound unpredictably when nested. rem is relative to the root (html) element's font-size, giving consistent scaling regardless of nesting. Percentages are relative to a parent property (often width or font-size). Viewport units (vw, vh) are relative to the viewport's width or height, useful for full-screen sections or fluid typography.

The cascade is the algorithm the browser uses to resolve conflicting rules. It considers, in order: origin and importance (user !important, author !important, author normal, user-agent default), then specificity, then source order (later rules win ties). Understanding the cascade explains why a highly specific rule declared earlier can still lose to a less specific !important rule, and why simply reordering CSS can 'fix' a style that specificity alone can't.

display: none removes the element from the layout entirely — it takes up no space and is not accessible to screen readers or keyboard focus. visibility: hidden keeps the element's space in the layout but makes it invisible and unfocusable, though it can be restored on children with visibility: visible. opacity: 0 makes the element fully transparent but keeps it in the layout, fully interactive, and focusable, which can cause invisible-but-clickable elements if not handled carefully.

The modern, most robust approach is Flexbox: set display: flex, justify-content: center, and align-items: center on the parent. Grid offers an equally concise alternative with display: grid; place-items: center. An older technique uses position: absolute with top: 50%; left: 50%; transform: translate(-50%, -50%) when the parent is positioned. Interviewers often want you to name multiple approaches and explain their trade-offs.

z-index only has an effect on elements with a position value other than static, and it only compares elements within the same stacking context. A new stacking context is created by properties like position with a z-index, opacity less than 1, transform, filter, or will-change. Because stacking contexts nest, a child with a very high z-index can still be visually buried beneath a sibling if its parent's stacking context is layered below that sibling's — a common source of 'z-index isn't working' bugs.