Converting Nested PX to EMs1:00 with Allison Grayce Marshall
In this video, we'll learn how to adjust the pixel to em formula when nesting font sizes throughout the Smells Like Bakin' website.
Things to Consider
- Convert pixels to ems using the formula target ÷ context = result
- Use the font size of the parent element in pixels as your context
So now we want to style a link within our H1 tag.
Let's do the same conversion using 18 pixels as our target,
and the browser's default size of 16 pixels
as our context again.
That converts to 1.125 em.
Save your document and refresh the browser to see what happens.
Our link is inheriting the size of the H1.
That's because when you start nesting elements,
the context in our formula changes.
So instead of our context being the default browser text size
as in our first example,
the context is now the H1 itself,
so the new calculation would be
18 pixels divided by 24 pixels
equals 0.750 em.
Now it's your turn to try a few calculations.
You need to sign up for Treehouse in order to download course files.Sign up