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
You need to sign up for Treehouse in order to download course files.Sign up