Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up