Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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:
mainh1{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:
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!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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:
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: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
beatsh1
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 asmain
: 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:would be like this:
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!