Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

The CSS calc() Function

Well done!

You have completed The CSS calc() Function!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Intro to calc()

5:52 with Guil Hernandez

There are many ways you can use calc() in your projects. This video covers simple examples that demonstrate the basics of calc().

[SOUND] Hey everyone! 0:00
Guil here, one of the front end teachers here at Treehouse. 0:05
Did you know that you can do simple math operations with CSS? 0:08
In this workshop series, I'm going to teach you how to use 0:12
the CSS calc function, to add a little logic to your CSS. 0:15
First, you'll learn the basics of calc. 0:20
Then I'm going to cover 3 useful ways you can use calc in your web projects. 0:22
Like setting background position offsets, displaying full width elements 0:26
inside padded containers, and creating fluid grid columns. 0:30
calc is a CSS function that performs a calculation and returns a result. 0:35
With calc, you use operators like the plus sign, minus sign, asterisk and 0:40
forward slash to write mathematical expressions that add, 0:45
subtract, multiply and divide values. 0:49
[NOISE] You use the calc function and property values wherever CSS, length, and 0:51
number values are accepted. 0:56
There are many ways you can use calc in your projects. 0:58
So let's start with something really simple to demonstrate 1:01
how the calc function works. 1:04
And later on in the workshop, I'll show you a few handy use cases for calc. 1:05
To follow along in work spaces, click the launch workspace button on this page. 1:09
In the workspace, there's a simple webpage link to a style sheet. 1:14
This index.html file contains a div element with the class, 1:19
"column," and when I preview this page in the browser 1:23
we can see that the column element takes up the full width and height of the page. 1:27
So first, I'll show you how to define width and height values using calc. 1:32
Back in my workspace I'm going to open up the style.css file ,and scroll down 1:37
to the column rule. 1:42
In the column rule I'm going to replace the width value 1:44
of 100% with the value calc. 1:47
So I'm going to type calc, followed by a set of parenthesis. 1:50
Inside the parenthesis is where we write mathematical expressions that add, 1:55
subtract, multiply and divide values. 1:59
And the result of the expression is used as the properties value. 2:02
So I'll start with a simple expression to demonstrate how they work. 2:07
So inside the parentheses using a subtraction operator, 2:10
I'm going to write the expression (150px- 50px). 2:14
An expression is evaluated from the left to the right. 2:20
So when the browser calculates 150 pixels minus 50 pixels. 2:25
The result is a 100 pixel wide column element. 2:30
Now if I go back and use the addition operator to change the expression to 2:34
(150px + 50px), the result is now a 200 pixel wide column. 2:39
Knowing that CSS can do math is pretty exciting and impressive. 2:47
But in these examples, you're better off using 100 pixels or 2:51
200 pixels as the width value. 2:55
There's no added benefit in using calc for simple pixel based expressions like this. 2:57
What's most useful about using calc, is how you're able to mix units like 3:03
percentages and pixels, or ems and rems in your expressions. 3:07
This gives you greater control over your layouts. 3:11
For instance, say I'm working with a fluid layout, 3:15
where I don't know the exact width of the parent container. 3:18
And in the container, I want to define a column width that's exactly 3:21
50 pixels less than half of the parent container's width. 3:26
Well I can calculate the width within the CSS, 3:31
using the expression (50%- 50px). 3:35
In the expression I'm defining the value 50% for 3:39
half the parent container's width, then subtracting 50 pixels. 3:44
So when we take a look at it in the browser we see how the column will 3:49
always be 50 pixels narrower than half the view port width. 3:53
Even though I use a fixed pixel value in the expression, 3:58
I'm still able to define a fluid width in my layout. 4:02
This is what I meant earlier when I said being able to mix units, 4:07
gives you greater control over a layout. 4:10
Now, if I want a column that's slighter wider then 50%, 4:12
I can use an addition operator. 4:16
So I'm going to change the expression to (50% + 2em). 4:18
So here one em is equal to 16 pixels, so 4:24
now the column container is 32 pixels wider than half the view port size. 4:28
I can also use the calc expression to define the height. 4:34
So I'll go back to my column rule and change the height value to calc and 4:37
then inside the parenthesis I'm going to write the expression 100% minus 3em. 4:43
So when I save my file and refresh the browser, 4:50
you can see how the columns height will always be three em, or 4:54
48 pixels, shorter than the full height of it's container. 4:58
In this case, it's the view port. 5:02
When using addition and subtraction operators in expressions, 5:05
there needs to be a space on both sides of the operators, 5:09
otherwise the browser cannot calculate them. 5:13
For example, if I remove the space between the minus operator and the value 3em, 5:16
the expression 100% negative 3em is now considered invalid, because the browser 5:23
interprets this as a percentage value followed by a negative end value. 5:29
So it cannot calculate this. 5:33
So be sure to use white space around the minus and plus operators. 5:35
So that they're not interpreted as positive or negative values. 5:40
So now that you've learned the basics of calc, in the lessons that follow this 5:44
video you're going to learn three useful ways you can use calc in your projects. 5:48