Beginner CSS Interview Questions and Answers

CSS (Cascading Style Sheets) controls presentation: colours, fonts, spacing, layout and animation. Keeping it separate from HTML means content and design can change independently, one stylesheet can style many pages, browsers cache it, and the same HTML can have different styles for screens, print or dark mode.

1. External stylesheet: <link rel="stylesheet" href="styles.css"> in the head; the standard choice.
2. Internal: a <style> element in the page.
3. Inline: the style attribute on an element; highest priority among normal declarations but hard to maintain.

Every element is a box made of content, then padding (inside the border, takes the background), then border, then margin (outside, transparent). With the default box-sizing: content-box, width sets only the content width, so padding and border are added on top. With box-sizing: border-box, width includes padding and border, which is easier to work with.

Padding is space inside the border, between the content and the border; it shows the element's background and is part of the clickable area. Margin is space outside the border, separating the element from its neighbours; it is transparent, can be negative, and vertical margins between blocks can collapse.

An id (#logo) must be unique on the page; a class (.card) can be reused on many elements, and an element can have several classes. Id selectors have much higher specificity (1,0,0 versus 0,1,0), so they are harder to override. Most styling is done with classes.

• block starts on a new line, fills the available width and accepts width, height and vertical margins.
• inline flows within text, is only as wide as its content, and ignores width, height and vertical margins.
• inline-block flows within text like inline, but accepts width, height and all margins and padding like block.

display: none removes the element from the layout completely: it takes no space. visibility: hidden hides it but keeps its space in the layout. Both hide it from screen readers. (opacity: 0 makes it invisible but it still takes space, can be clicked, and is read by screen readers.)

• static: default, normal flow.
• relative: stays in the flow; top/left nudge it from its normal place; becomes a reference for absolute children.
• absolute: removed from the flow, positioned relative to the nearest positioned ancestor.
• fixed: removed from the flow, positioned relative to the viewport; stays put while scrolling.
• sticky: scrolls normally until a threshold, then sticks within its container.

px is a fixed CSS pixel. em is relative to the element's font size (or the parent's when used for font-size), so it compounds when nested. rem is relative to the root (<html>) font size, so it is consistent across the page and respects the user's font-size setting. % is relative to a value of the parent, such as its width.

When several declarations set the same property on an element, the cascade decides which one wins: first by origin and !important, then by cascade layers, then by specificity, and finally by order (the last one wins).

Some properties pass their value from a parent to its descendants, mostly text properties such as color, font-family, font-size and line-height. Box properties such as margin, padding, border and background are not inherited. You can force inheritance with inherit, or reset with initial, unset or revert.

A pseudo-class (one colon) selects an element in a state or position: :hover, :focus-visible, :first-child, :nth-child(2n). A pseudo-element (two colons) styles a part of an element or inserts content: ::before, ::after, ::first-letter, ::placeholder.

The simplest modern answer: on the parent, display: grid; place-items: center;. With Flexbox: display: flex; justify-content: center; align-items: center;. For horizontal centering only, a block with a width can use margin: 0 auto.

Named colours (tomato), hex (#2f5fe0, #2f5fe080 with alpha), rgb(47 95 224 / 0.5), hsl(220 75% 53%), and newer formats such as oklch(). currentColor refers to the element's text colour and transparent is fully transparent.

* matches every element. *, *::before, *::after { box-sizing: border-box; } is a common first rule in stylesheets: it makes width and height include padding and border on every element, so sizes are predictable.