Learn Typography by Building a Nutrition Label - Step 11

In this 11th step of the project, I wonder why do we use " * " selector instead of “label” selector. If we want to modify the box at the Nutrition Facts project, shouldn’t we use the selector for the box? rather than using the universal selector. I really cound’t understand.
I’d really appreciate any help
Thank you

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

  <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">

  <div class="label">
    <h1>Nutrition Facts</h1>
    <p>8 servings per container</p>
    <p>Serving size 2/3 cup (55g)</p>
/* file: styles.css */

/* User Editable Region */

/* User Editable Region */

html {
  font-size: 16px;

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

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
  **box-sizing: border-box;**


Your browser information:

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

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

Link to the challenge:

Because changing the box-sizing property to border-box is so common and it’s the behavior that everyone usually wants for all elements on the page. So using * will make it apply to all elements.

1 Like

First of all, thank you so much for your answer :slight_smile: And if you don’t mind, I really want to ask further. If we use the "label " selector to change this box size, will it give the same result? I really couldn’t find a big difference actually.

Yes, but just for the labels on the page.

1 Like

Thanks a lot! I hope you have a good day

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