Discussion on: Stop using so many divs! An intro to semantic HTML

[Ken Bellows]

Hey Bryan! Great questions, very fundamental to understand how CSS interacts with HTML. I won't be able to fully answer in a comment, because you've really struck at the heart of CSS selectors and how they work and I really recommend going through a full CSS tutorial for that, but I'll try to cover the main points.

The most important thing to remember is that CSS selectors are greedy, in a technical sense, meaning that they try to grab as much as they can. Anything that could possibly fit within the definition of a selector will. So if you write this block of CSS:

h1 {
  color: red;
}

then every <h1> tag on the whole page will be turned red, except where you define other blocks with more specific selectors that override the color, such as:

main h1 {
  color: blue;
}

This is a core term to know in CSS: specificity. Emma Wedekind wrote a great article going over it, which I highly recommend: CSS Specificity. But the basic idea is this: More specific selectors are stronger. main h1 beats h1 because it's more specific. h1 says, "modify all <h1> tags"; main h1 says, "modify all <h1> tags within <main>". More specific, so stronger. (Emma's article covers the details on exactly how specificity is determined for a selector, so check that out.)

To answer your specific cases:

Yes, an h1 selector applies to every <h1> on the page. Though remember that any properties can be overridden in specific cases by more specific selectors.

You're mostly correct about styling that specific <h1>, but remember that .main is not the same as main: the dot prefix refers to HTML classes, so if you used the selector .article, that would not match <article>, but would match <div class="article">. The better way to style the <h1> in this case:

  <main>
    <article>
      <header>
        <h1>Title!</h1>
      </header>
    </article>
  </main>

would be like this:

  main article header h1 {
    font-size: 36px;
  }

Hope that helps! As for best practices, that's an even bigger question, and there are a thousand different opinions out there. To be honest, I wouldn't worry about best practices and conventions for now; focus on learning how CSS itself actually works at a deep level before you get into the subjective stuff.

Hope this helps!