CSS Variables Tutorial (CSS Custom Properties)

Sharing buttons:


hey guys in this video we're gonna take

a look at CSS variables or the official

name for them which are CSS custom

properties so in the past we've used CSS

preprocessors like sass and less to

handle dynamic values or variables in

our CSS but now we can do it natively

now one question that probably comes to

mind is is there still a need for

pre-processors like sass and that's

something that's going to be very

opinionated and something that comes

down to preference as you'll see the

native custom properties syntax is

pretty weird and it takes a little time

to get used to but then again it's

native it doesn't have to be compiled

you can access them from JavaScript but

then again even though it's supported on

all modern browsers except ie what about

the people with outdated browsers or the

people that are using IE you'll probably

want to provide fallbacks for them with

sass variables are just compiled down to

regular CSS and you don't have to worry

about that so it's up to you to weigh

the pros and cons and of course

pre-processors like sass do other things

as well not just variables if you ask my

opinion I think that within time there's

not going to be much need for pre

processors but that won't be for at

least a couple years in my opinion I

think CSS is advancing there's a lot of

things that are coming coming out that

are really cool so that's just my

opinion but in this video we're going to

look at how to use variables and CSS and

we'll even jump into some JavaScript and

I'll show you how we can access the

values from there we're gonna create

this little mini layout nothing special

now I could show you how to use a CSS

variable in three minutes but you know I

want to go in and I want to create a

little layout we're gonna use a little

bit of the grid system so it's not just

hey this is how you use a variable we're

gonna do some other stuff as well and

talk about the scoping of the variables

and so on alright so let's go ahead and

get started coding dojo is a programming

school that turns beginners into

developers and only 14 weeks over 90% of

their grads land jobs within

three months of graduating often making

over seventy K per year to learn more

visit coding dojo comm or click the link

in the description below alright guys so

what I've done here is I have an

index.html file and a blank style dot

CSS file

okay so I've removed all the styling

from the markup and the mark-up is very

simple it's just basically a header okay

with an ID it has an h1 and then we have

a container class inside the container

we have a grid class and then we have

two boxes with an h1 and a paragraph so

I didn't want to take the time to type

this out because it's so basic you guys

can type it out quickly or you can just

get it from the code pen in the

description alright so let's go over to

style dot CSS and let's start to work

with variables so when we define a

variable we can define them on different

elements or different scopes so what I

want to do first is define variables for

we'll say for the root element so to do

that we use colon root okay so anything

that we put in here any variables we

define in here we'll be able to use

throughout throughout all of the

elements throughout all the scope of the

CSS so let's go ahead and define just a

main background color now to define a

variable you want to use - - and I know

that that that's a weird looking syntax

for variables if you're used to sass

then you're used to like a money sign or

less I believe as a number sign - - is

kind of weird and it takes a little bit

of getting used to but we're going to go

ahead and create main BG color and then

we're going to define that as f43 x

which is a light gray okay so that

defines the variable it obviously it

doesn't do anything yet because we

haven't used it for anything but it

defines it so let's go down to the body

and to use that variable what we want to

do is let's say we want to use it for

our background I will say background

color and to use it this is also kind of

weird we actually have to save our

opens some parentheses and then put the

variable inside there now if you're

using vias code you'll have this nice

intellisense where you get this

drop-down and you can just select your

variables so let's save that and now

you'll see we have a gray background so

this is this is essentially how to use

variables okay I could end the tutorial

here but I want to go a little more

in-depth all right so let's create a

couple other variables in the route so

let's also do a main text color and set

that to three three three which is a

dark really dark gray and we could go

down here and say color var main text

color and save makes the color a little

lighter and for the body I also want to

add the font family now it's up to you

on what you want to put inside of your

variables if you wanted to create a font

family or a main font variable you could

do that so that stuff is all preference

I'm also going to Mars ero out the

margin and padding here so zero that out

so now you can see the fonts changed all


will also set a line height which is

again something that you could put in a

variable if you wanted to okay so now

let's let's add the container class here

and the container is going to have a

width and I want that as a variable as

well so up here we're gonna say - -

container width and we'll set that to

let's say 90% okay and then for the

width will save var and we'll put in

container with 90% we also want the

margin for the container I'm gonna say

20 pixels top and bottom and then auto

left and right which will push

everything to the middle okay everything

in the container the header isn't

doesn't have its own container which we

could do if we wanted to but that's fine

alright so let's deal with the header

now so we'll go down here we'll say

was it header with an ID of main header

okay and then I'm gonna add a background

a background color and let's let's

actually create a variable up here for


so we'll say header - BG color it's also

