Cascading Style Sheets or CSS is the language that makes HTML websites look pretty. Learn how concepts like cascade, specificity, inheritance, and the box model influence the appearance of a webpage https://fireship.io/tags/css/

#css #webdev #100SecondsOfCode

The sequel to HTML in 100 Seconds https://youtu.be/ok-plXXHlWw

🔗 Resources

CSS Docs https://developer.mozilla.org/en-US/docs/Web/CSS
Flexbox in 100 Seconds https://youtu.be/K74l26pE4YA
Grid Layout in 100 Seconds https://youtu.be/uuOXPWCh-6o
CSS Animation https://codepen.io/ainalem/pen/oNxXRgW

🔥 Get More Content - Upgrade to PRO

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

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is CSS? 
- How does CSS cascade?
- What is specificity in CSS?
- CSS Box Model explained
- CSS for absolute beginners
- What is CSS used for?
- When was CSS3 created?
- Will there be a CSS4?
2024-02-04T05:37:10.589Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1cb4860d-1c03-45c2-b94f-f1e47e65d117
3adb04e4340924a77bd2a2b83e92311b5f7ab4d6b256398a8762c7dd46242312
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Cascading stylesheets or CSS is a stylesheet language famous for making websites look pretty.
By default, a browser will render HTML as a boring black and white document.
CSS allows you to describe the presentation of this markup by modifying the size, color, positioning, and layout HTML elements.
It was first released in 1996 and evolved into CSS 3 by 1999.
The language continues to evolve to this day with new features, but there will never be a CSS 4, just updates to the existing language.
The typical CSS rule starts with a selector that can be matched to an element in the HTML document.
Agent.
You then use braces to create a declaration block that contain properties that change the appearance of that element.
This is known as a CSS rule, but the tricky thing is that style sheets cascade.
A style sheet might contain multiple rules that apply to the same element.
This creates a hierarchy, 80 and rules that are more specific will overwrite the rules of their parents.
In other words, the order of your CSS rules matter.
In addition, some elements will inherit the styles a of their parent, but others will not.
Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element.
To get started, a open up a style tag in any HTML document.
A selector can target all HTML elements of a certain type, multiple related elements with a custom class or a single element with an ID.
Now, think of every HTML element like a box.
The content is in the middle, followed by padding, border, and a margin.
The amount of real estate used by every area in the box can be customized by defining properties like padding and margin.
They can take explicit pixel ages or responsive values that are relative to the parent element or a percentage of the viewport itself.
Now these boxes will bump into each other to make up a web page, h, but you can use tools like flex layout and grid layout to control how they flow together in a sophisticated way.
It can also detect user interaction with pseudo vectors like hover.
CSS also makes it possible to add logic to your code with variables or custom properties and by making media queries that can ply styles conditionally based on the size or type of device, and it can even handle complex animations with transitions and key frames.
This has been Cascading 18 style sheets in 100 seconds.
Hit the like button and subscribe if you wanna see more short videos like this.
Thanks for watching, and I will see you in the next one.

Speaker 0: Cascading stylesheets or CSS is a stylesheet language famous for making websites look pretty. By default, a browser will render HTML as a boring black and white document. CSS allows you to describe the presentation of this markup by modifying the size, color, positioning, and layout HTML elements. It was first released in 1996 and evolved into CSS 3 by 1999. The language continues to evolve to this day with new features, but there will never be a CSS 4, just updates to the existing language.

The typical CSS rule starts with a selector that can be matched to an element in the HTML document. Agent. You then use braces to create a declaration block that contain properties that change the appearance of that element. This is known as a CSS rule, but the tricky thing is that style sheets cascade. A style sheet might contain multiple rules that apply to the same element.

This creates a hierarchy, 80 and rules that are more specific will overwrite the rules of their parents. In other words, the order of your CSS rules matter. In addition, some elements will inherit the styles a of their parent, but others will not. Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element. To get started, a open up a style tag in any HTML document.

