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 trialNick Evershed
6,429 PointsIf I change the font size of the body and there is a <h1> and <p> in the body, what actually happens to their sizes?
Title
1 Answer
Jamie Reardon
Treehouse Project ReviewerSetting the font-size in the body will set the font-size for the overall page. However, the default browser styles for elements like the h1 element you have described will take on those default styles unless you have otherwise specifically changed them in your own stylesheet.
Therefore, they will take no effect on whatever font-size value you set on the body element.
Why? Well, that's because of the CSS specificity (which you will learn about at the end of the CSS basics course) in the default browser stylesheets set. A css rule specifically targetting the h1 element like this:
h1 {
font-size: 2em;
}
Is more specific than just:
body {
font-size: 16px;
}
The h1 typically has a default font-size of 2em = to 32px.
By setting the font-size in the body element, you can use that as the base sizing for other elements. If you use the em unit, since the em unit is a multiplier, you can then go on to sizing other elements much easier than using fixed pixel sizes.
body {
font-size: 1em; /* = 16px */
}
p {
font-size: 1em; /* Sets the paragraphs to be 16px. */
font-size: 2em; /* Sets the paragraphs to be 32px. */
}
It is therefore good practice to use em units for font-sizing since they are a relative unit and will scale across your projects.