Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics Understanding Values and Units Em and Rem Units

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

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>

Good job on that! I was looking at it trying to figure it out when I simply needed to look at the .heading, and use a selector to change it.

Keep in mind, you'd target an h2 tag with h2 and not .h2

a footer is targeted with footer and not .footer

. targets classes

# targets ids

and a native element is just targeted with the element's name

I hope that helps.

Stay safe and happy coding!

10 Answers

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

I've seen the trailers for the show, but I have so many others I'm catching up I haven't seen it yet. I'll give it a go though. Thanks for your help, and patient. I finally passed all of them, and it just took getting used to.

Thank you this was by far super helpful.

Stay safe & happy coding

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!

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?

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!

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?

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!

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.

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; }

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!

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.

im lost for the same question, how did you figure it out??