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.