what we'll set that to 333 so it'll have

a dark background let's also create a

text color and make sure that that's

light so we'll do white for that okay

and then down here we can just say var

and we'll do header BG color and then

let's change the color of the text to

var header text color and save and now

we have our black background now the

space right here is from the h1 so what

I'll do is I'll say header whoops

header main - header and let's set the

we'll just zero out the padding and the

margin what I do

look we need to put h1 here all right so

that gets rid of that space so you can

see we're doing more than just variables

here we're just creating a little layout

okay so now what I want to do is show

you basically what I call scoped

variables I don't know if that's the

correct term but you can create

variables on certain elements or certain

scopes so let's say we'll put a comment

here we'll say define box VARs okay so

it's a dot box so this is this is the

element we want to define the variables

for and it not only applies to the box

class but anything within it okay so

let's add a box BG color

and we'll set that to let's say ddd and

then let's set a box main color and

we're gonna set that to a blue

hexadecimal which is 0

6c okay so now we have these two

variables now these will not work

anywhere else except for the box classes

okay if we define the box main color for

the header that's not going to work so

we could continue to do our box styling

in here but what I like to do is just

keep this for the variables and then

we'll go ahead and create another box

class for the actual styles so let's say

background color and we'll set that to

bar - - box BG color and save and now

you'll see we have that gray background

let's add another variable for padding

so for padding I'm gonna do five top and

bottom ten left and right and down here

we'll go ahead and we'll say padding set

that - box padding and there we go now I

want these to be side to side so we're

gonna use a little bit of the grid

system here so we'll go up here and

we'll say class grid and let's go ahead

and make sure we display a grid okay and

then we want to define our grid template

columns now I do have a crash course on

the grid CSS which explains all this

stuff basically template columns were

just defining our layout we could do

pixels here we could do like 100 pixels

100 pixels that would give us two

columns 100 pixels each what I want to

use is is fractional units so fr-s so

we'll say 1fr for the first box and 1fr

for the second which will give us to

even boxes here alright and if we want

space in the middle we can go ahead and

we can say grid

app and set that to let's say 20 pixels

gives us some space and let's just align

items to the center all right so we'll

leave that for now let's go back down to

the box and I want to use this main

color variable for a few things actually

so first thing is going to be the border

so we're gonna say one pixel solid and

we're gonna use our main color variables

so we can go ahead and save our - - box

main color and save and now we have that

blue border so the h1 I also want that

to have that color so we'll say box h1

down here and set the color to bar box

main color save and now it's blue now

even if I were to get rid of this dot

box and just have h1 and save that's

also gonna be blue and if I were to add

an h1 somewhere else I'll just say h1

test you'll see that's not blue because

this this is only going to work this

variable here inside of the box class

even though we just use h1 here and we

didn't even define dot box h1 okay

hopefully that makes sense I'm just

gonna get rid of that so I'm just gonna

put that dot box back there but you

don't actually need it to use the

variable alright so the next thing I

want to do is add some box shadow okay

so for box shadow we have a few

different values that we need one is the

horizontal offset which will be 10

pixels the vertical offset will say 5

pixels the blur which will say 5 pixels

and then the color which will we'll use

the main the main vert the main color

here so this so we can go like that and

save and now I see we have that blue box

shadow now with

box-shadow we can't we can't set

individual properties for these values

like we can for instance with a border

we could say like border color and set

that to red but with the box shadow it

all has to be in here so having a

variable for each one of these is kind

of nice so that's what we're gonna do

we're gonna set box shadow - H - offset

and we'll set that to what ten pixels

and then let's see we'll just bring this

down and this one will be five pixels

and this will be the the V offset and

then let's do what else the blur so

we'll say shadow blur and we'll set that

to five pixels so then down here we can

just put in our variables so I'll just

grab that this is the blur so we'll say


what is it shadow blur blur and this one

here will be the what the V offset so

we'll say shadow V offset and then this

one will be the H offset so H offset and

I'll just put these on separate lines

because that's kind of hard to read so

I'll just go like that and save and now

we can simply change for instance the H

offset if we want to change that to two

pixels and save you can see that that

this side has been it's thinner if we

want to change the blur to let's say 25

and save you see now we have a higher

blur rate blur rate I don't know if

that's the right word but you can see we

can easily change the stuff from the

shadow all right and I think that's a

good use of CSS variables now a lot

we're using this main color in quite a

few places so this is this is the the

benefit of using variables if we were to

change this to red and save all that

stuff will change to red so you can have

an entire template we

you have maybe a main main or primary

color secondary color maybe button

