CSS: colours and fonts
CSS styles your HTML. You can set color, font-size, font-family, and background-color. Use a <style> tag or a separate .css file. Selectors like h1 or .class name pick which elements to style.
Appy Says…
HTML is the skeleton. CSS is everything else — colours, fonts, spacing, layout, animations. Without CSS your page looks like a text document from 1993. With it, you can build anything you can imagine visually.
What is CSS?
CSS (Cascading Style Sheets) controls the visual presentation of HTML. A CSS rule has a selector (what to style) and declarations (property: value pairs).
- •Basic rule:
p { color: blue; font-size: 16px; } - •Selectors:
p(element),.class,#id,[attribute] - •Apply:
<link rel="stylesheet" href="style.css">in<head> - •Inline:
<p style="color: red">(avoid — hard to maintain) - •Common properties:
color,background-color,font-size,font-family,margin,padding,border - •The cascade: more specific selectors override less specific ones
Think of it like applying a skin in Minecraft
The blocky character is HTML — the structure. A custom skin is CSS — it changes how everything looks without changing the underlying shape. You can swap skins (stylesheets) without touching the character (HTML).
How It Works
- •1. Write a selector to target elements:
h1,.card,#logo - •2. Add declarations inside
{ }:color: #1a73e8; font-weight: bold; - •3. The browser applies styles in order — later rules override earlier ones (cascade)
- •4. Specificity:
#idbeats.classbeats element selector - •5.
!importantoverrides everything — use sparingly - •6. Inspect applied styles in DevTools → Elements → Styles panel
Real-World Examples
- •TikTok's pink/red brand colour is set as a CSS variable used across their entire stylesheet
- •Spotify's dark theme is CSS
background-color: #121212applied to the root element - •Google's clean white result pages are heavily CSS-driven with precise spacing rules
- •Responsive font sizes use CSS
clamp()to scale smoothly between screen sizes
Key Facts
- •CSS stands for Cascading Style Sheets — 'cascading' means rules flow from parent to child
- •There are over 550 CSS properties — you'll use about 50 regularly
- •CSS is not a programming language — it has no variables in its original form (but custom properties fix this)
- •The 'box model' (content + padding + border + margin) is fundamental to understanding layout
Watch Out!
Don't put styles inline on every element — it's a maintenance nightmare. A single class change in a stylesheet updates every element that uses it. Inline styles can only be overridden by !important, which creates a cascade war you can't win.
Remember
selector + { property: value; } = a CSS rule. Specificity determines which rule wins. External stylesheets beat inline styles for maintainability.
What You Learned
- •CSS rules: selector + declarations. Selectors target elements, classes, or IDs
- •The cascade: later/more-specific rules win; specificity: #id > .class > element
- •Unlocks: colours, fonts, spacing, all visual design — the entire look of the web
Key Facts
- →CSS stands for Cascading Style Sheets — 'cascading' means rules flow from parent to child
- →There are over 550 CSS properties — you'll use about 50 regularly
- →CSS is not a programming language — it has no variables in its original form (but custom properties fix this)
- →The 'box model' (content + padding + border + margin) is fundamental to understanding layout
Real-World Examples
Remember
selector + { property: value; } = a CSS rule. Specificity determines which rule wins. External stylesheets beat inline styles for maintainability.
Quick Quiz
Which CSS property sets text color?