Flashcards · HTML & CSS · Free
HTML & CSS flashcards, generated for you.
Example HTML & CSS study cards to learn from right now — then generate a full set from your own notes (plus a practice quiz) and export to Quizlet or Anki. Free, no account needed.
Example HTML & CSS flashcards
What is the correct HTML syntax for a self-closing tag?
<tag /> or <tag> (in HTML5). Examples: <img />, <br />, <input />. The slash is optional in HTML5 but required in XHTML.
Why doesn't `margin: auto;` center a block element vertically?
Margin auto only works on the axis where the element has a constrained size. For vertical centering, you need `height` + `margin: auto;` with `position: absolute; top: 0; bottom: 0;` OR use flexbox/grid.
What is the cascade order when multiple CSS rules apply to the same element?
Specificity > Importance > Source order. Specificity: inline (1000) > IDs (100) > classes/attributes (10) > elements (1). `!important` overrides all except higher specificity with `!important`.
What's the difference between `<div>` and `<span>`?
`<div>` is block-level (takes full width, starts new line); `<span>` is inline (flows with text, only takes needed width). Both are semantically neutral containers.
Why might `display: inline` ignore `width`, `height`, and vertical `margin`?
Inline elements only respect width/height of content and ignore these properties by CSS spec. Use `display: inline-block;` or `display: block;` to apply width/height, or use padding instead of margin for spacing.
What does `box-sizing: border-box;` do, and why is it useful?
Makes `width` and `height` include padding and border (not just content). Prevents layout breakage from padding/borders expanding elements beyond intended width. Commonly applied globally: `* { box-sizing: border-box; }`
What is stacking context and what creates a new one?
A stacking context is a 3D rendering layer. New contexts are created by: `position` (not static) + `z-index`, `opacity < 1`, `transform`, `filter`, `will-change`, flexbox/grid children, etc. `z-index` only compares within same context.
Why does `<img>` sometimes have unwanted whitespace below it?
`<img>` is inline by default; browsers reserve space below for descenders (like in 'g'). Fix: `display: block;`, `vertical-align: top;`, or `line-height: 0;` on parent.
What is the difference between `em`, `rem`, and `px` units?
`px` = fixed pixels. `em` = relative to parent's computed font-size (multiplicative). `rem` = relative to root `<html>` font-size (consistent). `rem` preferred for scalability; `em` for component-relative sizing.
What is a semantic HTML element and why use it instead of `<div>`?
Semantic elements (like `<header>`, `<nav>`, `<main>`, `<article>`, `<footer>`) convey meaning to browsers, assistive tech, and developers. Improves accessibility, SEO, and code maintainability. `<div>` is a fallback for non-semantic containers.
Make your own HTML & CSS study set
Flashcards for related topics
Studying HTML & CSS to build with AI? MindloomHQ turns it into real skills — structured courses, agent projects, and certificates.
Explore MindloomHQ →