3 Math basics for CSS
This chapter covers
- Working with CSS measurement units
- Calculating values in CSS
- Using the CSS math functions and variables
- Understanding the math of CSS inheritance
- Getting to know the math of the box model
CSS is, in a word, tricky. You carefully hand-code each declaration, combine them with care into a style rule, refresh your browser, and the result is all-too often an unholy mess that looks nothing like the clean and professional design you imagined in your head. Welcome to frequently frustrating, always adventuresome world of CSS!
It’s true that CSS can make even the most Zen-like designer become a puller-of-hair or a gnasher-of-teeth. But if you’ve come to believe that wrestling with CSS is a no-win situation, then may I offer some good news: many, perhaps even most, CSS problems are math-related and are eminently fixable. Surely there must be a catch! There is: You have to learn the basics of how CSS uses math, which is what this chapter is all about. Here you learn all about CSS measurement units and operators, the most useful CSS math functions, how to wield CSS variables in math operations, the ins and outs of box model math, and much more.