Build a Nutritional Label - Step 42

HTML-CSS
1

Tell us what’s happening:

I see others have posted on this, without resolution. I don’t understand what you are asking. Most particularly you keep combining classes in ways that have not yet been described in this course. “daily-value small-text” “divider medium” “bold small-text” I don’t recall ever this being discussed or taught about having two classes in one. Also, in the selector, you are only choosing one so it’s not “daily-value small text” it’s “.small-text”. I don’t understand what you want or are asking for

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>2/3 cup (55g)</span></p>
    </header>
    <div class="divider large"></div>
    <div class="calories-info">
      <div class="left-container">
        <h2 class="bold small-text">Amount per serving</h2>
        <p>Calories</p>
      </div>
      <span>230</span>
    </div>
    <div class="divider medium"></div>

<!-- User Editable Region -->

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
    </div>

<!-- User Editable Region -->

  </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;
  display: flex;
  justify-content: space-between;
}

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

.bold {
  font-weight: 800;
}

.large {
  height: 10px;
}

.large, .medium {
  background-color: black;
  border: 0;
}

.medium {
  height: 5px;
}

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

.calories-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.calories-info h2 {
  margin: 0;
}

.left-container p {
  margin: -5px -2px;
  font-size: 2em;
  font-weight: 700;
}

.calories-info span {
  margin: -7px -2px;
  font-size: 2.4em;
  font-weight: 700;
}

.right {
  justify-content: flex-end;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Build a Nutritional Label - Step 42

2

Use your existing .divider element as an example to add a new divider after the p element.

All you need for this step is another .divider element, directly after the p element here:

As for classes, it’s common practice to add multiple classes to elements, to apply several different rulesets to them, as required.

To do this, you only need one class attribute for each element, but multiple classes are separated by spaces within the attribute value. The CSS file will contain class selectors and rules for each of the classes which are added to the elements in the HTML document.

EXAMPLE:

<!-- element with a single class -->
<p class="description">This is a description</p>

<!-- element with three different classes applied -->
<p class="description bold right">This is a description which is also bold and aligned to the right</p>

Note that the classes bold and right are not sub-classes of divider. They are separate classes with equal precedence. In fact, the order in which you add the classes above is irrelevant (i.e. class=”bold description right” would have exactly the same result).

3

I don’t remember it ever being discussed up to this point where you are using multiple classes in a new class. For example, “bold small-text” “divider large” “divider medium”. What does this mean? You are clearly creating some kind of sub-class of divider or of bold. Yet when creating a selector you are only using “.medium” or “.large”. This is not making any sense to me and I can find nothing online to help me understand what you are doing.

4

the selector .large will select all elements that have that class, which includes elements that have only that class class="large" or multiple classes class="box large"

5

Thank you, I think I understand the combining of multiple classes now. I see they are not sub-classes but a combination of selectors for each class. What happens, however, if they contradict each other?

6

I have figured this out by just putting in a “<div class=”divider” but your wording was very confusing. i just took a guess as to what you meant and it worked. Why would you phrase it “Use your existing .divider element as an example to add a new divider after the p element.” Since you used the phrase “as an example” I didn’t know what you wanted exactly. I didn’t know if you wanted a completely new class or a new combination of classes like “divider right”.

7

CSS stands for Cascading Style Sheets, the keyword being ‘cascading’. This means that rules are read from top to bottom, so in the case of conflicts, later rules will override earlier ones.

EXAMPLE:

.bold {
  color: red;
}

.description {
  color: blue;
}

If you had an element with class=”bold description” (or “description bold”), the colour of the text would be blue because the later rule in the CSS stylesheet would override the earlier one.

There are other factors to consider, like specificity, but this is the basic principle of CSS.

8

Ok, thanks. This is by far, the most complex work we’ve done up to this point. I feel like I barely understand what is going on and if you asked me to replicate this on my own, I wouldn’t stand a chance. I hope you all understand this and that this is just a building block for comprehension.

9

It’s all pretty daunting at first, but it will get easier!

10

Why do we keep removing a divider and then re-adding a divider?

11

I can’t remember exactly what the individual steps for this project are, but I don’t think you should be removing any dividers at any point, only adding new ones, some of which have various different classes to style them slightly differently.

12

Well, we have this class of “no-divider” which removes the divider and then we put in a new “divider” class within a separate “div”. So in one line we use “no-divider” and the next line we are putting “divider” back in.

13

that is for styling, if you look at the preview, you will see the lines between the text in specific places, try removing and adding the classes to see how things change