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
channonhall
12,247 PointsSorry 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
28,690 PointsI 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.
-
emis relative to the last definedfont-sizeof the parent container. That will be the context for defining the size of theemwhere '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-sizethat was set within thehtmlorbodyrules 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!
Isaac Al-Wahaibi
6,522 Pointschange your h1, title to rem instead of em
channonhall
12,247 PointsThanks guys I understand it now :)
Frederico Graciano
Courses Plus Student 2,768 PointsHello 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
channonhall
12,247 Pointshaha thank you sir
Andrew Fox
2,730 PointsI 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
28,690 PointsHi 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. :)
channonhall
12,247 Pointschannonhall
12,247 PointsThank you sir now I under stand more!!
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsGood stuff! Happy to help. :-)