HTML & CSS · Quick Reference

Lesson 5 — Introduction to CSS Cheat Sheet

HTML & CSS

In one line: CSS (Cascading Style Sheets) is the language that controls how HTML looks. Without CSS, every webpage would look like a plain text document from 1993. CSS controls colours, font...

Key Ideas

1What is CSS?. CSS (Cascading Style Sheets) is the language that controls how HTML looks. Without CSS, every webpage would look like a plain text document from 1993. CSS controls col...

23 Ways to Add CSS. There are three places you can write CSS. Always prefer external stylesheets for real projects — they keep your HTML clean and let you reuse styles across multiple pages.

3CSS Selectors. Selectors are patterns that match HTML elements. The more specific your selector, the more targeted its styles. Here are all the essential selector types:

4The Cascade & Specificity. When two CSS rules target the same element and set the same property, the browser must decide which one wins. This is determined by specificity — a score calculated fr...

5Essential CSS Properties. Before the box model and layout, here are the most fundamental visual properties — colours, typography, and backgrounds:

Code Examples

<!-- ❌ Method 1: Inline CSS (avoid — hardest to maintain) -->
<h1 style="color: blue; font-size: 2rem;">Inline</h1>

<!-- ⚠️ Method 2: Internal (style tag in head — single page only) -->
<head>
  <style>
    h1 { co...

/* === BASIC SELECTORS === */

/* Type selector — all <p> elements */
p { color: #333; }

/* Class selector — elements with class="btn" */
.btn { background: blue; color: white; }

/* ID selector — element with id="hero" (unique per page) */
...

/* Which color wins for <p id="intro" class="lead">? */

p         { color: black;  }  /* specificity: 0,0,0,1 = 1   */
.lead     { color: blue;   }  /* specificity: 0,0,1,0 = 10  */
#intro    { color: green;  }  /* specificity: 0,1,0,0 = 100 ← WI...