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 - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
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,…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
CSS custom properties overview3m 44s
-
Configure CSS custom properties2m 26s
-
CSS custom properties and inheritance4m 27s
-
CSS custom properties and Sass variables3m 37s
-
Using Sass variables3m 25s
-
Challenge: Add custom properties to type scale2m 27s
-
Solution: Add custom properties to type scale2m 20s
-
-
-
-