From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Solution: Add custom properties to type scale

Solution: Add custom properties to type scale - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Solution: Add custom properties to type scale

(upbeat music) - So, how'd you do with that challenge? Hopefully you got most of these the way that I've done them here. Some of you, I suspect, might have taken your H1 to H5 here and just substituted the variable names for all of those 1.2's that we were multiplying by, so like five of them. Instead, what I did here was I simply defined my various heading sizes and then did the math from here just to make things a little bit easier to read. So we started with our H5 which previously had been just, uh, 1M times 1.2 I went ahead and wrote that here as our H5, So our base size times our type scale and set that to be the value of H5, and then declared that value down here so we just go ahead and do that math and that becomes the size of our H5. Then for H4 all I have to do is take the value of H5 and multiply it by the type scale again and write it here as an H4, and we just continue to work through that series,…

Contents