The One Key Thing Beginners Need to Understand About HTML and CSS

An explanation and an exercise in understanding default values.

Like most web development beginners, my first instinct with CSS was to jump right in.

I wanted to make websites immediately. And that’s a good instinct — as human beings, we learn through projects, through getting our hands dirty.

But I quickly became frustrated. Things just weren’t looking right. The spacing was off, text looked out of place. I felt like the page I was seeing didn’t reflect the code I was inputting. While there are potentially a lot of reasons for this, there is one foundational understanding I was missing: I had no idea what default values were.

Default values are exactly what they sound like. For every HTML element, such as an h1, an h2, or a div, there are corresponding default CSS values. Let’s examine h1’s default values as an example.

As we can see above, an h1 element is effectively just a text element with several CSS attributes applied. When we think about what makes an h1 special, we think: it’s big and it’s bold, right? We can see here how that is reflected in its default values. Its font-size is 2x the normal size of the h1’s font (since we are using the em unit). And It’s font-weight? Bold.

So there it is, the guts of the h1 element. It’s not some special, untouchable thing. It isn’t inherently big and bold. With the right adjustments, we could make it small and plain. It’s just a piece of text with some built-in CSS styling.

To reinforce this point, let’s examine an h2 for comparison.

Naturally, an h2 is very similar to an h1, except for a .5em difference in font-size. Something that might surprise you is that an h2 has bigger margins than an h1. This means there is actually more spacing between an h2 element and another element than there is between an h1 element and another element.

The biggest misconception beginners make is that html elements like h1 and h2 are inherently different from each other. They’re not. They just have different CSS presets. Different “default values.”

So why is this a big deal? Default values are key because they show us how an HTML element will react out of the box, given that we have not overridden its attributes. You will have a much deeper understanding of how your code is working once you grasp that an h1 is not inherently big and bold, it is simply a result of baked-in CSS.

Let’s put this to practice.

The number one problem you will encounter as a beginner is that something just isn’t looking how you want it to look, and you have zero idea why or how you can fix it. Let’s say you want to customize your title and subtitle to be as close as possible, and this is your base code.

You open up the page and you’re greeted by this. Ugh, there is just so much space between the two elements! Gah! Why!

Well now you know why. With your knowledge of default values, you know there is a margin-bottom of .67ems on the h1, and a margin-top of .83ems on your h2.

⭐ Your first instinct may be to think that means there is 1.5ems of space between the two elements. That makes sense right? Add the values? Nope. And the reason is because CSS has collapsing margins. The margin between two objects will always be equal to the bigger margin. So there is .83ems of space between the h1 and the h2.

So let’s say we want .1em of space between the two objects. There are multiple ways to do this. We could give the h1 a margin-bottom of .1em and the h2 a margin-top of 0, or the other way around. Or we could give both a value of .1em. Let’s try that approach.

As we can now see, there is .1em of space between our title and subtitle. This would appear the same even if the h1’s margin-bottom was 0, or the h2’s margin-top was 0. Due to collapsing margins, as long at least one of those elements retained a .1em margin of some kind, that space will remain the same.

What next?

With this knowledge in hand, it’s time to get coding again. Whenever you might be asking yourself: why is that element acting that way? Why are these elements so spaced apart? Why does this element create a line-break, and this one doesn’t? (Hint: block vs. in-line block) Your go-to ticket is looking up its default values.