Would the answer not be .33em ? 16/48=.33

Question

parent element of the h2 has a fontsize value of 16px. Use an em unit to give the h2 a fontsize value equivalent to 48px

style.css

/* Complete the challenge by writing CSS below */

html {
  font-size: 16px;
}

header {
  font-size: 1.5rem;
}

.heading {
  font-size: 5rem;
}
.h2 {
font-size: 3em;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Diane: Resume</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <header>
      <div id="header-box">
        <h1 class="heading">Developer Diane: Resume</h1>
        <address>
          <p>website: developerdiane.com</p>
          <p>email: diane@developerdiane.com</p>
        </address>
        <img src="developer-diane.jpg" alt="Developer Diane coding on her laptop.">
      </div>
    </header>          
    <section id="education">
      <h2>Education</h2>          
      <ul>
        <li>
          <h3><a href="https://teamtreehouse.com">Treehouse</a></h3>
          <p>Front End <em>Web Development</em> Techdegree</p>
          <p class="date special">Graduated January 2020</p>
        </li>
      </ul>
    </section>
    <section id="experience">
      <h2>Experience</h2>
      <ul>
        <li>
          <h3>Super Web Design Shop</h3>
          <p>Junior Developer</p>
          <p class="date special">February 2020-present</p>
        </li>
        <li>
          <h3>Pretty Good Websites, Inc.</h3>
          <p>Web Development Intern</p>
          <p class="date">July 2019-January 2020</p>
        </li>
      </ul>
    </section>
    <section>
      <h2>Skills</h2>
      <ul id="skills-list">
        <li class="top-skill">HTML</li>
        <li>CSS</li>
        <li class="top-skill" id="proud">JavaScript</li>
        <li>Git</li>
        <li>Bootstrap</li>
        <li class="top-skill">Mobile Web Development</li>
        <li>Accessibility</li>
      </ul>
    </section>
    <section>
      <h2>Awards and Achievements</h2>
      <ol>
        <li>Dev Ninja Award, November 2020</li>
        <li>Developer of the Month, October 2019</li>
        <li>Achieved rating of 6 kyu on <a href="https://www.codewars.com/">Codewars</a></li>
        <li>Certified Accessibility Specialist</li>
      </ol>
    </section>
    <footer>©2020 Developer Diane.</footer>
  </main>
</body>
</html>

Answer 1 · 2021-04-10T04:36:17Z

April 10, 2021 4:36am

This passes all 3 tasks:

/* Complete the challenge by writing CSS below */

html {
  font-size: 16px;
}

header {
  font-size: 1.5em;
}

.heading {
  font-size: 5rem; /***  Task 1 (rem not em, in this case) ***/
}

h2 {
  font-size: 3em /*** Task 2 (16px * 3 == 48px)  ***/
}

h3 {
  font-size: 1.25em /*** Task 3 (16px * 1.25 == 20px)  ***/
}

BTW, I've been using "base" rather loosely. This should clarify a few things:

https://css-tricks.com/confused-rem-em/

I hope that helps.

Stay safe and happy coding!

Hey, weird sidebar, but if you haven't seen Resident Alien on the SyFy channel, OMG - it is SOOOOO funny!?! The first season just ended, so they're moving it to peacock. It's totally worth checking out. I tell everyone about it. LOL

Answer 2 · 2021-04-10T01:50:57Z

April 10, 2021 1:50am

Hi Tyler!

16px * 3 == 48px, so you'd want to use 3em (for the h2 font-size).

16px * 1.25 == 20px, so you'd want to use 1.25em (for the h2 font-size).

More info:

Em:

http://pxtoem.com/

https://www.w3schools.com/tags/ref_pxtoemconversion.asp

Rem:

https://nekocalc.com/px-to-rem-converter

https://daniellamb.com/experiments/px-to-rem-calc/

I hope that helps.

Stay safe and happy coding!

Answer 3 · 2021-04-10T03:51:15Z

April 10, 2021 3:51am

I see, I’m trying it now. It seems one of the main things about CSS is getting your terminology right first before you can choose what you’re using. For example “targeting” is used with h2 instead of .h2, right?

Answer 4 · 2021-04-10T04:02:45Z

April 10, 2021 4:02am

Hi David!

No, when I say "targeting" that's just how you specify what element your CSS rules are being applied to.

For example, if your HTML has this:

<header>This is my header</header>

Your CSS to "target" that element would be:

header {
  /***  Some CSS Rules  ***/
}

But if your HTML is more like:

<div id="myFavoriteDiv">This DIV Rocks!</div>

Then you would target that div (in CSS) with:

#myFavoriteDiv {
  /***  CSS Rules for this div ***/
}

