What is the difference between HTML and CSS, and how do they work together?

Start by explaining roles, HTML provides the structure and meaning of content, while CSS controls presentation like layout, spacing, and visual styling. Mention that browsers parse HTML into the DOM, then apply CSS rules to compute the final styles that get painted on screen. For example, you might use semantic HTML like , , and to describe the page sections, then use CSS to set a layout with flexbox or grid. A simple pattern is to keep HTML focused on content and hierarchy, and keep styling in CSS, so changes to design do not force you to rewrite markup. Call out maintainability, use semantic elements and classes that describe purpose, not appearance, and avoid inline styles except for very specific cases. Also mention that specificity and cascade rules decide which CSS wins, so naming and structure matter as projects grow.

Explain the CSS box model. How do margin, border, padding, and content affect layout?

Describe the box model as content in the center, then padding, then border, then margin outside the border. Explain that padding and border add to the element’s rendered size, and margins create space between elements, with vertical margin collapsing in normal flow. A concrete example is a card with width: 300px, padding: 16px, border: 1px solid. By default, the real rendered width becomes 300 + 16 + 16 + 1 + 1, which surprises people, so you often set box-sizing: border-box to make padding and border included in the declared width. Mention common pitfalls, margin collapsing between parent and first child, unexpected overflow from fixed widths plus padding, and layout shifts when borders appear on hover. If you are debugging, you can use browser devtools box model view and temporarily outline elements to see spacing quickly.

What is the difference between block, inline, and inline-block elements?

Explain that block elements take the full available width by default and start on a new line, inline elements flow within text and ignore width and height, and inline-block flows inline but respects width and height. Connect this to how you choose elements for layout and for text-level styling. For example, and are block, and are inline, and an inline-block is useful for a button-like link where you want padding and a fixed hit area. If you need a row of items that wrap, you might choose flexbox on the parent instead of relying on inline-block spacing quirks. Point out gotchas, inline elements can have vertical padding but line-height can make spacing feel inconsistent, and inline-blocks can create gaps because whitespace in HTML counts. You can remove gaps by collapsing whitespace, setting font-size: 0 on the parent, or switching to flexbox which is usually more predictable.

How does CSS specificity work, and how do you avoid specificity problems?

Explain the idea, when multiple rules match the same element, specificity and source order determine which rule applies. Mention the typical order from lower to higher, element selectors, classes and attributes, then IDs, with inline styles often overriding most stylesheet rules. Give an example like .button { color: blue } and #header .button { color: red }, the latter wins because it is more specific. If you later add .page .content .button you can end up in a specificity arms race, so your goal is to keep selectors short and consistent. To avoid problems, use a naming system and component boundaries, prefer classes over IDs for styling, and avoid chaining selectors unless you need it. If you must override, do it close to the component or state class like .button.is-primary, and avoid !important except in utilities where you have a clear rule set.

What are Flexbox and CSS Grid, and when would you choose one over the other?

Explain flexbox as one-dimensional layout, it is great for aligning items in a row or column with flexible sizing. Explain grid as two-dimensional layout, it is designed for rows and columns at the same time, like page templates and complex responsive sections. A practical example is a navbar, flexbox makes it easy to space items with justify-content and align them with align-items. For a dashboard with cards in a consistent grid that changes columns by breakpoint, CSS Grid with grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) is a clean approach. Call out pitfalls, flex items can shrink unexpectedly unless you set min-width or flex properties carefully, and grid can be overkill for simple alignment tasks. In interviews, explain your choice for constraints, content-driven sizing, and how you handle responsiveness, not just personal preference.

How do you build a responsive layout in HTML and CSS?

Start with a mobile-first approach, write base styles for small screens, then add media queries for larger breakpoints. Explain that responsiveness is not only about breakpoints, it is also about flexible units, fluid containers, and images that scale. Give a concrete technique, use relative units like rem for typography, percentages or fr units for layout, and set images with max-width: 100% and height: auto. For layout, you might use a single-column grid on mobile, then switch to two or three columns at 768px and 1024px using grid or flexbox. Mention things to avoid, hard-coded pixel heights that break with dynamic content, hiding important content on mobile, and forgetting the viewport meta tag. Also mention testing, resize the browser, use device emulation, and check real devices when possible because touch and font rendering can change spacing.

