HTML + CSS Interview Notes • Quick Revision

HTML Core Concepts

Document Essentials

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page title</title>
  </head>
  <body>...</body>
</html>

<!doctype html> = standards mode.
lang aids accessibility & SEO.
Semantic layout: <header> <nav> <main> <section> <article> <aside> <footer>.
Block vs inline: block starts on a new line; inline flows within text (span, a, em).

Head, Meta & Links

<meta name="description" content="Short summary">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<meta property="og:title" content="Card Title">

Meta description helps search snippets.
Favicon supports multiple formats (svg/ico/png).
Open Graph/Twitter meta for rich link previews.

Forms (Deep Dive)

Basics & Accessibility

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <fieldset>
    <legend>Topics</legend>
    <label><input type="checkbox" name="t" value="js"> JS</label>
    <label><input type="checkbox" name="t" value="css"> CSS</label>
  </fieldset>

  <button type="submit">Subscribe</button>
</form>

label[for] ↔ input[id] for screen readers & larger hit areas.
required, pattern, min/max enable built-in validation.
fieldset/legend group related controls accessibly.
autocomplete improves UX; use correct tokens (name, email, tel…).

Useful Input Types

<input type="email">  <input type="tel">  <input type="url">
<input type="number" min="0" max="10">
<input type="date"> <input type="time"> <input type="datetime-local">
<input type="range" min="0" max="100">
<input type="file" accept="image/*">

Prefer native types before JS widgets—mobile keyboards & validation “just work”.

Form semantics

name is what gets submitted.
method="post" for sensitive writes; get for idempotent search.
novalidate to disable built-in validation (rarely needed).

Images & Media (Responsive)

Alt Text & Basics

<img src="team.jpg" alt="Volunteers at the help desk">

Alt describes purpose, not pixels. If decorative: alt="".
Use <figure> + <figcaption> for captions.

Responsive Images

<img src="img-800.jpg"
     srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Parade">

`<picture>` & Media

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Stage lighting">
</picture>

<video controls width="480">
  <source src="clip.mp4" type="video/mp4">
  Sorry, your browser can't play this video.
</video>

Prefer modern formats (AVIF/WEBP) with JPEG fallback via <picture>.

Tables (Semantics & Accessibility)

Basic Table

<table>
  <caption>Festival schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Time</th><th scope="col">Event</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Fri</th><td>10–12</td><td>Opening</td></tr>
  </tbody>
</table>

caption describes the table for everyone (and AT).
scope="col|row" helps screen readers map headers to cells.

Complex Header

<thead>
  <tr>
    <th rowspan="2" scope="col">Day</th>
    <th colspan="2" scope="colgroup">Stage A</th>
  </tr>
  <tr>
    <th scope="col">Time</th>
    <th scope="col">Event</th>
  </tr>
</thead>

Avoid tables for layout—use CSS layout (Flex/Grid).

Accessibility & SEO (High-Yield)

A11y Essentials

Use meaningful landmarks: <header>, <main>, <nav>, <footer>.
One <h1> per page; nested headings form outline.
Interactive items must be keyboard-reachable (tab order, <button> not <div>).
Provide visible focus styles for keyboard users.
Use ARIA only when native semantic is missing; prefer HTML first.

SEO Essentials

Unique title & meta description per page.
Semantic headings (don’t style <div> to look like <h2>).
Descriptive link text (avoid “click here”).
Performance (images sized correctly; no layout shift).

CSS Core (Cascade, Inheritance, Box Model)

Cascade & Inheritance

Cascade order: origin (UA/author/user) → specificity → order → !important.
Inheritance: text-related props (color, font) inherit; box model props don’t.
Initial/Unset/Revert: reset strategies to tame messy styles.

