Class selectors vs type selectors

It's not necessarily "better" but makes sense in this case since a page can have more than one header element such as a main header and then another for each article. By using a class it's easier to see the intent of the code since the selectors now have more specific, meaningful names.

Another place this comes in handy is things like heading text (not to be confused with the <header> element, which is a container). Say you want every heading to have the same font but a different size depending on where they're used. That's where classes come in.

So you could start with a base style like this:

h1, h2, h3, h4, h5 {
     font-family: 'SomeFont';
}

And then apply more specific styles like this:

h2.article-title {
     font-size: 2em;
}

h2.blog-post-title {
     font-size: 1.5em;
}

These styles are totally arbitrary and made up for demonstration, but hopefully the purpose is clear, in that you can clearly see what each style's role is based on their class without even seeing the html.