In the last post, we built a WordPress theme from two files and a handful of HTML.
There were headings, spacing, blue links, bullet points, but we didn’t specifically ask for any of that 90s styling – the browser just did it.
Browser Defaults
Every browser comes with a built-in stylesheet. It’s the reason why `<h1>` is big and bold, links are blue and underlined, and lists have bullet points.
The thing is that different browsers make different styling decisions:
– `<body>` gets an 8px margin in most browsers — that’s why unstyled pages never sit flush to the edge
– `<h1>` through `<h6>` have their own margins and font sizes, but they vary between Chrome, Safari, and Firefox
– `<ul>` has left padding and bullet styles that aren’t quite the same everywhere
– Link colours and underline behaviour differ subtly
If we start adding our own CSS on top of these defaults, we’re building on a foundation we don’t fully control. The spacing might look right in Chrome but be slightly off in Safari because their default `<h2>` margin is different.
So before we start making any design decisions, we need to strip all of this back and start from nothing.
The CSS Reset
A CSS reset zeroes out the browser’s styling so that we’re starting with a level playing field.
Our theme only uses a handful of HTML elements, so we can reset the styling on these by adding the following into our style.css after the earlier comment block:
/* Remove all default margins and padding */
* {
margin: 0;
padding: 0;
}
/* Strip list bullets */
ul { list-style: none; }
/* Links inherit colour instead of going blue */
a { color: inherit; text-decoration: none; }
/* Headings inherit font size — we'll set them ourselves */
h1, h2 { font-size: inherit; font-weight: inherit; }The Blank Slate
Here’s what our page looks like with the reset applied:
Everything is the same size, flush left with equal spacing between lines, so much so that it doesn’t even use half the page anymore.
No bullets either, no bold headings, no blue links.
The structure is still there in the HTML — the browser just isn’t decorating it any more.
What Did We Do?
Let’s walk through what each of these does.
The universal reset (`*`)
Removes every margin and padding from every element — the 8px body margin, the space above headings, and so on.
Stripping list bullets
Removes the default black circle markers from `<ul>` elements.
Links inherit colour
Resets links to use the same colour as their parent element and removes the underline, instead of the browser’s default of blue-and-underlined.
Headings inherit font size
An `<h1>` is no longer big and bold — it’s the same size as everything else.
Why Did We Go And Do That?
Now we’ve taken the browser’s styling defaults out of the equation. From now on, every bit of styling will be a deliberate choice…
Leave a Reply