1 00:00:00,012 --> 00:00:05,510 [SOUND] Hey everyone! 2 00:00:05,510 --> 00:00:08,870 Guil here, one of the front end teachers here at Treehouse. 3 00:00:08,870 --> 00:00:12,870 Did you know that you can do simple math operations with CSS? 4 00:00:12,870 --> 00:00:15,810 In this workshop series, I'm going to teach you how to use 5 00:00:15,810 --> 00:00:20,040 the CSS calc function, to add a little logic to your CSS. 6 00:00:20,040 --> 00:00:22,270 First, you'll learn the basics of calc. 7 00:00:22,270 --> 00:00:26,770 Then I'm going to cover 3 useful ways you can use calc in your web projects. 8 00:00:26,770 --> 00:00:30,890 Like setting background position offsets, displaying full width elements 9 00:00:30,890 --> 00:00:35,430 inside padded containers, and creating fluid grid columns. 10 00:00:35,430 --> 00:00:40,650 calc is a CSS function that performs a calculation and returns a result. 11 00:00:40,650 --> 00:00:45,230 With calc, you use operators like the plus sign, minus sign, asterisk and 12 00:00:45,230 --> 00:00:49,260 forward slash to write mathematical expressions that add, 13 00:00:49,260 --> 00:00:51,705 subtract, multiply and divide values. 14 00:00:51,705 --> 00:00:56,405 [NOISE] You use the calc function and property values wherever CSS, length, and 15 00:00:56,405 --> 00:00:58,168 number values are accepted. 16 00:00:58,168 --> 00:01:01,280 There are many ways you can use calc in your projects. 17 00:01:01,280 --> 00:01:04,120 So let's start with something really simple to demonstrate 18 00:01:04,120 --> 00:01:05,790 how the calc function works. 19 00:01:05,790 --> 00:01:09,930 And later on in the workshop, I'll show you a few handy use cases for calc. 20 00:01:09,930 --> 00:01:14,730 To follow along in work spaces, click the launch workspace button on this page. 21 00:01:14,730 --> 00:01:19,470 In the workspace, there's a simple webpage link to a style sheet. 22 00:01:19,470 --> 00:01:23,900 This index.html file contains a div element with the class, 23 00:01:23,900 --> 00:01:27,040 "column," and when I preview this page in the browser 24 00:01:27,040 --> 00:01:32,220 we can see that the column element takes up the full width and height of the page. 25 00:01:32,220 --> 00:01:37,220 So first, I'll show you how to define width and height values using calc. 26 00:01:37,220 --> 00:01:42,183 Back in my workspace I'm going to open up the style.css file ,and scroll down 27 00:01:42,183 --> 00:01:44,200 to the column rule. 28 00:01:44,200 --> 00:01:47,760 In the column rule I'm going to replace the width value 29 00:01:47,760 --> 00:01:50,590 of 100% with the value calc. 30 00:01:50,590 --> 00:01:55,000 So I'm going to type calc, followed by a set of parenthesis. 31 00:01:55,000 --> 00:01:59,740 Inside the parenthesis is where we write mathematical expressions that add, 32 00:01:59,740 --> 00:02:02,330 subtract, multiply and divide values. 33 00:02:02,330 --> 00:02:07,160 And the result of the expression is used as the properties value. 34 00:02:07,160 --> 00:02:10,790 So I'll start with a simple expression to demonstrate how they work. 35 00:02:10,790 --> 00:02:14,990 So inside the parentheses using a subtraction operator, 36 00:02:14,990 --> 00:02:20,970 I'm going to write the expression (150px- 50px). 37 00:02:20,970 --> 00:02:25,090 An expression is evaluated from the left to the right. 38 00:02:25,090 --> 00:02:30,720 So when the browser calculates 150 pixels minus 50 pixels. 39 00:02:30,720 --> 00:02:34,940 The result is a 100 pixel wide column element. 40 00:02:34,940 --> 00:02:39,906 Now if I go back and use the addition operator to change the expression to 41 00:02:39,906 --> 00:02:47,650 (150px + 50px), the result is now a 200 pixel wide column. 42 00:02:47,650 --> 00:02:51,440 Knowing that CSS can do math is pretty exciting and impressive. 43 00:02:51,440 --> 00:02:55,360 But in these examples, you're better off using 100 pixels or 44 00:02:55,360 --> 00:02:57,450 200 pixels as the width value. 45 00:02:57,450 --> 00:03:03,190 There's no added benefit in using calc for simple pixel based expressions like this. 46 00:03:03,190 --> 00:03:07,830 What's most useful about using calc, is how you're able to mix units like 47 00:03:07,830 --> 00:03:11,920 percentages and pixels, or ems and rems in your expressions. 48 00:03:11,920 --> 00:03:15,320 This gives you greater control over your layouts. 49 00:03:15,320 --> 00:03:18,540 For instance, say I'm working with a fluid layout, 50 00:03:18,540 --> 00:03:21,900 where I don't know the exact width of the parent container. 51 00:03:21,900 --> 00:03:26,730 And in the container, I want to define a column width that's exactly 52 00:03:26,730 --> 00:03:31,075 50 pixels less than half of the parent container's width. 53 00:03:31,075 --> 00:03:35,194 Well I can calculate the width within the CSS, 54 00:03:35,194 --> 00:03:39,228 using the expression (50%- 50px). 55 00:03:39,228 --> 00:03:44,060 In the expression I'm defining the value 50% for 56 00:03:44,060 --> 00:03:49,050 half the parent container's width, then subtracting 50 pixels. 57 00:03:49,050 --> 00:03:53,380 So when we take a look at it in the browser we see how the column will 58 00:03:53,380 --> 00:03:58,380 always be 50 pixels narrower than half the view port width. 59 00:03:58,380 --> 00:04:02,800 Even though I use a fixed pixel value in the expression, 60 00:04:02,800 --> 00:04:05,810 I'm still able to define a fluid width in my layout. 61 00:04:07,030 --> 00:04:10,610 This is what I meant earlier when I said being able to mix units, 62 00:04:10,610 --> 00:04:12,940 gives you greater control over a layout. 63 00:04:12,940 --> 00:04:16,920 Now, if I want a column that's slighter wider then 50%, 64 00:04:16,920 --> 00:04:18,920 I can use an addition operator. 65 00:04:18,920 --> 00:04:24,136 So I'm going to change the expression to (50% + 2em). 66 00:04:24,136 --> 00:04:28,470 So here one em is equal to 16 pixels, so 67 00:04:28,470 --> 00:04:34,940 now the column container is 32 pixels wider than half the view port size. 68 00:04:34,940 --> 00:04:37,950 I can also use the calc expression to define the height. 69 00:04:37,950 --> 00:04:43,730 So I'll go back to my column rule and change the height value to calc and 70 00:04:43,730 --> 00:04:50,740 then inside the parenthesis I'm going to write the expression 100% minus 3em. 71 00:04:50,740 --> 00:04:54,100 So when I save my file and refresh the browser, 72 00:04:54,100 --> 00:04:58,730 you can see how the columns height will always be three em, or 73 00:04:58,730 --> 00:05:02,240 48 pixels, shorter than the full height of it's container. 74 00:05:02,240 --> 00:05:03,800 In this case, it's the view port. 75 00:05:05,100 --> 00:05:09,080 When using addition and subtraction operators in expressions, 76 00:05:09,080 --> 00:05:13,850 there needs to be a space on both sides of the operators, 77 00:05:13,850 --> 00:05:16,640 otherwise the browser cannot calculate them. 78 00:05:16,640 --> 00:05:23,066 For example, if I remove the space between the minus operator and the value 3em, 79 00:05:23,066 --> 00:05:29,160 the expression 100% negative 3em is now considered invalid, because the browser 80 00:05:29,160 --> 00:05:33,820 interprets this as a percentage value followed by a negative end value. 81 00:05:33,820 --> 00:05:35,710 So it cannot calculate this. 82 00:05:35,710 --> 00:05:40,750 So be sure to use white space around the minus and plus operators. 83 00:05:40,750 --> 00:05:44,190 So that they're not interpreted as positive or negative values. 84 00:05:44,190 --> 00:05:48,250 So now that you've learned the basics of calc, in the lessons that follow this 85 00:05:48,250 --> 00:05:52,450 video you're going to learn three useful ways you can use calc in your projects.