CSS Basics Interview Questions

CSS (Cascading Style Sheets) controls how HTML looks: colors, fonts, spacing, layout and animation. HTML says what the content is and CSS how it is presented, so one cached stylesheet can restyle a whole site and give the same markup a different layout on a phone or on paper.

Inline (a style attribute), internal (a <style> element) and external (a file loaded with <link rel="stylesheet">).

<link rel="stylesheet" href="styles.css">      <!-- external -->
<style> p { color: navy; } </style>            <!-- internal -->
<p style="color: crimson;">Hello</p>           <!-- inline -->

Inline beats any selector; a stylesheet rule beats inline only with !important. Internal and external have no fixed rank: with equal specificity, the one later in the page wins.

The cascade picks the winner when several rules set the same property on one element. It compares, in order: origin and importance (author styles beat browser defaults, !important beats normal declarations), inline styles, cascade layers, specificity, and order of appearance, where the last rule wins. Inheritance applies only when no rule sets the property at all.

An id must be unique in the page and scores (1, 0, 0); a class can go on any number of elements, one element can carry several, and it scores (0, 1, 0). Style with classes: a #header a rule can only be overridden by another id or !important. Keep ids for fragment links, label for and scripts.

Text properties inherit (color, font-family, font-size, line-height, text-align); box properties do not (margin, padding, border, width, background). Force either way with inherit, initial, unset or revert. The trap is form controls: button, input and select get their own font from the browser until you set font: inherit.

<style>
  .card { color: darkgreen; font-family: Georgia, serif; border: 2px solid darkgreen; padding: 8px; }
  .fixed { font: inherit; color: inherit; }
</style>
<div class="card">
  <p>This paragraph inherits the color and the font, but not the border.</p>
  <button>Default button font</button>
  <button class="fixed">font: inherit</button>
</div>

A block element starts on a new line and takes the full width; an inline element flows in the line of text and ignores width and height; inline-block flows inline but accepts width, height and vertical margins.

<style>
  span, div { background: #bfdbfe; margin: 4px; padding: 4px; }
  .sized { width: 120px; height: 40px; }
  .ib { display: inline-block; }
</style>
<div class="sized">block: own line, width works</div>
<span class="sized">inline: width ignored</span>
<span class="sized ib">inline-block: width works</span>
<span>and stays on the line</span>

Follow-up: why does width work on an img, which is inline? It is a replaced element. More in display.

display: none removes the element from layout and from screen readers; visibility: hidden keeps its space but takes no clicks and is not read; opacity: 0 keeps the space, the clicks and the screen reader text.

<style>
  .row { display: flex; gap: 6px; margin-bottom: 8px; }
  .row div { background: #2563eb; color: white; padding: 8px; }
  .none { display: none; }
  .hidden { visibility: hidden; }
  .clear { opacity: 0; }
</style>
<div class="row"><div>A</div><div class="none">B</div><div>C</div></div>
<div class="row"><div>A</div><div class="hidden">B</div><div>C</div></div>
<div class="row"><div>A</div><div class="clear">B</div><div>C</div></div>

To hide something only visually and keep it for screen readers, use a class that clips it to 1px.

px is absolute. em follows the element's font size, rem the root's, % usually the parent, vw and vh the viewport (dvh, svh on mobile), fr the grid's free space. Use rem for type and spacing so the page follows the user's font setting, % and fr for layout, px for borders. Reference: CSS units.

Make the parent display: flex with justify-content: center and align-items: center, or display: grid with place-items: center, and give it a height.

<style>
  .flex { display: flex; justify-content: center; align-items: center; }
  .grid { display: grid; place-items: center; }
  .flex, .grid { height: 120px; background: #e5e7eb; margin-bottom: 8px; }
  .box { background: #2563eb; color: white; padding: 12px; }
</style>
<div class="flex"><div class="box">flex</div></div>
<div class="grid"><div class="box">grid</div></div>

Also accepted: margin: 0 auto with a set width (horizontal only), or absolute positioning at 50% plus transform: translate(-50%, -50%), whose percentages refer to the element itself. More in center a div.

A reset removes the browser's default styles (margins, heading sizes, list bullets); normalize keeps useful defaults and only fixes the differences between browsers. Most projects now use a short reset of their own:

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

Named colors (tomato), hex (#ff6347, short #f63), rgb(255 99 71), hsl(9 100% 64%) and newer spaces like oklch(), each with optional alpha: rgb(255 99 71 / 50%). HSL and OKLCH make shades easy because you change only the lightness.

opacity fades the whole element, text and children included; a background like rgb(37 99 235 / 50%) fades only the background.

<style>
  .stage { background: repeating-linear-gradient(45deg, #fde68a 0 10px, #ffffff 10px 20px); padding: 10px; }
  .box { color: white; padding: 10px; margin-bottom: 8px; font-weight: bold; }
  .op { background: #2563eb; opacity: 0.5; }
  .bg { background: rgb(37 99 235 / 50%); }
</style>
<div class="stage">
  <div class="box op">opacity: 0.5, the text fades too</div>
  <div class="box bg">rgb(... / 50%), the text stays solid</div>
</div>

A child cannot undo its parent's opacity, because the parent is drawn as one layer and then faded. More in opacity.

Prefixes (-webkit-, -moz-, -ms-) mark a browser's own or experimental version of a property. You rarely write them by hand now: browsers ship new features behind flags, and Autoprefixer adds what your Browserslist targets need. Put the standard property after the prefixed one.

.panel {
  -webkit-backdrop-filter: blur(6px);  /* Safari before version 18 */
  backdrop-filter: blur(6px);          /* standard property last */
}
.outlined {
  -webkit-text-stroke: 1px black;      /* only exists with the prefix, in every browser */
}