🎨 HTML5 + CSS3
HTML & CSS Complete Cheatsheet
Everything from semantic markup to flexbox, grid, animations and responsive design.
📖 10 sections
⏱ 20 min read
✅ Quizzes included
🌙 Dark mode
01 HTML Structure ▼
HTML Skeleton
HTMLComplete HTML5 template
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
  <script src="app.js"></script>
</body>
</html>
💡
Always include lang on html, charset and viewport meta tags. They affect accessibility and mobile rendering.
02 Semantic Tags ▼
Semantic HTML5
Layout
<header> <nav> <main> <section> <article> <aside> <footer>
Text
<h1–h6> <p> <strong> <em> <blockquote> <pre> <code>
Media
<img src alt> <video controls> <audio> <figure> <figcaption>
Interactive
<button> <details> <summary> <dialog> <progress>
⚠️
Never use <div> for everything. Semantic tags improve SEO, accessibility (screen readers), and code readability.
03 Forms & Inputs ▼
Forms
HTMLForm elements
<form action="/submit" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required placeholder="you@email.com">

  <input type="text">   <input type="password">
  <input type="checkbox"> <input type="radio">
  <input type="file">    <input type="range">
  <input type="number" min="1" max="100">

  <select><option>Option</option></select>
  <textarea rows="4"></textarea>
  <button type="submit">Send</button>
</form>
04 CSS Selectors ▼
CSS Selectors
CSSSelector reference
.class          /* class selector */
#id              /* ID selector */
div, p           /* multiple selectors */
div > p          /* direct child */
div + p          /* adjacent sibling */
div ~ p          /* all siblings */
a[href]          /* has attribute */
a[href^="https"] /* starts with */
a[href$=".pdf"]  /* ends with */
input:focus      /* pseudo-class */
li:nth-child(2)  /* 2nd li */
li:nth-child(odd)/* odd items */
p::before        /* pseudo-element */
p::first-line    /* first line */
:not(.active)    /* negation */
💡
Specificity order (low→high): element → class → ID → inline → !important
05 Box Model ▼
Box Model
CSSBox model properties
/* Box sizing */
* {{ box-sizing: border-box; }} /* includes padding+border in width */

.box {{
  width: 300px;
  height: 200px;
  padding: 20px;          /* inside */
  border: 2px solid #333; /* edge */
  margin: 16px auto;      /* outside / centering */
  outline: 2px dashed red;/* no layout effect */
}}

/* Shorthand: top right bottom left */
margin: 10px 20px 10px 20px;
margin: 10px 20px; /* top-bottom left-right */
padding: 0 16px;
06 Flexbox ▼
Flexbox
CSSFlexbox complete guide
/* Container */
.flex {{
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end | space-between | space-around;
  align-items: stretch | center | flex-start | flex-end;
  flex-wrap: nowrap | wrap;
  gap: 16px;
}}

/* Item */
.item {{
  flex: 1;           /* flex-grow:1 flex-shrink:1 flex-basis:0 */
  flex-grow: 2;      /* take 2x space */
  flex-shrink: 0;    /* dont shrink */
  flex-basis: 200px; /* starting size */
  align-self: center;/* override parent align-items */
  order: 2;          /* reorder visually */
}}

/* Common patterns */
.center {{ display:flex; justify-content:center; align-items:center; }}
07 CSS Grid ▼
CSS Grid
CSSGrid layout system
/* Container */
.grid {{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal cols */
  grid-template-columns: 200px auto 1fr;  /* fixed+auto+flex */
  grid-template-rows: auto;
  gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}}

/* Item placement */
.item {{
  grid-column: 1 / 3;    /* span from col 1 to 3 */
  grid-row: 2 / 4;
  grid-area: header;     /* use named area */
}}

/* minmax prevents overflow */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
08 Animations ▼
Transitions & Animations
CSSCSS animations
/* Transition */
.btn {{
  transition: all 0.3s ease;
  transition: color 0.2s, transform 0.3s ease-out;
}}
.btn:hover {{ transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }}

/* Keyframe animation */
@keyframes fadeIn {{
  from {{ opacity: 0; transform: translateY(20px); }}
  to   {{ opacity: 1; transform: translateY(0); }}
}}
.appear {{ animation: fadeIn 0.5s ease both; animation-delay: 0.2s; }}

/* Timing functions */
/* ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() */

/* Transform shortcuts */
transform: translate(10px, 20px) rotate(45deg) scale(1.2);
09 Responsive Design ▼
Media Queries
CSSResponsive breakpoints
/* Mobile-first approach (recommended) */
.container {{ padding: 0 16px; }}          /* base: mobile */

@media (min-width: 640px)  {{ /* sm */ }}  /* tablet portrait */
@media (min-width: 768px)  {{ /* md */ }}  /* tablet */
@media (min-width: 1024px) {{ /* lg */ }}  /* laptop */
@media (min-width: 1280px) {{ /* xl */ }}  /* desktop */

/* Feature queries */
@media (prefers-color-scheme: dark) {{ body {{ background: #111; }} }}
@media (prefers-reduced-motion: reduce) {{ * {{ animation: none !important; }} }}

/* CSS Variables for theming */
:root {{ --primary: #4f46e5; --bg: white; }}
[data-theme="dark"] {{ --primary: #818cf8; --bg: #0f172a; }}
💡
Always design mobile-first. Start with the smallest screen and add complexity with min-width queries.
10 Mini Quizzes ▼
❓ Quiz 1
Which selector targets only DIRECT children?
div > p selects only direct child <p> elements. div p selects ALL descendant <p>. div + p is adjacent sibling. div ~ p is general sibling.
❓ Quiz 2
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow:1 flex-shrink:1 flex-basis:0. It means the item will grow/shrink equally with siblings.
❓ Quiz 3
Which CSS unit is relative to the root font size?
rem (root em) is relative to the root <html> font-size. em is relative to the PARENT element's font-size. vw is 1% of viewport width.