HTML and CSS interview questions

With content-box, width sets only the content, and padding and border are added on top. With border-box, width includes padding and border, so a 300px card stays 300px when you add padding. I usually set border-box globally because it makes layouts easier to reason about.

First importance, then specificity, then source order. I count specificity as ids, then classes and attributes, then elements, and compare from the left. If a rule is not applying, I check in developer tools which rule is crossing it out instead of reaching for !important.

Flexbox suits one-dimensional rows or columns, such as a navigation bar where items size to their content. Grid suits two-dimensional layouts where columns must line up across rows, like a product gallery. I often combine them: grid for the page, flexbox inside each card.

Every field gets a visible label linked with for and id, related options go in a fieldset with a legend, and errors are shown as text next to the field, not only as a red border. I also test that the whole form can be completed with the keyboard alone.

I write the base styles for a narrow screen, usually a single column, and then add min-width media queries that introduce wider layouts. This keeps the small-screen CSS simple and means phones do not download and then undo desktop rules.

Semantic elements carry meaning that screen readers, search engines and browser features use. A nav or main element gives screen reader users landmarks to jump to, and a real button is focusable and works with Enter and Space without extra code. A styled div gives none of that for free.