Learn how Custom Properties or CSS Variables work in 100 Seconds. Stay tuned for a full CSS theme-toggler project the uses variables with JavaScript https://fireship.io/tags/css

My favorite example https://alligator.io

#css #100SecondsOfCode

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:18:48.658Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
6a91ec1c-2d67-4074-8ade-331a08856d92
95978afe3cb9098ea16823158c77fd4df294f5f2278cfe635104a958b40793a7
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
CSS variables or custom properties allow you to reuse values throughout your stylesheets.
They increase your efficiency, reduce code duplication, and there's all kinds of cool tricks you can do with them as you'll see in this video.
We can define global variables that will be used throughout the entire website on the root element.
Start with the double dash, followed by whatever name you want to use for the variable.
Then you can use any valid CSS value here.
You can now put the variable to use using the var function.
If you want to be extra safe, you can provide a second argument to var as a fallback value.
If text color is undefined or invalid, it will use pink instead.
Now when you use this variable in multiple places, is then decide to change the value, you only have to update it once.
Variables cascade downwards, which means you can override them in the children.
If we have a card class and change the text color variable to red, all the children of a card will use this value instead of the root value.
And this means we can change the appearance of our site by simply tweaking in variable values.
This concept is especially powerful when combined with media queries.
As the viewport gets smaller, we may want to decrease the margin in between elements.
Instead of updating potentially hundreds of individual CSS classes, we just let our media query change a variable value.
And we can even use that prefers color scheme media query to toggle between a light and dark theme based on the user's device preferences.
Variables also work great with calc.
Define 1 as as a regular number, and then use it to calculate actual pixel values in your other styles.
Another cool thing is that you're not limited to a single variable in a property value.
Notice how I'm building up a red, green, blue color by using 3 different variables.
And it's things like this that make CSS variables extremely useful for building with memes.
Because when we bring JavaScript into the equation, we can change these variables on the fly, and the browser will automatically repaint the styles that the user sees on the screen.
In our next project video, I'll show you how to build a Theme Toggler similar to the one that you see on Alligator IO.
This has been CSS Custom Properties or Variables in 100 seconds.
Make sure to hit with the Like button and share this video with your team.
It really helps out these short videos.
Thanks for watching, and I will see you in the next one.

Speaker 0: CSS variables or custom properties allow you to reuse values throughout your stylesheets. They increase your efficiency, reduce code duplication, and there's all kinds of cool tricks you can do with them as you'll see in this video. We can define global variables that will be used throughout the entire website on the root element. Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value here.

You can now put the variable to use using the var function. If you want to be extra safe, you can provide a second argument to var as a fallback value. If text color is undefined or invalid, it will use pink instead. Now when you use this variable in multiple places, is then decide to change the value, you only have to update it once. Variables cascade downwards, which means you can override them in the children.

If we have a card class and change the text color variable to red, all the children of a card will use this value instead of the root value. And this means we can change the appearance of our site by simply tweaking in variable values. This concept is especially powerful when combined with media queries. As the viewport gets smaller, we may want to decrease the margin in between elements. Instead of updating potentially hundreds of individual CSS classes, we just let our media query change a variable value.

And we can even use that prefers color scheme media query to toggle between a light and dark theme based on the user's device preferences. Variables also work great with calc. Define 1 as as a regular number, and then use it to calculate actual pixel values in your other styles. Another cool thing is that you're not limited to a single variable in a property value. Notice how I'm building up a red, green, blue color by using 3 different variables.

And it's things like this that make CSS variables extremely useful for building with memes. Because when we bring JavaScript into the equation, we can change these variables on the fly, and the browser will automatically repaint the styles that the user sees on the screen. In our next project video, I'll show you how to build a Theme Toggler similar to the one that you see on Alligator IO. This has been CSS Custom Properties or Variables in 100 seconds. Make sure to hit with the Like button and share this video with your team.