What is semantic HTML, and why does it matter?

Define semantic HTML as using elements that describe meaning and structure, like for actions, for navigation, and heading levels for content hierarchy. Explain that it improves accessibility, SEO, and maintainability because tools and people can understand your page better. Give an example, if you use with click handlers for a button, you lose keyboard support and proper semantics unless you rebuild those behaviors manually. If you use a real , you get focus, keyboard activation, and correct roles by default, and your CSS can still style it however you like. Add tips, keep heading order logical, use lists for list content, and use landmarks like header, main, and footer to help screen readers. When in doubt, choose the element that matches the intent, then style it, instead of choosing an element for its default look.

How do you approach accessibility (a11y) when building UI with HTML and CSS?

Explain that accessibility starts with correct HTML elements, clear labels, and keyboard support, then CSS should preserve focus visibility and readable contrast. You want your UI to work with a keyboard, screen reader, and different zoom levels. Provide a specific example, for forms, connect to inputs, group related fields with and , and show errors with text that is connected via aria-describedby. For interactive components, ensure there is a visible :focus style, and do not remove outlines unless you replace them with an accessible alternative. Mention common mistakes, using color alone to show state, hiding content with display: none when it needs to be announced, and creating click targets that are too small on mobile. If you have time, mention quick checks like tabbing through the page, running a contrast checker, and testing at 200% zoom.

What is the difference between relative, absolute, fixed, and sticky positioning?

Explain relative as positioning the element relative to its normal place, without removing it from document flow. Explain absolute as removing it from flow and positioning it relative to the nearest positioned ancestor, fixed as anchored to the viewport, and sticky as behaving like relative until a scroll threshold then sticking. Use an example, for an icon inside an input, you can wrap the input and icon in a positioned container, then place the icon with position: absolute; right: 12px; top: 50%; transform: translateY(-50%). For a header that stays visible, position: sticky; top: 0 often works better than fixed because it keeps natural flow until it reaches the top. Call out pitfalls, absolute positioning can break responsiveness if you hard-code offsets, fixed headers can cover content unless you add padding, and sticky can fail if a parent has overflow set. In debugging, check which ancestor creates the containing block and whether overflow or transforms are affecting positioning.

How do you optimize HTML and CSS for performance and maintainability?

Focus on two angles, keep CSS predictable and reduce unnecessary work for the browser. You can do that by keeping selectors simple, avoiding deeply nested rules, and structuring styles around reusable components. For example, you can use a small set of utility classes for spacing and typography, or a component-based approach where each component has its own class namespace. For performance, you can reduce unused CSS, compress assets, and avoid heavy effects like large box-shadows on many elements, which can be expensive to paint. Mention practical habits, use a consistent naming convention, keep styles close to the component, and document tricky layout decisions with short comments. Also talk about avoiding layout thrash, prefer transform and opacity for animations, and test with devtools to see if styles cause reflow or repaint spikes.

Tell me about a time you fixed a tricky layout bug across browsers.

Situation: A marketing landing page looked correct in Chrome but broke in Safari, the hero section overflowed and caused horizontal scrolling. Task: You needed to identify the root cause quickly because the page was tied to a campaign launch. Action: You reproduced the issue in Safari devtools, then isolated the problem to a flex container where a child had long unbroken text and min-width defaults that prevented shrinking. You added min-width: 0 to the flex child, verified overflow handling, and added a small set of regression checks at common breakpoints. Result: The horizontal scroll disappeared across Safari and mobile browsers, and the layout stayed stable at all breakpoints during the campaign. You also documented the min-width: 0 flexbox behavior so the team avoided repeating the issue.

Describe a time you improved accessibility on a page you did not originally build.

Situation: You inherited a form-heavy page with custom styled controls and users reported it was hard to complete with a keyboard. Task: You needed to improve accessibility without changing the visual design. Action: You replaced clickable div controls with semantic elements like button and input where possible, then added proper labels and aria-describedby for helper text and errors. You updated CSS to keep focus states visible, improved color contrast, and tested the flow by tabbing through the page and checking it with a screen reader. Result: Keyboard navigation worked end-to-end, error messages were announced correctly, and support tickets related to form completion dropped after the update. The visual design stayed the same, so the change was easy for stakeholders to accept.