A selector can target all HTML elements of a certain type, multiple related elements with a custom class or a single element with an ID. Now, think of every HTML element like a box. The content is in the middle, followed by padding, border, and a margin. The amount of real estate used by every area in the box can be customized by defining properties like padding and margin. They can take explicit pixel ages or responsive values that are relative to the parent element or a percentage of the viewport itself.

Now these boxes will bump into each other to make up a web page, h, but you can use tools like flex layout and grid layout to control how they flow together in a sophisticated way. It can also detect user interaction with pseudo vectors like hover. CSS also makes it possible to add logic to your code with variables or custom properties and by making media queries that can ply styles conditionally based on the size or type of device, and it can even handle complex animations with transitions and key frames. This has been Cascading 18 style sheets in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this.

Thanks for watching, and I will see you in the next one.
Cascading stylesheets or CSS is a stylesheet language famous for making websites look pretty. By default, a browser will render HTML as a boring black and white document. CSS allows you to describe the presentation of this markup by modifying the size, color, positioning, and layout HTML elements. It was first released in 1996 and evolved into CSS 3 by 1999. The language continues to evolve to this day with new features, but there will never be a CSS 4, just updates to the existing language. The typical CSS rule starts with a selector that can be matched to an element in the HTML document. Agent. You then use braces to create a declaration block that contain properties that change the appearance of that element. This is known as a CSS rule, but the tricky thing is that style sheets cascade. A style sheet might contain multiple rules that apply to the same element.
This creates a hierarchy, 80 and rules that are more specific will overwrite the rules of their parents. In other words, the order of your CSS rules matter. In addition, some elements will inherit the styles a of their parent, but others will not. Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element.
parenting
To get started, a open up a style tag in any HTML document. A selector can target all HTML elements of a certain type, multiple related elements with a custom class or a single element with an ID.
Now, think of every HTML element like a box. The content is in the middle, followed by padding, border, and a margin. The amount of real estate used by every area in the box can be customized by defining properties like padding and margin. They can take explicit pixel ages or responsive values that are relative to the parent element or a percentage of the viewport itself.
real estate
Now these boxes will bump into each other to make up a web page, h, but you can use tools like flex layout and grid layout to control how they flow together in a sophisticated way.
It can also detect user interaction with pseudo vectors like hover. CSS also makes it possible to add logic to your code with variables or custom properties and by making media queries that can ply styles conditionally based on the size or type of device, and it can even handle complex animations with transitions and key frames. This has been Cascading 18 style sheets in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
youtube
streaming
animation
Cascading stylesheets or CSS is a stylesheet language famous for making websites look pretty. By default, a browser will render HTML as a boring black and white document. CSS allows you to describe the presentation of this markup by modifying the size, color, positioning, and layout HTML elements. It was first released in 1996 and evolved into CSS 3 by 1999. The language continues to evolve to this day with new features, but there will never be a CSS 4, just updates to the existing language. The typical CSS rule starts with a selector that can be matched to an element in the HTML document. Agent. You then use braces to create a declaration block that contain properties that change the appearance of that element. This is known as a CSS rule, but the tricky thing is that style sheets cascade. A style sheet might contain multiple rules that apply to the same element. This creates a hierarchy, 80 and rules that are more specific will overwrite the rules of their parents. In other words, the order of your CSS rules matter. In addition, some elements will inherit the styles a of their parent, but others will not. Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element. To get started, a open up a style tag in any HTML document. A selector can target all HTML elements of a certain type, multiple related elements with a custom class or a single element with an ID. Now, think of every HTML element like a box. The content is in the middle, followed by padding, border, and a margin. The amount of real estate used by every area in the box can be customized by defining properties like padding and margin. They can take explicit pixel ages or responsive values that are relative to the parent element or a percentage of the viewport itself. Now these boxes will bump into each other to make up a web page, h, but you can use tools like flex layout and grid layout to control how they flow together in a sophisticated way. It can also detect user interaction with pseudo vectors like hover. CSS also makes it possible to add logic to your code with variables or custom properties and by making media queries that can ply styles conditionally based on the size or type of device, and it can even handle complex animations with transitions and key frames. This has been Cascading 18 style sheets in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
Cascading
cascading
stylesheets
stylesheets
or
or
CSS
css
is
is
a
a
stylesheet
stylesheet
language
language
famous
famous
for
for
making
making
websites
websites
look
look
pretty.
pretty
By
by
default,
default
a
a
browser
browser
will
will
render
render
HTML
html
as
as
a
a
boring
boring
black
black
and
and
white
white
document.
document
CSS
css
allows
allows
you
you
to
to
describe
describe
the
the
presentation
presentation
of
of
this
this
markup
markup
by
by
modifying
modifying
the
the
size,
size
color,
color
positioning,
positioning
and
and
layout
layout
HTML
html
elements.
elements
It
it
was
was
first
first
released
released
in
in
1996
1996
and
and
evolved
evolved
into
into
CSS
css
3
3
by
by
1999.
1999
The
the
language
language
continues
continues
to
to
evolve
evolve
to
to
this
this
day
day
with
with
new
new
features,
features
but
but
there
there
will
will
never
never
be
be
a
a
CSS
css
4,
4
just
just
updates
updates
to
to
the
the
existing
existing
language.
language
The
the
typical
typical
CSS
css
rule
rule
starts
starts
with
with
a
a
selector
selector
that
that
can
can
be
be
matched
matched
to
to
an
an
element
element
in
in
the
the
HTML
html
document.
document
Agent.
agent
You
you
then
then
use
use
braces
braces
to
to
create
create
a
a
declaration
declaration
block
block
that
that
contain
contain
properties
properties
that
that
change
change
the
the
appearance
appearance
of
of
that
that
element.
element
This
this
is
is
known
known
as
as
a
a
CSS
css
rule,
rule
but
but
the
the
tricky
tricky
thing
thing
is
is
that
that
style
style
sheets
sheets
cascade.
cascade
A
a
style
style
sheet
sheet
might
might
contain
contain
multiple
multiple
rules
rules
that
that
apply
apply
to
to
the
the
same
same
element.
element
This
this
creates
creates
a
a
hierarchy,
hierarchy
80
80
and
and
rules
rules
that
that
are
are
more
more
specific
specific
will
will
overwrite
overwrite
the
the
rules
rules
of
of
their
their
parents.
parents
In
in
other
other
words,
words
the
the
order
order
of
of
your
your
CSS
css
rules
rules
matter.
matter
In
in
addition,
addition
some
some
elements
elements
will
will
inherit
inherit
the
the
styles
styles
a
a
of
of
their
their
parent,
parent
but
but
others
others
will
will
not.
not
Ultimately,
ultimately
the
the
browser
browser
uses
uses
the
the
concepts
concepts
of
of
cascade,
cascade
specificity,
specificity
and
and
inheritance
inheritance
to
to
control
control
which
which
styles
styles
are
are
applied
applied
to
to
an
an
element.
element
To
to
get
get
started,
started
a
a
open
open
up
up
a
a
style
style
tag
tag
in
in
any
any
HTML
html
document.
document
A
a
selector
selector
can
can
target
target
all
all
HTML
html
elements
elements
of
of
a
a
certain
certain
type,
type
multiple
multiple
related
related
elements
elements
with
with
a
a
custom
custom
class
class
or
or
a
a
single
single
element
element
with
with
an
an
ID.
id
Now,
now
think
think
of
of
every
every
HTML
html
element
element
like
like
a
a
box.
box
The
the
content
content
is
is
in
in
the
the
middle,
middle
followed
followed
by
by
padding,
padding
border,
border
and
and
a
a
margin.
margin
The
the
amount
amount
of
of
real
real
estate
estate
used
used
by
by
every
every
area
area
in
in
the
the
box
box
can
can
be
be
customized
customized
by
by
defining
defining
properties
properties
like
like
padding
padding
and
and
margin.
margin
They
they
can
can
take
take
explicit
explicit
pixel
pixel
ages
ages
or
or
responsive
responsive
values
values
that
that
are
are
relative
relative
to
to
the
the
parent
parent
element
element
or
or
a
a
percentage
percentage
of
of
the
the
viewport
viewport
itself.
itself
Now
now
these
these
boxes
boxes
will
will
bump
bump
into
into
each
each
other
other
to
to
make
make
up
up
a
a
web
web
page,
page
h,
h
but
but
you
you
can
can
use
use
tools
tools
like
like
flex
flex
layout
layout
and
and
grid
grid
layout
layout
to
to
control
control
how
how
they
they
flow
flow
together
together
in
in
a
a
sophisticated
sophisticated
way.
way
It
it
can
can
also
also
detect
detect
user
user
interaction
interaction
with
with
pseudo
pseudo
vectors
vectors
like
like
hover.
hover
CSS
css
also
also
makes
makes
it
it
possible
possible
to
to
add
add
logic
logic
to
to
your
your
code
code
with
with
variables
variables
or
or
custom
custom
properties
properties
and
and
by
by
making
making
media
media
queries
queries
that
that
can
can
ply
ply
styles
styles
conditionally
conditionally
based
based
on
on
the
the
size
size
or
or
type
type
of
of
device,
device
and
and
it
it
can
can
even
even
handle
handle
complex
complex
animations
animations
with
with
transitions
transitions
and
and
key
key
frames.
frames
This
this
has
has
been
been
Cascading
cascading
18
18
style
style
sheets
sheets
in
in
100
100
seconds.
seconds
Hit
hit
the
the
like
like
button
button
and
and
subscribe
subscribe
if
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this.
this
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 the concept of Cascading stylesheets or CSS, a way to modify websites by modifying the appearance of certain elements. The rules of the rule apply to all HTML elements and can be customized with tools like flex or grid layout. The speaker also discusses the use of CSS for media queries and short video links for more information.
CSS in 100 Seconds
Cascading stylesheets or CSS is a stylesheet language famous for making websites look pretty. By default, a browser will render HTML as a boring black and white document. CSS allows you to describe the presentation of this markup by modifying the size, color, positioning, and layout HTML elements. It was first released in 1996 and evolved into CSS 3 by 1999. The language continues to evolve to this day with new features, but there will never be a CSS 4, just updates to the existing language. The typical CSS rule starts with a selector that can be matched to an element in the HTML document. Agent. You then use braces to create a declaration block that contain properties that change the appearance of that element. This is known as a CSS rule, but the tricky thing is that style sheets cascade. A style sheet might contain multiple rules that apply to the same element. This creates a hierarchy, 80 and rules that are more specific will overwrite the rules of their parents. In other words, the order of your CSS rules matter. In addition, some elements will inherit the styles a of their parent, but others will not. Ultimately, the browser uses the concepts of cascade, specificity, and inheritance to control which styles are applied to an element. To get started, a open up a style tag in any HTML document. A selector can target all HTML elements of a certain type, multiple related elements with a custom class or a single element with an ID. Now, think of every HTML element like a box. The content is in the middle, followed by padding, border, and a margin. The amount of real estate used by every area in the box can be customized by defining properties like padding and margin. They can take explicit pixel ages or responsive values that are relative to the parent element or a percentage of the viewport itself. Now these boxes will bump into each other to make up a web page, h, but you can use tools like flex layout and grid layout to control how they flow together in a sophisticated way. It can also detect user interaction with pseudo vectors like hover. CSS also makes it possible to add logic to your code with variables or custom properties and by making media queries that can ply styles conditionally based on the size or type of device, and it can even handle complex animations with transitions and key frames. This has been Cascading 18 style sheets in 100 seconds. Hit the like button and subscribe if you wanna see more short videos like this. Thanks for watching, and I will see you in the next one.
The speaker explains the concept of Cascading stylesheets or CSS, a way to modify websites by modifying the appearance of certain elements. The rules of the rule apply to all HTML elements and can be customized with tools like flex or grid layout. The speaker also discusses the use of CSS for media queries and short video links for more information.