CSS interview questions covering selectors, combinators, pseudo-classes, cascade, specificity, inheritance, box model, units, colors and typography.
Open a question for the full answer, code and interview guidance.
CSS stands for Cascading Style Sheets. It controls the presentation and layout of HTML content, including colors, spacing, typography, sizing, positioning, responsive behavior, and visual states.
CSS can be applied as inline styles through the style attribute, as internal CSS inside a style element, or as an external stylesheet linked with a link element.
A CSS selector identifies the elements to which a style rule applies. Selectors can target element names, classes, IDs, attributes, relationships, states, and structural conditions.
An element selector targets all matching HTML elements, such as p or button. A class selector targets elements containing a particular class, while an ID selector targets the element with a particular id.
Combinators describe relationships between selectors. The descendant combinator targets matching descendants, > targets direct children, + targets the immediately following sibling, and ~ targets later siblings sharing the same parent.
Attribute selectors target elements based on the presence or value of HTML attributes. They can match exact values, word lists, prefixes, suffixes, substrings, and other attribute conditions.
Pseudo-classes select elements based on a state, user interaction, document structure, or another condition rather than requiring an additional HTML class. Common examples include :hover, :focus, :checked, :disabled, :first-child, :nth-child(), :not(), and :required.
Pseudo-elements style a particular part of an element or create a generated box associated with it. Common examples include ::before, ::after, ::first-letter, ::first-line, ::marker, and ::selection.
The cascade is the algorithm CSS uses to resolve competing declarations that apply to the same property on the same element. It considers factors including origin and importance, cascade layers, specificity, scoping proximity where applicable, and source order.
Specificity is one part of the cascade used to compare competing selectors within the relevant cascade context. IDs contribute more specificity than classes, attributes, and pseudo-classes, while type selectors and pseudo-elements contribute a lower level.
Specificity is commonly reasoned about in columns: ID selectors; class selectors, attributes, and pseudo-classes; and type selectors and pseudo-elements. The selector with the higher value at the first differing column wins when other cascade factors are equal.
The !important flag changes a declaration's importance within the cascade and can cause it to override ordinary declarations in the same relevant origin and layer context. It is not simply an unlimited 'highest priority' switch because the full cascade still has rules for origins, layers, and important declarations.
Inheritance allows some CSS property values to pass from a parent element to its descendants. Text-related properties such as color and font-family commonly inherit, while layout properties such as margin, padding, border, and width generally do not.
initial sets a property to its CSS-defined initial value. inherit uses the computed value from the parent. unset behaves like inherit for naturally inherited properties and like initial for non-inherited properties.
The CSS box model describes how an element is represented as content surrounded by padding, border, and margin. By default, declared width and height normally apply to the content box, with padding and border added outside those dimensions.
With box-sizing: content-box, width and height apply to the content area, so padding and borders increase the final outer dimensions. With border-box, the declared width and height include the content, padding, and border.
Vertical margins of certain block elements in normal flow can combine, or collapse, instead of being added together. This commonly occurs between adjacent block elements and between a parent and its first or last child under specific conditions.
Margin creates space outside an element's border and separates the element from surrounding content. Padding creates space inside the border between the content and the border.
Common CSS units include absolute units such as px and relative units such as %, em, rem, vw, vh, and newer viewport variants. CSS also provides physical units such as in, cm, and pt, although they are less common for ordinary screen layouts.
em is relative to the relevant font-size context. For font-size itself, it is based on the parent element's font size; for many other properties, it is based on the element's computed font size. Nested em-based sizing can therefore compound.
px is a CSS pixel unit commonly used for precise borders, icons, and other dimensions. Percentage values are relative to a property-specific reference, often the containing block.
width specifies a preferred or definite width according to the layout context. min-width prevents the used width from becoming smaller than a limit, while max-width prevents it from becoming larger than a limit.
CSS colors can be expressed using named colors, hexadecimal notation, rgb(), hsl(), and other modern color functions. Some color syntaxes support an alpha component for transparency.
Important typography properties include font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-align, text-decoration, text-transform, and related text properties.
Web fonts are font resources downloaded by the browser instead of relying only on fonts installed on the user's device. They can be declared with @font-face or loaded through a font service.