This community-built FAQ covers the “Rem” exercise from the lesson “Sizing Elements”.
Paths and Courses
This exercise can be found in the following Codecademy content:
Web Development
Learn Responsive Design
FAQs on the exercise Rem
There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (
) below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like (
) to up-vote the contribution!
Need broader help or resources? Head here.
Looking for motivation to keep learning? Join our wider discussions.
Learn more about how to use this guide.
Found a bug? Report it!
Have a question about your account or billing? Reach out to our customer support team!
None of the above? Find out where to ask other questions here!
under what circumstances would you use em/rem as opposed to just setting the font size in px?
1 Like
From what I learnt from the lesson exercise on em and rem, rem is the root comparison of the entire elements in the page while em is the comparison of section by section of the page elements. Therefore, it depends on which style you want to apply. For me, the rem is easier because it is global but stylistically, em is more tasking but will give you more and better look of your design.
I hope I got it right.
1 Like
My own observation here is that I could not answer pass question 2 in the exercise 3/10 for the reason I don’t quite understand. I refreshed many times as usual to get it right yet it didn’t let me move forward even though my answers were correct.
Also once you ask for a review for just one question, it gives the rest of the answers that you didn’t ask for. That’s not good for learners like me.
I wish these be looked into as I feel its a systems bug.
Thanks.
@redcat817 and @course0509112323, px is used when giving an element fixed dimensions. This is not very common as you would probably want your web page to adapt to user preferences. Not only can you use em and rem on elements’ font-size property, but you can actually use them on any other property such as: height, width, etc. I actually use them on the height, width, and nearly all other properties to do with the box model of an element. This means that if the user changes the default font size to small, not only will the text on your web page get smaller, but the whole web page will get smaller
As a general rule of thumb, always use rem unless you really feel forced to use em. This is simply because rem values are easier to calculate. You could also use em when wanting to gradually make elements smaller like the following:
<ul>
<li>Cheese
<ul>
<li>Feta</li>
<li>Blue Cheese</li>
</ul>
</li>
<li>Meat
<ul>
<li>Beef</li>
<li>Lamb</li>
</ul>
</li>
</ul>
html {
font-size: 30px;
}
li {
font-size: 0.7em;
}
Output:
In the example above, we are setting the <html> element’s font-size property to 30px. Next, we are setting the font-size property of all <li> elements to 0.7em. For the first two <li> elements, 0.7em is equal to 21px. However, for the nested <li>s, 0.7em is equal to 21px * 0.7 which is equal to 14.7px
5 Likes
Why do we need to change the numbers in our code in stems 2-6, and not just change em to rem?
1 Like
Yeah I’m having the same issue - trying to set the rem or em doesn’t let me pass, even though my solution appears to match the system one:
#banner h1 {
font-size: 3.75rem;
...
...
}
I can also see the page updating to (what appears to be) the correct sizing
1 Like
Does using em / rem aid in accessibility?
For instance, if you wanted to implement font-size changes for readability / low visibility users (such as making the text extra large), is it better to use em / rem so the font ratio stays the same if the main font size changes?
So since they were getting all historical I was dead curious about what em stood for in the first place … It actually just stands for the letter M which was initially used to determine width and comes from Mutton quadrant 
meanwhile I read further that I guess in graphic design there’s also something called and ex which X was how height was determined on old timey fonts. The more you know 
1 Like
Even without rem on <html> tag , the default font-size is 16px/1em. Why do we have to even mention rem?
1 Like
The lesson says
Most browsers set the font size of <html> to 16 pixels
But why would the html element have a font size when it’s not displayed on the browser since it’s outside the body element?
1 Like
Think of the html element as the container of your whole entire website. It contains information about everything! Now that information can either be seen by the user, or used behind the scenes for other purposes.
If there are any automatic values that the browser needs to pass in to your website (like the default font size of 16px) it won’t pass it into the body element since this element is reserved for the developer to write their website content. Instead, the browser will pass the info into the container of all information, the html element.
The body element then inherits the font size property of that html element and uses it as your default font size.
Just a heads-up that when I was doing the Rem lesson, I was entering ems instead for the exercises and it was being treated as a correct answer. I got halfway through the lesson and then noticed my mistakes, so corrected them. Just thought this was worth flagging up in case other learners make mistakes and don’t notice…
Thanks!