Tell me about a time you disagreed with a teammate about HTML or CSS implementation, and how you handled it.

Situation: A teammate wanted to ship a layout using many nested divs and absolute positioning, while you thought a grid-based approach would be more maintainable. Task: You needed to align on a solution without slowing delivery or creating tension. Action: You asked what constraints they were worried about, then built a small prototype showing both approaches at two breakpoints and with longer real content. You compared readability, responsiveness, and how easy it was to adjust spacing, and you agreed on a hybrid that kept semantic HTML and used grid for the main layout. Result: The team shipped on time with fewer layout edge cases, and future changes were simpler because the structure matched the design intent. The discussion also set a healthier pattern for reviewing UI decisions with small prototypes instead of opinions.

html css Interview Questions: Complete Guide

Html css interview questions usually focus on how you build layouts, handle responsive design, and write maintainable, accessible markup. You can expect a mix of quick concept checks, small code reviews, and practical scenarios like fixing a broken layout or improving page performance. It can feel detail-heavy, but if you explain your thinking clearly and show clean fundamentals, you will be in good shape.

Common Interview Questions

Behavioral Questions (STAR Method)

STAR Method: Structure your answers using Situation, Task, Action, and Result to tell compelling stories about your experience.

Questions to Ask the Interviewer

Show your interest by asking thoughtful questions

•How do you define “done” for HTML and CSS work here, is it visual match, accessibility checks, performance budget, or all three?
•What browsers and devices do you support, and how do you test layout and responsiveness before release?
•How is your CSS organized today, for example CSS modules, utility classes, a design system, or something else?
•When design and implementation differ, who makes the call and what is the collaboration process with designers?
•What are the most common UI bugs you see in production, and what would you want me to improve in my first 60 to 90 days?

Interview Preparation Tips

1
Practice explaining your choices out loud, especially why you picked flexbox vs grid, and how you thought about accessibility.
2
Do a quick drill in devtools, inspect an element, trace which CSS rule wins, and talk through specificity and cascade without rushing.
3
Prepare two small stories with real details, one about fixing a layout bug, and one about improving accessibility or responsiveness.
4
When you answer, name the tradeoff you made, like speed vs maintainability, then explain how you reduced risk with testing and clear structure.

html css Interview Questions: Complete Guide

Emily Thompson

Common Interview Questions

Behavioral Questions (STAR Method)

Questions to Ask the Interviewer

Interview Preparation Tips

Related guides

tableau Interview Questions: Complete Guide

excel Interview Questions: Complete Guide

MongoDB Interview Questions in 2025

Python Interview Questions in 2025

html css Interview Questions: Complete Guide

Emily Thompson

Common Interview Questions

Q1What is the difference between HTML and CSS, and how do they work together?

Q2Explain the CSS box model. How do margin, border, padding, and content affect layout?

Q3What is the difference between block, inline, and inline-block elements?

Q4How does CSS specificity work, and how do you avoid specificity problems?

Q5What are Flexbox and CSS Grid, and when would you choose one over the other?

Q6How do you build a responsive layout in HTML and CSS?

Q7What is semantic HTML, and why does it matter?

Q8How do you approach accessibility (a11y) when building UI with HTML and CSS?

Q9What is the difference between relative, absolute, fixed, and sticky positioning?

Q10How do you optimize HTML and CSS for performance and maintainability?

Behavioral Questions (STAR Method)

B1Tell me about a time you fixed a tricky layout bug across browsers.

B2Describe a time you improved accessibility on a page you did not originally build.

B3Tell me about a time you disagreed with a teammate about HTML or CSS implementation, and how you handled it.

Questions to Ask the Interviewer

Interview Preparation Tips

Related guides

tableau Interview Questions: Complete Guide

excel Interview Questions: Complete Guide

MongoDB Interview Questions in 2025

Python Interview Questions in 2025