Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7day trial. Sign In Enroll
Start a free Courses trial
to watch this video
There are many ways you can use calc() in your projects. This video covers simple examples that demonstrate the basics of calc().
Resources
calc() operators

+
Addition 

Subtraction 
*
Multiplication 
/
Division
[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
You need to sign up for Treehouse in order to download course files.
Sign up