HTML & CSS Reference

This section documents general HTML5 and CSS concepts — it is not tied to any specific framework or library. This content was generated with the assistance of AI. Verify it against current MDN documentation and browser-support tables (caniuse.com) before relying on it in production, since HTML/CSS features and browser support continue to evolve.

Welcome to the HTML & CSS reference. This section is organized by topic, from document structure through styling, layout, interactivity, and performance, so you can jump straight to what you need, or work through it top to bottom as a refresher.

What’s covered

  • HTML5 structure and semantics — the HTML5 content-type taxonomy, document metadata, and the semantic structural elements (header/main/section/article/nav/aside/ footer), each with typical attributes and examples.

  • SEO implications of HTML structure — how semantic markup helps search engines understand a page, title/meta tags, heading hierarchy, internal linking, and canonical URLs.

  • Layout: float, flexbox & grid — how each layout mode arranges elements, responsive/resize behavior, and scroll behavior, with axis and track diagrams.

  • CSS positioning — static/relative/fixed/absolute/sticky and how each displaces (or doesn’t displace) surrounding content, plus z-index stacking.

  • The box model — the content/padding/border/margin nesting, box-sizing, and a labeled diagram of the four layers.

  • Selectors & specificity — selector types, pseudo-classes/ elements, combinators, the specificity algorithm, and modern additions (nesting, :has(), @layer, @scope).

  • CSS custom properties and media queries — --custom-property syntax and scoping, responsive breakpoints, and prefers-reduced-motion.

  • Light and dark theming with CSS — color models, the HSL color wheel, and light/dark theming techniques including color-scheme and light-dark().

  • CSS transitions — the full transition property table, shorthand ordering, and @starting-style for first-render transitions.

  • CSS animations, keyframes & performance — the animation shorthand, @keyframes, worked examples, and how to keep animations smooth and GPU-friendly.

  • SVG styling & animation — styling inline SVG with CSS and animating SVG properties such as stroke-dashoffset.

  • Forms and form styling — form controls, key attributes, custom input/select/ file-input styling, and drag-and-drop file uploads.

  • Forms: accessibility and validation — label association, keyboard navigation, and native and JavaScript-driven form validation.

  • Runtime loading performance — Core Web Vitals, critical-CSS inlining, lazy loading, and responsive image techniques.

  • Build-time performance optimization — minification, bundling/code-splitting, DOM-size reduction, and asset compression.

  • Appendix: HTML element reference — text-level semantics, lists, tables, embedded/media, and interactive elements not already covered above.

  • Appendix: CSS property reference — typography, color/ background, borders/effects, display/overflow, and other common properties not already covered above.

  • Cheat sheet — a one-page, downloadable PDF summary of the essentials above for quick memorization.

Bibliography

  • Jephson, Brett; Coulson, Lewis; Silveira, Ana Carolina. Practical HTML and CSS: Elevate your internet presence by creating modern and high-performance websites for the web. Packt Publishing, 2024. See the publisher’s page.

  • MDN Web Docs — the general reference used throughout for topics and details not covered by the book above.