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

Posted by Francis Roslak
Francis Roslak
Courses Plus Student 5,026 Points

Stuck on CSS Foundations

Help! In the Basic Selectors lessons Guil spoke about combining Type Selectors to create Descendant Selectors. He worked with an "em" and changed their color to red. What is an "em" and why did only a small portion of the line change color. This concept was not explained very clearly and I am stuck.. For people with no prior understanding of css, the subject matter was presented a little too quickly.

akc
akc
11,729 Points
akc
akc
11,729 Points

1) Em is a unit, set related to the current parent's font size. Say if your current parent size is 16px, 1em=16px and 2em=32px. Think of it as a percentage of the current parent font size. 2) As for descendant selector, it means that you are selecting the tags under the specific parent. For example: '''h1 a {color: red}; p a {color: green};''' We are both changing the color of the <a> tag. However, only the <a> inside <h1> tags are red while only the <a> tags inside <p> are green. All other <a> tags on the page that are not within <p> or <h1> will stay with the original state.

There are many more powerful selector and you can learn more at: http://css-tricks.com/pseudo-class-selectors/

5 Answers

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

ems are based on the browser default px size which I believe is 16px. But if you are viewing the browser on a different device like a tablet or smartphone the default size will be different. So 1em on a desktop will be 16px, but on a smartphone 1em will be something like 5px, (that's just an example for the mobile, I don't know the default size for those).

Hope that helps.

Rick Rakin
Rick Rakin
6,531 Points
Rick Rakin
Rick Rakin
6,531 Points

I took more notes while learning CSS Foundations from Guil than any other videos. There is so much to learn I think it's needed though. em is to mark something to place emphasis on it. Kind of like italics. Only what's between the em opening and the em closing tags is emphasized (or in this case, turned red). More here

akc
akc
11,729 Points
akc
akc
11,729 Points

1) Em is a unit, set related to the current parent's font size. Say if your current parent size is 16px, 1em=16px and 2em=32px. Think of it as a percentage of the current parent font size.

2) As for descendant selector, it means that you are selecting the tags under the specific parent. For example: 

h1 a {color: red};
p a {color: green};

We are both changing the color of the a tag. However, only the inside h1 tags are red while only the a tags inside p tags are green. All other a tags on the page that are not within or will stay with the original state.

There are many more powerful selector and you can learn more at: http://css-tricks.com/pseudo-class-selectors/

Francis Roslak
PLUS
Francis Roslak
Courses Plus Student 5,026 Points
Francis Roslak
Francis Roslak
Courses Plus Student 5,026 Points

Thanks everyone for the explanations and thanks for taking the time! I really need to take more notes here, and there is so much content just for this topic alone. I definitely will have to go over this a few more times and let it become clearer. I went through the first part of the Learning Adventure without much trouble and constructed the Smells Like Bakin site, but CSS is definitely tricky and there is so much you need to know.

akc
akc
11,729 Points
akc
akc
11,729 Points

You're welcome. It is a lot of things to go over, but selectors are something that you'll see over and over again so it's better to get them down. Usually I would pause the video to look up other resources on a topic that I don't understand before going further. Also, I always take a look at the current support browsers on some difficult elements because there certainly a few that are not supported by any major browser, therefore I would just skip over them for now (but it's good to know they are there).