Plan of attack

With our custom properties and base styles in place, it can be tempting to simply jump in and start throwing CSS at things.

As much as possible, you want to take a higher-level view of a project.

For example, in our header, we could go with something like this for our paragraphs and be done with it:

.header p {
  max-width: 720px;
  margin-inline: auto;
}

But then we'd get to the section with the green background lower down and we'd have to repeat the same thing there.

In fact, there's a lot of things that repeat themselves in different ways, and we want to try to identify as many of these as possible before we start.

The more you do this, the better at it you'll get, and early on you'll often realize later on that you missed something, which is completely fine!

When that happens, you can do a quick refactor, and you'll have just learned something to remember for next time!

You don't need to do it all at once

You could write a lot of CSS before applying any actual styles to your page.

If you do a good job planning things out, when you start applying the styles, everything starts to come together incredibly quickly.

However, it can also be hard to plan everything at once. So, over the next handful of lessons, we'll start with a macro-view and tackle one thing at a time, and then slowly narrow the scope in as we go.