Skip to content

HTML & CSS Cheatsheet — Quick Reference

DodaTech 3 min read

In this tutorial, you'll learn about HTML & CSS Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

HTML5 semantic elements, forms, tables, CSS selectors, box model, Flexbox, grid, positioning, and Responsive Design — a complete front-end quick reference.

HTML5 Semantic Tags

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

Forms

<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>

Input types: text, email, password, number, date, url, tel, color, range, file, hidden, search.

Tables

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

CSS Selectors

Selector Targets
* All elements
div All <div>
.class Elements with class
#id Element with ID
div p Descendant <p> inside <div>
div > p Direct child <p>
a:hover Hover state
input[type="text"] Attribute match
:nth-child(2) Second child
::before / ::after Pseudo-elements

Box Model

.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 */
}

Flexbox

.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 */
}

Grid

.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 */
}

Positioning

.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 */

Responsive Design

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

Colors & Units

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 */
What is the difference between `em` and `rem` in CSS?

em is relative to the parent element's font size — if the parent is 20px, 1.5em = 30px. rem is relative to the root (<html>) font size (usually 16px). Use rem for consistent sizing across the page; use em when you want sizing relative to a specific component.

{{< faq "When should I use Flexbox vs Grid?">}}Use Flexbox for one-dimensional layouts (a row OR a column) — like centering items, navigation bars, or distributing items along a single axis. Use Grid for two-dimensional layouts (rows AND columns simultaneously) — like page layouts, card grids, or dashboards.{{< /faq >}}

What is the difference between `visibility: hidden` and `display: none`?

visibility: hidden hides the element but it still takes up space in the layout. display: none removes the element entirely from the document flow — it takes no space and can affect layout of surrounding elements

See the full HTML and CSS tutorials.

← Previous Linux Commands Cheatsheet — Essential Reference Next → React Cheatsheet — Hooks & Patterns Quick Reference

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Cheatsheets