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.

CSS calc() overview

CSS calc() overview - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

CSS calc() overview

- [Instructor] To get started let's take a closer look at calc, a new specification which allows you to do math directly in your CSS. Math in CSS, how could that be useful? The calc specification is compatible with several types of CSS properties including length, this is likely the first type of property that comes to mind. Consider that we can use math with widths and heights as well as properties like flex spaces. Frequency, angle, and time are common properties associated with the CSS animations and transitions. While we won't be using these properties in this course, you will find interesting applications for calc with animations and transitions. Numbers and integers are present throughout CSS. Font sizes, margin and padding are properties that come immediately to mind, but there are many other properties that use numbers and integers. Declaring a calculation is fairly simple. You have a property value pair, just…

Contents