Learn Typography by Building a Nutrition Label - 6 Step

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here. Hi i’m not stuck in this step just don’t understand the concept “html selector” so far i understood the html selector means targeting an html element in css like h1, p, then {} but mission ask to type exactly html{ font-size: 16px;
} i just don’t understand what i’m doing here😄

  **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>
  <h1>Nutrition Facts</h1>
  <p>8 servings per container</p>
  <p>Serving size 2/3 cup (55g)</p>
</body>
</html>

/* file: styles.css */
html{
font-size: 16px;
}

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

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

2

“Create an html selector…”

The html element wraps all elements in your HTML. Look at the beginning of your HTML. After the doctype tag the first tag you see is the opening <html> tag. Now look at the end of your HTML and you’ll see the closing </html> tag. Notice that all other elements are in between those two tags.

So creating an html selector means creating a CSS rule set that targets the html element, which is sort of the same as just making a global CSS rule set, since all the elements in your HTML are children of the html element. Thus, when you set font size to 16px on the html element you are basically setting the default font size for all elements in your HTML to 16px.

On a side note, from an accessibility perspective, I would not actually recommend you set the default font size in px units like this because it will override the default font size the user has set in their browser. I generally don’t worry about setting default font sizes at all, just let the user’s default font size take precedence. But if you must set a default font size, it is better to use rem units, although it doesn’t give you quite as much control.

3

Thank you for answering my question, just want to add: so html selector has same principle as asterisk (*) selector?

4

It may seem that way but not quite. Some properties can be inherited from their parents and others can’t. The font-size can be inherited, so setting it on the html element will cause it to be inherited by all other elements on the page since the html element wraps them all. But the border property is not inherited, so setting a border on the html element will only put a border on that element and no others.

But if you set a border on * then every element on the page would get a border because the * selector says to apply the property to every element on the page, while the html selector says to apply it only to the html element.

2 Likes
5

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