HTML & CSS Cheatsheet — Quick Reference

<header>, <nav>, <main>, <section>, <article>
<aside>, <footer>, <figure>, <figcaption>
<time datetime="2024-01-01">Jan 1</time>
<mark>highlighted</mark>

<form action="/submit" method="POST">
  <input type="text" name="name" required>
  <input type="email" name="email" placeholder="email@example.com">
  <input type="password" name="pwd">
  <input type="number" min="0" max="100">
  <input type="date">
  <select name="country"><option>US</option></select>
  <textarea rows="4" cols="50"></textarea>
  <input type="checkbox" name="agree">
  <input type="radio" name="gender" value="m">
  <button type="submit">Send</button>
</form>

<table>
  <thead><tr><th>Name</th><th>Age</th></tr></thead>
  <tbody><tr><td>Alice</td><td>30</td></tr></tbody>
</table>

.element {
  width: 200px;
  height: 100px;
  padding: 10px;          /* space inside border */
  border: 1px solid #000; /* edge around padding */
  margin: 15px;           /* space outside border */
  box-sizing: border-box; /* width includes padding+border */
}

.container {
  display: flex;
  flex-direction: row;         /* row, column */
  justify-content: center;     /* main axis: start, center, space-between, space-around */
  align-items: center;         /* cross axis: center, stretch, flex-start */
  flex-wrap: wrap;             /* allow wrapping */
  gap: 10px;                   /* spacing between items */
}
.item {
  flex: 1;                     /* grow equally */
  align-self: flex-end;        /* override for single item */
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 columns */
  grid-template-rows: auto 200px;
  gap: 10px;
}
.item {
  grid-column: span 2;         /* span 2 columns */
  grid-row: 1 / 3;             /* rows 1 to 3 */
}

.relative   { position: relative; top: 10px; }   /* offset from normal flow */
.absolute   { position: absolute; top: 0; left: 0; }  /* relative to positioned parent */
.fixed      { position: fixed; bottom: 0; }      /* relative to viewport */
.sticky     { position: sticky; top: 0; }        /* scrolls then sticks */

/* Mobile-first: base styles, then override */
@media (min-width: 768px) { ... }   /* tablet */
@media (min-width: 1024px) { ... }  /* desktop */
@media (max-width: 600px) { ... }   /* small phones */

color: #ff6600;                       /* hex */
color: rgb(255, 102, 0);             /* rgb */
color: hsl(24, 100%, 50%);           /* hsl */
color: rgba(255, 102, 0, 0.5);       /* with alpha */

/* Units: px, em, rem, vw, vh, %, ch */
font-size: 1rem;         /* relative to root (16px default) */
width: 100vw;            /* 100% of viewport width */