HTML CSS — Cheat Sheet

Tags: html, css, flexbox, grid, responsive, accessibility, web standards

Level: intermediate

TL;DR: Reference guide for modern HTML5 semantics, CSS layout models (Flexbox and Grid), specificity calculation, box model nuances, and core responsive styling.

Key concepts

Semantic HTML tags convey document structure and improve accessibility, SEO, and screen reader parsing.

The standard CSS box model calculates total element width as content plus padding plus border.

box-sizing: border-box includes padding and border within the declared element width and height.

CSS specificity is ranked hierarchically: inline styles (1,0,0,0), IDs (0,1,0,0), classes/attributes/pseudo-classes (0,0,1,0), and elements/pseudo-elements (0,0,0,1).

Flexbox provides one-dimensional layout control along a primary main axis and a secondary cross axis.

CSS Grid provides two-dimensional layout control across explicit rows and columns simultaneously.

Media queries adapt layout rules conditionally using viewport dimensions, device orientation, or system preferences.

Relative CSS units (rem, em, ch, vw, vh) scale dynamically relative to font sizes or viewports.

The CSS cascade resolves conflicts using importance, specificity, and declaration order in the stylesheet.

Critical rendering path turns raw HTML and CSS into the DOM and CSSOM before constructing the Render Tree.

Typical questions and ready answers

Q: What is the difference between display: none and visibility: hidden?R: display: none removes the element entirely from the document flow, collapsing its space and rendering tree entry. visibility: hidden hides the element visually, but the browser preserves its original bounding box and structural space in the layout.

Q: How do Flexbox and CSS Grid differ, and when do you choose one over the other?R: I use Flexbox for one-dimensional distribution along a single row or column, such as navigation bars, toolbars, and dynamic item wrapping. I choose CSS Grid for two-dimensional architectures requiring strict row and column alignment across an entire page template.

Q: How do CSS custom properties differ from preprocessor variables like SASS?R: CSS custom properties live directly in the DOM, cascade down the element hierarchy dynamically, and can be read or modified at runtime via JavaScript or media queries without requiring recompilation.

Pitfalls and common mistakes

Vertical margins collapse between adjacent block-level elements in the normal flow.

Padding and margins do not apply vertically to non-replaced inline elements like standard <span> tags.

Applying position: absolute without an ancestor that has position: relative or another non-static value binds positioning directly to the viewport.

Overusing !important breaks the natural CSS cascade and creates hard-to-maintain selector specificity wars.

Using fixed pixel widths on parent containers causes horizontal overflow and breaks responsive layouts on narrow mobile screens.

Omitting alt attributes or hiding interactive elements from assistive technologies harms web accessibility compliance.

Snippets and commands

<!-- Semantic document outline with accessible form pattern -->
<header>
  <nav aria-label="Main Navigation">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/dashboard">Dashboard</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>User Profile Settings</h1>
    <form action="/update" method="POST">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>
      <button type="submit">Save Changes</button>
    </form>
  </article>
</main>

CSS

/* Universal reset with border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Centering with Flexbox */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive CSS Grid auto-fit columns */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Relative font sizing and CSS variables */
:root {
  --primary-color: #0f172a;
  --accent-color: #2563eb;
  --spacing-unit: 1rem;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--primary-color);
}

To review

[ ] Stacking context creation triggers with z-index, opacity, and CSS transforms

[ ] Subgrid support and alignment patterns across nested layout components

[ ] CSS container queries syntax and @container layout adaptation

[ ] WCAG contrast ratios and keyboard focus ring handling via :focus-visible

References

MDN Web Docs: HTML Elements Reference

MDN Web Docs: CSS Layout and Box Model

W3C Web Content Accessibility Guidelines (WCAG)

Jarvis Interviews
Jarvis