Does that make sense?

More info:

https://www.w3schools.com/cssref/css_selectors.asp

Here they mention: "In CSS, selectors are patterns used to select the element(s) you want to style."

Select means the same thing as "target" (you could use "find" or "locate" also. They all mean the same thing.

It's how you specify which particular element you want to style.

That's all.

I hope that helps.

Stay safe and happy coding!

Answer 5 · 2021-04-10T04:08:53Z

April 10, 2021 4:08am

It does. Thanks. But, now I can’t get past challenge #3. It says “Create a new rule that targets h3. Using the same parent font-size context, give the h3 a font-size value in ems equivalent to 20px.

I typed:

h3 { font-size: 20px/1.5 = 13.3em } But, it’s totally wrong. I don’t know what I’m missing here. Should I clip a screenshot?

Answer 6 · 2021-04-10T04:16:38Z

April 10, 2021 4:16am

EM is kind of like a multiplier already.

16px * 1.25 == 20px, so you'd want to use 1.25em (for the h3 font-size)

Keep in mind, em manipulates the base style, which, in this case is 16px.

In other words, using:

h3 {
  font-size: 1.25em;
}

Effectively makes the font-size 20px.

Because 1.25em is essentially multiplying the base style of 16px with 1.25 resulting, effectively, in 20px.

Is that more clear?

I hope that helps.

Stay safe and happy coding!

Answer 7 · 2021-04-10T04:19:39Z

April 10, 2021 4:19am

Thank you, I was stumped, and I couldn’t tell what to multiply or divide the em by. But since the base is 16px the em will multiply against that to get the correct result.

Answer 8 · 2021-04-10T04:24:16Z

April 10, 2021 4:24am

After typing this its still apparently wrong.

/* Complete the challenge by writing CSS below */

html { font-size: 16px; }

header { font-size: 1.5em; }

.heading { font-size: 5em; } h3 { font-size: 1.25em; }

Answer 9 · 2021-04-10T04:25:58Z

April 10, 2021 4:25am

Yea em and rem take some getting used to but can be very powerful.

If you have mostly em and rem values sizing things, then when you want to resize, say, your entire website for responsive design (different font sizes for tablets and/or mobile devices), you can just alter the base size at each media query breakpoint and all the other styles throughout your code will all adjust proportionally automatically!?!

I hope that helps.

Stay safe and happy coding!

Answer 10 · 2021-04-10T17:01:58Z

April 10, 2021 5:01pm

I ended up figuring it out. This part of CSS will just take time identifying, but I guess that’s a part of learning it. I’m going to keep practicing this part of CSS in the near future.

Welcome to the Treehouse Community

Looking to learn something new?

Tyler Schneider

Tyler Schneider

Would the answer not be .33em ? 16/48=.33

David Brigham

David Brigham

Peter Vann

Peter Vann

10 Answers

Peter Vann

Peter Vann

David Brigham

David Brigham

Tyler Schneider

Tyler Schneider

Peter Vann

Peter Vann

David Brigham

David Brigham

Peter Vann

Peter Vann

David Brigham

David Brigham

Peter Vann

Peter Vann

David Brigham

David Brigham

David Brigham

David Brigham

Peter Vann

Peter Vann

David Brigham

David Brigham

Jenna Measor

Jenna Measor