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 trialTyler Schneider
4,610 PointsWould the answer not be .33em ? 16/48=.33
parent element of the h2 has a fontsize value of 16px. Use an em unit to give the h2 a fontsize value equivalent to 48px
/* Complete the challenge by writing CSS below */
html {
font-size: 16px;
}
header {
font-size: 1.5rem;
}
.heading {
font-size: 5rem;
}
.h2 {
font-size: 3em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Diane: Resume</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<header>
<div id="header-box">
<h1 class="heading">Developer Diane: Resume</h1>
<address>
<p>website: developerdiane.com</p>
<p>email: diane@developerdiane.com</p>
</address>
<img src="developer-diane.jpg" alt="Developer Diane coding on her laptop.">
</div>
</header>
<section id="education">
<h2>Education</h2>
<ul>
<li>
<h3><a href="https://teamtreehouse.com">Treehouse</a></h3>
<p>Front End <em>Web Development</em> Techdegree</p>
<p class="date special">Graduated January 2020</p>
</li>
</ul>
</section>
<section id="experience">
<h2>Experience</h2>
<ul>
<li>
<h3>Super Web Design Shop</h3>
<p>Junior Developer</p>
<p class="date special">February 2020-present</p>
</li>
<li>
<h3>Pretty Good Websites, Inc.</h3>
<p>Web Development Intern</p>
<p class="date">July 2019-January 2020</p>
</li>
</ul>
</section>
<section>
<h2>Skills</h2>
<ul id="skills-list">
<li class="top-skill">HTML</li>
<li>CSS</li>
<li class="top-skill" id="proud">JavaScript</li>
<li>Git</li>
<li>Bootstrap</li>
<li class="top-skill">Mobile Web Development</li>
<li>Accessibility</li>
</ul>
</section>
<section>
<h2>Awards and Achievements</h2>
<ol>
<li>Dev Ninja Award, November 2020</li>
<li>Developer of the Month, October 2019</li>
<li>Achieved rating of 6 kyu on <a href="https://www.codewars.com/">Codewars</a></li>
<li>Certified Accessibility Specialist</li>
</ol>
</section>
<footer>©2020 Developer Diane.</footer>
</main>
</body>
</html>
Peter Vann
36,427 PointsKeep in mind, you'd target an h2 tag with h2 and not .h2
a footer is targeted with footer and not .footer
. targets classes
# targets ids
and a native element is just targeted with the element's name
I hope that helps.
Stay safe and happy coding!
10 Answers
Peter Vann
36,427 PointsThis passes all 3 tasks:
/* Complete the challenge by writing CSS below */
html {
font-size: 16px;
}
header {
font-size: 1.5em;
}
.heading {
font-size: 5rem; /*** Task 1 (rem not em, in this case) ***/
}
h2 {
font-size: 3em /*** Task 2 (16px * 3 == 48px) ***/
}
h3 {
font-size: 1.25em /*** Task 3 (16px * 1.25 == 20px) ***/
}
BTW, I've been using "base" rather loosely. This should clarify a few things:
https://css-tricks.com/confused-rem-em/
I hope that helps.
Stay safe and happy coding!
Hey, weird sidebar, but if you haven't seen Resident Alien on the SyFy channel, OMG - it is SOOOOO funny!?! The first season just ended, so they're moving it to peacock. It's totally worth checking out. I tell everyone about it. LOL
David Brigham
2,295 PointsI've seen the trailers for the show, but I have so many others I'm catching up I haven't seen it yet. I'll give it a go though. Thanks for your help, and patient. I finally passed all of them, and it just took getting used to.
Tyler Schneider
4,610 PointsThank you this was by far super helpful.
Stay safe & happy coding
Peter Vann
36,427 PointsHi Tyler!
16px * 3 == 48px, so you'd want to use 3em (for the h2 font-size).
16px * 1.25 == 20px, so you'd want to use 1.25em (for the h2 font-size).
More info:
Em:
https://www.w3schools.com/tags/ref_pxtoemconversion.asp
Rem:
https://nekocalc.com/px-to-rem-converter
https://daniellamb.com/experiments/px-to-rem-calc/
I hope that helps.
Stay safe and happy coding!
David Brigham
2,295 PointsI see, I’m trying it now. It seems one of the main things about CSS is getting your terminology right first before you can choose what you’re using. For example “targeting” is used with h2 instead of .h2, right?
Peter Vann
36,427 PointsHi David!
No, when I say "targeting" that's just how you specify what element your CSS rules are being applied to.
For example, if your HTML has this:
<header>This is my header</header>
Your CSS to "target" that element would be:
header {
/*** Some CSS Rules ***/
}
But if your HTML is more like:
<div id="myFavoriteDiv">This DIV Rocks!</div>
Then you would target that div (in CSS) with:
#myFavoriteDiv {
/*** CSS Rules for this div ***/
}
Does that make sense?
More info:
https://www.w3schools.com/cssref/css_selectors.asp
Here they mention: "In CSS, selectors are patterns used to select the element(s) you want to style."
Select means the same thing as "target" (you could use "find" or "locate" also. They all mean the same thing.
It's how you specify which particular element you want to style.
That's all.
I hope that helps.
Stay safe and happy coding!
David Brigham
2,295 PointsIt does. Thanks. But, now I can’t get past challenge #3. It says “Create a new rule that targets h3. Using the same parent font-size context, give the h3 a font-size value in ems equivalent to 20px.
I typed:
h3 { font-size: 20px/1.5 = 13.3em } But, it’s totally wrong. I don’t know what I’m missing here. Should I clip a screenshot?
Peter Vann
36,427 PointsEM is kind of like a multiplier already.
16px * 1.25 == 20px, so you'd want to use 1.25em (for the h3 font-size)
Keep in mind, em manipulates the base style, which, in this case is 16px.
In other words, using:
h3 {
font-size: 1.25em;
}
Effectively makes the font-size 20px.
Because 1.25em is essentially multiplying the base style of 16px with 1.25 resulting, effectively, in 20px.
Is that more clear?
I hope that helps.
Stay safe and happy coding!
David Brigham
2,295 PointsThank you, I was stumped, and I couldn’t tell what to multiply or divide the em by. But since the base is 16px the em will multiply against that to get the correct result.
David Brigham
2,295 PointsAfter typing this its still apparently wrong.
/* Complete the challenge by writing CSS below */
html { font-size: 16px; }
header { font-size: 1.5em; }
.heading { font-size: 5em; } h3 { font-size: 1.25em; }
Peter Vann
36,427 PointsYea em and rem take some getting used to but can be very powerful.
If you have mostly em and rem values sizing things, then when you want to resize, say, your entire website for responsive design (different font sizes for tablets and/or mobile devices), you can just alter the base size at each media query breakpoint and all the other styles throughout your code will all adjust proportionally automatically!?!
I hope that helps.
Stay safe and happy coding!
David Brigham
2,295 PointsI ended up figuring it out. This part of CSS will just take time identifying, but I guess that’s a part of learning it. I’m going to keep practicing this part of CSS in the near future.
Jenna Measor
3,088 Pointsim lost for the same question, how did you figure it out??
David Brigham
2,295 PointsDavid Brigham
2,295 PointsGood job on that! I was looking at it trying to figure it out when I simply needed to look at the .heading, and use a selector to change it.