colors and you can easily just change

those variable values and it'll update

the whole look of your template which is

really nice and that's that's one of the

main reasons that sass and less were

created okay and now we can do that

natively now one thing that I want to

show you real quick is let's go up to

the grid where we have the gap now with

sass we could put like a variable like

20 inside of a variable and then use

that and then put px and kind of

concatenate it we can't do that with

with custom properties so if I were to

set a variable here of gap to just 20

not 20 pixels but just the number 20 and

then go in here and say var - - Gap and

save you'll see that there's there's no

more gap it doesn't work so a fix for

this is to use calc ok we can use the

calc function and CSS so we'll say calc

we'll wrap this and then what we can do

is we can take that this variable which

is actually 20 and we can say times 1

pixel and save and then that'll give us

20 pixels okay so that's a solution for

that okay we can also overwrite

variables so let's say for the paragraph

in the box let's say we wanted say color

bar and set that to box main color save

and now you can see the paragraphs are

blue now we could overwrite this value

right here this box main color for just

the paragraph if we wanted to by setting

it here to let's say 5 5 5 which is a

light gray so if I save this you'll see

that the paragraph text updates the

color but none of the other box main

colors update okay because we overrode

it inside of the paragraph now another

thing we have is a fallback option so if

we say color

and we set that to a variable called

let's say box - P - color which doesn't

exist if I save that it's just gonna be

black which is the default but we can

say we can put a comma here and add a

parameter which will be the fallback

color so for that let's say 555 which is

a lighter a light grey and save and now

you can see that that's lighter and if

you can't really see the difference let

me just put in something even lighter

and you can see that that is now the

fallback alright so we can do that I

think that's pretty much it as far as

the basics go so what I want to do now

is jump into the HTML file and show you

how you can access the variables in

JavaScript okay so we're just going to

put some script tags in here and what I

want to do is I want to get the value

for a box main color okay which is this

blue hexadecimal value 0-6 C so to do

that we're gonna create a variable

called box I'm gonna set it to document

dot query selector and it has a class of

box by the way query selector is only

going to select the first one if you

want to select all then you would do

query selector all but that works in a

little different way but we don't need

that for what I'm gonna do here now I'm

gonna set another variable called box

styles and then set that to a function

called get compute style or get computed

style and then pass in the box variable

okay and if we go ahead and we look at

that with console.log so box styles and

save and open up our console with f12

you'll see it gives us all these

different styles now what we want to do

is we want to take this box styles and

we want to we want to call a method

called get property value and then we

can pass in the variable that we want to

get so let's let's actually get rid of


and let's create a variable here so

create a variable called box main color

and we'll set this to the box styles and

then we're gonna say get property value

and then we can simply pass in the

variable so - - box - main - color and

then let's go ahead and console.log that

and save and there it is 0 6 C so we can

get those variables in our JavaScript

which opens up a whole range of

possibilities in terms of things we can

do in the UI and with our templates now

if we want to change a value what I'm

gonna do is I'm gonna take the header

and change the header BG color to the

value that we got from the Box main

color so I'll make it blue through the

through JavaScript so first of all we

want to grab the header

we'll use document dot query selector

and by the way if you don't know about

this this kind of so these selectors and

the Dom and all that check out my modern

JavaScript course on udemy I'll I'll put

a link in the description we go over all

this stuff so from here we want to

select the main header so it had an idea

of main header and then I'm simply going

to take the header and just change the

style and say dot set property so header

dot style dot set property and then in

here pass in the variable we want to

change or set which is header

- BG - color which we defined as black

are not black which or is it right here

almost black dark gray and what we'll do

is put in a second parameter of what we

want to change it to which will be box

main color which is what we got up here

so if I save that now you can see

the header is blue okay so we can get

and we can set variables CSS variables

from JavaScript

alright guys so I hope you enjoyed this

I know I you know I could have just did

a three minute video showing you how to

define a variable but I like to go you

know somewhat in debt in depth so that

you can get a wrap your head around it

and get a better understanding of it so

hopefully you can appreciate that and

not just say wow this guy takes friggin

forever just to explain something but

yeah so that's it I hope everyone had a

happy holiday and has a Happy New Year

so thanks for watching guys and I will

see you next time coding dojo is a

programming school that turns beginners

into developers in only 14 weeks if

you're serious about landing a career in

tech but lack the formal education or

background coding dojo will get you

there in no time

with over 3,000 graduates to date over

90% of their grads land jobs within

three months of graduating often making

over seventy K per year at tech firms of

all sizes from companies like Google to

local startups to learn more visit

coding dojo com or click the link in the

description below