It really helps out these short videos. Thanks for watching, and I will see you in the next one.
CSS variables or custom properties allow you to reuse values throughout your stylesheets. They increase your efficiency, reduce code duplication, and there's all kinds of cool tricks you can do with them as you'll see in this video. We can define global variables that will be used throughout the entire website on the root element. Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value here. You can now put the variable to use using the var function. If you want to be extra safe, you can provide a second argument to var as a fallback value. If text color is undefined or invalid, it will use pink instead. Now when you use this variable in multiple places, is then decide to change the value, you only have to update it once. Variables cascade downwards, which means you can override them in the children. If we have a card class and change the text color variable to red, all the children of a card will use this value instead of the root value. And this means we can change the appearance of our site by simply tweaking in variable values. This concept is especially powerful when combined with media queries. As the viewport gets smaller, we may want to decrease the margin in between elements. Instead of updating potentially hundreds of individual CSS classes, we just let our media query change a variable value. And we can even use that prefers color scheme media query to toggle between a light and dark theme based on the user's device preferences.
Variables also work great with calc. Define 1 as as a regular number, and then use it to calculate actual pixel values in your other styles. Another cool thing is that you're not limited to a single variable in a property value. Notice how I'm building up a red, green, blue color by using 3 different variables.
data
And it's things like this that make CSS variables extremely useful for building with memes. Because when we bring JavaScript into the equation, we can change these variables on the fly, and the browser will automatically repaint the styles that the user sees on the screen. In our next project video, I'll show you how to build a Theme Toggler similar to the one that you see on Alligator IO. This has been CSS Custom Properties or Variables in 100 seconds. Make sure to hit with the Like button and share this video with your team. It really helps out these short videos. Thanks for watching, and I will see you in the next one.
youtube
animation
social media
graphic design
CSS variables or custom properties allow you to reuse values throughout your stylesheets. They increase your efficiency, reduce code duplication, and there's all kinds of cool tricks you can do with them as you'll see in this video. We can define global variables that will be used throughout the entire website on the root element. Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value here. You can now put the variable to use using the var function. If you want to be extra safe, you can provide a second argument to var as a fallback value. If text color is undefined or invalid, it will use pink instead. Now when you use this variable in multiple places, is then decide to change the value, you only have to update it once. Variables cascade downwards, which means you can override them in the children. If we have a card class and change the text color variable to red, all the children of a card will use this value instead of the root value. And this means we can change the appearance of our site by simply tweaking in variable values. This concept is especially powerful when combined with media queries. As the viewport gets smaller, we may want to decrease the margin in between elements. Instead of updating potentially hundreds of individual CSS classes, we just let our media query change a variable value. And we can even use that prefers color scheme media query to toggle between a light and dark theme based on the user's device preferences. Variables also work great with calc. Define 1 as as a regular number, and then use it to calculate actual pixel values in your other styles. Another cool thing is that you're not limited to a single variable in a property value. Notice how I'm building up a red, green, blue color by using 3 different variables. And it's things like this that make CSS variables extremely useful for building with memes. Because when we bring JavaScript into the equation, we can change these variables on the fly, and the browser will automatically repaint the styles that the user sees on the screen. In our next project video, I'll show you how to build a Theme Toggler similar to the one that you see on Alligator IO. This has been CSS Custom Properties or Variables in 100 seconds. Make sure to hit with the Like button and share this video with your team. It really helps out these short videos. Thanks for watching, and I will see you in the next one.
CSS
css
variables
variables
or
or
custom
custom
properties
properties
allow
allow
you
you
to
to
reuse
reuse
values
values
throughout
throughout
your
your
stylesheets.
stylesheets
They
they
increase
increase
your
your
efficiency,
efficiency
reduce
reduce
code
code
duplication,
duplication
and
and
there's
there's
all
all
kinds
kinds
of
of
cool
cool
tricks
tricks
you
you
can
can
do
do
with
with
them
them
as
as
you'll
you'll
see
see
in
in
this
this
video.
video
We
we
can
can
define
define
global
global
variables
variables
that
that
will
will
be
be
used
used
throughout
throughout
the
the
entire
entire
website
website
on
on
the
the
root
root
element.
element
Start
start
with
with
the
the
double
double
dash,
dash
followed
followed
by
by
whatever
whatever
name
name
you
you
want
want
to
to
use
use
for
for
the
the
variable.
variable
Then
then
you
you
can
can
use
use
any
any
valid
valid
CSS
css
value
value
here.
here
You
you
can
can
now
now
put
put
the
the
variable
variable
to
to
use
use
using
using
the
the
var
var
function.
function
If
if
you
you
want
want
to
to
be
be
extra
extra
safe,
safe
you
you
can
can
provide
provide
a
a
second
second
argument
argument
to
to
var
var
as
as
a
a
fallback
fallback
value.
value
If
if
text
text
color
color
is
is
undefined
undefined
or
or
invalid,
invalid
it
it
will
will
use
use
pink
pink
instead.
instead
Now
now
when
when
you
you
use
use
this
this
variable
variable
in
in
multiple
multiple
places,
places
is
is
then
then
decide
decide
to
to
change
change
the
the
value,
value
you
you
only
only
have
have
to
to
update
update
it
it
once.
once
Variables
variables
cascade
cascade
downwards,
downwards
which
which
means
means
you
you
can
can
override
override
them
them
in
in
the
the
children.
children
If
if
we
we
have
have
a
a
card
card
class
class
and
and
change
change
the
the
text
text
color
color
variable
variable
to
to
red,
red
all
all
the
the
children
children
of
of
a
a
card
card
will
will
use
use
this
this
value
value
instead
instead
of
of
the
the
root
root
value.
value
And
and
this
this
means
means
we
we
can
can
change
change
the
the
appearance
appearance
of
of
our
our
site
site
by
by
simply
simply
tweaking
tweaking
in
in
variable
variable
values.
values
This
this
concept
concept
is
is
especially
especially
powerful
powerful
when
when
combined
combined
with
with
media
media
queries.
queries
As
as
the
the
viewport
viewport
gets
gets
smaller,
smaller
we
we
may
may
want
want
to
to
decrease
decrease
the
the
margin
margin
in
in
between
between
elements.
elements
Instead
instead
of
of
updating
updating
potentially
potentially
hundreds
hundreds
of
of
individual
individual
CSS
css
classes,
classes
we
we
just
just
let
let
our
our
media
media
query
query
change
change
a
a
variable
variable
value.
value
And
and
we
we
can
can
even
even
use
use
that
that
prefers
prefers
color
color
scheme
scheme
media
media
query
query
to
to
toggle
toggle
between
between
a
a
light
light
and
and
dark
dark
theme
theme
based
based
on
on
the
the
user's
user's
device
device
preferences.
preferences
Variables
variables
also
also
work
work
great
great
with
with
calc.
calc
Define
define
1
1
as
as
as
as
a
a
regular
regular
number,
number
and
and
then
then
use
use
it
it
to
to
calculate
calculate
actual
actual
pixel
pixel
values
values
in
in
your
your
other
other
styles.
styles
Another
another
cool
cool
thing
thing
is
is
that
that
you're
you're
not
not
limited
limited
to
to
a
a
single
single
variable
variable
in
in
a
a
property
property
value.
value
Notice
notice
how
how
I'm
i'm
building
building
up
up
a
a
red,
red
green,
green
blue
blue
color
color
by
by
using
using
3
3
different
different
variables.
variables
And
and
it's
it's
things
things
like
like
this
this
that
that
make
make
CSS
css
variables
variables
extremely
extremely
useful
useful
for
for
building
building
with
with
memes.
memes
Because
because
when
when
we
we
bring
bring
JavaScript
javascript
into
into
the
the
equation,
equation
we
we
can
can
change
change
these
these
variables
variables
on
on
the
the
fly,
fly
and
and
the
the
browser
browser
will
will
automatically
automatically
repaint
repaint
the
the
styles
styles
that
that
the
the
user
user
sees
sees
on
on
the
the
screen.
screen
In
in
our
our
next
next
project
project
video,
video
I'll
i'll
show
show
you
you
how
how
to
to
build
build
a
a
Theme
theme
Toggler
toggler
similar
similar
to
to
the
the
one
one
that
that
you
you
see
see
on
on
Alligator
alligator
IO.
io
This
this
has
has
been
been
CSS
css
Custom
custom
Properties
properties
or
or
Variables
variables
in
in
100
100
seconds.
seconds
Make
make
sure
sure
to
to
hit
hit
with
with
the
the
Like
like
button
button
and
and
share
share
this
this
video
video
with
with
your
your
team.
team
It
it
really
really
helps
helps
out
out
these
these
short
short
videos.
videos
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how CSS variables allow for reuse and efficiency in stylesheets. They also discuss the concept of global variables and how to use them in the entire website. The concept of variables is also discussed, and they recommend using it for media queries and creating a default color for responsive responsive web pages. Finally, they explain how to build aayment Toggler similar to the one on Alligator IO.
CSS Variables in 100 Seconds
CSS variables or custom properties allow you to reuse values throughout your stylesheets. They increase your efficiency, reduce code duplication, and there's all kinds of cool tricks you can do with them as you'll see in this video. We can define global variables that will be used throughout the entire website on the root element. Start with the double dash, followed by whatever name you want to use for the variable. Then you can use any valid CSS value here. You can now put the variable to use using the var function. If you want to be extra safe, you can provide a second argument to var as a fallback value. If text color is undefined or invalid, it will use pink instead. Now when you use this variable in multiple places, is then decide to change the value, you only have to update it once. Variables cascade downwards, which means you can override them in the children. If we have a card class and change the text color variable to red, all the children of a card will use this value instead of the root value. And this means we can change the appearance of our site by simply tweaking in variable values. This concept is especially powerful when combined with media queries. As the viewport gets smaller, we may want to decrease the margin in between elements. Instead of updating potentially hundreds of individual CSS classes, we just let our media query change a variable value. And we can even use that prefers color scheme media query to toggle between a light and dark theme based on the user's device preferences. Variables also work great with calc. Define 1 as as a regular number, and then use it to calculate actual pixel values in your other styles. Another cool thing is that you're not limited to a single variable in a property value. Notice how I'm building up a red, green, blue color by using 3 different variables. And it's things like this that make CSS variables extremely useful for building with memes. Because when we bring JavaScript into the equation, we can change these variables on the fly, and the browser will automatically repaint the styles that the user sees on the screen. In our next project video, I'll show you how to build a Theme Toggler similar to the one that you see on Alligator IO. This has been CSS Custom Properties or Variables in 100 seconds. Make sure to hit with the Like button and share this video with your team. It really helps out these short videos. Thanks for watching, and I will see you in the next one.
The speaker explains how CSS variables allow for reuse and efficiency in stylesheets. They also discuss the concept of global variables and how to use them in the entire website. The concept of variables is also discussed, and they recommend using it for media queries and creating a default color for responsive responsive web pages. Finally, they explain how to build aayment Toggler similar to the one on Alligator IO.