Dasmato's Code - CSS Question

Projects Off-platform Practice Projects
1

I was comparing the CSS I wrote to the CSS in the solution set and was curious about my choice in using certain selectors in my project. To preface, my CSS displayed the page correctly and as expected; I just wanted to see if my way of going about it is preferred/not preferred for any reason.

My question is along the lines of using:

h1.title {}

as opposed to:

.item h2 {}

My CSS:

body {
    font-family: Helvetica;
}

div.container {
    margin:auto;
    padding:10px;
    /* border: 1px solid red; reference */
}

h1.title {
    font-family: Helvetica;
    font-size: 100px;
    font-weight:bold;
    color:khaki;
    text-align:center;
    background-image: url(pattern.jpeg);
}

h2.category {
    font-family:Helvetica;
    font-size:32px;
    font-weight:bold;
    color:white;
}

.green {
    background-color: mediumspringgreen;
}

.coral {
    background-color: lightcoral;
}

.skyblue {
    background-color: skyblue;
}

span.price {
    font-family:Helvetica;
    font-weight:bold;
    color:blue;
}

Solution CSS:

h1, 
h2, 
h3, 
p {
  font-family: "Helvetica", sans-serif;
}

h1 {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
  text-align: center;
  font-size: 100px;
  color: khaki;
}

.item h2 {
  font-size: 32px;
  color: white;
}

.price {
  font-weight: bold;
  color: blue;
}

#brush {
  background-color: mediumspringgreen;
}

#frame {
  background-color: lightcoral;
}A

#paint {
  background-color: skyblue;
}

My HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dasmoto's Arts & Crafts</title>
    <link href='style.css' rel='stylesheet' />
</head>
<body>
    <div class='container'>
    <h1 class="title">Dasmoto's Arts & Crafts</h1>
    <h2 class="category green">Brushes</h2>
    <img src='hacksaw.jpeg' alt="Brushes laying on a table." />
    <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="price">Starting at $3.00 / brush.</span></p>
    <h2 class="category coral">Frames</h2>
    <img src='frames.jpeg' alt="Picture frames of varying colors." />
    <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="price">Starting at $2.00 / brush.</span></p>
    <h2 class="category skyblue">Paint</h2>
    <img src='finnish.jpeg' alt="Opened tubes of paint on a desk." />
    <h3 >Clean Finnish Paint</h3>
    <p>Imported paint from Finland. Over 256 colors available in-storem varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. <span class="price">Starting at $3.00 / brush.</span></p>
    </div>
</body>

</html>

Solution HTML

<!DOCTYPE html>
<html>
<head>
  <title>Dasmoto's Arts & Crafts</title>
  <link href="./resources/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>

  <h1>Dasmoto's Arts & Crafts</h1>

  <!-- Brushes Section -->

  <div class="item">
    <h2 id="brush">Brushes</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/hacksaw.jpeg"/>
    <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="price">Starting at $3.00 / brush.</span></p>
  </div>

  <!-- Frames Section -->

  <div class="item">
    <h2 id="frame">Frames</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/frames.jpeg"/>
    <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="price">Starting at $2.00 / frame.</span></p>
  </div>

  <!-- Paint Section -->

  <div class="item">
    <h2 id="paint">Paint</h2>
    <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/finnish.jpeg"/>
    <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="price">Starting at $5.00 / tube.</span>
  </div>

</body>
</html>

I appreciate any and all feedback! Thank you! :slightly_smiling_face:

2

Hi there,

Notice how in the solution, each item is nested within a <div> with the class of item. So, when using the selector:

.item h2 {
}

It is targeting all the h2 children of the parent class item.

As an example, look at this:

<div class="item">
  <h2>Example</h2>
  <div>
    <h2>Example 2</h2>
  </div>
</div>

<div>
  <h2>Example 3</h2>
</div>

//CSS

.item h2 {
  color: blue;
}

h2 {
  color: red;
}

You should be able to see why this would display this:
image

For your selector:

h1.title {
}

You are targeting any h1 that would have the class of title.

The same logic can be used with this example:

<h1 class="words">Example List</h1>
<p class="words">This is an example</p>
<p>This is a second example</p>
<p class="words">This is a third example</p>

//CSS

p.words {
  color: red;
}

.words {
  color: blue;
}

Which displays:
image

Can you explain why?

1 Like
3

I see now, this is very helpful. I was having a total mental block after I looked at the solution but this makes more sense seeing it like this. I appreciate your reply!

In the first example, both headings are nested within the <div> that contains the .item class, which is why they appear blue. The third heading, not within the the .item class, take the less specific h2 selector.

In the second example, since the first <h1> tag has the class of words, but is not a <p>, it is styled blue. Since red is only styled to the class words as an attribute of <p>, the first and third paragraph are styled because they contain the words class.

1 Like