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 (2014) Understanding Values and Units Em and Rem Units

Posted by Muneeb Farrukh
Muneeb Farrukh
9,216 Points

challenge task 3 of 3

challenge task 3 of 3

style.css 
/* Complete the challenge by writing CSS below */

header {
  font-size: 1.8em;
}

.title {
  font-size: 1.625rem;
}

h1 {
  font-size: 5.625rem;
}

h2 {
  font-size: 3.3125em; /* 53px / 16px /*
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <span class="title">Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
    <div class="main-content">
      <p>
        Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
      </p>
      <a href="#">Find out more</a>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of mink, bears, and Bald eagles.
      </p>
      <a href="#">See the Wildlife</a>
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
    </div>
    <footer>
      <p>All rights reserved to the state of <a href="#">California</a>.</p>
      <a href="#top">Back to top &raquo;</a>
    </footer>
  </body>
</html>
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

I looked at your challenge....Take a look at the task 2/3. You were told to convert 53px into em.(parent-element-16px)

Same thing applies here as well... As your parent element has a font size of 16px and your taks 3/3 is to convert 20 px into em. just divide 20/16 = 1.25em Waalaah! task done. I can understand you are confused about these pixels, em kinda crap. Same thing I was feeling a week ago. Now just remember 1 thing em is a relative unit. Now you are probably thinking "ok i know that " but exactily what is relative here? it is relative to your parent element font size. Your parent element's font size is actually responsible for the child 's font size.. Just think of it as big parents will have big children(may be genes I don't know) and vice versa. Just experiment a little bit and start building your own stuff..Try 'codpen'. Just play with ems and pixels! just submitting the code here won't help you.

Good luck

1 Answer

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,596 Points
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Muneeb,

The challenge is asking you to convert 20px to Ems.

Don't forget to check teacher's notes, under each video, it has a more deep explanation.

Using em units

If we set our body's font-size value to 1em:

body {
  font-size: 1em;
}

This is equivalent to setting the font-size value to:

body {
  font-size: 16px;
}

Converting pixels to ems

To convert a px value to its equivalent em value, we can follow a simple formula: divide an element’s px value by the parent element's font-size value.

For example:

.intro {
  font-size: 24px;
}

To convert the font-size value of intro to an em value, we'll need to divide 24 by the parent element's font-size. In this case, the parent element is the body element, which has the font-size set to 1em, or 16px.

24/16 = 1.5 This gives us an em-based font-size value of:

.intro {
  font-size: 1.5em;  /* 24px/16px */
}