Learn Typography by Building a Nutrition Label - Step 47

HTML-CSS
1

Can someone tell me why the system won’t accept this? I’m trying to add a “no-divider” class to each of the % Daily Value * and Saturated Fat 1g 5% p elements and it won’t accept this for some reason.

I don’t know what I’m doing wrong. I hope to hear back from someone soon, any assistance would be appreciated :slight_smile:

Thank you!

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
    </header>
    <div class="divider lg"></div>
    <div class="calories-info">
      <p class="bold sm-text">Amount per serving</p>
      <h1>Calories <span class="right">230</span></h1>
    </div>
    <div class="divider md"></div>
    <div class="daily-value sm-text">
      <p class="right bold" class="no-divider">% Daily Value *</p>
      <div class="divider"></div>
      <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
      <p class="indent" class="no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
    </div>
  </div>
</body>
</html>

/* file: styles.css */
* {
box-sizing: border-box;
}

html {
font-size: 16px;
}

body {
font-family: 'Open Sans', sans-serif;
}

.label {
border: 2px solid black;
width: 270px;
margin: 20px auto;
padding: 0 7px;
}

header h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}

p {
margin: 0;
}

.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
clear: right;
}

.bold {
font-weight: 800;
}

.right {
float: right;
}

.lg {
height: 10px;
}

.lg, .md {
background-color: black;
border: 0;
}

.md {
height: 5px;
}

.sm-text {
font-size: 0.85rem;
}

.calories-info h1 {
margin: -5px -2px;
overflow: hidden;
}

.calories-info span {
font-size: 1.2em;
margin-top: -7px;
}

.indent {
margin-left: 1em;
}

.daily-value p {
border-bottom: 1px solid #888989;
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn Typography by Building a Nutrition Label - Step 47

Link to the challenge:

2

Hello, your issue is simple. You have the classes listed as class="class1" class="class2". However, to add multiple classes to an element they should be listed as class="class1 class2".

1 Like
3

Oh? How will the computer know that they are two different classes? They are different features next to each other.

4

When they are separated by a space such as class="class1 class2" the computer recognizes that space as a new class attribute for HTML. As for the different features associated with each class that is based entirely on your CSS and/or JavaScript. A class is nothing more than a useless attribute until it is called upon with CSS or JavaScript.

5

Yeah, but what if the first class has multiple words, such as class1=“right bold” and class2=“no-divider”. Shouldn’t class1 have a dash in between right and bold for the system to not pick it up as three classes?

6

Technically, yes. However, right and bold in this lesson are intended to be two separate classes. If you look at the CSS styling page for the lesson you can see that both the right and bold class selectors are being styled differently. To avoid accidentally creating a class with the value of no and a class with the value of divider it is having you list the class as no-divider with the hyphen so it is counted as a single class. This new class you are adding in this lesson would be the third class assigned to the associated element.

If you are assigning multiple classes with multiple words it would be listed as follows class="class-one class-two class-three" by applying the hyphen you can create classes with multiple words and the space between each class will identify it as a new class.

7

Ohh, I see, okay. I forgot that I styled the right and bold selectors differently, so yeah they are three separate classes then. The rest of what you wrote seems to make sense to me.

Thank you very much for your help and clarification of coding multiple classes.

8

You are welcome. Happy coding and learning!

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.