/* Inherits */
body{ color:#222; font-family:system-ui; }
p{ /* inherits color & font */ }

/* Does not inherit */
.card{ margin:16px; padding:12px; border:1px solid #ddd; }

Units & Colors

Absolute: px
Relative: em (parent font), rem (root font), %, vw/vh (viewport)
Color: hex #1e293b, rgb/rgba, hsl/hsla

html{ font-size:16px }
h1{ font-size:2rem }   /* 32px */
.card{ width:90%; max-width:640px }
.hero{ height:60vh; background:hsl(220 90% 56%) }

Selectors & Specificity (High-Yield)

Selector Types

/* Type, class, id */
p { } .note { } #app { }

/* Attribute */
input[type="email"] { }

/* Pseudo-class / Pseudo-element */
a:hover { text-decoration: underline }
input:focus { outline: 2px solid dodgerblue }
p::first-line { font-variant: small-caps }

/* Combinators */
.card .title {}      /* descendant */
.card > .title {}    /* child */
.card + .card {}     /* adjacent sibling */
.card ~ .badge {}    /* general sibling */

Specificity Cheat

Inline (style="") = highest (except !important).
ID > Class/Attr/Pseudo-class > Type/Pseudo-element.
Avoid over-qualifying (e.g., div.card.title).

/* Example resolution */
p{color:gray}           /* 0-0-0-1 */
.note p{color:green}    /* 0-0-1-1 */
#main p{color:blue}     /* 0-1-0-1 */   /* wins */

Tip: Use classes + small, composable selectors (BEM is fine: .card__title--big).

Layout Foundations: Box Model, Display, Position, Overflow, Z-index

Box Model

.box{
  box-sizing: border-box; /* include padding+border in width/height */
  width:300px; padding:16px; border:2px solid #ddd; margin:16px;
}

Set *{box-sizing:border-box} globally to simplify sizing.

Display & Flow

block (div, p), inline (span, a), inline-block, flex, grid.
visibility:hidden keeps layout; display:none removes from flow.

.nav{ display:inline-flex; gap:.5rem }
.badge{ display:inline-block; padding:.2rem .5rem }

Position & Stacking

static (default), relative (offset), absolute (to nearest positioned ancestor), fixed, sticky.
z-index works inside stacking contexts—created by position + opacity < 1 + transform etc.

.sticky-header{ position:sticky; top:0 }
.tooltip{ position:absolute; inset:auto auto 100% 0 }

Overflow & Aspect

.panel{ overflow:auto; max-height:300px }
.video{ aspect-ratio:16/9; }

Common bug: missing overflow on scrollable panels.

Flexbox & Grid (Interview-favorite)

Flexbox (1-D layout)

.row{
  display:flex;
  gap:12px;
  align-items:center;      /* cross axis */
  justify-content:space-between; /* main axis */
}
.item{ flex: 1 1 200px }  /* grow shrink basis */

Main axis = flex-direction. Cross axis = perpendicular.
Use for navbars, toolbars, simple equal columns.

Grid (2-D layout)

.gallery{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

Great for full-page layouts and card grids.
auto-fit/minmax = responsive magic.

Responsive & Media Queries

Media Queries

@media (max-width: 640px){
  .sidebar{ display:none }
  .title{ font-size:1.25rem }
}

Mobile-first: write base styles, then @media (min-width:...) for larger screens.

Transitions & Transforms (Bonus)

.btn{
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

Small motion = high perceived quality—keep it subtle.

Interview Q&A (HTML + CSS)

HTML—Likely Questions

What are semantic elements? Tags that convey meaning/structure (header, nav, main, article, section, aside, footer). Improve a11y & SEO.
Difference: block vs inline? Block starts new line & accepts width/height; inline sits within text flow.
How do you make images accessible? Meaningful alt; decorative as alt=""; use figure/figcaption for captions.
Form accessibility best practices? label for every control, fieldset/legend, proper types, keyboard focus, visible errors.
When use tables? Only for tabular data; add caption, scope, thead/tbody.
Meta tags for SEO/social? title, meta description, Open Graph/Twitter cards, correct language, canonical URLs (server-level).

CSS—Likely Questions

Explain the box model. Content → padding → border → margin. Prefer box-sizing:border-box.
Specificity order? Inline > ID > Class/Attr/Pseudo-class > Type/Pseudo-element (then source order).
Flex vs Grid? Flex = one dimension (row/column); Grid = two dimensions (rows & columns).
Position values? static, relative, absolute, fixed, sticky (+ stacking contexts & z-index).
How to center a div? Flex: display:flex; align-items:center; justify-content:center; (with fixed height) or Grid: place-items:center;
Responsive strategy? Mobile-first, fluid units (%, rem, vw), media queries, responsive images.

Common Pitfalls (be ready!)

Using divs for everything instead of semantic tags.
No labels on form inputs; inaccessible custom controls.
Over-specific selectors → hard to maintain; misuse of !important.
Forgetting box-sizing → width calculations painful.
z-index not working because a new stacking context was created.
Tables for layout instead of CSS layout systems.

One-liners (fast answers)

ARIA vs HTML? Prefer native HTML. Use ARIA when no semantic exists.
rem vs em? rem based on root; em based on parent—can compound.
Inline vs Internal vs External CSS? One element vs one page vs many pages (best practice).
Preload vs Prefetch? Preload = needed now; Prefetch = maybe later.
Minify & bundle? Reduces size & requests; improves performance.

Practice Prompts (use in interviews or self-check)

Create an accessible contact form with email, phone, topic (select), message, required validation, and keyboard-friendly controls.
Build a responsive 3-card layout that becomes a single column below 640px using Grid.
Implement a sticky header with a drop shadow appearing on scroll (CSS only for the effect).
Convert a two-row table header using scope to maintain accessibility.
Replace large JPG hero with AVIF/WEBP + fallback using <picture>.