CSS — Styling the Web
CSS transforms plain HTML into beautiful, responsive pages. This guide covers selectors, the box model, flexbox, and responsive units — with visual examples and working code.
What is CSS?
CSS stands for Cascading Style Sheets. It's the language that controls how HTML elements look — colours, fonts, spacing, sizes, layout, and animations. Without CSS, a webpage is just black text on a white background.
The word "cascading" describes how styles layer on top of each other. A style rule applied to a parent element can inherit down to its children. When multiple rules target the same element, the most specific one wins — this system is called the "cascade".
CSS connects to HTML via a <link> tag in the HTML <head>, pointing to an external .css file. One stylesheet can style every page on your site — change the file, update everything at once.
Selectors
A CSS selector targets which HTML elements to style. There are several types:
p { color: #666; }.card { background: white; border-radius: 12px; }#hero { padding: 5rem 2rem; }nav a { color: white; text-decoration: none; }.btn:hover { background: #2d6aff; transform: translateY(-2px); }h1, h2, h3 { font-family: 'Lora', serif; }Specificity determines which rule wins when two selectors target the same element. IDs are most specific (100 points), then classes (10 points), then elements (1 point). The higher the specificity score, the higher the priority.
Properties and Values
CSS rules are made up of property-value pairs. The property is what you want to change; the value is what you change it to. Here are the most commonly used properties:
.element { color: #333; font-size: 1rem; font-family: 'Sora', sans-serif; font-weight: 600; line-height: 1.75; text-align: center; text-decoration: none; width: 100%; max-width: 1200px; padding: 1rem 2rem; margin: 0 auto; border: 1pxsolid#ddd; border-radius: 8px; background: #fff; background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 4px 20pxrgba(0,0,0,.1); opacity: 0.8; transition: all.2sease; }The Box Model
Every HTML element is a rectangular box. The CSS box model describes the four layers that make up that box — from inside to outside: content, padding, border, and margin.
- Content — the actual text or image
- Padding — transparent space between content and border
- Border — a visible (or invisible) edge around the padding
- Margin — transparent space outside the border, pushing other elements away
Flexbox Basics
Flexbox is a CSS layout system for arranging elements in a single row or column. It's the most useful tool for nav bars, card rows, centring content, and responsive adjustments.
You activate it on a parent element with display: flex. All direct children become "flex items" that can be aligned and sized flexibly.
.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }.card-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }.card-row > .card { flex: 1 1 280px; }See the Flexbox cheatsheet for the complete reference of all parent and child properties.
Responsive Units
Using the right unit for each property is one of the most important CSS skills. Here's when to use each:
body { font-size: 1rem; } h1 { font-size: 2.5rem; } .card { padding: 1.5rem; } .sidebar { width: 30%; }.hero { min-height: 100vh; }.full-width { width: 100vw; }h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }Media Queries — Making Sites Responsive
Media queries apply different CSS styles at different screen sizes. The mobile-first approach writes base styles for small screens, then adds styles for larger screens:
.grid { display: flex; flex-direction: column; gap: 1rem;}@media (min-width: 768px) { .grid { flex-direction: row; flex-wrap: wrap; }}@media (min-width: 1200px) { .grid { max-width: 1200px; margin: 0auto; }}