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 CSS Basics (2014) Understanding Values and Units Percentages

Posted by vikrant kaushal
.a{fill-rule:evenodd;}techdegree
vikrant kaushal
Front End Web Development Techdegree Student 2,558 Points

Percentages and relation

what does Mr.Guil mean by " where the size of the text is directly related to the font size of its parent " he said that in pervious video also - thank you

1 Answer

Cameron Childres
Cameron Childres
11,817 Points
Cameron Childres
Cameron Childres
11,817 Points

Hi Vikrant,

When you use a percentage to set font size of an element it uses the font size of its parent element as a base for the calculation. There's a good example on the MDN documentation for percentage:

<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50% (9px)</span></p>
  <p><span style="font-size:200%;">200% (36px)</span></p>
</div>
  • The parent element (div) has a font size of 18px.
  • The first line inherits this and remains at 18px.
  • The next line uses a value of 50%; 50% of 18px is 9px.
  • The final line uses a value of 200%; 200% of 18px is 36px.

I hope this helps! Let me know if you have any questions.