It\u2019s easy to get stuck working with the CSS techniques we know well, but doing so puts us at a disadvantage when new problems surface.<\/p>\n\n\n\n
As the web continues to grow, the demand for new solutions will also continue to grow. Therefore, as web designers and front end developers, we have no choice but to know our toolset, and know it well.<\/p>\n\n\n\n
That means knowing even the specialty tools – the ones that aren\u2019t used as often, but when they are needed, are exactly the right tool for the job.<\/p>\n\n\n\n
Today, I’m going to introduce you to some CSS tools you might not have known about before. These tools are each units of measurement, like pixels or ems, but it\u2019s quite possible that you\u2019ve never heard of them! Let\u2019s start.<\/p>\n\n\n\n
We\u2019ll start with something that\u2019s similar to something you are probably already familiar with. The Here, we\u2019ve said that the div will have a However, what happens when you cascade em-defined font sizes inside each other? In the following snippet we apply exactly the same CSS as above. Each div inherits its font-size from its parent, giving us gradually increasing font-sizes.<\/p>\n\n\n\n <body>em<\/code> unit is defined as the current font-size<\/code>. So, for instance, if you set a font size on the body element, the em<\/code> value of any child element within the body will be equal to that font size.<\/p>\n\n\n\n<body><\/code>
<div class=\"test\">Test<\/div><\/code><\/body><\/code><\/p><\/blockquote>\n\n\n\nbody {<\/code>
font-size: 14px;<\/code>}<\/code>div {<\/code>
font-size: 1.2em; \/\/ calculated at 14px* 1.2, or 16.8px<\/code>}<\/code><\/p><\/blockquote>\n\n\n\nfont-size<\/code> of 1.2em<\/code>. That\u2019s 1.2 times whatever the font-size it has inherited, in this case 14px. The result is 16.8px<\/code>.<\/p>\n\n\n\n
<div>Test <!– 14 * 1.2 = 16.8px –>
<div>Test <!– 16.8 * 1.2 = 20.16px –>
<div>Test <!– 20.16 * 1.2 = 24.192px –>
<\/div>
<\/div>
<\/div>
<\/body><\/p><\/blockquote>\n\n\n\n