Why does creating an H2 rule prevent H2 formatting?

[tristanjago]

Hi,

Apologies if this is a bit convoluted - this is the first time I’ve had to explain a coding problem. Any critiques on that front gladly accepted.

So I’ve just completed the first HTML/CSS project: building a webpage, to spec, unguided.

I’m happy that the result looks exactly as it should. However, I encountered an issue that I don’t understand:

The project required three H2 subheadings, each with their own background colour. I achieved this by creating a class, Product (for the shared text formatting), then assigning each of the products in that class a unique ID, Frames,** Brushes**,** Paints** (to assign the unique background-colour). In the html, I enclosed the subheadings in H2 tags.

This worked.

However, if I tried to create a CSS rule for all H2 tags, instead of putting the text formatting in the class, it ignored the formatting… and I don’t understand why.

Code that worked:

<div class="Product" id="Brushes"
    <h2>Brushes</h2>
    </div>

    <img src="./resources\images\hacksaw.webp" alt="A small pile of wooden-handled hacksaw brushes in various sizes">

    <h3>Hacksaw Brushes</h3>
    <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="promo">Starting at $3.00 / brush. </span></p>
    
    <div class="Product" id="Frames"
    <h2>Frames</h2>
    </div>

    <img src="resources\images\frames.webp" alt="A collection of empty painted wooden picture frames">
    <h3>Art Frames (assorted)</h3>
    <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="promo">Starting at $2.00 / frame.</span></p>

    <div class="Product" id="Paint"
    <h2>Paint</h2>
    </div>

    <img src="resources\images\finnish.jpeg" alt="Three open tubes of paint on a tarnished wooden table, with used paintbrush">
    <h3>Clean Finnish Paint</h3>
    <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="promo">Starting at $5.00 / tube.</span></p>

And…

.Product {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-top: 20px;
  }

  #Brushes {
      background-color: mediumspringgreen;
  }

  #Frames {
      background-color: lightcoral;
  }

  #Paint {
      background-color: lightblue;
  }

OUTCOME:

Code that didn’t work:

<div class="Product" id="Brushes"
    <h2>Brushes</h2>
    </div>

    <img src="./resources\images\hacksaw.webp" alt="A small pile of wooden-handled hacksaw brushes in various sizes">

    <h3>Hacksaw Brushes</h3>
    <p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. <span class="promo">Starting at $3.00 / brush. </span></p>
    
    <div class="Product" id="Frames"
    <h2>Frames</h2>
    </div>

    <img src="resources\images\frames.webp" alt="A collection of empty painted wooden picture frames">
    <h3>Art Frames (assorted)</h3>
    <p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="promo">Starting at $2.00 / frame.</span></p>

    <div class="Product" id="Paint"
    <h2>Paint</h2>
    </div>

    <img src="resources\images\finnish.jpeg" alt="Three open tubes of paint on a tarnished wooden table, with used paintbrush">
    <h3>Clean Finnish Paint</h3>
    <p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="promo">Starting at $5.00 / tube.</span></p>

And…

 span.promo {
      color: blue;
      font-weight: bold;
  }

  h2 {
    font-size: 32px;
    font-weight: bold;
    color: white;
    margin-top: 20px;
  }

  #Brushes {
      background-color: mediumspringgreen;
  }

  #Frames {
      background-color: lightcoral;
  }

  #Paint {
      background-color: lightblue;
  }

  img {
      margin-top: 20px;
  }

OUTCOME:

Any insight appreciated. Thanks!

[amyhol]

@tristanjago

<div class="Product" id="Frames"

I notice there are a few missing “>” brackets on your opening div tags. So, the browser may not be able to read the h2 tag following it and apply the h2 styles. Easy to miss, but it’s a good lesson to remember for troubleshooting.

@tristanjago

Any critiques on that front gladly accepted.

I think you did great explaining the problem you were having, especially because you included your code! Hopefully, my answer was as easy to understand.

[tristanjago]

Aha! Amazing - thanks so much!

That’ll teach me to duplicate my code without ensuring it’s correct.

Do you know if there’s a way to get VSC to highlight errors such as this, or is it always just a matter of manually searching the code for errors?

[amyhol]

I’m certainly no VS code expert. (Still learning myself.) But, I see that the tag changes color when the previous tag is not closed. Whether or not it is an obvious change probably depends on which color theme you are using.

I’m not sure whether or not there is another way to check for errors in the HTML. I’d love to find out also.

[tristanjago]

Aha! Thanks - that’s really helpful!