Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Understanding Values and Units Em and Rem Units

Sorry but I do not understand the Code Challenge

The em-based font-size values for .title and h1 are relative to their parent header's font-size value. This causes a compounding issue that makes their font size values larger than the desired values. Replace the em units of .title and h1 with a unit that is relative to the root element of the page.

What does that mean?

Thanks Channon

P.S. I am gonna be 10 years old soon :)

5 Answers

Sean T. Unwin
Sean T. Unwin
28,660 Points

I would recommend watching the previous video again so that the differences between em and rem soak in a little more. I am not trying to make you feel bad, of course, as it can be a little bit of a difficult concept to understand.

  • em is relative to the last defined font-size of the parent container. That will be the context for defining the size of the em where '1' is equal to that previously set font-size within the same container, or 100%, i.e. the same size.
  • 'rem' is the root em. This is either the browser's default font-size if it was not defined, otherwise it will be the font-size that was set within the html or body rules of the CSS.

From the example given in the challenge, I will attempt to expand a little on it:

header {
  /* This is set to 180%  of the  of the `font-size` given in the `html` or `body` selectors */
  /*     If not it is the browser's default font-size (maybe 14px for example) */
  font-size: 1.8em;
}

.title {
  /* This is set to 162.5% of the font-size set in the `header` */
  font-size: 1.625em;
}

h1 {
  /* This is set to 562.5% of the font-size set in the header */
  font-size: 5.625em;
}

The title and h1 would be quite large probably as the font-size in the header is already set to be larger than the default, or rem. The challenge is requesting to change the font-size of the title and h1 to be relative the root em, and to ignore the font-size given in header.

I hope that helps some.

Happy pre-Birthday wishes! :smile:

Thank you sir now I under stand more!!

Sean T. Unwin
Sean T. Unwin
28,660 Points

Good stuff! Happy to help. :-)

Isaac Al-Wahaibi
Isaac Al-Wahaibi
6,522 Points

change your h1, title to rem instead of em

Thanks guys I understand it now :)

Hello Channon Hall.

Wow that's cool to see someone of your age learning CSS. ^^ I did learn CSS when i was in your age too, now i'm just learning all again cause it's been a while i didn't use any of this stuff.

I'm just got this question haha, it was really easy for me actually, I had read your question before starting this values, units part of the course and well it did help a bit to be aware of the words relative, root.

Someone helped you already so there is no need for me to help you but i would like to give you a little tip that works for me when studying new stuff.

Make notes. How? use the comments in CSS /* All inside here is a Comment */ ok should I comment a single line or some parts of my css properties ? None of them.

I introduce you the Pseudocode so here is a Wikipedia definition of Pseudocode :

It uses the structural conventions of a programming language, but is intended for human reading rather than machine reading. Pseudocode typically omits details that are essential for machine understanding of the algorithm, such as variable declarations, system-specific code and some subroutines. The programming language is augmented with natural language description details, where convenient, or with compact mathematical notation. The purpose of using pseudocode is that it is easier for people to understand than conventional programming language code, and that it is an efficient and environment-independent description of the key principles of an algorithm. It is commonly used in textbooks and scientific publications that are documenting various algorithms, and also in planning of computer program development, for sketching out the structure of the program before the actual coding takes place.

Source: Wikipedia.

Well it maybe confuse you but a example of that would be instead of commenting something like this.

/* a:link {

color: #FFFFFF; Make the link color white.

}

a:hover {

color: blue; background-color: #00CC00; Make the BG color green.

}

a:visited {

color: orange;

}

*/

You don't type any property just type normal informal text like describing what it's going to do and that any people can read even if they don't know CSS.

/*

All the links on the page have a white color. when someone hover the link will turn blue and the background color will turn green... after the link is visited the link color will always be orange.

*/

So yeah i hope you got it haha, it's just plain text I usually use this with Javascript, I think you gonna learn javascript too right? Well good luck, keep up studying it when u get to my age 22 years old you gonna know a lot of stuff!

If you're confused let me know and happy birthday :)

I will be turning 23 soon aww :( haha

haha thank you sir

I still don't get it...... i've done what i was told and it still isn't right .. i have been on this course for almost two weeks now and my teacher is getting annoyed with me....

Sean T. Unwin
Sean T. Unwin
28,660 Points

Hi Andrew,

Perhaps you could start a new thread describing your issue a little more, such as posting the code that you have tried. Hopefully, that will allow us to assist you better. :)