All language subtitles for CSS Tutorial - Zero to Hero (Complete Course)-en

Hi, welcome to the CSS zero to hero course,
in this course, you're going to completely

learn how to use CSS from the ground up, we're
going to cover every single concept or every

major concept in CSS, and really build up
our knowledge of it. So before we move on,

I just wanted to give you some motivation
on what you're going to be doing in this course.

So you can, you know, really get excited about
the course and start jump, you just jump straight

into learning. So first of all, let's look
at some of the stuff that we've done over

the course. Now we start with a base website.
And over time, we style this and change up

the website using every technique that we've
learned. So you can see that we've created

multiple grids, colors, we've changed this
completely and transformed the website in

every single way. We've also created things
like gradients. And we've also styled change

our custom fonts, colors, and backgrounds.
We cover all of this in depth throughout the

course. And we do it step by step so that
you don't rush through and forget anything.

At the end of the course, there's also a little
challenge here, where you try to bring all

your skills together and style a website from
scratch. Now there is a solution video, if

you need it, maybe you just want to see another
opinion on it. But pretty much you're going

to bring all the skills you learned in this
course together and create this nice website.

It's responsive, it's got all sorts of layout
features. And it also has animations, you

can see just like that. So that's some of
the actual website stuff we're going to be

doing in the course. But why don't we look
at some of the code that we've written. So

I created this file from the start, I didn't
have it at the start of this course. But at

the end, you can see that we've written now,
well over 100 lines of code here. And I although

it may look intimidating. Now, I do explain
every single part of it, so that at the end,

you can just read this straightaway and understand
what's going on in an instant. There's also

the styling for our solution video or for
the solution to the challenge here. So you

can see we've got a bunch of stuff here. And
like I said, it may look confusing, but once

we move on, this will make a lot more sense.
So that's pretty much it for the little achievements

video for this course, I hope you're a little
bit motivated and excited to go forward and

start learning about CSS is a pretty exciting
topic. And it can really advance your web

development if you don't already know it.
Alright, let's get straight into it.

Hi, welcome to the CSS zero to hero course,
in this course, you're going to completely

learn how to use CSS from the ground up, we're
going to cover every single concept or every

major concept in CSS, and really build up
our knowledge of it. So before we move on,

I just wanted to give you some motivation
on what you're going to be doing in this course.

So you can, you know, really get excited about
the course and start jump, you just jump straight

into learning. So first of all, let's look
at some of the stuff that we've done over

the course. Now we start with a base website.
And over time, we style this and change up

the website using every technique that we've
learned. So you can see that we've created

multiple grids, colors, we've changed this
completely and transformed the website in

every single way. We've also created things
like gradients. And we've also styled change

our custom fonts, colors, and backgrounds.
We cover all of this in depth throughout the

course. And we do it step by step so that
you don't rush through and forget anything.

At the end of the course, there's also a little
challenge here, where you try to bring all

your skills together and style a website from
scratch. Now there is a solution video, if

you need it, maybe you just want to see another
opinion on it. But pretty much you're going

to bring all the skills you learned in this
course together and create this nice website.

It's responsive, it's got all sorts of layout
features. And it also has animations, you

can see just like that. So that's some of
the actual website stuff we're going to be

doing in the course. But why don't we look
at some of the code that we've written. So

I created this file from the start, I didn't
have it at the start of this course. But at

the end, you can see that we've written now,
well over 100 lines of code here. And I although

it may look intimidating. Now, I do explain
every single part of it, so that at the end,

you can just read this straightaway and understand
what's going on in an instant. There's also

the styling for our solution video or for
the solution to the challenge here. So you

can see we've got a bunch of stuff here. And
like I said, it may look confusing, but once

we move on, this will make a lot more sense.
So that's pretty much it for the little achievements

video for this course, I hope you're a little
bit motivated and excited to go forward and

start learning about CSS is a pretty exciting
topic. And it can really advance your web

development if you don't already know it.
Alright, let's get straight into it.

So in this video, I'm going to be giving a
quick introduction to the syllabus of the

course. Now it is quite a long video. So if
you don't want to watch it, or if you don't

really want to know an in depth analysis on
what the course is going to be covering, then

you can go ahead and skip this video. All
I say is that please make sure that you read

the prerequisites lecture that came before
this. Now, there are some very important details

in there and some skills that you need to
know to move on with this course. And if you

don't know them, you're going to have a very
difficult time picking up some of the language.

Now there's only one real prerequisite, which
is HTML. But you can go ahead and read that.

And just make sure that you have all the skills
necessary. Alright, so let's get started.

And the first thing I want to talk about is
the section structure. So the section is just

a it's a bunch of lectures. So these are video
lectures. And they're made in an interactive

way. So you can see in this picture here,
I am coding along with a nice preview on the

side showing what what our progress looks
like. So at the end of each section is a 10,

a 10 question multiple choice quiz that covers
all of the skills learned in that section.

So it's really encouraged to go and just try
it out and see if you know everything. And

then that way you can diagnose yourself and
see maybe there's some skills that you're

fuzzy on or you need to revisit. And on top
of that, I really encourage everyone who is

following along in the course, to not just
watch and be a passive consumer, you know,

really go out and try and use your skills
because otherwise you're not going to learn

it. Otherwise, you're just gonna end up having
the information on your head. And especially

when it comes to development programming,
you know, experiences everything, you can't

just watch lectures and just magically be
able to do it. So I encourage you to go off

and follow the lectures and try and really
use the skills that you learn in your own

time and that will make sure that you have
the highest retention possible. So let's get

straight into it. The first section, which
is the section we're in right now is the introductory

section. So setting up the course and we also
install all the programs and software necessary

to set up our working environment. So you
can follow along it's not necessary but it

is highly recommended. Because if you're using
maybe Something else that you're not experienced

with, you may have a hard time getting used
to the program and things like that. So I

recommend you follow along and set up the
environment just like I do. So the second

question of sorry, the second section is the
introduction to CSS. Now, unlike the first

section, this is going to be looking at introducing
the actual CSS language, we're going to be

looking at some theory behind it, where it's
used and what kind of a difference it makes,

we're also going to be looking at creating
and linking our own CSS document to our page.

So the third section is going to be looking
at our first real part of CSS. So these are

the selectors and properties. Now, again,
you don't need to know any of these terms.

I'm just going over like a kind of spit ball
kind of effect here, just trying to just skim

over everything. So here we're going to learn
about a very important concept, which are

selectors and properties, and how they really
play into CSS, we're also going to be learning

about the different types of selectors and
where to use each one, depending on the situation.

So you're going to learn that as well. next
section is where we start using the real power

of CSS. So we're going to start using colors.
And we're going to be applying those colors

to our page. So we're going to be learning
about different color types, how kind of a

little bit of how colors are set up on the
computer. So things like RGB or other color

codes, and then we're going to use them and
apply them using CSS to backgrounds and text

and all sorts of other things. The next section
is going to be looking at mainly at text.

So we're going to be looking at trying to
change the field style and look of text. So

we're going to be changing the fonts the size,
we're also going to be changing the bolding,

there are so many different things that you
can do in the section. And we're going to

cover all of them then. So the next section
is where we will kind of take a turn from

looking at styling and looking now at layout.
So we're going to be learning some more fundamental

CSS concepts related to layout, we'll talk
about those when we get to it, then we're

going to be applying them to actually change
the style or the layout of our page. So we're

going to be moving items around, we're going
to resize them and do all sorts of things

with them once we get to that point. The next
section we're going to look at is called Flexbox.

Now I'm sure you've heard of this if you've
looked into any web development, but pretty

much it's an alternate way to mess around
with the layout in CSS, and it is quite new.

But it is a pretty commonly used concept today,
especially for Responsive layouts, making

websites that can work on all devices. So
it's a pretty important concept there. So

we're going to focus on the theory behind
Flexbox. First, talking about how it works,

how it's set up. And then we're also going
to be applying it to real life talking about,

you know, where it can be used some of the
benefits, and then actually using it in our

own projects by creating our own Flexbox and
messing around with it. So we're going to

do that as well. So the next section is pretty
similar to Section seven, it's going to be

looking at a another alternative to using
normal layout features. in CSS. It's called

grid. And there are a lot of similarities.
But we're also going to be talking about the

differences. So along with going over a comprehensive
overview of kind of how grid works, we're

also going to be going over some of the similarities
and differences kind of comparing it to Flexbox.

And then we're going to talk about, you know
which one you should use in each individual

situation. So the next section is probably
one of my favorites because it really puts

all of the older kind of websites from the
new sites and separates them the modern sites

from the old sites, and we're going to be
looking at animations and transitions. So

first, we're going to look at transitions
and how to use pseudo selectors. Again, don't

worry about our means to create these nice
smooth transitions. And then we're also going

to be learning how to manipulate them. So
kind of change how a transition looks, we're

also going to learn how to create a flight
and manipulate our own animation. So we create

these animations from scratch using CSS. And
then we can kind of change them and change

how they look based on what we want. So the
last section is a really interesting section,

which kind of summarizes everything and test
your skills. So it starts with a 30 question

final exam, which is a bunch of questions
from every single section or topic that we've

covered. And it is it is a final exam. So
there is like a passing grade and everything

like that. But again, if you fail, there's
no real consequences to it. It's just kind

of a diagnostic tool to test where you are
in your CSS knowledge. And after that, it's

followed by a really nice challenge, which
can help you know, really see where you're

at, not from a theoretical standpoint, but
from an actual practical standpoint. So this

challenge is going to be talked about later
and when to get to that point, but pretty

much you're going to Be styling a website
from scratch, you're going to be given a blank

HTML document or Well, it's not blank, it's
going to have content. But you're going to

be given an HTML document with no styling.
And you have to style it yourself based on

a list of

So in this video, I'm going to be giving a
quick introduction to the syllabus of the

course. Now it is quite a long video. So if
you don't want to watch it, or if you don't

really want to know an in depth analysis on
what the course is going to be covering, then

you can go ahead and skip this video. All
I say is that please make sure that you read

the prerequisites lecture that came before
this. Now, there are some very important details

in there and some skills that you need to
know to move on with this course. And if you

don't know them, you're going to have a very
difficult time picking up some of the language.

Now there's only one real prerequisite, which
is HTML. But you can go ahead and read that.

And just make sure that you have all the skills
necessary. Alright, so let's get started.

And the first thing I want to talk about is
the section structure. So the section is just

a it's a bunch of lectures. So these are video
lectures. And they're made in an interactive

way. So you can see in this picture here,
I am coding along with a nice preview on the

side showing what what our progress looks
like. So at the end of each section is a 10,

a 10 question multiple choice quiz that covers
all of the skills learned in that section.

So it's really encouraged to go and just try
it out and see if you know everything. And

then that way you can diagnose yourself and
see maybe there's some skills that you're

fuzzy on or you need to revisit. And on top
of that, I really encourage everyone who is

following along in the course, to not just
watch and be a passive consumer, you know,

really go out and try and use your skills
because otherwise you're not going to learn

it. Otherwise, you're just gonna end up having
the information on your head. And especially

when it comes to development programming,
you know, experiences everything, you can't

just watch lectures and just magically be
able to do it. So I encourage you to go off

and follow the lectures and try and really
use the skills that you learn in your own

time and that will make sure that you have
the highest retention possible. So let's get

straight into it. The first section, which
is the section we're in right now is the introductory

section. So setting up the course and we also
install all the programs and software necessary

to set up our working environment. So you
can follow along it's not necessary but it

is highly recommended. Because if you're using
maybe Something else that you're not experienced

with, you may have a hard time getting used
to the program and things like that. So I

recommend you follow along and set up the
environment just like I do. So the second

question of sorry, the second section is the
introduction to CSS. Now, unlike the first

section, this is going to be looking at introducing
the actual CSS language, we're going to be

looking at some theory behind it, where it's
used and what kind of a difference it makes,

we're also going to be looking at creating
and linking our own CSS document to our page.

So the third section is going to be looking
at our first real part of CSS. So these are

the selectors and properties. Now, again,
you don't need to know any of these terms.

I'm just going over like a kind of spit ball
kind of effect here, just trying to just skim

over everything. So here we're going to learn
about a very important concept, which are

selectors and properties, and how they really
play into CSS, we're also going to be learning

about the different types of selectors and
where to use each one, depending on the situation.

So you're going to learn that as well. next
section is where we start using the real power

of CSS. So we're going to start using colors.
And we're going to be applying those colors

to our page. So we're going to be learning
about different color types, how kind of a

little bit of how colors are set up on the
computer. So things like RGB or other color

codes, and then we're going to use them and
apply them using CSS to backgrounds and text

and all sorts of other things. The next section
is going to be looking at mainly at text.

So we're going to be looking at trying to
change the field style and look of text. So

we're going to be changing the fonts the size,
we're also going to be changing the bolding,

there are so many different things that you
can do in the section. And we're going to

cover all of them then. So the next section
is where we will kind of take a turn from

looking at styling and looking now at layout.
So we're going to be learning some more fundamental

CSS concepts related to layout, we'll talk
about those when we get to it, then we're

going to be applying them to actually change
the style or the layout of our page. So we're

going to be moving items around, we're going
to resize them and do all sorts of things

with them once we get to that point. The next
section we're going to look at is called Flexbox.

Now I'm sure you've heard of this if you've
looked into any web development, but pretty

much it's an alternate way to mess around
with the layout in CSS, and it is quite new.

But it is a pretty commonly used concept today,
especially for Responsive layouts, making

websites that can work on all devices. So
it's a pretty important concept there. So

we're going to focus on the theory behind
Flexbox. First, talking about how it works,

how it's set up. And then we're also going
to be applying it to real life talking about,

you know, where it can be used some of the
benefits, and then actually using it in our

own projects by creating our own Flexbox and
messing around with it. So we're going to

do that as well. So the next section is pretty
similar to Section seven, it's going to be

looking at a another alternative to using
normal layout features. in CSS. It's called

grid. And there are a lot of similarities.
But we're also going to be talking about the

differences. So along with going over a comprehensive
overview of kind of how grid works, we're

also going to be going over some of the similarities
and differences kind of comparing it to Flexbox.

And then we're going to talk about, you know
which one you should use in each individual

situation. So the next section is probably
one of my favorites because it really puts

all of the older kind of websites from the
new sites and separates them the modern sites

from the old sites, and we're going to be
looking at animations and transitions. So

first, we're going to look at transitions
and how to use pseudo selectors. Again, don't

worry about our means to create these nice
smooth transitions. And then we're also going

to be learning how to manipulate them. So
kind of change how a transition looks, we're

also going to learn how to create a flight
and manipulate our own animation. So we create

these animations from scratch using CSS. And
then we can kind of change them and change

how they look based on what we want. So the
last section is a really interesting section,

which kind of summarizes everything and test
your skills. So it starts with a 30 question

final exam, which is a bunch of questions
from every single section or topic that we've

covered. And it is it is a final exam. So
there is like a passing grade and everything

like that. But again, if you fail, there's
no real consequences to it. It's just kind

of a diagnostic tool to test where you are
in your CSS knowledge. And after that, it's

followed by a really nice challenge, which
can help you know, really see where you're

at, not from a theoretical standpoint, but
from an actual practical standpoint. So this

challenge is going to be talked about later
and when to get to that point, but pretty

much you're going to Be styling a website
from scratch, you're going to be given a blank

HTML document or Well, it's not blank, it's
going to have content. But you're going to

be given an HTML document with no styling.
And you have to style it yourself based on

a list of

based on a list of tasks given in the document.
Now, don't worry too much about that. But

pretty much there is a solution video that
I created to style it based on how I want

the website to look. But again, it's not kind
of like an iron fist thing, you can go and

be creative with it once you get to that point.
Because once you learn all that CSS, what's

the point, if you just have to conform to
something, you can really unleash your creative

freedom through CSS, once you learn all the
skills necessary. So again, it will be talked

about in a lot more detail once we get to
that point. But for now, that's just a quick

overview of what it's going to look like.
From here. Alright, so there's a quick overview

of what the course is going to go over some
of the topics. Now, again, this isn't a, you

know, kind of a strict video on, you know,
this is what we're going to learn. And if

you don't learn it, that's it. It's just kind
of showing you what you're going to be getting

out of the course, so that you can really
get a view into it before you start working

on the course. Alright, let's get started.

based on a list of tasks given in the document.
Now, don't worry too much about that. But

pretty much there is a solution video that
I created to style it based on how I want

the website to look. But again, it's not kind
of like an iron fist thing, you can go and

be creative with it once you get to that point.
Because once you learn all that CSS, what's

the point, if you just have to conform to
something, you can really unleash your creative

freedom through CSS, once you learn all the
skills necessary. So again, it will be talked

about in a lot more detail once we get to
that point. But for now, that's just a quick

overview of what it's going to look like.
From here. Alright, so there's a quick overview

of what the course is going to go over some
of the topics. Now, again, this isn't a, you

know, kind of a strict video on, you know,
this is what we're going to learn. And if

you don't learn it, that's it. It's just kind
of showing you what you're going to be getting

out of the course, so that you can really
get a view into it before you start working

on the course. Alright, let's get started.

So in this video, I'm just going to be talking
about some of the software that we're going

to be using in this course. Now, there's not
a lot of actual software, since most of the

stuff we're going to be doing is built straight
into CSS and HTML. But we do need a text editor.

And if you want to go ahead and use Notepad,
go ahead. But I wouldn't really recommend

that because it is quite hard to use when
you're developing things. So I recommend this

text editor right here. It's called Sublime
Text, and gives you all of the color coding

and formatting that you need, it makes things
really easy for you. So you can go ahead to

the website. Here, it's attached to the lecture
resources, if you go ahead and click in the

top left corner, in the bullet list icon,
you can go ahead and find the lecture contents

and downloadable resources. So go ahead, check
out this website. And depending whether you're

on Windows or Mac or Linux, you go ahead and
download this. And then it should be pretty

much it. So this is what its gonna look like
when you're inside, I was just typing a little

bit of stuff here making things making sure
things were working. So there you go, this

is what it's gonna look like, once you download
it, we'll go through and actually set everything

up as we go through this course. Alright,
let's move on. So before we move on, I just

want to talk about finding project files.
Now, I do do a lot of code throughout each

lecture. And if you want to keep track of
those, or maybe have some sort of working

reference of what's going on, then I highly
recommend that you go and check out the GitHub

repository that I created for all the content
of this course. Now, if you don't know what

Git is, or how to use it, don't worry, I'm
going to show an alternative to that in just

a second, using this platform. But pretty
much this is going to contain all the history

of every single lecture. Now, if you know
how to use Git, you can download this and

check out each state. But if you don't know,
then all you have to do is head over to the

main page. And right here under commit, it's
pretty much going to show every single lecture

changes. So for example, I have seven to eight
item alignment, so I can click on it. And

when I click on this, it shows all of the
changes I have made to both files or any files

that I've changed. So for example, you can
see here, it has one changed file. And you

can see I've added a bunch of stuff here.
So you can kind of review what I've done over

the lecture. So you can just go ahead and
check it out. I've attached this to the lecture

resources, if you want to go and look at it.
Now, this does contain all of the history,

all of the things that I've done over the
course. So you can go review, maybe look at

the code. And you can also download it, you
can download the actual file or the the repository

from here. So you can just download that very
easily. And other than that, you can find

all of the project files on here, if you ever
need them. So if you want to, you know, maybe

bookmark this or keep this somewhere or Notepad,
just to make sure that you have a reference

of it throughout the course in case you ever
want to go and review the contents or changes

of some lecture. You will have it there. Alright,
let's move on.

So in this video, I'm just going to be talking
about some of the software that we're going

to be using in this course. Now, there's not
a lot of actual software, since most of the

stuff we're going to be doing is built straight
into CSS and HTML. But we do need a text editor.

And if you want to go ahead and use Notepad,
go ahead. But I wouldn't really recommend

that because it is quite hard to use when
you're developing things. So I recommend this

text editor right here. It's called Sublime
Text, and gives you all of the color coding

and formatting that you need, it makes things
really easy for you. So you can go ahead to

the website. Here, it's attached to the lecture
resources, if you go ahead and click in the

top left corner, in the bullet list icon,
you can go ahead and find the lecture contents

and downloadable resources. So go ahead, check
out this website. And depending whether you're

on Windows or Mac or Linux, you go ahead and
download this. And then it should be pretty

much it. So this is what its gonna look like
when you're inside, I was just typing a little

bit of stuff here making things making sure
things were working. So there you go, this

is what it's gonna look like, once you download
it, we'll go through and actually set everything

up as we go through this course. Alright,
let's move on. So before we move on, I just

want to talk about finding project files.
Now, I do do a lot of code throughout each

lecture. And if you want to keep track of
those, or maybe have some sort of working

reference of what's going on, then I highly
recommend that you go and check out the GitHub

repository that I created for all the content
of this course. Now, if you don't know what

Git is, or how to use it, don't worry, I'm
going to show an alternative to that in just

a second, using this platform. But pretty
much this is going to contain all the history

of every single lecture. Now, if you know
how to use Git, you can download this and

check out each state. But if you don't know,
then all you have to do is head over to the

main page. And right here under commit, it's
pretty much going to show every single lecture

changes. So for example, I have seven to eight
item alignment, so I can click on it. And

when I click on this, it shows all of the
changes I have made to both files or any files

that I've changed. So for example, you can
see here, it has one changed file. And you

can see I've added a bunch of stuff here.
So you can kind of review what I've done over

the lecture. So you can just go ahead and
check it out. I've attached this to the lecture

resources, if you want to go and look at it.
Now, this does contain all of the history,

all of the things that I've done over the
course. So you can go review, maybe look at

the code. And you can also download it, you
can download the actual file or the the repository

from here. So you can just download that very
easily. And other than that, you can find

all of the project files on here, if you ever
need them. So if you want to, you know, maybe

bookmark this or keep this somewhere or Notepad,
just to make sure that you have a reference

of it throughout the course in case you ever
want to go and review the contents or changes

of some lecture. You will have it there. Alright,
let's move on.

So today, I'm going to be giving a quick introduction
to CSS, we're going to be going through what

it actually is, why it's used and what actually
does CSS do. So before we get started, if

you're just starting out this course and you
don't really know the prerequisites, make

sure that you do have a little bit of HTML
experience. It's not recommended. Sorry, it's

not needed. But it's highly recommended because
we're going to be using a lot of HTML in this

course. And although we're not going to be
writing any directly, it would be really helpful

to know some so I do offer a free HTML course.
It's really quick one and a half hours, you

should be go good to go and up and running
in just one or two days. So if you don't know

any HTML, you can go and check that out. And
if you do know, HTML, continue watching along.

So first of all, let's get started, what actually
is CSS. So if you don't know what it stands

for already, it's called Cascading Style Sheets.
So from that name, you can pretty much assume

that this is used to style websites. So unlike
HTML, which is used to create structure and

actual website content, this is mainly used
to give it that visual flair to make the websites

look good. So CSS is pretty much what makes
a website standout from websites from the

early days from the early 2000s, things like
that. So that's what really makes a website

stand out is the CSS or the styling. So this
pretty much goes hand in hand with HTML. As

it said, Here, they work almost consistently
together. And they're always used all like

all the time together. So let's go ahead and
check out some pages that look with CSS and

without. So you can see here that this is
the page with CSS. So you can change all of

the layout options. You can make fonts, font
changes, text manipulation, all sorts of things,

which we're all going to be doing in this
course are learning to do. And this is the

website without HTML, sorry, without CSS looks
pretty standard, right? Obviously, this looks

just like a normal website doesn't have any
HTML, apart from some font changes. But you

can see that the difference that something
like this mix, CSS will completely change

the way a website looks if it's used correctly.
So the next line is just a little bit of information

about CSS, we're going to be going way more
in depth into all of these points later. So

a CSS file is saved in the dot CSS format,
we're going to be doing that in the next few

videos. There's some information about selectors
and things like that, like I said, you can

just read through this, I'm not going to go
through it, because we're going to talk about

it way more in detail in the next few sections.
But for now, this is just a little bit of

general information about CSS. Alright, so
now that you know what CSS is, why don't we

go ahead and get started working with CSS.

So today, I'm going to be giving a quick introduction
to CSS, we're going to be going through what

it actually is, why it's used and what actually
does CSS do. So before we get started, if

you're just starting out this course and you
don't really know the prerequisites, make

sure that you do have a little bit of HTML
experience. It's not recommended. Sorry, it's

not needed. But it's highly recommended because
we're going to be using a lot of HTML in this

course. And although we're not going to be
writing any directly, it would be really helpful

to know some so I do offer a free HTML course.
It's really quick one and a half hours, you

should be go good to go and up and running
in just one or two days. So if you don't know

any HTML, you can go and check that out. And
if you do know, HTML, continue watching along.

So first of all, let's get started, what actually
is CSS. So if you don't know what it stands

for already, it's called Cascading Style Sheets.
So from that name, you can pretty much assume

that this is used to style websites. So unlike
HTML, which is used to create structure and

actual website content, this is mainly used
to give it that visual flair to make the websites

look good. So CSS is pretty much what makes
a website standout from websites from the

early days from the early 2000s, things like
that. So that's what really makes a website

stand out is the CSS or the styling. So this
pretty much goes hand in hand with HTML. As

it said, Here, they work almost consistently
together. And they're always used all like

all the time together. So let's go ahead and
check out some pages that look with CSS and

without. So you can see here that this is
the page with CSS. So you can change all of

the layout options. You can make fonts, font
changes, text manipulation, all sorts of things,

which we're all going to be doing in this
course are learning to do. And this is the

website without HTML, sorry, without CSS looks
pretty standard, right? Obviously, this looks

just like a normal website doesn't have any
HTML, apart from some font changes. But you

can see that the difference that something
like this mix, CSS will completely change

the way a website looks if it's used correctly.
So the next line is just a little bit of information

about CSS, we're going to be going way more
in depth into all of these points later. So

a CSS file is saved in the dot CSS format,
we're going to be doing that in the next few

videos. There's some information about selectors
and things like that, like I said, you can

just read through this, I'm not going to go
through it, because we're going to talk about

it way more in detail in the next few sections.
But for now, this is just a little bit of

general information about CSS. Alright, so
now that you know what CSS is, why don't we

go ahead and get started working with CSS.

So in this video, we're going to be creating
and linking a CSS stylesheet. So we're not

actually going to be doing with anything with
it yet, we're just going to be creating it

and linking it so that we can get started
and actually learn some of the properties

in CSS. Alright, let's get started. So the
first thing I want to do is go ahead and create

my CSS file. So what I'm going to do is go
into my Sublime Text or my text editor. Now,

if you're not using this, and you know how
to use the other text editor that maybe you're

using some something else like Visual Studio,
go ahead and use that if you know the shortcuts.

But for now, I am going to use Sublime Text
on Sublime Text. To create a new file, you

go Ctrl or Command n depending on what operating
system you're on. Once you're there, you can

use Ctrl S to go ahead and save the file.
And right now I'm here. And what I want to

do is create a new folder, a new directory
in my course content folder. Again, you can

set this up however you like. But the way
I like doing it is creating a folder for every

type of file. So that for example, when the
website gets very big, when you have multiple

pages, multiple style sheets, everything stays
organized. So I'm going to go ahead and create

that directory. Go ahead into my CSS folder
here. And I'm going to name this style dot

CSS. So dot CSS, D is the file format used
to save CSS documents, and style, just kind

of the standard name you use when you're saving
CSS documents. So once I go ahead, and I'm

going to go ahead and save that. Now I have
my stylesheet created. But we don't actually

have anything yet, because right now our HTML
page is blank and our CSS file is blank. So

this is where knowing a little bit of HTML
comes in handy. First of all, I'm going to

go ahead and create my boilerplate. I just
typed in HTML and hit tab. Again, I talked

all about this in my other courses talking
about HTML. But there we go, we're going to

go ahead and do that. I'm just going to say
my website here. And once that's done, I'm

going to go ahead and link it. So how do we
actually do this? Well, what you want to do

pretty much is just go into here and into
your head into the head portion of your website,

you're going to go ahead and create a link
tag. So if you just take the link and hit

tab in Sublime Text, it's going to create
the tag for you. So let's go ahead and break

this down here. REL stylesheet is pretty much
saying that we're linking to a stylesheet.

But then type says it's a CSS stylesheet.
So this is just kind of a more specific identifier.

And then we have the href. So in the href.
This is where we're going to put the URL to

our stylesheet. So if you don't already know
how to write file URLs, pretty much what we're

going to do is first up move back in directory,
because right now we're inside here and there's

no CSS. We want to go back to the top level.
So Going to go dot dot slash. Now remember,

we're up here, I want to go into CSS. So I
hit CSS slash, and then style dot CSS, which

has our endpoints or final destination. So
this is pretty much your basic link tag, this

is how it works. You have all of your stuff
here and you created it. And from there, you

can go ahead and pretty much do whatever you
want. So right here, I have my stylesheet

linked and everything's working. But we don't
actually know if it works yet. So in the next

video, we're actually going to be going through
and testing our stylesheet, I'm going to show

you a few ways that you can do that. Alright,
let's move on. So today, I'm going to be showing

you how you can test your CSS stylesheet.
So we've already created the file and linked

it. But now we're actually going to go ahead
and test it because we don't know if this

is working or not. So obviously, we don't
know anything about CSS yet. We don't know

about selectors or properties or how to do
anything with them. But I just want you to

keep this in mind so that when you know how
to do them, it becomes very easy to test these

style sheets. So for a style sheet to work,
we need all of the properties that are in

this file to appear on the page. So the easiest
way we can test it is but just by writing

a random, obvious property, that's going to
change the way the website looks. If it's

not working, then we know that something's
wrong with our link. So I'm going to go ahead

and just create a property here. Now, you
don't know how to do any of this. So don't

worry about it. We're going to learn how to
do all of this later. But what you want to

do pretty much is create a random property,
you can go ahead and copy this on for now,

I'm going to go ahead and refresh the page.
And you can see that this is bright red. Now

if I go ahead and make the link wrong. So
if I, for example, remove a letter, you can

see that it's still white, which means that
this isn't working. So this is pretty much

the easiest way that you can test your stylesheet.
If it's working, it's just writing some random,

obvious properties don't make them completely
non visible, you want to make sure that you

can actually see the difference on the page.
And then you want to go ahead and refresh

it. And if it's working, you will know that
this stylesheet is linked properly. Alright,

let's move on.

So in this video, we're going to be creating
and linking a CSS stylesheet. So we're not

actually going to be doing with anything with
it yet, we're just going to be creating it

and linking it so that we can get started
and actually learn some of the properties

in CSS. Alright, let's get started. So the
first thing I want to do is go ahead and create

my CSS file. So what I'm going to do is go
into my Sublime Text or my text editor. Now,

if you're not using this, and you know how
to use the other text editor that maybe you're

using some something else like Visual Studio,
go ahead and use that if you know the shortcuts.

But for now, I am going to use Sublime Text
on Sublime Text. To create a new file, you

go Ctrl or Command n depending on what operating
system you're on. Once you're there, you can

use Ctrl S to go ahead and save the file.
And right now I'm here. And what I want to

do is create a new folder, a new directory
in my course content folder. Again, you can

set this up however you like. But the way
I like doing it is creating a folder for every

type of file. So that for example, when the
website gets very big, when you have multiple

pages, multiple style sheets, everything stays
organized. So I'm going to go ahead and create

that directory. Go ahead into my CSS folder
here. And I'm going to name this style dot

CSS. So dot CSS, D is the file format used
to save CSS documents, and style, just kind

of the standard name you use when you're saving
CSS documents. So once I go ahead, and I'm

going to go ahead and save that. Now I have
my stylesheet created. But we don't actually

have anything yet, because right now our HTML
page is blank and our CSS file is blank. So

this is where knowing a little bit of HTML
comes in handy. First of all, I'm going to

go ahead and create my boilerplate. I just
typed in HTML and hit tab. Again, I talked

all about this in my other courses talking
about HTML. But there we go, we're going to

go ahead and do that. I'm just going to say
my website here. And once that's done, I'm

going to go ahead and link it. So how do we
actually do this? Well, what you want to do

pretty much is just go into here and into
your head into the head portion of your website,

you're going to go ahead and create a link
tag. So if you just take the link and hit

tab in Sublime Text, it's going to create
the tag for you. So let's go ahead and break

this down here. REL stylesheet is pretty much
saying that we're linking to a stylesheet.

But then type says it's a CSS stylesheet.
So this is just kind of a more specific identifier.

And then we have the href. So in the href.
This is where we're going to put the URL to

our stylesheet. So if you don't already know
how to write file URLs, pretty much what we're

going to do is first up move back in directory,
because right now we're inside here and there's

no CSS. We want to go back to the top level.
So Going to go dot dot slash. Now remember,

we're up here, I want to go into CSS. So I
hit CSS slash, and then style dot CSS, which

has our endpoints or final destination. So
this is pretty much your basic link tag, this

is how it works. You have all of your stuff
here and you created it. And from there, you

can go ahead and pretty much do whatever you
want. So right here, I have my stylesheet

linked and everything's working. But we don't
actually know if it works yet. So in the next

video, we're actually going to be going through
and testing our stylesheet, I'm going to show

you a few ways that you can do that. Alright,
let's move on. So today, I'm going to be showing

you how you can test your CSS stylesheet.
So we've already created the file and linked

it. But now we're actually going to go ahead
and test it because we don't know if this

is working or not. So obviously, we don't
know anything about CSS yet. We don't know

about selectors or properties or how to do
anything with them. But I just want you to

keep this in mind so that when you know how
to do them, it becomes very easy to test these

style sheets. So for a style sheet to work,
we need all of the properties that are in

this file to appear on the page. So the easiest
way we can test it is but just by writing

a random, obvious property, that's going to
change the way the website looks. If it's

not working, then we know that something's
wrong with our link. So I'm going to go ahead

and just create a property here. Now, you
don't know how to do any of this. So don't

worry about it. We're going to learn how to
do all of this later. But what you want to

do pretty much is create a random property,
you can go ahead and copy this on for now,

I'm going to go ahead and refresh the page.
And you can see that this is bright red. Now

if I go ahead and make the link wrong. So
if I, for example, remove a letter, you can

see that it's still white, which means that
this isn't working. So this is pretty much

the easiest way that you can test your stylesheet.
If it's working, it's just writing some random,

obvious properties don't make them completely
non visible, you want to make sure that you

can actually see the difference on the page.
And then you want to go ahead and refresh

it. And if it's working, you will know that
this stylesheet is linked properly. Alright,

let's move on.

So in this video, I'm going to be talking
about CSS selectors. I'm also going to be

going through what they do and what types
of selectors there are. So you're probably

wondering what a selector actually is, because
we haven't actually talked about this at all.

And it's pretty much one half of everything
that you do in CSS. So as you know, you have

two different documents, you have your HTML
document, which is kind of your structure

gives all of the different text and content
of the page. And then you have your CSS document,

which is going to be for all the styling.
Now because the two documents are kind of

disconnected, you can't just go and type random
things and have them appear where you want

them, you need a way to actually assign these
styles and properties to elements on the page.

So we do this with something called selectors.
So selectors pretty much a way of grabbing

an element from an HTML document, and then
styling it. So it's kind of like a target

in a way. There are many different types of
selectors. And they all work in different

ways and are used for different purposes.
So I'm going to be going through three with

you in this video. So the first one is the
element selector. The element selector is

the most basic of all of them, pretty much,
what you do is you find the name of the target

that you want to select or target. So in this
case, it would be the paragraph tag or the

p tag. And then you have the selector here.
So pretty much how a selector works is you

just type out the selector. And then you have
curly braces, and then you have your properties,

we'll go that will go with this in much more
depth towards the end of this section. So

you go through and you select, you type out
your tag name. And pretty much what that's

going to do is select all of the elements
on the document with that tag name. So there

we go. That is the first one. The next is
the class selector. So the class selector

is very similar to the element selector, except
it goes by class name. So you can see here

that we have some class attributes here, we
assign the class, don't worry, we'll go through

with this in the next video. But you can see
we assigned the class to these values. And

pretty much all we have to do to references
is type dot, which is the class prefix for

CSS, and then the name of the class and then
again, the properties. So you can actually

use this cloud. The reason that we use classes
over things like element selectors, is because

you can apply this class to specific items,
and it's only going to style those specific

items. So for example, maybe if you had a
subtitle, and you only wanted to style that

subtitle, you would go through and actually
apply that class to your subtitle, your element,

whether it's a paragraph or a header. And
from there, you're going to go through and

add it. So there we go. The next What I want
to talk about is the id selector. So these

two, the class and id selector are pretty
much identical, you have your attribute where

you assign the class or ID. But the only difference
is the prefix here is a hash symbol or an

octave Thorpe or hash tag. So then you type
up the name of the ID, and it puts it here.

Now, I am going to go through and actually
talk more about why when we should use classes

and IDs. And I'm going to talk about some
of the differences between them. And although

they look very similar, we actually have different
very different purposes for them, based on

how you use them in your HTML document. So
those are some of the basics of selectors,

like I said, we're gonna go through and pretty
much use this all the time during our course.

So we're gonna go through use them and add
the properties. So it's pretty good that you

get familiar with these now, so that when
we move on, this becomes kind of like second

nature.

So in this video, I'm going to be talking
about CSS selectors. I'm also going to be

going through what they do and what types
of selectors there are. So you're probably

wondering what a selector actually is, because
we haven't actually talked about this at all.

And it's pretty much one half of everything
that you do in CSS. So as you know, you have

two different documents, you have your HTML
document, which is kind of your structure

gives all of the different text and content
of the page. And then you have your CSS document,

which is going to be for all the styling.
Now because the two documents are kind of

disconnected, you can't just go and type random
things and have them appear where you want

them, you need a way to actually assign these
styles and properties to elements on the page.

So we do this with something called selectors.
So selectors pretty much a way of grabbing

an element from an HTML document, and then
styling it. So it's kind of like a target

in a way. There are many different types of
selectors. And they all work in different

ways and are used for different purposes.
So I'm going to be going through three with

you in this video. So the first one is the
element selector. The element selector is

the most basic of all of them, pretty much,
what you do is you find the name of the target

that you want to select or target. So in this
case, it would be the paragraph tag or the

p tag. And then you have the selector here.
So pretty much how a selector works is you

just type out the selector. And then you have
curly braces, and then you have your properties,

we'll go that will go with this in much more
depth towards the end of this section. So

you go through and you select, you type out
your tag name. And pretty much what that's

going to do is select all of the elements
on the document with that tag name. So there

we go. That is the first one. The next is
the class selector. So the class selector

is very similar to the element selector, except
it goes by class name. So you can see here

that we have some class attributes here, we
assign the class, don't worry, we'll go through

with this in the next video. But you can see
we assigned the class to these values. And

pretty much all we have to do to references
is type dot, which is the class prefix for

CSS, and then the name of the class and then
again, the properties. So you can actually

use this cloud. The reason that we use classes
over things like element selectors, is because

you can apply this class to specific items,
and it's only going to style those specific

items. So for example, maybe if you had a
subtitle, and you only wanted to style that

subtitle, you would go through and actually
apply that class to your subtitle, your element,

whether it's a paragraph or a header. And
from there, you're going to go through and

add it. So there we go. The next What I want
to talk about is the id selector. So these

two, the class and id selector are pretty
much identical, you have your attribute where

you assign the class or ID. But the only difference
is the prefix here is a hash symbol or an

octave Thorpe or hash tag. So then you type
up the name of the ID, and it puts it here.

Now, I am going to go through and actually
talk more about why when we should use classes

and IDs. And I'm going to talk about some
of the differences between them. And although

they look very similar, we actually have different
very different purposes for them, based on

how you use them in your HTML document. So
those are some of the basics of selectors,

like I said, we're gonna go through and pretty
much use this all the time during our course.

So we're gonna go through use them and add
the properties. So it's pretty good that you

get familiar with these now, so that when
we move on, this becomes kind of like second

nature.

So in this video, I am going to be teaching
you how to how to add classes in IDs to our

document here and actually start using some
of these selectors. Now, I'm not going to

teach you any of the properties yet, because
we're going to cover that in a little bit

later in this section and in the next few
sections. But I'm just going to be teaching

you how to get familiar with classes and IDs,
because they are by far the most commonly

used selectors in CSS, I mean, sometimes very
uncommonly, you'd see some elements, selectors,

and other types of selectors, which we're
going to go over in the next few videos. But

the two most common that you're going to see
are our classes and IDs. So let's go through

and get started. Now I have a bunch of HTML
content here, we're actually going to be using

this and adding on to it for the rest of the
course, we're going to be styling this website

fully. But let's actually go through and start
adding these classes and IDs. So the first

thing you need to note, before we move on,
is that classes and IDs are different, you

can't just use them interchangeably. And I'm
going to explain why in the next video. But

for now, let's just pretend that they are
the same. And we can use them interchangeably

because they have almost the same methods
of application. So let's go ahead now the

first thing you want to do is identify the
element that you want to target. So first

of all, let's just say I wanted to maybe make
the color of this red. Okay, so the color

of this title. Now that we know we've targeted
it, we want to actually go through and edit

it. So first thing, how do you think we would
go through and do this now if you're thinking

going through and adding an element selector
or maybe adding some inline styles, if you

know what that is, then you are right, partially,
but the only problem is that if there are

any other h ones on this page, then it will
style all of them as well. And because we

only want to style this title, that wouldn't
be really effective. So the best way to do

this would be to use a class or an ID, I'm
going to go ahead and use a class. So the

way the way you would do this is go through
and type in class as your attribute. And you

would again, put this into the opening tag
of whatever target element you want to style.

And in here, you're putting, you're gonna
put your class name. Now, if this isn't where

you put your CSS prefix, this isn't where
you put the dots. As I explained in the last

video, here, you're just going to type the
name of the class. So I'm going to go through

and type a title, just like that. And you
can name this whatever you want. But I'd recommend

keeping it short and sweet. You don't want
it to get too long, because then it's going

to be really hard to work with. So once you've
applied that, and we go ahead and refresh

the page, you can see that nothing's actually
there, it hasn't started working yet. That's

because we haven't applied any styles. So
when we go over here, we need to actually

select our element. So I'm going to go ahead
and add the prefix for a class, which is dot,

and then the name of the class, which is title.
Then I'm going to open up these brackets and

get started. So what I want to do here is
now apply on my properties. I'm going to be

explaining you to you how to do all of this
in the next in future videos. of a for now,

all you need to know is that the first thing
you need to do is select an element using

some method. And then you're going to add
the properties. So I'm going to go ahead and

refresh the page. And you can see it works
just like that. Now to prove to you that this

works, I'm actually going to go through and
style just this about me right here, blue.

So you can see we have more than one h2 on
the page, but there's only one h1. But let's

say we wanted to only style this the about
me and we didn't want to style every single

h2, what I would do is go ahead and add a
class of subtitle to our target element. And

then here I would select it

So in this video, I am going to be teaching
you how to how to add classes in IDs to our

document here and actually start using some
of these selectors. Now, I'm not going to

teach you any of the properties yet, because
we're going to cover that in a little bit

later in this section and in the next few
sections. But I'm just going to be teaching

you how to get familiar with classes and IDs,
because they are by far the most commonly

used selectors in CSS, I mean, sometimes very
uncommonly, you'd see some elements, selectors,

and other types of selectors, which we're
going to go over in the next few videos. But

the two most common that you're going to see
are our classes and IDs. So let's go through

and get started. Now I have a bunch of HTML
content here, we're actually going to be using

this and adding on to it for the rest of the
course, we're going to be styling this website

fully. But let's actually go through and start
adding these classes and IDs. So the first

thing you need to note, before we move on,
is that classes and IDs are different, you

can't just use them interchangeably. And I'm
going to explain why in the next video. But

for now, let's just pretend that they are
the same. And we can use them interchangeably

because they have almost the same methods
of application. So let's go ahead now the

first thing you want to do is identify the
element that you want to target. So first

of all, let's just say I wanted to maybe make
the color of this red. Okay, so the color

of this title. Now that we know we've targeted
it, we want to actually go through and edit

it. So first thing, how do you think we would
go through and do this now if you're thinking

going through and adding an element selector
or maybe adding some inline styles, if you

know what that is, then you are right, partially,
but the only problem is that if there are

any other h ones on this page, then it will
style all of them as well. And because we

only want to style this title, that wouldn't
be really effective. So the best way to do

this would be to use a class or an ID, I'm
going to go ahead and use a class. So the

way the way you would do this is go through
and type in class as your attribute. And you

would again, put this into the opening tag
of whatever target element you want to style.

And in here, you're putting, you're gonna
put your class name. Now, if this isn't where

you put your CSS prefix, this isn't where
you put the dots. As I explained in the last

video, here, you're just going to type the
name of the class. So I'm going to go through

and type a title, just like that. And you
can name this whatever you want. But I'd recommend

keeping it short and sweet. You don't want
it to get too long, because then it's going

to be really hard to work with. So once you've
applied that, and we go ahead and refresh

the page, you can see that nothing's actually
there, it hasn't started working yet. That's

because we haven't applied any styles. So
when we go over here, we need to actually

select our element. So I'm going to go ahead
and add the prefix for a class, which is dot,

and then the name of the class, which is title.
Then I'm going to open up these brackets and

get started. So what I want to do here is
now apply on my properties. I'm going to be

explaining you to you how to do all of this
in the next in future videos. of a for now,

all you need to know is that the first thing
you need to do is select an element using

some method. And then you're going to add
the properties. So I'm going to go ahead and

refresh the page. And you can see it works
just like that. Now to prove to you that this

works, I'm actually going to go through and
style just this about me right here, blue.

So you can see we have more than one h2 on
the page, but there's only one h1. But let's

say we wanted to only style this the about
me and we didn't want to style every single

h2, what I would do is go ahead and add a
class of subtitle to our target element. And

then here I would select it

just like that and give it its color. So you
can go ahead and try this if you want. Don't

try and do anything crazy. If you know what
Go ahead, but for now, let's just go ahead

and stick with that. And there you go. You
can see we've styled that blue and it hasn't

changed. Anything else? So that's working
perfectly seems to be going fine. And we're

selecting everything. But what if we wanted
to use IDs. So let's just say that this right

here, this contact us, we wanted to use an
ID for it. Now, for now, we don't actually

know why we want to use an ID. But let's just
pretend that we do know why. So what I would

do is go ahead and use the ID attribute. So
I'm going to go ahead and add that. And I'm

going to say contact dash us. Now, usually,
in CSS classes or IDs, you would use these

dashes right here, instead of dots or uppercase,
or any other naming convention, this is just

kind of the standard way to do it. Now we
don't have to style it, I can't just go ahead

and do this, this wouldn't work. The reason
being the prefix here is a.so. css would interpret

this as a class and not an ID, instead, we're
going to have to use our author Thor or hash,

then why don't we go ahead and color this
one, green. Okay, let's go ahead and refresh

the page and check this out. And you can see
that it has this kind of olive green color,

so it's working great. So there we go, you
can see that we've worked with some of these

selectors and applied some of our IDs. Now,
you can go ahead onto the GitHub repository,

pull it, download it, do whatever you want.
If you don't know how to use Git, I do have

a free course on that as well. But it's very
easy. You can go back to any state and time,

check it out and play, play around with these
trying and replicate this and add your own

classes and IDs and try and you know, figure
out how things work here. So yeah, that's

pretty much the basics of adding classes and
IDs. In the future, we're going to use some

more complicated selectors, which don't actually
involve having to directly reference some

of these. So those are going to get pretty
complicated, but we're going to build up to

that point. So let's move on. So in this video,
I'm going to be talking about a very important

concept in CSS. So this is a pretty important
concept, because it's pretty much going to

change the way that you use selectors. Right
now, we're just assuming that all of these

selectors kind of work in the same in a similar
way. We don't actually know why. They're why

they exist. I mean, why is there a class and
an id selector when they both do the same

thing. So that's what I'm going to be explaining
in this video. And it all comes down to one

concept called specificity. So specificity
is pretty much talking about the overriding

or rewriting of properties in CSS. And it's
pretty much this concept that different selectors

are more powerful than others in a sense.
So for example, if you had two selectors,

on one element, one of them said the color
was blue, and one of them said the color was

green, the more powerful there the more specific
selector would end up overriding the other

ones and applying that property to the element.
So there's this really helpful article here

from w three schools. If you need some more
help on this, or you don't really understand

it, you can go ahead and read this. There's
a lot of numbers involved like this. But you

know, you can go ahead and read this, but
I'm just going to explain it in Word terms,

because these numbers tend to get really confusing.
And they end up meaning the same thing at

the end of the day. So let's go ahead and
get started. Now, I think it's really helpful

if we start from the ground up. So I've removed
all of the styling that we applied in the

last video. So first of all, I'm going to
go ahead and create an element selector. So

on all h twos, I want the color to be blue,
or actually I'm going to make it red. So there

we go. Now we know that every single h2 is
red. Okay? Well, let's just say for our about

me right here, I'm going to add a class, okay.
And I'm going to call this about me, and I'm

going to add it to my h2. Now in my in my
styles, here, we're going to use the class

selector and say the color is blue. So this
is where we have a confliction. You can see

that one selector says the color is red, but
one selector says the color is blue. So what

are we supposed to do about this? Which one
do you think is going to prevail, I mean,

you can just have both red and blue at the
same time, you can see that blue is actually

more specific. So you can see that elements
are or actually selectors have different powers.

And the more powerful they are, the more specific
they are. The higher they are, the higher

they're going to be on the scale and the higher
the chance of having or applying the right

just like that and give it its color. So you
can go ahead and try this if you want. Don't

try and do anything crazy. If you know what
Go ahead, but for now, let's just go ahead

and stick with that. And there you go. You
can see we've styled that blue and it hasn't

changed. Anything else? So that's working
perfectly seems to be going fine. And we're

selecting everything. But what if we wanted
to use IDs. So let's just say that this right

here, this contact us, we wanted to use an
ID for it. Now, for now, we don't actually

know why we want to use an ID. But let's just
pretend that we do know why. So what I would

do is go ahead and use the ID attribute. So
I'm going to go ahead and add that. And I'm

going to say contact dash us. Now, usually,
in CSS classes or IDs, you would use these

dashes right here, instead of dots or uppercase,
or any other naming convention, this is just

kind of the standard way to do it. Now we
don't have to style it, I can't just go ahead

and do this, this wouldn't work. The reason
being the prefix here is a.so. css would interpret

this as a class and not an ID, instead, we're
going to have to use our author Thor or hash,

then why don't we go ahead and color this
one, green. Okay, let's go ahead and refresh

the page and check this out. And you can see
that it has this kind of olive green color,

so it's working great. So there we go, you
can see that we've worked with some of these

selectors and applied some of our IDs. Now,
you can go ahead onto the GitHub repository,

pull it, download it, do whatever you want.
If you don't know how to use Git, I do have

a free course on that as well. But it's very
easy. You can go back to any state and time,

check it out and play, play around with these
trying and replicate this and add your own

classes and IDs and try and you know, figure
out how things work here. So yeah, that's

pretty much the basics of adding classes and
IDs. In the future, we're going to use some

more complicated selectors, which don't actually
involve having to directly reference some

of these. So those are going to get pretty
complicated, but we're going to build up to

that point. So let's move on. So in this video,
I'm going to be talking about a very important

concept in CSS. So this is a pretty important
concept, because it's pretty much going to

change the way that you use selectors. Right
now, we're just assuming that all of these

selectors kind of work in the same in a similar
way. We don't actually know why. They're why

they exist. I mean, why is there a class and
an id selector when they both do the same

thing. So that's what I'm going to be explaining
in this video. And it all comes down to one

concept called specificity. So specificity
is pretty much talking about the overriding

or rewriting of properties in CSS. And it's
pretty much this concept that different selectors

are more powerful than others in a sense.
So for example, if you had two selectors,

on one element, one of them said the color
was blue, and one of them said the color was

green, the more powerful there the more specific
selector would end up overriding the other

ones and applying that property to the element.
So there's this really helpful article here

from w three schools. If you need some more
help on this, or you don't really understand

it, you can go ahead and read this. There's
a lot of numbers involved like this. But you

know, you can go ahead and read this, but
I'm just going to explain it in Word terms,

because these numbers tend to get really confusing.
And they end up meaning the same thing at

the end of the day. So let's go ahead and
get started. Now, I think it's really helpful

if we start from the ground up. So I've removed
all of the styling that we applied in the

last video. So first of all, I'm going to
go ahead and create an element selector. So

on all h twos, I want the color to be blue,
or actually I'm going to make it red. So there

we go. Now we know that every single h2 is
red. Okay? Well, let's just say for our about

me right here, I'm going to add a class, okay.
And I'm going to call this about me, and I'm

going to add it to my h2. Now in my in my
styles, here, we're going to use the class

selector and say the color is blue. So this
is where we have a confliction. You can see

that one selector says the color is red, but
one selector says the color is blue. So what

are we supposed to do about this? Which one
do you think is going to prevail, I mean,

you can just have both red and blue at the
same time, you can see that blue is actually

more specific. So you can see that elements
are or actually selectors have different powers.

And the more powerful they are, the more specific
they are. The higher they are, the higher

they're going to be on the scale and the higher
the chance of having or applying the right

selector property. So what we're going to
do is actually go through and talk about the

different powers or specificities, or specifics
of each selector and we're going to see which

one is most powerful. So right now We know
that the element selectors are less powerful

than the class. But there is actually two
more that are more powerful than the class

selectors. So I'm going to go ahead and apply
this about me class to another h2. Now I know

it's not really going to make much sense.
So I'm actually just going to rename it to

subtitle. Okay, so I'm going to go ahead and
add this to services as well. subtitle, there

we go. Let's go ahead and refresh the page.
Oh, whoops, forgot to actually change the

class name. with CSS fun. There we go. So
now we have two blue sub titles and one red.

So you can see that the class will overwrite
the header, or sorry, the element tag. But

there are like I said, there are still two
that are more powerful. The next after the

class is the ID. So I'm going to go over here
to services and add an ID of services, oops,

services. All right. Now, what I'm going to
do is go into my CSS file, and use the id

selector. color green. So I'm going to go
ahead and refresh now. And you can see that

it's right here, it's green. So now that we
know the ID is going to overwrite the class,

and the class is going to overwrite the header.
So there is still one more that is more powerful.

And that is called inline styling. So we don't
actually know what inline styling is. But

pretty much we don't need to use a CSS file
to do inline styling. All we need is the element

and the HTML file. So why don't I go ahead
and use services here, because we're kind

of on a roll, and I want to use this again.
So what I'm going to do is a style, which

is the attribute. And then here, we add all
of our CSS properties, no selector nothing.

So I'm going to say here, that color is still
blue. And we don't actually, still blue is

part of the CSS color collection, we'll explain
all of those in future sections. So if I go

ahead and refresh, now, you can see that it
is blue, and it overrides the ID, the class

and the header here. So pretty much there
are, there's an order here that you need to

take away from this video. headers are the
least specific, they kind of applied to everything,

and they're not that powerful. The class selector
is above that, and then the ID and then the

inline styling, or the style attribute. So
if you follow this order, you will pretty

much you can predict what is going to be the
outcome and which styles are going to be followed.

So this is a pretty useful tool and in CSS,
and it pretty much allows you to structure

your file in a way that makes sense to other
people when they're reading it. But there's

still one more question we need to answer.
What's the difference between a class and

an ID. Apart from the obvious specificity
difference, we actually use classes and IDs

in different situations. And they're pretty
simple. Classes are meant to be used multiple

times. So if you have done any programming
before, you'll know that a class is kind of

like a blueprint, it's made so that you can
create multiple objects from it. But the thing

is, an ID is supposed to be only for one thing,
it'll work for more than one. But the convention

is, you're only supposed to use an ID for
one single element. So for example, let's

take this file we have here we have three
sub titles, and one for the about me section.

In this structure, what we would do is create
a sub title class for every sub title on the

page, then we'd apply it to it. Now the reason
we're doing this is because we can have multiple

h2 is on this page. So we only want to apply
it to the subtitles. But then for our bio

about me here, there's only going to be one
of them on this whole document, which means

we're going to use the ID of about me. And
then from there, we can go and apply our styles

and do all of that. So that's just the main
difference between classes and IDs. And now

that you know how to use them, you can actually
go through and apply them properly in real

world scenarios. So that's just a very important
thing to keep in mind. You're only supposed

to use IDs once and classes can be used multiple
times. Alright, let's move on.

selector property. So what we're going to
do is actually go through and talk about the

different powers or specificities, or specifics
of each selector and we're going to see which

one is most powerful. So right now We know
that the element selectors are less powerful

than the class. But there is actually two
more that are more powerful than the class

selectors. So I'm going to go ahead and apply
this about me class to another h2. Now I know

it's not really going to make much sense.
So I'm actually just going to rename it to

subtitle. Okay, so I'm going to go ahead and
add this to services as well. subtitle, there

we go. Let's go ahead and refresh the page.
Oh, whoops, forgot to actually change the

class name. with CSS fun. There we go. So
now we have two blue sub titles and one red.

So you can see that the class will overwrite
the header, or sorry, the element tag. But

there are like I said, there are still two
that are more powerful. The next after the

class is the ID. So I'm going to go over here
to services and add an ID of services, oops,

services. All right. Now, what I'm going to
do is go into my CSS file, and use the id

selector. color green. So I'm going to go
ahead and refresh now. And you can see that

it's right here, it's green. So now that we
know the ID is going to overwrite the class,

and the class is going to overwrite the header.
So there is still one more that is more powerful.

And that is called inline styling. So we don't
actually know what inline styling is. But

pretty much we don't need to use a CSS file
to do inline styling. All we need is the element

and the HTML file. So why don't I go ahead
and use services here, because we're kind

of on a roll, and I want to use this again.
So what I'm going to do is a style, which

is the attribute. And then here, we add all
of our CSS properties, no selector nothing.

So I'm going to say here, that color is still
blue. And we don't actually, still blue is

part of the CSS color collection, we'll explain
all of those in future sections. So if I go

ahead and refresh, now, you can see that it
is blue, and it overrides the ID, the class

and the header here. So pretty much there
are, there's an order here that you need to

take away from this video. headers are the
least specific, they kind of applied to everything,

and they're not that powerful. The class selector
is above that, and then the ID and then the

inline styling, or the style attribute. So
if you follow this order, you will pretty

much you can predict what is going to be the
outcome and which styles are going to be followed.

So this is a pretty useful tool and in CSS,
and it pretty much allows you to structure

your file in a way that makes sense to other
people when they're reading it. But there's

still one more question we need to answer.
What's the difference between a class and

an ID. Apart from the obvious specificity
difference, we actually use classes and IDs

in different situations. And they're pretty
simple. Classes are meant to be used multiple

times. So if you have done any programming
before, you'll know that a class is kind of

like a blueprint, it's made so that you can
create multiple objects from it. But the thing

is, an ID is supposed to be only for one thing,
it'll work for more than one. But the convention

is, you're only supposed to use an ID for
one single element. So for example, let's

take this file we have here we have three
sub titles, and one for the about me section.

In this structure, what we would do is create
a sub title class for every sub title on the

page, then we'd apply it to it. Now the reason
we're doing this is because we can have multiple

h2 is on this page. So we only want to apply
it to the subtitles. But then for our bio

about me here, there's only going to be one
of them on this whole document, which means

we're going to use the ID of about me. And
then from there, we can go and apply our styles

and do all of that. So that's just the main
difference between classes and IDs. And now

that you know how to use them, you can actually
go through and apply them properly in real

world scenarios. So that's just a very important
thing to keep in mind. You're only supposed

to use IDs once and classes can be used multiple
times. Alright, let's move on.

So in this video I am we are going to be looking
at pseudo selectors. So this is a special

type of selector that is used commonly in
interactivity with your website. So this is

usually visible only when something is done
on the website. So it's a pretty it's pretty

cool feature. And it's used very commonly
throughout CSS. And once we get to the animations

and transitions part, we're actually going
to be used soon as we be we're going to be

using pseudo selectors a lot. So let's get
into it. Now, there's a few pseudo selectors

I want to cover here. There's a lot of number
of only going to be covering the main ones

that are we're going to be using. So before
we go on, I'm just going to show you what

a pseudo selector actually is. So usually
what you would do is, after a selector, you

would add a colon, and then the name of the
pseudo selector. So this is just an example

of one of them. And then the properties will
apply normally. Now watch what happens when

I hover over our h2 here, you can see that
it's working perfectly. And when we hover

over it, it is turning red. Now, obviously,
it doesn't apply to this subtitle, or the

services part here. Because again, these are
all separate classes. And obviously, with

specificity and everything like that, they
won't apply. So there we go. We have everything

working here. And that's one of the pseudo
selectors, which is hover. So let's move on

to some of the next ones. Now, there's also
two that I'd like to talk about, which is

first child and last child. So the concept
behind child and parent elements is that right

here, if we look Actually, this is a little
bit complicated example, let's look at this

unordered list here, we have an A ul unordered
list, and then we have three allies. Okay,

so pretty much this is going to be the first
child because it's placed inside of the UL,

the second is going to be the second child,
and then this is going to be the third child.

So you can see here that this is kind of the
relationship between child and parent. And

what we can actually do is specify which one
we want to select. So if I go over here and

select all URLs, and then of course, the colon
for the pseudo selector, and select first

child, now, I'm just going to say set the
color to steel blue as well. Okay, so I'm

gonna refresh the page, and you can see that
it's not working. Now, although it might seem

like you want to put the URL first, obviously,
because, again, you're looking for the first

child of the URL, this isn't actually how
you're supposed to write it. Instead, you're

supposed to write the element that you're
trying to select, which in this case is our

list item, or our Li. So now if I go ahead
and refresh the page, you can see that the

first one here is going to be blue, it's a
little bit of a confusing rule to get around.

But once you get used to it, it becomes very
easy. We also change this to last or last

child like this. And then what's going to
happen is it's going to select the last one.

Now, there's also one more that I'd like to
talk about quickly, which is nth child. So

I'm just going to show you how this thing
works and child. And then in brackets, you

put the number here. So when you're going
to put here is pretty much what number of

the child you want to style. In this case,
I want every second Li child to be colored

steel blue. So throughout the page, every
second Li that is inside of a that is the

child element is going to be styled blue,
go ahead and refresh the page, you can see

that works there. So there's actually one
more selector that I want to talk about, at

least for children, and that is the only child
selector. So I think it makes perfect sense,

pretty much what we're trying to look for
is something that there's only one child inside

of it. So for example, nothing on this page
here actually has one child. But why don't

we go ahead and add that. So under this list,
I'm just going to temporarily remove these

here, just like that. All right, let's go
ahead and save, make sure it's working. There

we go. Now, what I'm going to do is go ahead
and select this. So I'm going to say Li by

car. And I'm going to say only child. So pretty
much what this is saying is for every Li that

is the only child of its parent. And you can
see this, the UL does only has one child.

So I'm going to go ahead and give it a color
of purple, for example. And you can see that

it works perfectly. But what would happen
if I tried this on, let's just say for example,

the TD is here. Okay, so I'm going to go ahead
and add a new one TD, only child. And I'm

also going to give this a color of purple.

So in this video I am we are going to be looking
at pseudo selectors. So this is a special

type of selector that is used commonly in
interactivity with your website. So this is

usually visible only when something is done
on the website. So it's a pretty it's pretty

cool feature. And it's used very commonly
throughout CSS. And once we get to the animations

and transitions part, we're actually going
to be used soon as we be we're going to be

using pseudo selectors a lot. So let's get
into it. Now, there's a few pseudo selectors

I want to cover here. There's a lot of number
of only going to be covering the main ones

that are we're going to be using. So before
we go on, I'm just going to show you what

a pseudo selector actually is. So usually
what you would do is, after a selector, you

would add a colon, and then the name of the
pseudo selector. So this is just an example

of one of them. And then the properties will
apply normally. Now watch what happens when

I hover over our h2 here, you can see that
it's working perfectly. And when we hover

over it, it is turning red. Now, obviously,
it doesn't apply to this subtitle, or the

services part here. Because again, these are
all separate classes. And obviously, with

specificity and everything like that, they
won't apply. So there we go. We have everything

working here. And that's one of the pseudo
selectors, which is hover. So let's move on

to some of the next ones. Now, there's also
two that I'd like to talk about, which is

first child and last child. So the concept
behind child and parent elements is that right

here, if we look Actually, this is a little
bit complicated example, let's look at this

unordered list here, we have an A ul unordered
list, and then we have three allies. Okay,

so pretty much this is going to be the first
child because it's placed inside of the UL,

the second is going to be the second child,
and then this is going to be the third child.

So you can see here that this is kind of the
relationship between child and parent. And

what we can actually do is specify which one
we want to select. So if I go over here and

select all URLs, and then of course, the colon
for the pseudo selector, and select first

child, now, I'm just going to say set the
color to steel blue as well. Okay, so I'm

gonna refresh the page, and you can see that
it's not working. Now, although it might seem

like you want to put the URL first, obviously,
because, again, you're looking for the first

child of the URL, this isn't actually how
you're supposed to write it. Instead, you're

supposed to write the element that you're
trying to select, which in this case is our

list item, or our Li. So now if I go ahead
and refresh the page, you can see that the

first one here is going to be blue, it's a
little bit of a confusing rule to get around.

But once you get used to it, it becomes very
easy. We also change this to last or last

child like this. And then what's going to
happen is it's going to select the last one.

Now, there's also one more that I'd like to
talk about quickly, which is nth child. So

I'm just going to show you how this thing
works and child. And then in brackets, you

put the number here. So when you're going
to put here is pretty much what number of

the child you want to style. In this case,
I want every second Li child to be colored

steel blue. So throughout the page, every
second Li that is inside of a that is the

child element is going to be styled blue,
go ahead and refresh the page, you can see

that works there. So there's actually one
more selector that I want to talk about, at

least for children, and that is the only child
selector. So I think it makes perfect sense,

pretty much what we're trying to look for
is something that there's only one child inside

of it. So for example, nothing on this page
here actually has one child. But why don't

we go ahead and add that. So under this list,
I'm just going to temporarily remove these

here, just like that. All right, let's go
ahead and save, make sure it's working. There

we go. Now, what I'm going to do is go ahead
and select this. So I'm going to say Li by

car. And I'm going to say only child. So pretty
much what this is saying is for every Li that

is the only child of its parent. And you can
see this, the UL does only has one child.

So I'm going to go ahead and give it a color
of purple, for example. And you can see that

it works perfectly. But what would happen
if I tried this on, let's just say for example,

the TD is here. Okay, so I'm going to go ahead
and add a new one TD, only child. And I'm

also going to give this a color of purple.

Now let's go ahead and refresh and see what's
going on. All right. So you can see that that

TD right here, it's somewhere in this table,
nothing's actually happening. That's because

as we can see here, there is nothing on this
page where there's only one TD as a child.

So that's just one thing to keep in mind.
Sometimes pseudo selectors won't actually

style anything if they don't exist. So there
we go. That's pretty much for the basic children

kind of pseudo selectors. Let's move on to
some other students, selectors. Now, there

are selectors of this type that are actually
specific to certain elements, and one of them

is the anchor tag or the a tag. So I'm just
going to go ahead and create an anchor tag

under this h2 here. Oh, whoops. Okay, and
I'm just going to give it a link or an endpoint

of Google. So just like that. Okay, there
we go. So in here, I'm just going to say Click

here to go to Google. Pretty simple. At Tag.
Hopefully everyone knows how to do this. There

we go, we have our link there. So I click
on it takes me there, pretty standard stuff.

Now, we can actually create pseudo selectors
for this. So I'm going to be giving you two

for now. Now, there are many, many more. But
these are the two main ones you need to focus

on. The rest of them are kind of generalized.
And these are the main two that you're going

to be using. So I'm going to create them here.
And remember, you're using the element name,

you can use the class if you want, it's not
limited to single element names, actually,

why don't I go ahead and do that, I'm going
to give it an ID, because again, we only have

one of these on the page, I'm going to give
it an ID of Google link, just like that. So

now I'm gonna go ahead and reference that
in here. So remember, it's just the name of

this electric Google dash link, in this case,
and then the colon. So here, I'm going to

go ahead and say, link. Okay, so this is the
first pseudo selector. And then there's also

a second one. Don't worry about what I'm typing
for. now. I'll explain both of these in just

a second. Alright, so let's look at the first
one here, Google link, like, pretty much what

this is saying is, if you've ever been on
a web page, you know that there is a difference

between before you click on the link and after,
there's kind of some stylistic changes. So

that's where pseudo selectors actually come
into play. The website has of those has those

defined properties. And they actually change
the way that the link looks before and after

it is clicked. So I'm going to go ahead and
do it here. Link is the unvisited link, remember,

so I'm going to go ahead and give it a color
of blue. And then when it's clicked, I'm going

to go ahead and give it a color of red tie
blue there. Remember, usually, the default

is that it is going to be purple like this
color here. Let's go ahead and refresh the

page, you can see that it's actually read
now. Now, obviously, I can't really go back

in time, and change the link so that it doesn't
look clicked. But you can see how powerful

this the pseudo selectors are, because you
can do so many different things. And once

we learn more properties, you can actually
change different parts of the page. And it

becomes very powerful to use these pseudo
selectors. So that's just one thing to keep

in mind. All right. So there we go. We've
covered most of the pseudo selectors, I'm

actually going to go ahead and add that hover
property there back in case anyone wants to

use the project files. So there we go. We've
covered everything here. And we've added all

of our pseudo selectors. So like I said, there's
many more, I've linked a couple articles that

help you to look at all of the different pseudo
selectors. And most of them, you're not really

going to use very often, they are useful in
any way, because they're usually you just

use some basic pseudo selectors like hover
and active, which I haven't actually covered.

But things like that. So you're not really
going to use all of them. But I just wanted

to give you an introduction to the main ones,
so that when it comes time to use them, you

have the tools to finish the job or create
that effect that you've always wanted. Alright,

let's move on.

Now let's go ahead and refresh and see what's
going on. All right. So you can see that that

TD right here, it's somewhere in this table,
nothing's actually happening. That's because

as we can see here, there is nothing on this
page where there's only one TD as a child.

So that's just one thing to keep in mind.
Sometimes pseudo selectors won't actually

style anything if they don't exist. So there
we go. That's pretty much for the basic children

kind of pseudo selectors. Let's move on to
some other students, selectors. Now, there

are selectors of this type that are actually
specific to certain elements, and one of them

is the anchor tag or the a tag. So I'm just
going to go ahead and create an anchor tag

under this h2 here. Oh, whoops. Okay, and
I'm just going to give it a link or an endpoint

of Google. So just like that. Okay, there
we go. So in here, I'm just going to say Click

here to go to Google. Pretty simple. At Tag.
Hopefully everyone knows how to do this. There

we go, we have our link there. So I click
on it takes me there, pretty standard stuff.

Now, we can actually create pseudo selectors
for this. So I'm going to be giving you two

for now. Now, there are many, many more. But
these are the two main ones you need to focus

on. The rest of them are kind of generalized.
And these are the main two that you're going

to be using. So I'm going to create them here.
And remember, you're using the element name,

you can use the class if you want, it's not
limited to single element names, actually,

why don't I go ahead and do that, I'm going
to give it an ID, because again, we only have

one of these on the page, I'm going to give
it an ID of Google link, just like that. So

now I'm gonna go ahead and reference that
in here. So remember, it's just the name of

this electric Google dash link, in this case,
and then the colon. So here, I'm going to

go ahead and say, link. Okay, so this is the
first pseudo selector. And then there's also

a second one. Don't worry about what I'm typing
for. now. I'll explain both of these in just

a second. Alright, so let's look at the first
one here, Google link, like, pretty much what

this is saying is, if you've ever been on
a web page, you know that there is a difference

between before you click on the link and after,
there's kind of some stylistic changes. So

that's where pseudo selectors actually come
into play. The website has of those has those

defined properties. And they actually change
the way that the link looks before and after

it is clicked. So I'm going to go ahead and
do it here. Link is the unvisited link, remember,

so I'm going to go ahead and give it a color
of blue. And then when it's clicked, I'm going

to go ahead and give it a color of red tie
blue there. Remember, usually, the default

is that it is going to be purple like this
color here. Let's go ahead and refresh the

page, you can see that it's actually read
now. Now, obviously, I can't really go back

in time, and change the link so that it doesn't
look clicked. But you can see how powerful

this the pseudo selectors are, because you
can do so many different things. And once

we learn more properties, you can actually
change different parts of the page. And it

becomes very powerful to use these pseudo
selectors. So that's just one thing to keep

in mind. All right. So there we go. We've
covered most of the pseudo selectors, I'm

actually going to go ahead and add that hover
property there back in case anyone wants to

use the project files. So there we go. We've
covered everything here. And we've added all

of our pseudo selectors. So like I said, there's
many more, I've linked a couple articles that

help you to look at all of the different pseudo
selectors. And most of them, you're not really

going to use very often, they are useful in
any way, because they're usually you just

use some basic pseudo selectors like hover
and active, which I haven't actually covered.

But things like that. So you're not really
going to use all of them. But I just wanted

to give you an introduction to the main ones,
so that when it comes time to use them, you

have the tools to finish the job or create
that effect that you've always wanted. Alright,

let's move on.

Today, we're going to be looking at Advanced
selectors. So right now, we've looked at our

basic selectors, or class selectors, element
selectors, and Id selectors. And we've also

looked at some pseudo selectors, which is
very useful. But now we're going to look at

some of the more advanced selectors. Now,
you're not going to use these every day. They're

not used very commonly, but it just shows
what you can actually do with these selectors,

because there is a lot. So there's a bunch
of advanced selectors. And I'm actually going

to be breaking these down into two parts,
we're going to be looking first at our basic

advanced selectors. And I know that sounds
a little bit contradictive. But we'll get

into that in just a second. And then after
that, we're going to be talking about attribute

selectors, which are probably the hardest
type of selector to get used to. Alright,

let's get started. So the first thing I want
to talk about is how you actually set up these

selectors. Now, these sometimes contain one,
two, or sometimes even three elements in one

selector. So I'm going to be going through
these and talking about how they all work.

So the first selector I'm going to be talking
about is something called the adjacent sibling

selector. So pretty much what this does is
selects every single element that directly

follows a different element. So I'll show
you how to set this up. Let's first take a

look at our HTML page every over here, sorry.
Now you can see we have our services, which

is an h2, and then we have an a tag. Now first
thing I'm going to do is actually go ahead

and get rid of these two, I'm going to actually
comment them out. You can do this with Ctrl,

slash, like that. So if you type control slash
comments here with which pretty much just

renders it useless, it doesn't run or anything
like that. Let's get started. So the first

thing I want to do is go ahead and set this
up. So I want to be able to apply styles to

every a tag or anchor tag that comes directly
after an h2. So the way to set this up is

all you have to do is go the element that
you Want to be the first element. So in this

case, it's going to be our h2. And then afterwards,
it's going to be the element that you want

after, which is our a tag. So you want h2
plus a. So this is pretty much saying every

anchor tag that follows an h2. So then we
can pretty much just set the style however

we want. So I'm going to say color is red,
just like that. Now remember, this isn't any

there is no pseudo selector on this, if you
could add it if you wanted to. Because this

is still a selector. Remember, I'm not going
to add any. So I'm going to go ahead and refresh

the page. And you can see it turns red again.
So that's the first type of selector. Next

thing I want to look at is the general sibling
combinator, or selector. So this is a little

bit more difficult to understand. But All
in good time, it's once you get used to it,

it becomes much easier to understand. So pretty
much what the general sibling selector does,

is goes for the same kind of idea as this
selector here, it looks for elements that

go directly after one another, except they
have to be sharing the same parents, okay.

So for example, let's see our input here our
form, we have an input and a text area, or

a button followed by a text area, for example.
So what we're going to do here is I want to

style every button that's followed by a text
area, except in this case, they have to share

the same parent. So what we're going to do
is go and say, every button, which is going

to be the next one, or the final one, which
is eight here. So sorry, it's actually going

to be text area. Right, because that's the
first element here, which is our text area.

And then this symbol followed, and then it's
going to be a button, like that. So this is

seeing every button that is followed, or that
is after a text area, but they're in the same

parent. So from here, we can go and style
it however we want. So in this case, I'm going

to go ahead and just say the color is purple.
Oops. Now if we go ahead and refresh, you

can see that the button color is purple. So
like I said, the main difference between these

two is that the first one is going to be styling
elements that follow each other no matter

where they are on the scale. So if you actually
look up here, they don't share any parents,

they're completely separate elements. Whereas
here, they have to follow each other. And

I'll actually demonstrate that quickly. If
we change this to a plus here. and refresh,

the style is still going to work because they
are directly preceded. But the only thing

is if they aren't. So for example, I'm just
going to actually move this button out of

the form.

Today, we're going to be looking at Advanced
selectors. So right now, we've looked at our

basic selectors, or class selectors, element
selectors, and Id selectors. And we've also

looked at some pseudo selectors, which is
very useful. But now we're going to look at

some of the more advanced selectors. Now,
you're not going to use these every day. They're

not used very commonly, but it just shows
what you can actually do with these selectors,

because there is a lot. So there's a bunch
of advanced selectors. And I'm actually going

to be breaking these down into two parts,
we're going to be looking first at our basic

advanced selectors. And I know that sounds
a little bit contradictive. But we'll get

into that in just a second. And then after
that, we're going to be talking about attribute

selectors, which are probably the hardest
type of selector to get used to. Alright,

let's get started. So the first thing I want
to talk about is how you actually set up these

selectors. Now, these sometimes contain one,
two, or sometimes even three elements in one

selector. So I'm going to be going through
these and talking about how they all work.

So the first selector I'm going to be talking
about is something called the adjacent sibling

selector. So pretty much what this does is
selects every single element that directly

follows a different element. So I'll show
you how to set this up. Let's first take a

look at our HTML page every over here, sorry.
Now you can see we have our services, which

is an h2, and then we have an a tag. Now first
thing I'm going to do is actually go ahead

and get rid of these two, I'm going to actually
comment them out. You can do this with Ctrl,

slash, like that. So if you type control slash
comments here with which pretty much just

renders it useless, it doesn't run or anything
like that. Let's get started. So the first

thing I want to do is go ahead and set this
up. So I want to be able to apply styles to

every a tag or anchor tag that comes directly
after an h2. So the way to set this up is

all you have to do is go the element that
you Want to be the first element. So in this

case, it's going to be our h2. And then afterwards,
it's going to be the element that you want

after, which is our a tag. So you want h2
plus a. So this is pretty much saying every

anchor tag that follows an h2. So then we
can pretty much just set the style however

we want. So I'm going to say color is red,
just like that. Now remember, this isn't any

there is no pseudo selector on this, if you
could add it if you wanted to. Because this

is still a selector. Remember, I'm not going
to add any. So I'm going to go ahead and refresh

the page. And you can see it turns red again.
So that's the first type of selector. Next

thing I want to look at is the general sibling
combinator, or selector. So this is a little

bit more difficult to understand. But All
in good time, it's once you get used to it,

it becomes much easier to understand. So pretty
much what the general sibling selector does,

is goes for the same kind of idea as this
selector here, it looks for elements that

go directly after one another, except they
have to be sharing the same parents, okay.

So for example, let's see our input here our
form, we have an input and a text area, or

a button followed by a text area, for example.
So what we're going to do here is I want to

style every button that's followed by a text
area, except in this case, they have to share

the same parent. So what we're going to do
is go and say, every button, which is going

to be the next one, or the final one, which
is eight here. So sorry, it's actually going

to be text area. Right, because that's the
first element here, which is our text area.

And then this symbol followed, and then it's
going to be a button, like that. So this is

seeing every button that is followed, or that
is after a text area, but they're in the same

parent. So from here, we can go and style
it however we want. So in this case, I'm going

to go ahead and just say the color is purple.
Oops. Now if we go ahead and refresh, you

can see that the button color is purple. So
like I said, the main difference between these

two is that the first one is going to be styling
elements that follow each other no matter

where they are on the scale. So if you actually
look up here, they don't share any parents,

they're completely separate elements. Whereas
here, they have to follow each other. And

I'll actually demonstrate that quickly. If
we change this to a plus here. and refresh,

the style is still going to work because they
are directly preceded. But the only thing

is if they aren't. So for example, I'm just
going to actually move this button out of

the form.

Just like that seems like the button disappeared
there. Let's go ahead and redo that. Okay,

so we have the button back. Now I'm going
to go ahead and change this back to our symbol

there. And if we go ahead and refresh, you
can see that the button right there, it doesn't

actually have that styling anymore, because
although they directly follow each other,

they're not under the same parent. So that's
just one minor difference. Alright, let's

move on to the next one. It's called the child
selector. So this is probably the most basic

out of all of these advanced selectors. And
pretty much what is saying is every single

child have a certain element. So I'll give
you an example. Here, we have an Li and a

ul, this is pretty basic, all you have to
do is type ul, which is going to be a parent.

And then this symbol or the greater than symbol,
and Li so this is gonna say every single Li

inside of a ul, open up the brackets. And
let's start to color this time to blue. I'm

just gonna say that. And remember, specificity
is at play here. Now, like I said, the specificity

rules, once you use these advanced selectors
get quite complicated. But for example, if

we actually look at the Li here, the style
for this, we can see that the Li with the

pseudo selector is actually more specific
than the this general selector. So I'm going

to go ahead and comment that out. Now if we
refresh the page, you can see that it's blue.

So that's just one thing to keep in mind with
these advanced selectors. They can get pretty

complicated. And that's why we use the numbers,
the zeros, ones, twos, things like that, is

to be able to classify these once we get and
start using these advanced selectors. Like

I said, usually you won't use these in your
general use. So I'm not going to go over specificity

especially because usually, you'll group up
all of these styles into one selector. Okay,

so that's the child selector. The next one
is very similar to the child selector, but

instead of having direct children, there's
actually something called a descendant. So

I'm just going to go ahead and edit this a
little bit. I'm going to have an Li okay,

but then I'm going to create an ordered list
inside of the Output training to create an

Li and put the ordered list inside of that.
So pretty much what's going on here is I'm

creating an ordered list or a numbered list
inside of a list item that is inside of a

ul. So a little bit complicated. But we'll
get to that in just a second. So I'm going

to create an Li inside of this. And I'm going
to say, my numbered list item, just like that.

Alright, now I'm going to go ahead and refresh
the page. And you can see we have a list item

here with our item. All right, so let's get
started on using this descendant selector.

So I'm going to get started, first thing I
want to do is actually set this up. So first

thing we're going to have is the parent. Okay,
so in this case, it's going to be our ul,

remember, because that's the top level. But
then I'm going to select the Li here, but

I'm not going to put our greater than symbol.
So that's the big difference. This is the

descendant selector, and then this is going
to be our child selector. So that's just the

main difference, it's very easy to miss, just
make sure that you don't mess that up. So

now I'm going to select the color and set
it to four. Now let's just say green. All

right, now let's go ahead and refresh the
page. And you can see that all of the lies

inside of there are going to be green, right?
Only problem is our ordered list right here

is actually purple, right? And of course,
you know, our list here is getting a little

bit complicated. So I'm going to go ahead
and comment this out. Remember, this is a

very specific selector. Now, if I go ahead
and refresh, both of them are green. All right.

So what do you need to take away from this,
it's pretty much what this is saying is any

Li that eventually boils back or propagates
up if you have done any programming before,

that goes up to N A ul, okay, so I'll just
show you what that means. In this case, the

Li is a direct child of the UL, right. But
then we have another Li in here, which is

a child of n o l, which is just child of an
Li, which is a child of the UL, right. So

as you move up and up, it eventually comes
back to the UL as the parent element. So the

main difference you need to take away from
this is that the child selector is selecting

any direct children. So anything here would
not apply, because we're actually

Just like that seems like the button disappeared
there. Let's go ahead and redo that. Okay,

so we have the button back. Now I'm going
to go ahead and change this back to our symbol

there. And if we go ahead and refresh, you
can see that the button right there, it doesn't

actually have that styling anymore, because
although they directly follow each other,

they're not under the same parent. So that's
just one minor difference. Alright, let's

move on to the next one. It's called the child
selector. So this is probably the most basic

out of all of these advanced selectors. And
pretty much what is saying is every single

child have a certain element. So I'll give
you an example. Here, we have an Li and a

ul, this is pretty basic, all you have to
do is type ul, which is going to be a parent.

And then this symbol or the greater than symbol,
and Li so this is gonna say every single Li

inside of a ul, open up the brackets. And
let's start to color this time to blue. I'm

just gonna say that. And remember, specificity
is at play here. Now, like I said, the specificity

rules, once you use these advanced selectors
get quite complicated. But for example, if

we actually look at the Li here, the style
for this, we can see that the Li with the

pseudo selector is actually more specific
than the this general selector. So I'm going

to go ahead and comment that out. Now if we
refresh the page, you can see that it's blue.

So that's just one thing to keep in mind with
these advanced selectors. They can get pretty

complicated. And that's why we use the numbers,
the zeros, ones, twos, things like that, is

to be able to classify these once we get and
start using these advanced selectors. Like

I said, usually you won't use these in your
general use. So I'm not going to go over specificity

especially because usually, you'll group up
all of these styles into one selector. Okay,

so that's the child selector. The next one
is very similar to the child selector, but

instead of having direct children, there's
actually something called a descendant. So

I'm just going to go ahead and edit this a
little bit. I'm going to have an Li okay,

but then I'm going to create an ordered list
inside of the Output training to create an

Li and put the ordered list inside of that.
So pretty much what's going on here is I'm

creating an ordered list or a numbered list
inside of a list item that is inside of a

ul. So a little bit complicated. But we'll
get to that in just a second. So I'm going

to create an Li inside of this. And I'm going
to say, my numbered list item, just like that.

Alright, now I'm going to go ahead and refresh
the page. And you can see we have a list item

here with our item. All right, so let's get
started on using this descendant selector.

So I'm going to get started, first thing I
want to do is actually set this up. So first

thing we're going to have is the parent. Okay,
so in this case, it's going to be our ul,

remember, because that's the top level. But
then I'm going to select the Li here, but

I'm not going to put our greater than symbol.
So that's the big difference. This is the

descendant selector, and then this is going
to be our child selector. So that's just the

main difference, it's very easy to miss, just
make sure that you don't mess that up. So

now I'm going to select the color and set
it to four. Now let's just say green. All

right, now let's go ahead and refresh the
page. And you can see that all of the lies

inside of there are going to be green, right?
Only problem is our ordered list right here

is actually purple, right? And of course,
you know, our list here is getting a little

bit complicated. So I'm going to go ahead
and comment this out. Remember, this is a

very specific selector. Now, if I go ahead
and refresh, both of them are green. All right.

So what do you need to take away from this,
it's pretty much what this is saying is any

Li that eventually boils back or propagates
up if you have done any programming before,

that goes up to N A ul, okay, so I'll just
show you what that means. In this case, the

Li is a direct child of the UL, right. But
then we have another Li in here, which is

a child of n o l, which is just child of an
Li, which is a child of the UL, right. So

as you move up and up, it eventually comes
back to the UL as the parent element. So the

main difference you need to take away from
this is that the child selector is selecting

any direct children. So anything here would
not apply, because we're actually

this one wouldn't apply, because the ordered
list is actually a child of the Li remember,

but when you're using the descendant selector,
what actually happens is, if it is contained

inside of a ul at all, then use or apply the
styles. So I'm going to go ahead and demonstrate

this. Now. Let's go ahead and actually remove
this Li remember, because once you get to

this point, CSS gets a little bit complicated.
This is going to end up styling everything

inside it. So I'm actually just going to remove
this and leave it just the ordered list. So

right now, we have the ordered list as a child
of the UL. Now I'm going to go ahead and refresh.

And you can see it still stays the same, because
we have this style applied. But why don't

we go ahead and remove this, what do you think's
going to happen? Well, you can see here that

this stays blue, remember, because of our
direct child selector, but then this doesn't

have any style at all. So this Li works perfectly.
It is a direct child of the UL, which means

it's going to be colored with the style specified.
The only problem is this Li is a direct child

have the ordered list, which is completely
separate from this one. So the styles aren't

going to be applied on this one. On the other
hand, if we did have our descendant selector

enabled, it's going to style both of them
because remember, the Li is a child of the

oil, and the oil is a child of the UL. So
just keep that in mind, there's a big difference

between the two, you might be able to miss
it, it could really mess up your code. So

just make sure to keep that in mind. Alright,
so those are pretty much the basic advanced

selectors, those are the four that you're
mainly going to use. Again, there's many more,

but they are quite difficult. And we're not
going to cover them because they're not very

useful. So there we go. Those are the four
selectors that you can use. Go ahead and practice

them as much as you want. You know, try messing
them around, open up some HTML files and just

see what you can do with them. All right,
let's move on.

this one wouldn't apply, because the ordered
list is actually a child of the Li remember,

but when you're using the descendant selector,
what actually happens is, if it is contained

inside of a ul at all, then use or apply the
styles. So I'm going to go ahead and demonstrate

this. Now. Let's go ahead and actually remove
this Li remember, because once you get to

this point, CSS gets a little bit complicated.
This is going to end up styling everything

inside it. So I'm actually just going to remove
this and leave it just the ordered list. So

right now, we have the ordered list as a child
of the UL. Now I'm going to go ahead and refresh.

And you can see it still stays the same, because
we have this style applied. But why don't

we go ahead and remove this, what do you think's
going to happen? Well, you can see here that

this stays blue, remember, because of our
direct child selector, but then this doesn't

have any style at all. So this Li works perfectly.
It is a direct child of the UL, which means

it's going to be colored with the style specified.
The only problem is this Li is a direct child

have the ordered list, which is completely
separate from this one. So the styles aren't

going to be applied on this one. On the other
hand, if we did have our descendant selector

enabled, it's going to style both of them
because remember, the Li is a child of the

oil, and the oil is a child of the UL. So
just keep that in mind, there's a big difference

between the two, you might be able to miss
it, it could really mess up your code. So

just make sure to keep that in mind. Alright,
so those are pretty much the basic advanced

selectors, those are the four that you're
mainly going to use. Again, there's many more,

but they are quite difficult. And we're not
going to cover them because they're not very

useful. So there we go. Those are the four
selectors that you can use. Go ahead and practice

them as much as you want. You know, try messing
them around, open up some HTML files and just

see what you can do with them. All right,
let's move on.

Welcome back. So in this video, I am going
to be talking about the last type of selector.

These are called attribute selectors. They're
a little bit complicated once you get started,

but once we actually start using them, they
become very easy to use. So first of all,

what is an attribute selector? Well, as we
know, in HTML, we can actually add attributes

to all of our elements. So for example, this
image here has an attribute of source which

tells the image tag where the source of the
images. But what we can actually do in CSS

is use these to our advantage, we can select
certain elements that for certain attributes

and their values. So for example, let's go
ahead and try and rewrite this subtitle class

here. So we know if we go over here that all
of our, all of our subtitle classes are used

in h2. So what I want to do is actually rewrite
this in terms of our attribute selector. So

what we do is first start off with our tag
name, which is h2. But then inside of some

square brackets, what we do is type attribute
is equal to value. Okay, so obviously, we're

not going to do it like this, we're going
to have to select some sort of attribute.

What this allows us to do is actually select
certain things or certain elements based on

their attributes. So in this clip, in this
case, we want to select everything that has

the attribute of class, and we want to make
sure that the class itself is subtitled. Okay.

Now, you do not need quotation marks for these,
unlike how they were in HTML, you can see

we do need quotation marks, but in CSS, we
don't actually need them. Alright, so there

we go. We have rewritten our class here. But
we've read we've but we've written it in a

way that allows us to select it based on its
act on the attribute of it itself. So let's

go ahead and refresh the page and see what
happens, you can see that this state exactly

the same. Now nothing has changed. If I go
ahead and change this back to dot subtitle,

just like that, refresh the page, you can
see nothing's changed. So that's pretty basic.

Now, it doesn't just have to be class, we
can select it based on many different things.

So for example, if I wanted to select this
image over here, I'm going to go over to the

bottom, I could say image, image, and then
every and then the source has to be equal

to something. All right. So there we go. Now
we've done that. But there's actually more

than one type of selector. Now, usually, this
is the basic one where you just equate one

side to the other. But there's actually many
more types of selectors, which allow you to

kind of modify the attribute selectors and
make them much more powerful than they are

right now. So how do we do this? Well, I'm
going to be covering just a few of them with

you today, and showing you how you can use
them. So we have two images on this page.

Now both of them are located in this image
folder. Is there do you think that there's

any way that we can select both of them in
one go using an attribute selector? Well,

there actually is. So here's what we have
to do. First of all, let's find the common

factor between these two images. They both
are contained inside this folder. So they

both start definitely start with this path,
dot dot slash IMG slash, both of them are

going to contain this. And if we actually
go back and look, you can see that both images

actually do contain this link here, wherever
the other images, there it is. So there we

go. Now we've done that. But remember that
this is direct equating this has to be equal

to this. And unfortunately, neither of them
are equal to that. So how do you think we

fix this? Well, all we have to do is put a
carrot behind the attribute, just like this.

So what this says is every single image where
the source contains or starts with, sorry,

yeah, starts with this piece of information,
what comes after, it doesn't matter. But what

we're doing is selecting all of the images
where the source attribute starts with this

value right here. So this is you can already
see how powerful this is. Now, if we go ahead

and refresh the page, obviously, we can't
see anything because we didn't add any styles.

But I'm going to go ahead and add a quick
style for you. Or you don't need to know how

to do this,

Welcome back. So in this video, I am going
to be talking about the last type of selector.

These are called attribute selectors. They're
a little bit complicated once you get started,

but once we actually start using them, they
become very easy to use. So first of all,

what is an attribute selector? Well, as we
know, in HTML, we can actually add attributes

to all of our elements. So for example, this
image here has an attribute of source which

tells the image tag where the source of the
images. But what we can actually do in CSS

is use these to our advantage, we can select
certain elements that for certain attributes

and their values. So for example, let's go
ahead and try and rewrite this subtitle class

here. So we know if we go over here that all
of our, all of our subtitle classes are used

in h2. So what I want to do is actually rewrite
this in terms of our attribute selector. So

what we do is first start off with our tag
name, which is h2. But then inside of some

square brackets, what we do is type attribute
is equal to value. Okay, so obviously, we're

not going to do it like this, we're going
to have to select some sort of attribute.

What this allows us to do is actually select
certain things or certain elements based on

their attributes. So in this clip, in this
case, we want to select everything that has

the attribute of class, and we want to make
sure that the class itself is subtitled. Okay.

Now, you do not need quotation marks for these,
unlike how they were in HTML, you can see

we do need quotation marks, but in CSS, we
don't actually need them. Alright, so there

we go. We have rewritten our class here. But
we've read we've but we've written it in a

way that allows us to select it based on its
act on the attribute of it itself. So let's

go ahead and refresh the page and see what
happens, you can see that this state exactly

the same. Now nothing has changed. If I go
ahead and change this back to dot subtitle,

just like that, refresh the page, you can
see nothing's changed. So that's pretty basic.

Now, it doesn't just have to be class, we
can select it based on many different things.

So for example, if I wanted to select this
image over here, I'm going to go over to the

bottom, I could say image, image, and then
every and then the source has to be equal

to something. All right. So there we go. Now
we've done that. But there's actually more

than one type of selector. Now, usually, this
is the basic one where you just equate one

side to the other. But there's actually many
more types of selectors, which allow you to

kind of modify the attribute selectors and
make them much more powerful than they are

right now. So how do we do this? Well, I'm
going to be covering just a few of them with

you today, and showing you how you can use
them. So we have two images on this page.

Now both of them are located in this image
folder. Is there do you think that there's

any way that we can select both of them in
one go using an attribute selector? Well,

there actually is. So here's what we have
to do. First of all, let's find the common

factor between these two images. They both
are contained inside this folder. So they

both start definitely start with this path,
dot dot slash IMG slash, both of them are

going to contain this. And if we actually
go back and look, you can see that both images

actually do contain this link here, wherever
the other images, there it is. So there we

go. Now we've done that. But remember that
this is direct equating this has to be equal

to this. And unfortunately, neither of them
are equal to that. So how do you think we

fix this? Well, all we have to do is put a
carrot behind the attribute, just like this.

So what this says is every single image where
the source contains or starts with, sorry,

yeah, starts with this piece of information,
what comes after, it doesn't matter. But what

we're doing is selecting all of the images
where the source attribute starts with this

value right here. So this is you can already
see how powerful this is. Now, if we go ahead

and refresh the page, obviously, we can't
see anything because we didn't add any styles.

But I'm going to go ahead and add a quick
style for you. Or you don't need to know how

to do this,

I'm actually going to make it a little bit
more obvious. So you don't need to know how

to do this. We're going to cover it later.
But you can see now both images are covered

in black. Okay. So there we go. That's just
one way, one of the selectors we can do, we

can also change this to $1 sign, and in this
case, it's going to be make sure that the

source attribute ends with this value. Okay.
So there we go, we can do that. Obviously,

the style isn't going to work anymore, because
this doesn't apply. But there's also another

one that we can do, which is using a star
the multiplication symbol. And pretty much

what this is, is if it contains it anywhere,
anywhere in the the value for beginning and

middle doesn't matter. As long as it contains
this. It's going to be there. So I'm going

to go ahead and refresh and you can see now
that works because both of them do contain

this. So those are the three basic ones, but
there's also some more complicated selectors

now I'm going to go ahead and cover them.
But you don't exactly need to know these,

because they're a little bit complicated.
So I'm just going to go ahead and do them.

The first one is called a whitespace attribute
selector. So pretty much, if you don't know

this already, you can actually add multiple
classes to something in HTML. So I'm actually

going to go ahead and add another class to
the subtitles. And I'm just going to call

it just something random particle subtitle.
Obviously, it's a little bit confusing, but

just bear with me. So you can actually add
multiple classes or multiple arguments separated

by white spaces or spaces, inside these inside
these attributes. Now, obviously, this is

specific to some very small, a very small
number of attributes, where you can do this

now just keep that in mind. For now, what
we're going to do is go forward and start

using this. So I'm going to go ahead and select
anything that contains this, this class specifically.

Now I couldn't do you know, maybe the attribute
selector where it ends in this or contains

it, but there is another selector that we
can use. So I'm going to go ahead and say

h2. And of course, the attribute is class.
And it's this symbol, whoops, it's this symbol,

okay, and then equals, and then our value
in this in this case, it's going to be our

class, which is article subtitle. All right.
So now we can go ahead and add whatever you

want. So I'm actually going to go ahead and
give it a background. Now, again, you do not

need to know what this is yet. I'm just trying
to vary up the properties a little bit here.

So let's go ahead and refresh the page and
see what happens, you can see that a green

background has been added to this, I'm not
going to try hovering over that it's a little

bit different compensate, but you can see
that a green background has been added to

it. Now, this could be used for a using a
contain attribute selector. But this is a

little bit more specific. And it only works
for things that are separated by whitespace.

So if you want to isolate certain elements
that contain a certain class x, for example,

you can do it with these class attributes.
And that would work perfectly. So the next

selector I'm going to talk about is a little
bit more complicated. And it's very similar

to the first step, the first one that we talked
about, which was the general attribute selector,

the one where, where it's exactly quality.
But there's a little bit of a difference here.

There's actually one exception to this. Now,
I'm going to go ahead and demonstrate it here.

Okay. So pretty much what this is saying is
fine, every h2, where the class is equal either

equal to directly article dash subtitle, or
article dash subtitle with a dash. So, again,

it does have to start with this. So it can't
just be containing followed by a dash, it

does have to start with this. So why would
you want to use something like this? Why can't

you just use the exact equality? Well, this
is a pretty basic site right here. Now, we're

not really doing anything complicated, or
any multiple stylesheets or anything like

that. But sometimes when you have want to
have multiple elements, or you want to build

libraries, you can create multiple elements
that are followed by an ID. So for example,

just list them here. I'm gonna actually put
this in a comment. So I could have subtitle,

dash, and then some Id like that subtitle,
dash, and then again, some ID. So you can

see why we would use something like this,
pretty much. What you want to do is select

everything that

I'm actually going to make it a little bit
more obvious. So you don't need to know how

to do this. We're going to cover it later.
But you can see now both images are covered

in black. Okay. So there we go. That's just
one way, one of the selectors we can do, we

can also change this to $1 sign, and in this
case, it's going to be make sure that the

source attribute ends with this value. Okay.
So there we go, we can do that. Obviously,

the style isn't going to work anymore, because
this doesn't apply. But there's also another

one that we can do, which is using a star
the multiplication symbol. And pretty much

what this is, is if it contains it anywhere,
anywhere in the the value for beginning and

middle doesn't matter. As long as it contains
this. It's going to be there. So I'm going

to go ahead and refresh and you can see now
that works because both of them do contain

this. So those are the three basic ones, but
there's also some more complicated selectors

now I'm going to go ahead and cover them.
But you don't exactly need to know these,

because they're a little bit complicated.
So I'm just going to go ahead and do them.

The first one is called a whitespace attribute
selector. So pretty much, if you don't know

this already, you can actually add multiple
classes to something in HTML. So I'm actually

going to go ahead and add another class to
the subtitles. And I'm just going to call

it just something random particle subtitle.
Obviously, it's a little bit confusing, but

just bear with me. So you can actually add
multiple classes or multiple arguments separated

by white spaces or spaces, inside these inside
these attributes. Now, obviously, this is

specific to some very small, a very small
number of attributes, where you can do this

now just keep that in mind. For now, what
we're going to do is go forward and start

using this. So I'm going to go ahead and select
anything that contains this, this class specifically.

Now I couldn't do you know, maybe the attribute
selector where it ends in this or contains

it, but there is another selector that we
can use. So I'm going to go ahead and say

h2. And of course, the attribute is class.
And it's this symbol, whoops, it's this symbol,

okay, and then equals, and then our value
in this in this case, it's going to be our

class, which is article subtitle. All right.
So now we can go ahead and add whatever you

want. So I'm actually going to go ahead and
give it a background. Now, again, you do not

need to know what this is yet. I'm just trying
to vary up the properties a little bit here.

So let's go ahead and refresh the page and
see what happens, you can see that a green

background has been added to this, I'm not
going to try hovering over that it's a little

bit different compensate, but you can see
that a green background has been added to

it. Now, this could be used for a using a
contain attribute selector. But this is a

little bit more specific. And it only works
for things that are separated by whitespace.

So if you want to isolate certain elements
that contain a certain class x, for example,

you can do it with these class attributes.
And that would work perfectly. So the next

selector I'm going to talk about is a little
bit more complicated. And it's very similar

to the first step, the first one that we talked
about, which was the general attribute selector,

the one where, where it's exactly quality.
But there's a little bit of a difference here.

There's actually one exception to this. Now,
I'm going to go ahead and demonstrate it here.

Okay. So pretty much what this is saying is
fine, every h2, where the class is equal either

equal to directly article dash subtitle, or
article dash subtitle with a dash. So, again,

it does have to start with this. So it can't
just be containing followed by a dash, it

does have to start with this. So why would
you want to use something like this? Why can't

you just use the exact equality? Well, this
is a pretty basic site right here. Now, we're

not really doing anything complicated, or
any multiple stylesheets or anything like

that. But sometimes when you have want to
have multiple elements, or you want to build

libraries, you can create multiple elements
that are followed by an ID. So for example,

just list them here. I'm gonna actually put
this in a comment. So I could have subtitle,

dash, and then some Id like that subtitle,
dash, and then again, some ID. So you can

see why we would use something like this,
pretty much. What you want to do is select

everything that

has subtitle and then the dash in it. And
you're probably also wondering, okay, why

can't you just use one or the other selectors
like something that starts with it? Well,

sometimes this is contained in a chain, or
sometimes there's multiple dashes. And on

top of that, some sometimes it may change,
you know, maybe this could be in the middle

of 15 other classes. So you can see why you'd
want to use something like this. And although

it's not used very commonly, it's still very
important to know. Alright, so those are pretty

much all of the advanced Arctic attribute
selectors. Like I said, You aren't going to

use these very commonly. But again, it is
good to know they are very powerful selectors.

So yeah, that's pretty much it. Go ahead.
Like I said, with every single video practice,

and just try using the selectors on your own.
All of the project files are available on

GitHub, the they the link to the repository
was posted at the beginning of the course.

So you can go ahead and check that out if
you want to download the files and work with

them. But other than that, there we go. That's
pretty much it for selectors now we can actually

move on and start using CSS. Alright, let's
move on.

has subtitle and then the dash in it. And
you're probably also wondering, okay, why

can't you just use one or the other selectors
like something that starts with it? Well,

sometimes this is contained in a chain, or
sometimes there's multiple dashes. And on

top of that, some sometimes it may change,
you know, maybe this could be in the middle

of 15 other classes. So you can see why you'd
want to use something like this. And although

it's not used very commonly, it's still very
important to know. Alright, so those are pretty

much all of the advanced Arctic attribute
selectors. Like I said, You aren't going to

use these very commonly. But again, it is
good to know they are very powerful selectors.

So yeah, that's pretty much it. Go ahead.
Like I said, with every single video practice,

and just try using the selectors on your own.
All of the project files are available on

GitHub, the they the link to the repository
was posted at the beginning of the course.

So you can go ahead and check that out if
you want to download the files and work with

them. But other than that, there we go. That's
pretty much it for selectors now we can actually

move on and start using CSS. Alright, let's
move on.

I'm not really going to talk a lot in this
video because there's not really much to talk

about, but this video and the next are very
important because right now you're probably

just piecing things together about the whole
way that we use CSS. And we've had to use

a couple properties here and there, but you
Probably don't actually know what these brackets

do, or how selectors work or how any of this
is actually put together. So that's what I'm

going to be doing in the next few videos is
explaining how all of this comes together.

And once we learn that, we can actually move
on to the fun part, which is using CSS and

styling this website. So first thing I want
to explain is properties. Now, we've talked

a little bit about properties here and there,
because we've needed them to demonstrate points

on how selectors work. Now, obviously, it
might have been better if we use properties

first. But in my opinion, it's better that
you learn selectors before you learn properties.

Because if you learn selectors First, you'll
be able to understand the premise or the theory

behind CSS, and how things work. Whereas if
you just learn properties first, then most

of your focus will be on how the properties
work and not the selectors. And I feel that

it's much more important that you learn the
selectors before the properties so that you

can actually understand CSS and how it works
as a whole. So that aside, let's move on to

properties. Now, like I said, we've used these
a little bit in the past, we haven't actually

talked about them in detail. So this is a
property. Now, they're contained within selectors.

And they pretty much define the way that CSS
is used on what goes into the CSS. Now a selector

is going to target the element. But the actual
properties are what give it its change. And

what make it what it is, without the or without
properties than the selectors would be completely

useless. So let's go ahead and talk about
the parts of properties. Now first of all,

a colon is always needed, you cannot use a
property without a colon and a semi colon,

the colon comes after the property. Now the
property is pretty much defining what is going

to change the color, the background, the positioning,
the height, the width, there are so many properties

out there. And they are all used in different
ways. And then next is the value. Now, most

of the time, you can actually use multiple
types of values. But for something like color,

there are very specific rules that you need
to use for them. And we're actually going

to be learning those rules and how to use
colors in the next section. But for now, the

just think of the value as a key or Well,
not a key, the value is sort of the guideline

towards the property, the value is like the
value to the attribute that actually defines

what's changing. and the value actually gives
it that change. So just keep that in mind.

So that's pretty much it for properties, it's
very simple. And we're going to get lots of

exposure to them as we move through the course.
But for now, all you need to keep in mind

is that properties have two components, the
actual property itself, which is kind of the

guideline on what's changing, followed by
a colon, and then the value itself, which

is going to be the change or the type of change
that happens in our our element. So what happens

through our selector, and at the end of it
all, you always put a semi colon, if we remove

the semi colon, it's not going to work. So
yeah, that's pretty much it for properties.

Let's move on. So this is going to be the
final video on or in this section, we're not

really going to be doing anything or styling
the website. But for now, I just want to talk

a little bit about a very important part of
CSS. Now, this is pretty much going to define

the way that you look at CSS. And we've written
a lot of CSS code here. Well, we're not really

looking at properties yet. But we've covered
a lot of different selectors and how they

work. But now we need to put the two together,
we know what properties are. And we definitely

know what selectors are. So we need to know
how these two work together. Now, I've talked

a little bit about this in the past, but we
haven't actually gone through it in detail.

So that's what I'm going to be doing in this
video. So first of all, if you look at all

of the CSS code, we can see a pattern involved
here. First of all, in every single one of

these there are these curly braces. And on
top of that in every single one, there is

some italicized text, which is due to the
development tool that we're using, but there's

some italicized text, and then some other
text here, and there's always a colon and

a semi colon. And on top of that before every
first curly brace, there's always going to

be some form of text here, which is our selectors.
But how do these actually work together? So

this is very important for something called
the CSS a general rule. And it's pretty much

going to teach you how all CSS is supposed
to look. So first of all, there's always three

parts to your

I'm not really going to talk a lot in this
video because there's not really much to talk

about, but this video and the next are very
important because right now you're probably

just piecing things together about the whole
way that we use CSS. And we've had to use

a couple properties here and there, but you
Probably don't actually know what these brackets

do, or how selectors work or how any of this
is actually put together. So that's what I'm

going to be doing in the next few videos is
explaining how all of this comes together.

And once we learn that, we can actually move
on to the fun part, which is using CSS and

styling this website. So first thing I want
to explain is properties. Now, we've talked

a little bit about properties here and there,
because we've needed them to demonstrate points

on how selectors work. Now, obviously, it
might have been better if we use properties

first. But in my opinion, it's better that
you learn selectors before you learn properties.

Because if you learn selectors First, you'll
be able to understand the premise or the theory

behind CSS, and how things work. Whereas if
you just learn properties first, then most

of your focus will be on how the properties
work and not the selectors. And I feel that

it's much more important that you learn the
selectors before the properties so that you

can actually understand CSS and how it works
as a whole. So that aside, let's move on to

properties. Now, like I said, we've used these
a little bit in the past, we haven't actually

talked about them in detail. So this is a
property. Now, they're contained within selectors.

And they pretty much define the way that CSS
is used on what goes into the CSS. Now a selector

is going to target the element. But the actual
properties are what give it its change. And

what make it what it is, without the or without
properties than the selectors would be completely

useless. So let's go ahead and talk about
the parts of properties. Now first of all,

a colon is always needed, you cannot use a
property without a colon and a semi colon,

the colon comes after the property. Now the
property is pretty much defining what is going

to change the color, the background, the positioning,
the height, the width, there are so many properties

out there. And they are all used in different
ways. And then next is the value. Now, most

of the time, you can actually use multiple
types of values. But for something like color,

there are very specific rules that you need
to use for them. And we're actually going

to be learning those rules and how to use
colors in the next section. But for now, the

just think of the value as a key or Well,
not a key, the value is sort of the guideline

towards the property, the value is like the
value to the attribute that actually defines

what's changing. and the value actually gives
it that change. So just keep that in mind.

So that's pretty much it for properties, it's
very simple. And we're going to get lots of

exposure to them as we move through the course.
But for now, all you need to keep in mind

is that properties have two components, the
actual property itself, which is kind of the

guideline on what's changing, followed by
a colon, and then the value itself, which

is going to be the change or the type of change
that happens in our our element. So what happens

through our selector, and at the end of it
all, you always put a semi colon, if we remove

the semi colon, it's not going to work. So
yeah, that's pretty much it for properties.

Let's move on. So this is going to be the
final video on or in this section, we're not

really going to be doing anything or styling
the website. But for now, I just want to talk

a little bit about a very important part of
CSS. Now, this is pretty much going to define

the way that you look at CSS. And we've written
a lot of CSS code here. Well, we're not really

looking at properties yet. But we've covered
a lot of different selectors and how they

work. But now we need to put the two together,
we know what properties are. And we definitely

know what selectors are. So we need to know
how these two work together. Now, I've talked

a little bit about this in the past, but we
haven't actually gone through it in detail.

So that's what I'm going to be doing in this
video. So first of all, if you look at all

of the CSS code, we can see a pattern involved
here. First of all, in every single one of

these there are these curly braces. And on
top of that in every single one, there is

some italicized text, which is due to the
development tool that we're using, but there's

some italicized text, and then some other
text here, and there's always a colon and

a semi colon. And on top of that before every
first curly brace, there's always going to

be some form of text here, which is our selectors.
But how do these actually work together? So

this is very important for something called
the CSS a general rule. And it's pretty much

going to teach you how all CSS is supposed
to look. So first of all, there's always three

parts to your

to your selector here, there is the selector
itself. There's the curly braces, which actually

represents something called a CSS block. And
then there's the properties. So first of all,

let's talk about the selector. Now, we all
know that selector defines what elements you're

trying to collect or target on your HTML page.
A selector can look any different way it can

look like this with some weird symbols. It
could have colons and pseudo selectors or

it can just It looks something very plain
like this. But we all know that they do something

different. And over the last few videos, we've
been covering what selectors actually do.

So now what we're going to do is go through,
and I'm going to teach you how this selector

plays in with everything else. So we have
our selector over here, this could be anything,

an element selectors, pseudo selector attribute
selector like one of these. But for now, we

have our selector. So this is going to target
some element on a page. Now, the part we haven't

talked about is something called the CSS block.
So pretty much once you select something,

you need to define all of your styles. And
as we know, all of your styles have to go

in between these two curly braces. So that's
what we call a CSS block. The curly braces

define the beginning and end of this block.
And it can be empty, it doesn't need to have

anything inside it. But what's going on here
is this block is going to contain all of the

styles that are then going to be targeted
towards our selector. And then of course,

we have the properties. So all of these have
only had one property where you can actually

do more than one property. So a property looks
like this property, a colon, and then a value,

and a semicolon. So the property is going
to be the name of the actual style, this can

be color background, and we're going to learn
a bunch of these throughout this course. But

this could be anything. On the other hand,
the value has to be sort of targeted or matching

the style of the property. So for example,
if this was a color, we can use pixels, because

pixels are for size. So there are many different
ways that you can use these different values.

And they all depend on your property. So what
I didn't show you is you can actually have

more than one property. Now these can be in
any style, as long as they have the semi colon

and the colon. And they come inside the block.
So this can be property to add value to. And

you can put pretty much as many styles as
you want in here. So for example, if you wanted

to style a subtitle, and you wanted to change
the font size, the color, and the background

all at the same time, you don't need to create
three separate CSS blocks, you can do it all

in one. And that's the real power of CSS is
that you don't have you can keep your code

concise and clean, without having to create
all of these different blocks. So this is

pretty much the general rule, you have to
follow this pretty much for all of the CSS

you write using a selector and then different
properties contained inside of a block. So

like I said, we're going to get much more
experience with actually using CSS, as we

delve more into CSS and learning all of the
different features it has to offer. Alright,

let's move on.

to your selector here, there is the selector
itself. There's the curly braces, which actually

represents something called a CSS block. And
then there's the properties. So first of all,

let's talk about the selector. Now, we all
know that selector defines what elements you're

trying to collect or target on your HTML page.
A selector can look any different way it can

look like this with some weird symbols. It
could have colons and pseudo selectors or

it can just It looks something very plain
like this. But we all know that they do something

different. And over the last few videos, we've
been covering what selectors actually do.

So now what we're going to do is go through,
and I'm going to teach you how this selector

plays in with everything else. So we have
our selector over here, this could be anything,

an element selectors, pseudo selector attribute
selector like one of these. But for now, we

have our selector. So this is going to target
some element on a page. Now, the part we haven't

talked about is something called the CSS block.
So pretty much once you select something,

you need to define all of your styles. And
as we know, all of your styles have to go

in between these two curly braces. So that's
what we call a CSS block. The curly braces

define the beginning and end of this block.
And it can be empty, it doesn't need to have

anything inside it. But what's going on here
is this block is going to contain all of the

styles that are then going to be targeted
towards our selector. And then of course,

we have the properties. So all of these have
only had one property where you can actually

do more than one property. So a property looks
like this property, a colon, and then a value,

and a semicolon. So the property is going
to be the name of the actual style, this can

be color background, and we're going to learn
a bunch of these throughout this course. But

this could be anything. On the other hand,
the value has to be sort of targeted or matching

the style of the property. So for example,
if this was a color, we can use pixels, because

pixels are for size. So there are many different
ways that you can use these different values.

And they all depend on your property. So what
I didn't show you is you can actually have

more than one property. Now these can be in
any style, as long as they have the semi colon

and the colon. And they come inside the block.
So this can be property to add value to. And

you can put pretty much as many styles as
you want in here. So for example, if you wanted

to style a subtitle, and you wanted to change
the font size, the color, and the background

all at the same time, you don't need to create
three separate CSS blocks, you can do it all

in one. And that's the real power of CSS is
that you don't have you can keep your code

concise and clean, without having to create
all of these different blocks. So this is

pretty much the general rule, you have to
follow this pretty much for all of the CSS

you write using a selector and then different
properties contained inside of a block. So

like I said, we're going to get much more
experience with actually using CSS, as we

delve more into CSS and learning all of the
different features it has to offer. Alright,

let's move on.

So this is the start of a new section. And
now that we've learned all we need to know

about selectors, we're going to actually start
styling up our website and making it look

good. So first of all, let's just talk about
coloring. In general, I mean, what is coloring?

And what are we supposed to do with it. So
as we know, we already have a bunch of colors

here. And they all look fine. But what we're
actually trying to do here is color our website

in a way that makes it look modern, and appealing
to users. So we're going to be learning a

bunch of different techniques that you can
use to color your website. Now we've already

used one in the past, and it's a very common
one. And that is, of course, the color property.

Now we're going to be talking more about this
in the next video and using it in depth. But

first thing I want to talk about is the different
types of colors, because there's actually

more than one. So first of all, we've all
used and while you've at least seen me use

the colors have given by name so for example,
red, green, blue, and purple. But there's

actually more than that there's so much more
to colors than just those names, because as

you know, they're actually quite limiting,
you can't really change the color and choose

as you want. So what I'm here to teach you
about is the three different types of colors

and how they work. So the first one is obviously
the CSS color codes or names. And what they

do is is pretty much given a name, and they
each have a designated color. So this is a

really easy way for testing colors. For example,
if you want to test if a property works, as

we saw at the beginning of this course. And
you can also use them for you know, maybe

quick fixes or trying to just try out different
colors. But once you get into the really specific

detailed web design, and once you start producing
your website properly, you're going to want

more than just the color CSS gives you. So
I've actually attached to the lecture resources,

this website here, you have a bunch of different
CSS color codes. And you can see that there's

actually a huge range of them, we only use
the basic ones that are quite vibrant and

they really hit the eyes very hard. But you
can see there's actually a lot more than what

we just use. The only problem is nobody wants
to memorize all of these different names.

So what we're actually going to be doing is
learning how to use these two, which are the

ones I'm going to be talking about in this
video. So first of all, let's talk a little

bit about hex code. Okay. So first of all,
I have a color picker over here just to demonstrate

how this whole thing works. We actually don't
need this for now. So I'm going to discipline

full screen. So this is a color picker that
I found on Google, you can go ahead and search

it anywhere. But I like using Google's provided
one, because it provides you with both the

hex code and the RGB code. Don't worry, we'll
talk about those in just a second. So first

of all, you can slide up and down this thing
and choose whichever color you want. And you

can see that these two codes change. So what
do they actually mean? Well, first, let's

talk about the hex code. So we all know that
when you're normally using numbers, you range

from zero to nine. So any given number in
this new in that numeral system can be made

up of 012, and all the way up to nine. So
in that case, there's 10 possible combinations.

But in hex code, there's actually 16 different
possible combinations, you can go from zero

to nine, and then A to F. So for example,
let's just take this right here, this could

actually be converted into a number if we
wanted to, suppose B, actually stands for

12, because it goes zero to nine, and then
a B, so 12. And you can actually convert this

into a number, which is very interesting.
So I'm not really going to be talking about

the applications of hex code in this in this
video, because that goes all the way down

into computer science. And we're not really
looking at that now. But one thing we can

do is actually create colors based on this.
So first of all, you'll notice that our code

here starts off with a hashtag. And then you
have six digits. So each one can have 16 possible

combinations. But as we know, color any color
is made up of either red, green, or blue,

at least on the computer for the standard
color palette. So it's made up of red, green,

and blue. Now basically, this hex code is
split up into three two digit pairs. So the

first pair of numbers is meant to represent
the amount of red in the color, the second,

the amount of green, and the third, the amount
of blue, RGB. And these parents can range

from 00, which means none of that color to
F F, which is the highest value. Remember,

hexadecimal goes from zero to f. So I'm just
going to choose something very basic here,

like a standard blue. You can see here that
this is the purest blue that you can get.

Pretty much what this is saying is the first
two is 00, which means there's no red, the

second pair, or Yeah, the second pair is also
00, which means no green. But then the third

is F F, which means all blue. So this is pretty
easy. So if we go to something like white,

for example, this would have f, f, f, f, f
f, which is all red, or green, or blue, which

actually creates white. And if we chose black,
you can see that that's zero. So this is a

pretty hard thing to understand. Once you
get into some of these more complicated colors.

Again, we don't really use hexadecimal in
normal in normal use, when we're creating

colors or writing code, we don't really use
these numbers. So it's actually much easier

to work with RGB codes. So RGB is a little
bit different in the style that it's written.

But it all represents the same concept. Pretty
much there are three numbers here. And these

aren't hexadecimal numbers, these are just
normal numbers, you have three numbers, the

first for red, the second for green, and the
third for blue, just like this one, except

in this case, the numbers can go from zero
to 255, zero being the minimum and 255 being

the maximum. So this is actually much easier
to read. Let's go back to our blue here. And

I'm actually just going to write the code
here. So you can see that there's zero red,

zero blue, and 255. Sorry, is your red zero
green, and 255 blue, which is the maximum.

And obviously, you can see that once we go
back to those complicated colors. When you

look here, it's quite complicated to understand.
But when we look at the RGB code, we can see

that there's a moderate amount of red, a large
amount of green and large amounts of blue,

and therefore it should theoretically be a
cold color. Now again, you don't really need

to know how to construct these QR codes from
your head, they're quite hard to understand.

So what I would recommend is when you're designing
these colors, or designing these, these websites,

I would recommend you just go and use a color
picker, too much easy too much, much easier

to decide. And you can also get a lot more
experience hands on experience with these

colors rather than memorizing all the theory
behind them. So both of these will work fine

and in the next video I'm going to show you
how to actually use these codes in our in

our website and actually use them to style
and color text. Alright, let's move on.

So this is the start of a new section. And
now that we've learned all we need to know

about selectors, we're going to actually start
styling up our website and making it look

good. So first of all, let's just talk about
coloring. In general, I mean, what is coloring?

And what are we supposed to do with it. So
as we know, we already have a bunch of colors

here. And they all look fine. But what we're
actually trying to do here is color our website

in a way that makes it look modern, and appealing
to users. So we're going to be learning a

bunch of different techniques that you can
use to color your website. Now we've already

used one in the past, and it's a very common
one. And that is, of course, the color property.

Now we're going to be talking more about this
in the next video and using it in depth. But

first thing I want to talk about is the different
types of colors, because there's actually

more than one. So first of all, we've all
used and while you've at least seen me use

the colors have given by name so for example,
red, green, blue, and purple. But there's

actually more than that there's so much more
to colors than just those names, because as

you know, they're actually quite limiting,
you can't really change the color and choose

as you want. So what I'm here to teach you
about is the three different types of colors

and how they work. So the first one is obviously
the CSS color codes or names. And what they

do is is pretty much given a name, and they
each have a designated color. So this is a

really easy way for testing colors. For example,
if you want to test if a property works, as

we saw at the beginning of this course. And
you can also use them for you know, maybe

quick fixes or trying to just try out different
colors. But once you get into the really specific

detailed web design, and once you start producing
your website properly, you're going to want

more than just the color CSS gives you. So
I've actually attached to the lecture resources,

this website here, you have a bunch of different
CSS color codes. And you can see that there's

actually a huge range of them, we only use
the basic ones that are quite vibrant and

they really hit the eyes very hard. But you
can see there's actually a lot more than what

we just use. The only problem is nobody wants
to memorize all of these different names.

So what we're actually going to be doing is
learning how to use these two, which are the

ones I'm going to be talking about in this
video. So first of all, let's talk a little

bit about hex code. Okay. So first of all,
I have a color picker over here just to demonstrate

how this whole thing works. We actually don't
need this for now. So I'm going to discipline

full screen. So this is a color picker that
I found on Google, you can go ahead and search

it anywhere. But I like using Google's provided
one, because it provides you with both the

hex code and the RGB code. Don't worry, we'll
talk about those in just a second. So first

of all, you can slide up and down this thing
and choose whichever color you want. And you

can see that these two codes change. So what
do they actually mean? Well, first, let's

talk about the hex code. So we all know that
when you're normally using numbers, you range

from zero to nine. So any given number in
this new in that numeral system can be made

up of 012, and all the way up to nine. So
in that case, there's 10 possible combinations.

But in hex code, there's actually 16 different
possible combinations, you can go from zero

to nine, and then A to F. So for example,
let's just take this right here, this could

actually be converted into a number if we
wanted to, suppose B, actually stands for

12, because it goes zero to nine, and then
a B, so 12. And you can actually convert this

into a number, which is very interesting.
So I'm not really going to be talking about

the applications of hex code in this in this
video, because that goes all the way down

into computer science. And we're not really
looking at that now. But one thing we can

do is actually create colors based on this.
So first of all, you'll notice that our code

here starts off with a hashtag. And then you
have six digits. So each one can have 16 possible

combinations. But as we know, color any color
is made up of either red, green, or blue,

at least on the computer for the standard
color palette. So it's made up of red, green,

and blue. Now basically, this hex code is
split up into three two digit pairs. So the

first pair of numbers is meant to represent
the amount of red in the color, the second,

the amount of green, and the third, the amount
of blue, RGB. And these parents can range

from 00, which means none of that color to
F F, which is the highest value. Remember,

hexadecimal goes from zero to f. So I'm just
going to choose something very basic here,

like a standard blue. You can see here that
this is the purest blue that you can get.

Pretty much what this is saying is the first
two is 00, which means there's no red, the

second pair, or Yeah, the second pair is also
00, which means no green. But then the third

is F F, which means all blue. So this is pretty
easy. So if we go to something like white,

for example, this would have f, f, f, f, f
f, which is all red, or green, or blue, which

actually creates white. And if we chose black,
you can see that that's zero. So this is a

pretty hard thing to understand. Once you
get into some of these more complicated colors.

Again, we don't really use hexadecimal in
normal in normal use, when we're creating

colors or writing code, we don't really use
these numbers. So it's actually much easier

to work with RGB codes. So RGB is a little
bit different in the style that it's written.

But it all represents the same concept. Pretty
much there are three numbers here. And these

aren't hexadecimal numbers, these are just
normal numbers, you have three numbers, the

first for red, the second for green, and the
third for blue, just like this one, except

in this case, the numbers can go from zero
to 255, zero being the minimum and 255 being

the maximum. So this is actually much easier
to read. Let's go back to our blue here. And

I'm actually just going to write the code
here. So you can see that there's zero red,

zero blue, and 255. Sorry, is your red zero
green, and 255 blue, which is the maximum.

And obviously, you can see that once we go
back to those complicated colors. When you

look here, it's quite complicated to understand.
But when we look at the RGB code, we can see

that there's a moderate amount of red, a large
amount of green and large amounts of blue,

and therefore it should theoretically be a
cold color. Now again, you don't really need

to know how to construct these QR codes from
your head, they're quite hard to understand.

So what I would recommend is when you're designing
these colors, or designing these, these websites,

I would recommend you just go and use a color
picker, too much easy too much, much easier

to decide. And you can also get a lot more
experience hands on experience with these

colors rather than memorizing all the theory
behind them. So both of these will work fine

and in the next video I'm going to show you
how to actually use these codes in our in

our website and actually use them to style
and color text. Alright, let's move on.

So in this video, I am going to be starting
to color and style our website. So we're going

to go through and use the selector skills
that we've learned in the previous section

to actually go through and start adding some
color. On top of that, we're going to be using

the skills we learned about hex code and RGB
color codes to vary up our style or method

of coloring things. Because in the past, like
I've said, we've just used some basic techniques

with CSS color codes. And now we're going
to be working with our own custom colors.

So first of all, let's go ahead and start
adding some classes to this website to get

it set up for our styling. So first thing
I did is actually started from a clean slate

because it was getting quite messy before
and I thought that it would be better if we

started from scratch. So the first thing I'm
going to do is go ahead and add a class or

an ID actually, I think would be better to
our title, since there's only one of them.

So we're gonna go ahead and add an ID of title.
And hopefully, you know how to do this from

the skills you learned in the last section.
Let's also go ahead and add some classes for

our paragraph text. And because of course,
we have more than one paragraph, we're actually

going to go ahead and use a class. So I'm
going to use this. And I'm going to say, paragraph.

Or I'm just going to say para shortening text.
So I'm going to go ahead and copy this class

on to our other paragraphs, instead of writing
it down. There we go. So the next thing I

want to do is go ahead and add some classes
to this list here just for convenience. So

I'm going to go ahead and add a class for
a list item. Now, obviously, we're not going

to use all of these in one go. But I was just
considering to add them so that when we get

into it, we can actually go ahead and use
them without having to go ahead and add these

classes every single time. So there we go,
we did that. Let's also go ahead and add a

class to our link, link. And now we have our
table items. We're going to leave this for

now because it might take a long time. Oh,
we'll we'll style this when we get later into

our section. So there we go, we did that.
Now the last thing I want to do is just go

ahead and add a couple classes to our inputs
here. So I'm going to go ahead and add some

classes. So class is form input. And this
is actually quite commonplace to add, or write

class names and Id names with these. So with
dashes, instead of you know snake case, which

is using capital letters in like that. It's
just a convention in CSS. So let's go ahead

and add the same class here. Just like that.
There we go. And we'll also we're also going

to go ahead and add a subtitle class to our
subtitles, I'm gonna go ahead and do that.

There we go. Just copy that. And over to our
other subtitles. And once we're done with

that, we'll move on and start coloring our
text. Right, there we go. So everything's

looking good. That means nothing has gone
wrong. Let's go ahead and start styling our

text. So first thing I want to do is style
our header here. So obviously, you don't really

want to go crazy with text colors. It's more
for backgrounds. But I think we'll just experiment

a little bit for this video with some of our
colors. So first of all, I'm going to need

to select it. This is the first part of our
general rule. So because it's an ID, I'm going

to go hash, and then title, open up our block
with our curly braces. And now we're going

to start writing our property. So if you don't
know this already, the property is going to

be color. This is the text of the the color
of the text. And I know it doesn't look like

it since it doesn't say tech stash color,
similar to a bunch of other properties. But

this is the way to color your text. So here,
we can go ahead and type a property or sorry,

our value. Now before we've used colors, like
steel blue, which is a CSS color code. But

now let's go ahead and challenge ourselves
and start actually messing with these colors

using our own color picker. So first of all,
I want to choose a color that I really like.

And I'm going to go for a sort of deep orange.
So we don't want to go for something too dark.

But we also don't want to go for something
too light so that it's hard on the eyes. Now

I think a color like this is good. Now how
would we actually implement this? Well, we

just copy and paste it. And if you're thinking
that that's the right way, well, then you're

right, it's actually very easy. All you have
to do is copy your hex or RGB code and paste

it into

So in this video, I am going to be starting
to color and style our website. So we're going

to go through and use the selector skills
that we've learned in the previous section

to actually go through and start adding some
color. On top of that, we're going to be using

the skills we learned about hex code and RGB
color codes to vary up our style or method

of coloring things. Because in the past, like
I've said, we've just used some basic techniques

with CSS color codes. And now we're going
to be working with our own custom colors.

So first of all, let's go ahead and start
adding some classes to this website to get

it set up for our styling. So first thing
I did is actually started from a clean slate

because it was getting quite messy before
and I thought that it would be better if we

started from scratch. So the first thing I'm
going to do is go ahead and add a class or

an ID actually, I think would be better to
our title, since there's only one of them.

So we're gonna go ahead and add an ID of title.
And hopefully, you know how to do this from

the skills you learned in the last section.
Let's also go ahead and add some classes for

our paragraph text. And because of course,
we have more than one paragraph, we're actually

going to go ahead and use a class. So I'm
going to use this. And I'm going to say, paragraph.

Or I'm just going to say para shortening text.
So I'm going to go ahead and copy this class

on to our other paragraphs, instead of writing
it down. There we go. So the next thing I

want to do is go ahead and add some classes
to this list here just for convenience. So

I'm going to go ahead and add a class for
a list item. Now, obviously, we're not going

to use all of these in one go. But I was just
considering to add them so that when we get

into it, we can actually go ahead and use
them without having to go ahead and add these

classes every single time. So there we go,
we did that. Let's also go ahead and add a

class to our link, link. And now we have our
table items. We're going to leave this for

now because it might take a long time. Oh,
we'll we'll style this when we get later into

our section. So there we go, we did that.
Now the last thing I want to do is just go

ahead and add a couple classes to our inputs
here. So I'm going to go ahead and add some

classes. So class is form input. And this
is actually quite commonplace to add, or write

class names and Id names with these. So with
dashes, instead of you know snake case, which

is using capital letters in like that. It's
just a convention in CSS. So let's go ahead

and add the same class here. Just like that.
There we go. And we'll also we're also going

to go ahead and add a subtitle class to our
subtitles, I'm gonna go ahead and do that.

There we go. Just copy that. And over to our
other subtitles. And once we're done with

that, we'll move on and start coloring our
text. Right, there we go. So everything's

looking good. That means nothing has gone
wrong. Let's go ahead and start styling our

text. So first thing I want to do is style
our header here. So obviously, you don't really

want to go crazy with text colors. It's more
for backgrounds. But I think we'll just experiment

a little bit for this video with some of our
colors. So first of all, I'm going to need

to select it. This is the first part of our
general rule. So because it's an ID, I'm going

to go hash, and then title, open up our block
with our curly braces. And now we're going

to start writing our property. So if you don't
know this already, the property is going to

be color. This is the text of the the color
of the text. And I know it doesn't look like

it since it doesn't say tech stash color,
similar to a bunch of other properties. But

this is the way to color your text. So here,
we can go ahead and type a property or sorry,

our value. Now before we've used colors, like
steel blue, which is a CSS color code. But

now let's go ahead and challenge ourselves
and start actually messing with these colors

using our own color picker. So first of all,
I want to choose a color that I really like.

And I'm going to go for a sort of deep orange.
So we don't want to go for something too dark.

But we also don't want to go for something
too light so that it's hard on the eyes. Now

I think a color like this is good. Now how
would we actually implement this? Well, we

just copy and paste it. And if you're thinking
that that's the right way, well, then you're

right, it's actually very easy. All you have
to do is copy your hex or RGB code and paste

it into

into here just like that. Now if I go ahead
and refresh the page, you can see that that

color is being reflected on our title. Now
I would recommend instead of using your hex

code, go ahead and add an RGB code. And I'll
tell you why later in this section, but for

now, just think that this is better because
it's a little bit more flexible, and you can

change it easily. So on top of that, use an
RGB color code really allows you to mess around

with the colors in a way that if you didn't
know hex code you wouldn't be able to. So

for example, let's say I wanted to increase
the amount of blue in this, all they would

have to do is go ahead and just change it.
Let's say I wanted to go with 150. Blue, you

can see that that color has completely changed
by adding more blue. By doing it, we've kind

of mixed around the colors and created this
pinkish color. Imagine you're working with

a color palette, instead of a digital kind
of weird color mixer. Think of you have a

giant pile of red, green and blue. And what
you're doing here is changing all of the proportions

to get just the color you want. So let's go
ahead and change this color back to nine.

There we go. Now we have our orange color
there. So let's go ahead and also style up

our, our subtitles here. And one common thing
that you do with hierarchies of text. So for

example, titles and then sub titles and paragraph
is usually your titles or your high up on

the hierarchy are going to have very dark
colors. And then your sub titles are things

that are lower on the hierarchy are going
to have around the same color scheme, but

they're going to be a little lighter. So what
I'm going to do is just go ahead to my color

picker and drag this up a little bit. Of course,
you could do this by just increasing all of

the values. But I actually prefer to use the
color picker because I could really see what's

going on. So I'm going to choose something
a little bit lighter, maybe something around

here. Again, we don't want it to be too light,
because then it's going to be too hard on

the eyes. So I think I'm going to go something
around here. So we're going to go ahead and

copy the code. Now let's go ahead and add
our selector. So I'm going to go dot subtitle,

because remember, it's a class, then I'm going
to use my property color and paste in our

RGB color code. Let's go ahead and refresh
the page. And you can see that our subtitles

have been colored down. So there we know everything
is working really well for now. And we're

starting to get the hang of this. Now I recommend
you go ahead and try this on your own. Again,

the whole point is to be styling a website
as you go along. So I recommend you go ahead

and mess around with your own colors. Again,
you can just find this color picker by going

to Google, if you don't really like it, you
could always go to another color picker on

search for one. But you can go ahead choose
your own colors. If you don't like orange,

you can go with blue, maybe something a little
colder. It's totally up to you just get some

practice with using colors on different types
of texts, and get some more practice using

CSS on your own. Alright, let's move on.

into here just like that. Now if I go ahead
and refresh the page, you can see that that

color is being reflected on our title. Now
I would recommend instead of using your hex

code, go ahead and add an RGB code. And I'll
tell you why later in this section, but for

now, just think that this is better because
it's a little bit more flexible, and you can

change it easily. So on top of that, use an
RGB color code really allows you to mess around

with the colors in a way that if you didn't
know hex code you wouldn't be able to. So

for example, let's say I wanted to increase
the amount of blue in this, all they would

have to do is go ahead and just change it.
Let's say I wanted to go with 150. Blue, you

can see that that color has completely changed
by adding more blue. By doing it, we've kind

of mixed around the colors and created this
pinkish color. Imagine you're working with

a color palette, instead of a digital kind
of weird color mixer. Think of you have a

giant pile of red, green and blue. And what
you're doing here is changing all of the proportions

to get just the color you want. So let's go
ahead and change this color back to nine.

There we go. Now we have our orange color
there. So let's go ahead and also style up

our, our subtitles here. And one common thing
that you do with hierarchies of text. So for

example, titles and then sub titles and paragraph
is usually your titles or your high up on

the hierarchy are going to have very dark
colors. And then your sub titles are things

that are lower on the hierarchy are going
to have around the same color scheme, but

they're going to be a little lighter. So what
I'm going to do is just go ahead to my color

picker and drag this up a little bit. Of course,
you could do this by just increasing all of

the values. But I actually prefer to use the
color picker because I could really see what's

going on. So I'm going to choose something
a little bit lighter, maybe something around

here. Again, we don't want it to be too light,
because then it's going to be too hard on

the eyes. So I think I'm going to go something
around here. So we're going to go ahead and

copy the code. Now let's go ahead and add
our selector. So I'm going to go dot subtitle,

because remember, it's a class, then I'm going
to use my property color and paste in our

RGB color code. Let's go ahead and refresh
the page. And you can see that our subtitles

have been colored down. So there we know everything
is working really well for now. And we're

starting to get the hang of this. Now I recommend
you go ahead and try this on your own. Again,

the whole point is to be styling a website
as you go along. So I recommend you go ahead

and mess around with your own colors. Again,
you can just find this color picker by going

to Google, if you don't really like it, you
could always go to another color picker on

search for one. But you can go ahead choose
your own colors. If you don't like orange,

you can go with blue, maybe something a little
colder. It's totally up to you just get some

practice with using colors on different types
of texts, and get some more practice using

CSS on your own. Alright, let's move on.

So in this video, we are going to be covering
background colors. Now, I know it's a little

bit intimidating considering we've never actually
done backgrounds before. But it's very similar

to colors in the values that he uses. The
only difference is is what it's actually styling.

So I'm going to be teaching you how to create
backgrounds on your website. Now, obviously,

we're not going to go all crazy and start
creating backgrounds for everything. Because

we haven't gotten into we haven't gotten into
layout yet. And without layout backgrounds

aren't really usable. Because sometimes, especially
with colors, it just doesn't really look that

good. So what we're actually going to do is
go through and just practice with our background

for now. So the first thing I need to do is
actually look for something to create a background

on. And we all know what a background on text
looked like. Now, we don't actually know why

the background goes all the way to the edge
yet. We haven't gotten we haven't gotten into

layout yet. Once we do, you'll know how to
change that. For now though, I think it's

really fitting to go through and style this
whole page. So firstly, what selector Do we

need to use? Considering that we're trying
to select everything? How are we supposed

to create a background on every single item?
Do we go through and select everything and

add that background? Well, we actually look
at a look at our HTML page, you can see that

all of our text here is contained inside of
our body tag. So the easiest way to select

this, because again, there's only one of our
body, we can just use an element selector.

So I'm going to go ahead and select it with
body. So usually, you would actually put tags,

elements selectors at the top. So I'm going
to go ahead and do that now. Open up our block

using those curly braces. And now we can add
our background. So first of all, the property

used to Select and Color background is called
background color. But we're not actually going

to use that because background is much easier
considering that you can actually go and also

select images and URLs instead of colors.
It's much more flexible, and I prefer using

it over background color. So I'm going to
go ahead and select that as my property. So

from now, you can just go ahead and add your
value. Similarly to color. You can use an

RGB code, hex code or a CSS color even if
you want so I'm going to go ahead and set

it as red And just worn your eyes because
it's quite puffing. So you can see that now

our entire site has been styled red. Now,
obviously, I don't want this, this doesn't

really look very good. So I'm going to go
ahead and erase this property for now. And

we're going to go through and choose a color.
So I would recommend choosing something a

little bit light. So I'm going to go for about
a light turquoise or light blue, something

like this. So now I'm going to go ahead and
copy my RGB code. And here, I'm going to go

ahead and add my background property and paste
in my RGB code. Now if we go ahead and refresh

the page, you can see we have this really
nice light blue, which kind of fits in with

our oranges. Now, because it's a little bit,
it doesn't really look that good on this light

orange, I'm going to go ahead and dampen it
a little bit. So the easy way to do this with

RGB is to just go ahead and drop all of the
values this way, you stay in the same proportions,

but you're just darkening everything. So I'm
going to go ahead and darken our subtitles.

So I'm going to reduce everything by 20 or
so. So this becomes let's just say 200. And

this becomes 148. And obviously, these don't
have to be exact, and this can become 30.

So these don't have to be exact, like I said,
we're just darkening the titles, you can see,

you can see that they got a little bit darker,
and it looks better on this color. Alright,

there we go. So that's pretty much how to
style backgrounds. Now, you can go ahead and

apply this to pretty much anything you want.
So if I actually go ahead and style our subtitles

with our blue background, obviously, it won't
look that good, but it works perfectly fine.

So there we go. That's pretty much how to
add color to backgrounds. And in the next

video, I'm going to be teaching you how to
actually change the type of background that

you're using. Because obviously, sometimes
you want to actually change the background

and use maybe a custom image, or you want
to link to an image online. So I'm going to

be teaching you how to do that in the next
video. So let's just go and refresh the page.

Keep that normal. Alright, let's move on.

So in this video, we are going to be covering
background colors. Now, I know it's a little

bit intimidating considering we've never actually
done backgrounds before. But it's very similar

to colors in the values that he uses. The
only difference is is what it's actually styling.

So I'm going to be teaching you how to create
backgrounds on your website. Now, obviously,

we're not going to go all crazy and start
creating backgrounds for everything. Because

we haven't gotten into we haven't gotten into
layout yet. And without layout backgrounds

aren't really usable. Because sometimes, especially
with colors, it just doesn't really look that

good. So what we're actually going to do is
go through and just practice with our background

for now. So the first thing I need to do is
actually look for something to create a background

on. And we all know what a background on text
looked like. Now, we don't actually know why

the background goes all the way to the edge
yet. We haven't gotten we haven't gotten into

layout yet. Once we do, you'll know how to
change that. For now though, I think it's

really fitting to go through and style this
whole page. So firstly, what selector Do we

need to use? Considering that we're trying
to select everything? How are we supposed

to create a background on every single item?
Do we go through and select everything and

add that background? Well, we actually look
at a look at our HTML page, you can see that

all of our text here is contained inside of
our body tag. So the easiest way to select

this, because again, there's only one of our
body, we can just use an element selector.

So I'm going to go ahead and select it with
body. So usually, you would actually put tags,

elements selectors at the top. So I'm going
to go ahead and do that now. Open up our block

using those curly braces. And now we can add
our background. So first of all, the property

used to Select and Color background is called
background color. But we're not actually going

to use that because background is much easier
considering that you can actually go and also

select images and URLs instead of colors.
It's much more flexible, and I prefer using

it over background color. So I'm going to
go ahead and select that as my property. So

from now, you can just go ahead and add your
value. Similarly to color. You can use an

RGB code, hex code or a CSS color even if
you want so I'm going to go ahead and set

it as red And just worn your eyes because
it's quite puffing. So you can see that now

our entire site has been styled red. Now,
obviously, I don't want this, this doesn't

really look very good. So I'm going to go
ahead and erase this property for now. And

we're going to go through and choose a color.
So I would recommend choosing something a

little bit light. So I'm going to go for about
a light turquoise or light blue, something

like this. So now I'm going to go ahead and
copy my RGB code. And here, I'm going to go

ahead and add my background property and paste
in my RGB code. Now if we go ahead and refresh

the page, you can see we have this really
nice light blue, which kind of fits in with

our oranges. Now, because it's a little bit,
it doesn't really look that good on this light

orange, I'm going to go ahead and dampen it
a little bit. So the easy way to do this with

RGB is to just go ahead and drop all of the
values this way, you stay in the same proportions,

but you're just darkening everything. So I'm
going to go ahead and darken our subtitles.

So I'm going to reduce everything by 20 or
so. So this becomes let's just say 200. And

this becomes 148. And obviously, these don't
have to be exact, and this can become 30.

So these don't have to be exact, like I said,
we're just darkening the titles, you can see,

you can see that they got a little bit darker,
and it looks better on this color. Alright,

there we go. So that's pretty much how to
style backgrounds. Now, you can go ahead and

apply this to pretty much anything you want.
So if I actually go ahead and style our subtitles

with our blue background, obviously, it won't
look that good, but it works perfectly fine.

So there we go. That's pretty much how to
add color to backgrounds. And in the next

video, I'm going to be teaching you how to
actually change the type of background that

you're using. Because obviously, sometimes
you want to actually change the background

and use maybe a custom image, or you want
to link to an image online. So I'm going to

be teaching you how to do that in the next
video. So let's just go and refresh the page.

Keep that normal. Alright, let's move on.

So in this video, we're going to be looking
at a different type of background in CSS.

So now that we've covered basic color types,
and we've also covered a little bit of background,

and using background tracks, we're going to
move on to an alternate way of creating backgrounds.

And that's through background images. So right
now we know the basics of coloring, so we

were able to call it a text. Now with our
own custom colors using a color picker, we

can also go ahead and use our own, you know,
backgrounds and things like that with our

own colors. But now what I want to cover is
looking at different types of backgrounds

themselves. So in this case, we're going to
be looking at images. So first of all, when

we want to set the background to an image,
we can just go ahead and add an RGB color

code, we're going to need to go and actually
link to an image. So I'm going to show you

a really easy way of doing this, the first
thing we're going to need is an image. And

for this method, you can actually use images
with from the internet without having to download

them using URLs. So show you how to do that
now. So if I go ahead and search for a landscape

image, just like this. And now we want to
look for a sort of low resolution one, we

don't want to do too big, I think this will
be pretty good, it's going to look a little

bit weird, but just for this purpose, we're
going to use it. So now what we need to do

is get the URL link to this image. So you
can do this by right clicking on it. And then

you're going to go ahead and click on copy
image address. Okay, so what this is going

to do is get the actual link to the image
itself. Right now this link is going to Google

Images. But what we actually need is the link
to the image itself. So there we go, we have

that set up. Now we need to go ahead and add
the image to the page. So under here, I'm

going to just erase this color code for now.
And I'm going to show you how to add our image.

So there's this thing in CSS, they're called
functions. Now, we're not really going to

go very in depth about them. But pretty much
what they do is they take a few inputs, they

process them, and they give an output. So
the first example of a function that we've

already used is this right here, it takes
three inputs A red, a green, and a blue, does

some magic behind the scenes, and then gives
us a color back. So what we're going to do

here is use another function called URL. So
what this is going to do is take in the link

or to the URL, and then it's going to find
that image and set it. So in quotations, it

doesn't have to be in quotations, just remember
that you're going to paste in your image.

So remember, I just copied this from the image
address. And now we have it here. So we have

the image. Let's go ahead and check it out
on our website. So there we go. You can see

that whoops, you can see that our image is
set here. Now there's a few issues, obviously

with the repetition and everything, but we're
not going to be covering those until maybe

in a few videos. Where we talk about some
other background properties. But there we

go for now, we've actually set our image and
now it is set on our website. So when you

think of a URL, you're most likely thinking
of linking to google images or some sort of

web URL. But that's not the only type of URL
that we can use a URL is just a link to an

endpoint. This right here is a URL, it's just
not linking to a website, it's instead linking

to a local picture, or stylesheet, or whatever
you're trying to link to. So what I'm actually

going to show you is that we can use these
local URLs in here. So I'm going to erase

this a little bit longer. Now, I'm going to
paste in our new URL here, go ahead and refresh

the page. And now you can see that it still
works perfectly. Because again, it's linking

to an endpoint, it's just not on our website,
it's instead stored on our local machine.

So there we go, we have that set up now. But
there's actually another way that you can

set background images. And this goes the same
for background colors. So why I like to use

the background property is because you can
set anything you want in one go. You can set

it as a color as an image, and he do many
other things. But instead, you can actually

use very specific properties that work for
specific value. So for example, in this case,

we can use background image. And from here,
we can go ahead and copy paste the URL, like

that, make sure to add your semicolon. Now
I'm going to go ahead and erase this and show

you that it still works perfectly fine. So
you see I refresh the page, and it's still

working. And this goes the same for for background
colors, you can go ahead and add a background

color, and then add some random RGB value
just going to go for a full black for now.

And you can see that it still works. The only
problem is if I go ahead and paste in that

URL here. Oh, what if I go ahead and paste
in that URL here,

So in this video, we're going to be looking
at a different type of background in CSS.

So now that we've covered basic color types,
and we've also covered a little bit of background,

and using background tracks, we're going to
move on to an alternate way of creating backgrounds.

And that's through background images. So right
now we know the basics of coloring, so we

were able to call it a text. Now with our
own custom colors using a color picker, we

can also go ahead and use our own, you know,
backgrounds and things like that with our

own colors. But now what I want to cover is
looking at different types of backgrounds

themselves. So in this case, we're going to
be looking at images. So first of all, when

we want to set the background to an image,
we can just go ahead and add an RGB color

code, we're going to need to go and actually
link to an image. So I'm going to show you

a really easy way of doing this, the first
thing we're going to need is an image. And

for this method, you can actually use images
with from the internet without having to download

them using URLs. So show you how to do that
now. So if I go ahead and search for a landscape

image, just like this. And now we want to
look for a sort of low resolution one, we

don't want to do too big, I think this will
be pretty good, it's going to look a little

bit weird, but just for this purpose, we're
going to use it. So now what we need to do

is get the URL link to this image. So you
can do this by right clicking on it. And then

you're going to go ahead and click on copy
image address. Okay, so what this is going

to do is get the actual link to the image
itself. Right now this link is going to Google

Images. But what we actually need is the link
to the image itself. So there we go, we have

that set up. Now we need to go ahead and add
the image to the page. So under here, I'm

going to just erase this color code for now.
And I'm going to show you how to add our image.

So there's this thing in CSS, they're called
functions. Now, we're not really going to

go very in depth about them. But pretty much
what they do is they take a few inputs, they

process them, and they give an output. So
the first example of a function that we've

already used is this right here, it takes
three inputs A red, a green, and a blue, does

some magic behind the scenes, and then gives
us a color back. So what we're going to do

here is use another function called URL. So
what this is going to do is take in the link

or to the URL, and then it's going to find
that image and set it. So in quotations, it

doesn't have to be in quotations, just remember
that you're going to paste in your image.

So remember, I just copied this from the image
address. And now we have it here. So we have

the image. Let's go ahead and check it out
on our website. So there we go. You can see

that whoops, you can see that our image is
set here. Now there's a few issues, obviously

with the repetition and everything, but we're
not going to be covering those until maybe

in a few videos. Where we talk about some
other background properties. But there we

go for now, we've actually set our image and
now it is set on our website. So when you

think of a URL, you're most likely thinking
of linking to google images or some sort of

web URL. But that's not the only type of URL
that we can use a URL is just a link to an

endpoint. This right here is a URL, it's just
not linking to a website, it's instead linking

to a local picture, or stylesheet, or whatever
you're trying to link to. So what I'm actually

going to show you is that we can use these
local URLs in here. So I'm going to erase

this a little bit longer. Now, I'm going to
paste in our new URL here, go ahead and refresh

the page. And now you can see that it still
works perfectly. Because again, it's linking

to an endpoint, it's just not on our website,
it's instead stored on our local machine.

So there we go, we have that set up now. But
there's actually another way that you can

set background images. And this goes the same
for background colors. So why I like to use

the background property is because you can
set anything you want in one go. You can set

it as a color as an image, and he do many
other things. But instead, you can actually

use very specific properties that work for
specific value. So for example, in this case,

we can use background image. And from here,
we can go ahead and copy paste the URL, like

that, make sure to add your semicolon. Now
I'm going to go ahead and erase this and show

you that it still works perfectly fine. So
you see I refresh the page, and it's still

working. And this goes the same for for background
colors, you can go ahead and add a background

color, and then add some random RGB value
just going to go for a full black for now.

And you can see that it still works. The only
problem is if I go ahead and paste in that

URL here. Oh, what if I go ahead and paste
in that URL here,

just gonna link to it straight. So if I go
ahead and add the URL to the color, it's not

going to work, because this is specifically
for colors. Alright, so there we go. That's

pretty much it. For background images, it's
quite easy to use, all you have to do is make

sure that you have a working URL, you can
just test it by putting it in and seeing the

backroads loading properly. And from there,
just use your URL function and a suitable

property, such as background or background
image, and you should be good to go. Alright,

let's move on. So in this video, we're going
to be looking at some more background properties.

Now we're not going to be looking at all of
them. Because most of these aren't really

useful. And they're not really used in everyday
life. But what I'm going to be doing is showing

you the main properties that you can use with
backgrounds that can really change how your

backgrounds look. So we're actually going
to be covering covering only two in this video.

So that's background size, and background
repeat. So the first thing I want to cover

is background repeat, because I think it's
the most important. So you can see we have

our background there, I already set the height
and width, don't worry about these values

or the properties or anything. Again, we'll
talk about those later in this in this course.

But for now, you can see that we have our
background here, which is actually inside

of a div. So I set the div height and width.
And now there's a background here. So I want

to mess around with this background and see
what I can do. So first of all, you'll notice

that we can see here that we have so for example,
two or three or four of the same image. And

pretty much what's happening is the image
is being repeated, so that it can fill up

all of the content space. Now this is done
by default, because again, all of the values

and pixels and the dimensions are absolute.
They're not like other programs where you

can just throw a picture on there, and it'll
automatically resize. When you're working

with web development. It takes those raw dimensions,
it just plugs them straight into the website.

So that's why we need to do a little bit of
styling. So you can see that this image is

big enough. And remember, because this is
a direct image, what's happening here is we

have an image tag, and then the image is just
being plugged straight in there. Whereas with

here, we don't actually have an image tag,
what we have is an empty div, which is just

think of it if you don't know what that is
think of it as a container. It has a width

and height of this much. But then this is
an empty box. All we're doing is filling it

with this image. So instead of plugging the
image straight in, we're just filling an empty

box with these images. And of course, the
image isn't big enough to fill it. So what

we have to do is or what HTML actually does
by default is repeat this. So if you don't

want that there is an easy way to fix it.
Now it's probably not going to give you the

result that you expected. But what you're
going to do is go ahead and say background

background, dash repeat Pretty much you can
either set this to no repeat, which is the

default. Or you Oh, sorry, no repeat is the
default. Yeah. So repeat is going to be the

default value. But if you want to set it to
no repeat, this is pretty much going to remove

that repeating property. Now, although it
might look like now this image is going to

cover the whole thing, watch what happens,
you can see that it only takes up that small

box. And this might look like it just resized
everything. But if I go ahead and add a background

color to this, like that, and I'm just gonna
say red. And I go ahead and refresh the page,

you can see what's actually happening here
is that we have the image, and it's not taking

up the full image if I go ahead and set this
to repeat.

just gonna link to it straight. So if I go
ahead and add the URL to the color, it's not

going to work, because this is specifically
for colors. Alright, so there we go. That's

pretty much it. For background images, it's
quite easy to use, all you have to do is make

sure that you have a working URL, you can
just test it by putting it in and seeing the

backroads loading properly. And from there,
just use your URL function and a suitable

property, such as background or background
image, and you should be good to go. Alright,

let's move on. So in this video, we're going
to be looking at some more background properties.

Now we're not going to be looking at all of
them. Because most of these aren't really

useful. And they're not really used in everyday
life. But what I'm going to be doing is showing

you the main properties that you can use with
backgrounds that can really change how your

backgrounds look. So we're actually going
to be covering covering only two in this video.

So that's background size, and background
repeat. So the first thing I want to cover

is background repeat, because I think it's
the most important. So you can see we have

our background there, I already set the height
and width, don't worry about these values

or the properties or anything. Again, we'll
talk about those later in this in this course.

But for now, you can see that we have our
background here, which is actually inside

of a div. So I set the div height and width.
And now there's a background here. So I want

to mess around with this background and see
what I can do. So first of all, you'll notice

that we can see here that we have so for example,
two or three or four of the same image. And

pretty much what's happening is the image
is being repeated, so that it can fill up

all of the content space. Now this is done
by default, because again, all of the values

and pixels and the dimensions are absolute.
They're not like other programs where you

can just throw a picture on there, and it'll
automatically resize. When you're working

with web development. It takes those raw dimensions,
it just plugs them straight into the website.

So that's why we need to do a little bit of
styling. So you can see that this image is

big enough. And remember, because this is
a direct image, what's happening here is we

have an image tag, and then the image is just
being plugged straight in there. Whereas with

here, we don't actually have an image tag,
what we have is an empty div, which is just

think of it if you don't know what that is
think of it as a container. It has a width

and height of this much. But then this is
an empty box. All we're doing is filling it

with this image. So instead of plugging the
image straight in, we're just filling an empty

box with these images. And of course, the
image isn't big enough to fill it. So what

we have to do is or what HTML actually does
by default is repeat this. So if you don't

want that there is an easy way to fix it.
Now it's probably not going to give you the

result that you expected. But what you're
going to do is go ahead and say background

background, dash repeat Pretty much you can
either set this to no repeat, which is the

default. Or you Oh, sorry, no repeat is the
default. Yeah. So repeat is going to be the

default value. But if you want to set it to
no repeat, this is pretty much going to remove

that repeating property. Now, although it
might look like now this image is going to

cover the whole thing, watch what happens,
you can see that it only takes up that small

box. And this might look like it just resized
everything. But if I go ahead and add a background

color to this, like that, and I'm just gonna
say red. And I go ahead and refresh the page,

you can see what's actually happening here
is that we have the image, and it's not taking

up the full image if I go ahead and set this
to repeat.

Now the background is taking up the full image.
So I'm actually just going to go ahead and

set this to a basic steel blue, I think that's
one of my favorite CSS named colors. So there

we go. Now that we know how to adjust the
repet repetition of these backgrounds, why

don't we go ahead and actually talk about
background size, because that's the important

one, that's going to allow us to fill this
whole container. So first of all, now that

we know the background repeat just changes,
if it repeats or not, we need to know how

to alter the size, we can do this using a
property called background size. So I'm going

to go ahead and actually erase this, we don't
need it for now, just like that. So you can

actually go ahead and set the size of the
background. And remember, depending on whether

you set it to repeat or not, this is going
to change your effect. So right now, it's

still on repeat since we removed that property.
But pretty much the way to manipulate this

is the first value is going to be the height.
So for example, let's say I wanted to take

up 50 pixels, then with a direct space, remember,
no commas nothing, you're going to then enter

the width. So I'm going to say maybe 100 pixels.
Let's go ahead and refresh now. And you can

see that because our repeat is actually off.
Sorry, our repeat is on, we can see that it

just keeps repeating until this whole space
is filled up. Now, obviously, it's going to

be pretty hard to get this exactly at the
dimensions. If I actually go ahead and set

this to 400 pixels. And 70%, we didn't really
talk about percentages much, you can see it's

still repeating. So it's very hard to get
this working in the way that you want it to

cover the whole thing exactly, even if you
use the direct values. So there's actually

a keyword that you can use to fix this up.
All you have to do is type cover here. So

if I go ahead and refresh, you can see now
the image takes up the full width. And although

it sacrifices the quality, pretty much what's
happening here is this cover value is going

to resize the image based on the dimensions
just right to that it fits this whole thing.

There's also one more keyword that you can
use, which is called contain. But the only

problem is with contain is it's going to resize
it as much as possible. The only problem is

it trying to resize it without messing with
the proportions. So let's say that this is

maybe a two to one ratio. So for every two
widths, there's one height. So let's just

use that as an example. Basically, what's
happening here is that no matter how much

you stretch this, you cannot go the full way
without stretching it off the screen. So contain

doesn't do that. Instead, it just repeats
the image. Now if we actually change this

back to cover, you can see that it does cut
off part of that image because it just stretches

it out the full way until the image color
or the background covers the full width. So

there you go. That's pretty much it for background
size. Now I would recommend going instead

not with the sizing option pixels, but instead
using the cover keyword or the contain keyword,

if you know that your proportions are right,
or if you need it for some other purpose.

So yeah, pretty much those are the two main
other background properties that you're going

to be using. Obviously, there's many more,
but they're not as useful. And they don't

really make as much of a difference as these
two. Alright, let's move on.

Now the background is taking up the full image.
So I'm actually just going to go ahead and

set this to a basic steel blue, I think that's
one of my favorite CSS named colors. So there

we go. Now that we know how to adjust the
repet repetition of these backgrounds, why

don't we go ahead and actually talk about
background size, because that's the important

one, that's going to allow us to fill this
whole container. So first of all, now that

we know the background repeat just changes,
if it repeats or not, we need to know how

to alter the size, we can do this using a
property called background size. So I'm going

to go ahead and actually erase this, we don't
need it for now, just like that. So you can

actually go ahead and set the size of the
background. And remember, depending on whether

you set it to repeat or not, this is going
to change your effect. So right now, it's

still on repeat since we removed that property.
But pretty much the way to manipulate this

is the first value is going to be the height.
So for example, let's say I wanted to take

up 50 pixels, then with a direct space, remember,
no commas nothing, you're going to then enter

the width. So I'm going to say maybe 100 pixels.
Let's go ahead and refresh now. And you can

see that because our repeat is actually off.
Sorry, our repeat is on, we can see that it

just keeps repeating until this whole space
is filled up. Now, obviously, it's going to

be pretty hard to get this exactly at the
dimensions. If I actually go ahead and set

this to 400 pixels. And 70%, we didn't really
talk about percentages much, you can see it's

still repeating. So it's very hard to get
this working in the way that you want it to

cover the whole thing exactly, even if you
use the direct values. So there's actually

a keyword that you can use to fix this up.
All you have to do is type cover here. So

if I go ahead and refresh, you can see now
the image takes up the full width. And although

it sacrifices the quality, pretty much what's
happening here is this cover value is going

to resize the image based on the dimensions
just right to that it fits this whole thing.

There's also one more keyword that you can
use, which is called contain. But the only

problem is with contain is it's going to resize
it as much as possible. The only problem is

it trying to resize it without messing with
the proportions. So let's say that this is

maybe a two to one ratio. So for every two
widths, there's one height. So let's just

use that as an example. Basically, what's
happening here is that no matter how much

you stretch this, you cannot go the full way
without stretching it off the screen. So contain

doesn't do that. Instead, it just repeats
the image. Now if we actually change this

back to cover, you can see that it does cut
off part of that image because it just stretches

it out the full way until the image color
or the background covers the full width. So

there you go. That's pretty much it for background
size. Now I would recommend going instead

not with the sizing option pixels, but instead
using the cover keyword or the contain keyword,

if you know that your proportions are right,
or if you need it for some other purpose.

So yeah, pretty much those are the two main
other background properties that you're going

to be using. Obviously, there's many more,
but they're not as useful. And they don't

really make as much of a difference as these
two. Alright, let's move on.

So in this video, we're going to be talking
a little bit more about RGB colors. But we're

actually going to be adding one more feature
to this. So right now we've talked about RGB,

which is our basic color set. We have a red,
a green and a blue. There's actually one more

that we're missing out on the can really improve
the quality of our colors. And that's a or

alpha. So right now you can see we have an
RGB color code. But what if we wanted to add

this mysterious alpha component? What will
we do? So I'm actually going to go ahead and

use it as the background. Well, the first
thing you need to do is change the RGB name

to RGB a. And in this way, we've completely
changed the way the color looks. Now if we

go ahead and refresh the page, nothing's changed.
But now we can actually manipulate that alpha

value. So all we have to do is after green
Sorry, blue, keep getting those two mixed

up. After the final value, you're gonna add
another comma. And here is where you can put

any value between zero and one. So now that
you know what you can do with it, alpha is

pretty much the transparency or opacity of
a color zero, meaning it's completely transparent,

you can't see it at all. And one, meaning
it's fully visible. Think of this in percentages.

For example, zero is 0%, and one is 100% 0.5,
would be 50%. So if you think of it that way,

you can really think about opacity in a much
easier way. So I'm going to go ahead and actually

set 0.4. So right now we're at zero or 40%
opacity. Now, if we refresh the page, you

can see that the color is still there, it's
just a lot lighter. Now, you're probably asking

like, why don't you just go and maybe make
the color lighter? Well, it's actually much

easier to control it this way. And on top
of that, if you want things like maybe fading,

or you want to maybe change a color fade into
a different one, you can't really just change

the color every time, because in animation,
it's much easier to just change the opacity,

reduce it or increase it, then change the
color every time. So it's also much easier

to use RGB a colors when you're trying to
just control the overall look of a color.

So usually, when you're using just simply
RGB colors, you can only get a certain look.

But once you add opacity into the mix, you
can completely change the way that it looks.

So pretty much here's the takeaway they're
supposed to take from this video, you can

have a fourth component to an RGB color, which
is a now this becomes an RGB a color. Now

this a value stands for alpha, or opacity
or transparency, whatever you want to call

it, then this value isn't like just from zero
to 255. Instead, you have to set a value between

zero and one. If you think of it in terms
of percentages, it becomes a lot easier, zero

being the no or zero, when there's no transparency,
sorry, when they're when it's fully transparent.

And then one being when it's completely visible.
Alright, so that's pretty much it for this

RGBA color scheme, it's very easy to use,
you don't really need to use a color picker.

For that, you can just think about how opaque
you want it. And from there, you can set your

value. All right, let's move on.

So in this video, we're going to be talking
a little bit more about RGB colors. But we're

actually going to be adding one more feature
to this. So right now we've talked about RGB,

which is our basic color set. We have a red,
a green and a blue. There's actually one more

that we're missing out on the can really improve
the quality of our colors. And that's a or

alpha. So right now you can see we have an
RGB color code. But what if we wanted to add

this mysterious alpha component? What will
we do? So I'm actually going to go ahead and

use it as the background. Well, the first
thing you need to do is change the RGB name

to RGB a. And in this way, we've completely
changed the way the color looks. Now if we

go ahead and refresh the page, nothing's changed.
But now we can actually manipulate that alpha

value. So all we have to do is after green
Sorry, blue, keep getting those two mixed

up. After the final value, you're gonna add
another comma. And here is where you can put

any value between zero and one. So now that
you know what you can do with it, alpha is

pretty much the transparency or opacity of
a color zero, meaning it's completely transparent,

you can't see it at all. And one, meaning
it's fully visible. Think of this in percentages.

For example, zero is 0%, and one is 100% 0.5,
would be 50%. So if you think of it that way,

you can really think about opacity in a much
easier way. So I'm going to go ahead and actually

set 0.4. So right now we're at zero or 40%
opacity. Now, if we refresh the page, you

can see that the color is still there, it's
just a lot lighter. Now, you're probably asking

like, why don't you just go and maybe make
the color lighter? Well, it's actually much

easier to control it this way. And on top
of that, if you want things like maybe fading,

or you want to maybe change a color fade into
a different one, you can't really just change

the color every time, because in animation,
it's much easier to just change the opacity,

reduce it or increase it, then change the
color every time. So it's also much easier

to use RGB a colors when you're trying to
just control the overall look of a color.

So usually, when you're using just simply
RGB colors, you can only get a certain look.

But once you add opacity into the mix, you
can completely change the way that it looks.

So pretty much here's the takeaway they're
supposed to take from this video, you can

have a fourth component to an RGB color, which
is a now this becomes an RGB a color. Now

this a value stands for alpha, or opacity
or transparency, whatever you want to call

it, then this value isn't like just from zero
to 255. Instead, you have to set a value between

zero and one. If you think of it in terms
of percentages, it becomes a lot easier, zero

being the no or zero, when there's no transparency,
sorry, when they're when it's fully transparent.

And then one being when it's completely visible.
Alright, so that's pretty much it for this

RGBA color scheme, it's very easy to use,
you don't really need to use a color picker.

For that, you can just think about how opaque
you want it. And from there, you can set your

value. All right, let's move on.

So in this video, this is going to be talking
about the last feature with using colors.

And it's a little bit hard to grasp at first.
But once you start using it, you can really

get used to it. So we're going to be working
with gradients in this video on for now, I'm

just going to go ahead and erase this background.
And I'm just going to have a single color.

So I'm just going to say steel blue. And I'm
going to also erase this color property. So

now we have a background of the steel blue
color. There we go. So now it's working. So

pretty much if you don't know what a gradient
is already, it's kind of a transition between

two colors. So it's not just a sharp, red
to blue in one go. It smoothly green, you

know, moves or diffuses from through the colors.
So for example, you start just completely

red. And then you move up along and as as
you go up, it gets more and more blue. So

you're sort of mixing between the two colors.
So if you've ever done any painting before,

you're used, maybe coloring pencils, if you
kind of use paint and draw between the two

colors, depending on the proportions between
them, it's going to make sort of a purple

ish, and then it transitions like that. So
pretty much that's what's going on here without

gradients is we're transitioning between two
colors. Now of course, you can do more than

two, you can put three, four, you can put
as many colors as you want. But pretty much

what you have to take away from this is that
a gradient is just a transition between a

number of colors. Okay, so now that we know
what a gradient is, let's go ahead and get

started adding them. So there are actually
two types of gradients, radial and linear.

So radial gradients are circular, they kind
of move outwards from a center. And depending

on the percentages or how much you want of
each color, it's going to change the way the

gradient looks. A linear gradient on the other
hand is the one that I described earlier,

a smooth red transition to blue, it could
go from left to right, top to bottom and even

diagonally depending on how we define the
direction later in this video when we start

creating our gradients, alright, let's get
started. So the first thing I want to work

with is linear gradients. So the way to do
this just with our RGBA or a URL, all we have

to do is type linear dash gradient. Just like
that. And from here, we can start defining

our directions. So if you don't already know
about directions already, pretty much there

are four different positions top, bottom,
left and right. And you can also combine the

two to create corners. So for example, top
right would be the top right corner. So first

of all, what you're going to want to do is
type two. And then you're going to say the

name of the direction. So in this case, I'm
just going to say two, right. So what this

is going to be saying is you want the grid
to move to the right side. So it's going to

be going this way. Now, there's also another
way to do this I'll talk about in just a second.

But for now, let's leave it like this. And
then after your comma, you're going to add

as many colors as you want. So in this case,
I'm going to add red, and blue. And remember

to separate them also by a comma. Let's go
ahead and refresh and see what's happening,

you can see that we have a red slowly transitioning
into a blue to the right side. So remember,

it starts with the first color and moves on.
Let's go ahead and add a green in there, and

then a steel blue, and then a blue. Now we
have four colors that are slowly transitioning,

we have a red, that slowly transition into
a green, and then a steel blue, you can sort

of see it there and then a blue. And just
saying we don't actually have to use these

name colors, I just wanted to use them because
it looked it was quite easy to look at. So

what we can actually do and here's your first
use for Opacity is you can go ahead and let's

just take a random color here. So to write
Remember, this is starting here, we're going

to paste in that color. But then we're going
to finish it with an RGB a color,

So in this video, this is going to be talking
about the last feature with using colors.

And it's a little bit hard to grasp at first.
But once you start using it, you can really

get used to it. So we're going to be working
with gradients in this video on for now, I'm

just going to go ahead and erase this background.
And I'm just going to have a single color.

So I'm just going to say steel blue. And I'm
going to also erase this color property. So

now we have a background of the steel blue
color. There we go. So now it's working. So

pretty much if you don't know what a gradient
is already, it's kind of a transition between

two colors. So it's not just a sharp, red
to blue in one go. It smoothly green, you

know, moves or diffuses from through the colors.
So for example, you start just completely

red. And then you move up along and as as
you go up, it gets more and more blue. So

you're sort of mixing between the two colors.
So if you've ever done any painting before,

you're used, maybe coloring pencils, if you
kind of use paint and draw between the two

colors, depending on the proportions between
them, it's going to make sort of a purple

ish, and then it transitions like that. So
pretty much that's what's going on here without

gradients is we're transitioning between two
colors. Now of course, you can do more than

two, you can put three, four, you can put
as many colors as you want. But pretty much

what you have to take away from this is that
a gradient is just a transition between a

number of colors. Okay, so now that we know
what a gradient is, let's go ahead and get

started adding them. So there are actually
two types of gradients, radial and linear.

So radial gradients are circular, they kind
of move outwards from a center. And depending

on the percentages or how much you want of
each color, it's going to change the way the

gradient looks. A linear gradient on the other
hand is the one that I described earlier,

a smooth red transition to blue, it could
go from left to right, top to bottom and even

diagonally depending on how we define the
direction later in this video when we start

creating our gradients, alright, let's get
started. So the first thing I want to work

with is linear gradients. So the way to do
this just with our RGBA or a URL, all we have

to do is type linear dash gradient. Just like
that. And from here, we can start defining

our directions. So if you don't already know
about directions already, pretty much there

are four different positions top, bottom,
left and right. And you can also combine the

two to create corners. So for example, top
right would be the top right corner. So first

of all, what you're going to want to do is
type two. And then you're going to say the

name of the direction. So in this case, I'm
just going to say two, right. So what this

is going to be saying is you want the grid
to move to the right side. So it's going to

be going this way. Now, there's also another
way to do this I'll talk about in just a second.

But for now, let's leave it like this. And
then after your comma, you're going to add

as many colors as you want. So in this case,
I'm going to add red, and blue. And remember

to separate them also by a comma. Let's go
ahead and refresh and see what's happening,

you can see that we have a red slowly transitioning
into a blue to the right side. So remember,

it starts with the first color and moves on.
Let's go ahead and add a green in there, and

then a steel blue, and then a blue. Now we
have four colors that are slowly transitioning,

we have a red, that slowly transition into
a green, and then a steel blue, you can sort

of see it there and then a blue. And just
saying we don't actually have to use these

name colors, I just wanted to use them because
it looked it was quite easy to look at. So

what we can actually do and here's your first
use for Opacity is you can go ahead and let's

just take a random color here. So to write
Remember, this is starting here, we're going

to paste in that color. But then we're going
to finish it with an RGB a color,

like that. And pretty much what's what's going
to happen is this is going to be a slowly

fading out color, just like this. So you can
see what's happening is we start with a fully

functional color, which has a full track or
a has no transparency at all. And we slowly

slowly make it fade more and more out until
we can't see the picture at all, or the color

in this case. So yeah, that's pretty much
a great way of looking at it. And that's pretty

much it for linear gradients. Let's talk about
actually making diagonal gradients now. So

we know that we can have to write, we can
also have to top for example, if you wanted

to start from the start from the bottom, just
like that. And you can see now it goes up.

But what if we wanted to make it diagonal.
So let's say we wanted to finish in the bottom

right corner, what you would do is just type
it out like this to bottom right. Now if we

refresh the page, you can see that it slowly
goes down and fades out just at the bottom

right. So there we go. That's pretty much
it for positioning. But there's actually another

way to do this, and it's through angles. So
if you don't already know how to use angles,

then you can pretty much skip this step because
it's quite hard to get the use of it. But

once you learn how to actually work with angles,
and you know how to, you know, move them around

things like that, it becomes very easy to
work with them. So let's say you wanted them

to go in a very specific direction. So for
example, you wanted it to end somewhere here.

Now, obviously, you can't use words for positioning,
because they only work at certain places such

as the corners. So if you wanted to do this,
you're going to have to go ahead and use angles.

So first thing I'm going to do is go ahead
and erase this part because we're not using

positioning, and then we're going to go ahead
and type our angle. So the first thing I'm

going to do is define the place that I wanted
to end. So let's say this time I wanted to

add on the left here. So what I'm going to
do is go ahead and say minus 90, because remember

what's happening here is we want it to just
flip completely around. So let's say this

is our starting angle is zero, and we go all
the way down minus 90. So if you don't already

know 90 is kind of a quarter turn. And what's
going to happen is from here, we can type

D, G, or degrees. And this is going to set
the angle that we wanted. So let's go ahead

and refresh the page. You can see that now
it goes from right to left. Now this is a

pretty bad example considering we can just
do this normally, by typing to left. Well,

why don't we go ahead and choose something
a little bit more specific. So I'm going to

go 146 degrees. So just remember that pointing
upwards is kind of the starting position.

And then we turn 90 degrees, and then just
a little bit over halfway. And I think that's

not a very good example. So I'm going to go
with 160. Now you can see once I refresh the

page that it ends, sort of around the corner,
but not exactly on. And if I actually go ahead

and add something like maybe 215 or something
like that, go ahead and refresh, you can see

that they are ending in different places,
it's a lot more specific. Now, it's not very

obvious with this kind of fading color. But
what's happening here is we can directly control

where we want our gradient to end. So that's
one way of using linear gradients. Now let's

go ahead and talk about the next type of gradient,
which are radial gradients. So first of all,

I'm just going to erase this whole thing here
because I don't really need it. Now, radial

gradients don't work in the same way that
linear ones do instead of having a specified

direction. So for example, you want to go
from Right to left or from top to bottom,

instead, what happens is we can actually define
the percentages or proportions of each color

that we want. The next thing I'm going to
talk about is actually this background size.

So one thing you need to note is that you
cannot specify the cover, background size

or anything like that for these radial gradients,
because they just won't work. So what we're

gonna have to do is go ahead and remove this.
There we go. Now let's go ahead and add our

radial gradient. So I'm going to go ahead
and type radio dash gradient,

like that. And pretty much what's what's going
to happen is this is going to be a slowly

fading out color, just like this. So you can
see what's happening is we start with a fully

functional color, which has a full track or
a has no transparency at all. And we slowly

slowly make it fade more and more out until
we can't see the picture at all, or the color

in this case. So yeah, that's pretty much
a great way of looking at it. And that's pretty

much it for linear gradients. Let's talk about
actually making diagonal gradients now. So

we know that we can have to write, we can
also have to top for example, if you wanted

to start from the start from the bottom, just
like that. And you can see now it goes up.

But what if we wanted to make it diagonal.
So let's say we wanted to finish in the bottom

right corner, what you would do is just type
it out like this to bottom right. Now if we

refresh the page, you can see that it slowly
goes down and fades out just at the bottom

right. So there we go. That's pretty much
it for positioning. But there's actually another

way to do this, and it's through angles. So
if you don't already know how to use angles,

then you can pretty much skip this step because
it's quite hard to get the use of it. But

once you learn how to actually work with angles,
and you know how to, you know, move them around

things like that, it becomes very easy to
work with them. So let's say you wanted them

to go in a very specific direction. So for
example, you wanted it to end somewhere here.

Now, obviously, you can't use words for positioning,
because they only work at certain places such

as the corners. So if you wanted to do this,
you're going to have to go ahead and use angles.

So first thing I'm going to do is go ahead
and erase this part because we're not using

positioning, and then we're going to go ahead
and type our angle. So the first thing I'm

going to do is define the place that I wanted
to end. So let's say this time I wanted to

add on the left here. So what I'm going to
do is go ahead and say minus 90, because remember

what's happening here is we want it to just
flip completely around. So let's say this

is our starting angle is zero, and we go all
the way down minus 90. So if you don't already

know 90 is kind of a quarter turn. And what's
going to happen is from here, we can type

D, G, or degrees. And this is going to set
the angle that we wanted. So let's go ahead

and refresh the page. You can see that now
it goes from right to left. Now this is a

pretty bad example considering we can just
do this normally, by typing to left. Well,

why don't we go ahead and choose something
a little bit more specific. So I'm going to

go 146 degrees. So just remember that pointing
upwards is kind of the starting position.

And then we turn 90 degrees, and then just
a little bit over halfway. And I think that's

not a very good example. So I'm going to go
with 160. Now you can see once I refresh the

page that it ends, sort of around the corner,
but not exactly on. And if I actually go ahead

and add something like maybe 215 or something
like that, go ahead and refresh, you can see

that they are ending in different places,
it's a lot more specific. Now, it's not very

obvious with this kind of fading color. But
what's happening here is we can directly control

where we want our gradient to end. So that's
one way of using linear gradients. Now let's

go ahead and talk about the next type of gradient,
which are radial gradients. So first of all,

I'm just going to erase this whole thing here
because I don't really need it. Now, radial

gradients don't work in the same way that
linear ones do instead of having a specified

direction. So for example, you want to go
from Right to left or from top to bottom,

instead, what happens is we can actually define
the percentages or proportions of each color

that we want. The next thing I'm going to
talk about is actually this background size.

So one thing you need to note is that you
cannot specify the cover, background size

or anything like that for these radial gradients,
because they just won't work. So what we're

gonna have to do is go ahead and remove this.
There we go. Now let's go ahead and add our

radial gradient. So I'm going to go ahead
and type radio dash gradient,

just like that. And now what we can do is
specify a certain amount of colors. So for

example, I'm just going to start out with
red and blue. Now if we refresh the page,

you can see it starts off red, and ends and
blue. But we can actually add more than two

colors, just like with our, our linear gradient
there, what we can actually do is go ahead

and type in let's For example, let's just
say green as an example. Now if we refresh

the page, you can see that we've added a third
color. Now, if we wanted to change the proportions,

so for example, let's pretend that this blue
is taking up too much space, we don't want

that much, we can actually specify how much
we want of each. So let's change the proportions,

what we can do is go ahead and add percentages.
So what I'm going to do first is go and specify

what I want here. Now one thing to note is
that these have to be in order, you have to

have the minimum percentage, or the smallest
percentage at the start, and then the largest

at the finish. So I'm going to go ahead and
start off with something small, like 20%,

then I'm going to have let's say 40%, blue,
and 55% green. So now if I go ahead and refresh

the page, you can see that there is a lot
more green and a lot less blue, and red. So

the final thing I want to cover for radial
gradients is the shape. Now you can actually

specify the shape that you want. Now right
now I have an ellipse or sort of oval shape,

we can actually change it, all we have to
do is type the name of the shape. Now there

are two values, you can put here ellipse,
which is the default, and circle, I'm going

to go ahead and type circle. Now if I go ahead
and refresh, you can see that this is in a

much more circular shape, rather than the
previous oval. And although it's not a perfect

circle, obviously, our proportions aren't
going to change what it looks like. Alright,

so that's pretty much it for gradients. There's
quite a lot to learn about these. And there's

a lot more features that you can cover. But
for now, I think this is great. Now what I'm

going to do is go ahead and just create another
gradient, another linear gradient right under

this one, just so you can see what it looks
like. So for example, I'm going to go ahead,

and maybe let's just go for the body background
for now, I'm going to go ahead and actually

add a linear gradient gradient here. And I'm
going to say, let's just say to bottom, because

again, we wanted this kind of stretch from
top to bottom. So now what we're going to

do is start off very strong. So we're going
to have our main RGBA color, or RGB, whoops,

our main color here. So I'm going to copy
this. So this is going to be a fully, fully

visible color, starting from the top, and
then we're going to end with a much less visible

color. So there you go. Now let's go ahead
and refresh the page. And you can see that

maybe there's a little bit of an error there.
Oh, yeah, forgot to spell it. There we go.

Now we can go ahead and refresh. And you can
see it's still not working so much errors,

you're probably Yep, forgot the got the parentheses
there. Just make sure that you're doing this,

right, because sometimes you can make some
silly errors. So for example, if you look

here, we were actually we were missing a bracket.
So now if we go ahead and refresh, there we

go. It's a lot better now. So we start off
with a nice, fully visible color, and we end

off with a less visible color. Alright, so
there we go. That's pretty much it for gradients,

you can go ahead and download this file from
the project, you can go ahead and look at

how everything works here, mess around with
it, see what you can do, because there is

a lot to gradients and although they're not
used everyday, they're still very useful tools,

and they can really help you out in your web
development careers. Alright, let's move on.

just like that. And now what we can do is
specify a certain amount of colors. So for

example, I'm just going to start out with
red and blue. Now if we refresh the page,

you can see it starts off red, and ends and
blue. But we can actually add more than two

colors, just like with our, our linear gradient
there, what we can actually do is go ahead

and type in let's For example, let's just
say green as an example. Now if we refresh

the page, you can see that we've added a third
color. Now, if we wanted to change the proportions,

so for example, let's pretend that this blue
is taking up too much space, we don't want

that much, we can actually specify how much
we want of each. So let's change the proportions,

what we can do is go ahead and add percentages.
So what I'm going to do first is go and specify

what I want here. Now one thing to note is
that these have to be in order, you have to

have the minimum percentage, or the smallest
percentage at the start, and then the largest

at the finish. So I'm going to
go ahead and start off with something small,

like 20%, then I'm going to have let's say
40%, blue, and 55% green. So now if I go ahead

and refresh the page, you can see that there
is a lot more green and a lot less blue, and

red. So the final thing I want to cover for
radial gradients is the shape. Now you can

actually specify the shape that you want.
Now right now I have an ellipse or sort of

oval shape, we can actually change it, all
we have to do is type the name of the shape.

Now there are two values, you can put here
ellipse, which is the default, and circle,

I'm going to go ahead and type circle. Now
if I go ahead and refresh, you can see that

this is in a much more circular shape, rather
than the previous oval. And although it's

not a perfect circle, obviously, our proportions
aren't going to change what it looks like.

Alright, so that's pretty much it for gradients.
There's quite a lot to learn about these.

And there's a lot more features that you can
cover. But for now, I think this is great.

Now what I'm going to do is go ahead and just
create another gradient, another linear gradient

right under this one, just so you can see
what it looks like. So for example, I'm going

to go ahead, and maybe let's just go for the
body background for now, I'm going to go ahead

and actually add a linear gradient gradient
here. And I'm going to say, let's just say

to bottom, because again, we wanted this kind
of stretch from top to bottom. So now what

we're going to do is start off very strong.
So we're going to have our main RGBA color,

or RGB, whoops, our main color here. So I'm
going to copy this. So this is going to be

a fully, fully visible color, starting from
the top, and then we're going to end with

a much less visible color. So there you go.
Now let's go ahead and refresh the page. And

you can see that maybe there's a little bit
of an error there. Oh, yeah, forgot to spell

it. There we go. Now we can go ahead and refresh.
And you can see it's still not working so

much errors, you're probably Yep, forgot the
got the parentheses there. Just make sure

that you're doing this, right, because sometimes
you can make some silly errors. So for example,

if you look here, we were actually we were
missing a bracket. So now if we go ahead and

refresh, there we go. It's a lot better now.
So we start off with a nice, fully visible

color, and we end off with a less visible
color. Alright, so there we go. That's pretty

much it for gradients, you can go ahead and
download this file from the project, you can

go ahead and look at how everything works
here, mess around with it, see what you can

do, because there is a lot to gradients and
although they're not used everyday, they're

still very useful tools, and they can really
help you out in your web development careers.

Alright, let's move on.

So in this video, we're going to be talking
about some of the different types of units

in CSS. So so far, we've been working with
some basic coloring techniques, we've learned

about selectors, and then different properties.
And then we've learned about some of these

different values, but we haven't actually
learned what all of these different things

mean this this PX this percentage, and we
don't actually know how they work. So what

I'm going to be doing today is talking about
some of the different types of units and how

you can identify which one to use. So first
thing I want to talk about is the difference

between the two types of units which are absolute
units, and rarely have units. So firstly,

we have to talk about some of the units we've
already been using, for example, pixels. Now

pixels is a little bit special, I'll explain
you. I'll explain it to you in just a second.

But pretty much the commonly used absolute
units are things like centimeters, millimeters

and inches, which are absolute, they it's
not dependent on anything else. If you set

it as one inch, it's going to be one inch
long, no matter if you're doing it on a phone,

or an ultra wide TV. So that's what absolute
units are, they aren't affected by anything

around them. The second group are relative
units. And these are a little bit different.

Relative units are usually dependent on something.
So for example, our percentage unit here is

dependent on the parent elements while unit.
So for example, if this service image here

or here, has a width of 70%, that means that
the parent element of this service image or

this service image right here, which in this
case is our body, take 70% of its width of

its total width. So the whole way through
of the body is 100%. And 70% is going to be

somewhere around here, because that's what
we set it as now notice that when I start

resizing this, you can see that it still takes
up 70%. And obviously, right now it doesn't

work because I haven't refreshed the page.
But you can see, no matter how small I make

it, it's only going to take up 70% of the
total body width. So this is really good for

something like a responsive design. Because
what happens is when you're using absolute

units in a responsive design, let's say you
set this width as 200 pixels on a phone, it's

going to appear very large, whereas on an
ultra wide TV, it's going to appear too small.

So using something like percentages would
be very useful, because then you could resize

your window here, however you like it and
still have that look that you want. So that's

pretty much it for percentages. But there's
also a lot of different relative values that

we can use. And I'm going to go through all
of these in just a second. But the first thing

I want to talk about is this special unit,
which is pixels. Now pixels is a little bit

different. Now, although it is considered
an absolute unit, it is actually relatively

scale based on what device you're on. So if
you don't already know your screen right now

that you're watching this video on is made
up of a bunch of little tiny pixels. Now there's

this concept in computing, it's called DPI,
it's pretty much used to calculate the resolution

of your screen. And depending on the number
of pixels you have, the resolution is going

to change. So on low DPI, tablets or things
like that, anything that has a very low resolution.

So for example, if you're on YouTube, and
you've changed your resolution to four ADP,

what's going to happen is then the video is
going to sort of adjust how many pixels are

in that video. Now, I'm not going to get too
deep into how pixels are changed and things

like that. But pretty much what happens is
on high resolution devices, these pixels aren't

going to appear the same as on low resolution
devices, because obviously, this is taking

up only 400 pixels of height. And if you have
an ultra high display a very high definition

TV 400 pixels is only going to be about half
of what it is here. So what actually happens

in this is on these high DPI displays, each
pixel in this unit is actually taking up multiple

pixels relative to the resolution of the display.
So for example, on a TV, every pixel, according

to this height would actually take up something
like four pixels. So this is to give it that

absolute illusion. Now although it is in theory,
or at its core relative, when you're when

you're actually using it, it is an absolute
value. So that's just one thing you need to

keep in mind. Now don't worry too much about
pixels, you know, redefinitions, things like

that. But we're not focusing on that. For
now, we're just focusing on how we can use

different values for different things. So
let's go ahead and cover some of the different

units that we can use for absolute unit. So
the easiest way to do this is through changing

the size of the text. Now again, we're going
to cover this much later in this section.

So don't worry about that too much. So the
first one we can use is centimeters. So I

can see the font size is two centimeters.
Now, if I refresh the page, you can see that

it is a lot bigger. Remember, if you actually
took a ruler and measured the font size, you

would get two centimeters. There's also many
more such as millimeters and inches and pretty

much everything in between. So you can see
that's also a lot smaller. So we have our

standard pixels here, but there's actually
a few more that we can use. Now they're not

very they're not used that commonly so I'm
not really going to go over them that much.

But there Is he there, there are some other
units that you can use instead of pixels that

kind of follow that same formula. So there
is something called PT, which are points,

and it's a little bit bigger than a pixel.
So if I go ahead and refresh that, you can

see that that actually gets a little bit taller.
Go ahead and change that back to pixels, you

can see that does get quite a little bit taller.
And there's also PC. Again, it's quite similar

to px and PT. But in this case, a PC is a
lot bigger. So you can see how much bigger

it actually is. Actually, one PC is 12 points.
So that's just shows you how much bigger it

is. So there we go. That's just a little bit
of some of the other absolute values. Now

let's cover relative values. So the first
one, the first one that we actually already

covered was percentage. So we already looked
at, you know, our percent symbol over here,

which pretty much takes up, again, a certain
size or whatever value of its parent element.

But there's actually many more that I want
to cover. The first one I'm going to look

at is E M. So pretty much what if what I do
here is it's going to represent the size relative

to the current standard font size. So let's
just pretend that we know that this font size

is value, let's just call it F, what's going
to happen is if we set the body font size

to two, em, you're going to double everything
or double it based on F, which is our font

size. So if I set to em here, just like that,
and go ahead and refresh the page, you can

see that all of the text is double the standard
font size. So again, this is completely relative

to the standard font size. So I'm actually
going to go ahead and erase this here and

start using style tags. Instead, I feel like
it's just going to be a lot easier to you

know, move around and easy, easily move that
around. So now we've covered percent an EM

so those are the two main types of relative
units. But there's actually two more that

I want to cover, which is view width and view
height. So in web design, and in development,

in general, there's this thing called the
viewport, which is pretty much the dimensions

of whatever you're viewing it on. So in this
case, our viewport would be the bodies width,

and then the bodies height. So VW and VH,
view, view width and view height actually

allow you to work with

So in this video, we're going to be talking
about some of the different types of units

in CSS. So so far, we've been working with
some basic coloring techniques, we've learned

about selectors, and then different properties.
And then we've learned about some of these

different values, but we haven't actually
learned what all of these different things

mean this this PX this percentage, and we
don't actually know how they work. So what

I'm going to be doing today is talking about
some of the different types of units and how

you can identify which one to use. So first
thing I want to talk about is the difference

between the two types of units which are absolute
units, and rarely have units. So firstly,

we have to talk about some of the units we've
already been using, for example, pixels. Now

pixels is a little bit special, I'll explain
you. I'll explain it to you in just a second.

But pretty much the commonly used absolute
units are things like centimeters, millimeters

and inches, which are absolute, they it's
not dependent on anything else. If you set

it as one inch, it's going to be one inch
long, no matter if you're doing it on a phone,

or an ultra wide TV. So that's what absolute
units are, they aren't affected by anything

around them. The second group are relative
units. And these are a little bit different.

Relative units are usually dependent on something.
So for example, our percentage unit here is

dependent on the parent elements while unit.
So for example, if this service image here

or here, has a width of 70%, that means that
the parent element of this service image or

this service image right here, which in this
case is our body, take 70% of its width of

its total width. So the whole way through
of the body is 100%. And 70% is going to be

somewhere around here, because that's what
we set it as now notice that when I start

resizing this, you can see that it still takes
up 70%. And obviously, right now it doesn't

work because I haven't refreshed the page.
But you can see, no matter how small I make

it, it's only going to take up 70% of the
total body width. So this is really good for

something like a responsive design. Because
what happens is when you're using absolute

units in a responsive design, let's say you
set this width as 200 pixels on a phone, it's

going to appear very large, whereas on an
ultra wide TV, it's going to appear too small.

So using something like percentages would
be very useful, because then you could resize

your window here, however you like it and
still have that look that you want. So that's

pretty much it for percentages. But there's
also a lot of different relative values that

we can use. And I'm going to go through all
of these in just a second. But the first thing

I want to talk about is this special unit,
which is pixels. Now pixels is a little bit

different. Now, although it is considered
an absolute unit, it is actually relatively

scale based on what device you're on. So if
you don't already know your screen right now

that you're watching this video on is made
up of a bunch of little tiny pixels. Now there's

this concept in computing, it's called DPI,
it's pretty much used to calculate the resolution

of your screen. And depending on the number
of pixels you have, the resolution is going

to change. So on low DPI, tablets or things
like that, anything that has a very low resolution.

So for example, if you're on YouTube, and
you've changed your resolution to four ADP,

what's going to happen is then the video is
going to sort of adjust how many pixels are

in that video. Now, I'm not going to get too
deep into how pixels are changed and things

like that. But pretty much what happens is
on high resolution devices, these pixels aren't

going to appear the same as on low resolution
devices, because obviously, this is taking

up only 400 pixels of height. And if you have
an ultra high display a very high definition

TV 400 pixels is only going to be about half
of what it is here. So what actually happens

in this is on these high DPI displays, each
pixel in this unit is actually taking up multiple

pixels relative to the resolution of the display.
So for example, on a TV, every pixel, according

to this height would actually take up something
like four pixels. So this is to give it that

absolute illusion. Now although it is in theory,
or at its core relative, when you're when

you're actually using it, it is an absolute
value. So that's just one thing you need to

keep in mind. Now don't worry too much about
pixels, you know, redefinitions, things like

that. But we're not focusing on that. For
now, we're just focusing on how we can use

different values for different things. So
let's go ahead and cover some of the different

units that we can use for absolute unit. So
the easiest way to do this is through changing

the size of the text. Now again, we're going
to cover this much later in this section.

So don't worry about that too much. So the
first one we can use is centimeters. So I

can see the font size is two centimeters.
Now, if I refresh the page, you can see that

it is a lot bigger. Remember, if you actually
took a ruler and measured the font size, you

would get two centimeters. There's also many
more such as millimeters and inches and pretty

much everything in between. So you can see
that's also a lot smaller. So we have our

standard pixels here, but there's actually
a few more that we can use. Now they're not

very they're not used that commonly so I'm
not really going to go over them that much.

But there Is he there, there are some other
units that you can use instead of pixels that

kind of follow that same formula. So there
is something called PT, which are points,

and it's a little bit bigger than a pixel.
So if I go ahead and refresh that, you can

see that that actually gets a little bit taller.
Go ahead and change that back to pixels, you

can see that does get quite a little bit taller.
And there's also PC. Again, it's quite similar

to px and PT. But in this case, a PC is a
lot bigger. So you can see how much bigger

it actually is. Actually, one PC is 12 points.
So that's just shows you how much bigger it

is. So there we go. That's just a little bit
of some of the other absolute values. Now

let's cover relative values. So the first
one, the first one that we actually already

covered was percentage. So we already looked
at, you know, our percent symbol over here,

which pretty much takes up, again, a certain
size or whatever value of its parent element.

But there's actually many more that I want
to cover. The first one I'm going to look

at is E M. So pretty much what if what I do
here is it's going to represent the size relative

to the current standard font size. So let's
just pretend that we know that this font size

is value, let's just call it F, what's going
to happen is if we set the body font size

to two, em, you're going to double everything
or double it based on F, which is our font

size. So if I set to em here, just like that,
and go ahead and refresh the page, you can

see that all of the text is double the standard
font size. So again, this is completely relative

to the standard font size. So I'm actually
going to go ahead and erase this here and

start using style tags. Instead, I feel like
it's just going to be a lot easier to you

know, move around and easy, easily move that
around. So now we've covered percent an EM

so those are the two main types of relative
units. But there's actually two more that

I want to cover, which is view width and view
height. So in web design, and in development,

in general, there's this thing called the
viewport, which is pretty much the dimensions

of whatever you're viewing it on. So in this
case, our viewport would be the bodies width,

and then the bodies height. So VW and VH,
view, view width and view height actually

allow you to work with

work with this viewport in a very easy way.
So one v w or v h is equal to 1% of the total

body width or body height. So remember, this
isn't based on the parent element, this is

based on the total viewport, this could be
the HTML document the body tag, it depends

on what you're viewing it on. So for example,
if I go ahead and change the width here to

70 v w, this is pretty much equivalent to
70 times 1% of the total viewport. And obviously,

if I go ahead and refresh the page, you can
see it gets just a little bit bigger because

there's actually a viewport itself is bigger
than the body tag, which is the parent element.

Now we'll talk about that later in the course,
because it's quite advanced. But what you

can see here is that right here, it doesn't
actually affect it because the body is almost

completely equivalent to the viewport. But
for example, if we wanted to set the font

size of one of these TDs to 70% would be which
we, which would be 70% of this T row, it would

actually look completely different from 70
v w, which is 70% of the total viewport. So

that's just one thing I want to keep in mind,
you can also set more than 100%, it doesn't

have to be completely set in stone. So if
I actually wanted to say VH. So 400 times

1% of the view height, what would happen here
is that this image would become four times

the total height of the viewport. So that's
just also one thing to keep in mind. So I'm

going to go ahead and change this back to
pixels. We'll just keep that with the same

because it doesn't really make that much of
an impact. Okay, so there we go. Those are

some of the different units in CSS, I've actually
attached a little reference sheet that you

can use, you can refer to, to this to this
lecture, you can go ahead click on it. And

if you want to revise any of these you can,
but just a fair warning, you're not really

going to be using a lot of these units, the
main ones you're going to use, you're most

likely pixels and percent. But for some cases,
you're going to want to use some other units.

So although absolute units are still useful
in some cases, so for example, if you want

a very specific dimensions or viewport on
your screen, so for example, if you only want

users to access something on the phone, then
or a very specific phone, then you can go

ahead and use pixels because it's going to
look the same no matter what phone people

use, because it's all going to be the same.
The only problem is is when people start using

different devices using absolute values are
going to look very different based on On what

device you're using. And that's why you should
kind of stick to using these, these relative

units instead of using things like pixels,
centimeters and millimeters. So things like

em percent view width and view height would
be very, very useful, because then you can

scale it based on whatever device you want.
So for example, it's going to look the same,

or at least this width, whether you're using
it on a phone, or a desktop computer, because

again, it takes up 70% of the width no matter
what it is. So that's just some of the basics

about some of these units. Now, like I said,
you don't need to know these by heart, you

can just go ahead and keep them at the back
of your head. And once we start using them

and start using them in our, you know, font
layout, things like that, we'll actually start

using these units a lot more, and they will
make a lot more sense. So this is just a quick

introduction to these units and why we should
use them. And you're not supposed to be going

ahead and you know, completely mastering every
single one by now. Alright, let's move on.

work with this viewport in a very easy way.
So one v w or v h is equal to 1% of the total

body width or body height. So remember, this
isn't based on the parent element, this is

based on the total viewport, this could be
the HTML document the body tag, it depends

on what you're viewing it on. So for example,
if I go ahead and change the width here to

70 v w, this is pretty much equivalent to
70 times 1% of the total viewport. And obviously,

if I go ahead and refresh the page, you can
see it gets just a little bit bigger because

there's actually a viewport itself is bigger
than the body tag, which is the parent element.

Now we'll talk about that later in the course,
because it's quite advanced. But what you

can see here is that right here, it doesn't
actually affect it because the body is almost

completely equivalent to the viewport. But
for example, if we wanted to set the font

size of one of these TDs to 70% would be which
we, which would be 70% of this T row, it would

actually look completely different from 70
v w, which is 70% of the total viewport. So

that's just one thing I want to keep in mind,
you can also set more than 100%, it doesn't

have to be completely set in stone. So if
I actually wanted to say VH. So 400 times

1% of the view height, what would happen here
is that this image would become four times

the total height of the viewport. So that's
just also one thing to keep in mind. So I'm

going to go ahead and change this back to
pixels. We'll just keep that with the same

because it doesn't really make that much of
an impact. Okay, so there we go. Those are

some of the different units in CSS, I've actually
attached a little reference sheet that you

can use, you can refer to, to this to this
lecture, you can go ahead click on it. And

if you want to revise any of these you can,
but just a fair warning, you're not really

going to be using a lot of these units, the
main ones you're going to use, you're most

likely pixels and percent. But for some cases,
you're going to want to use some other units.

So although absolute units are still useful
in some cases, so for example, if you want

a very specific dimensions or viewport on
your screen, so for example, if you only want

users to access something on the phone, then
or a very specific phone, then you can go

ahead and use pixels because it's going to
look the same no matter what phone people

use, because it's all going to be the same.
The only problem is is when people start using

different devices using absolute values are
going to look very different based on On what

device you're using. And that's why you should
kind of stick to using these, these relative

units instead of using things like pixels,
centimeters and millimeters. So things like

em percent view width and view height would
be very, very useful, because then you can

scale it based on whatever device you want.
So for example, it's going to look the same,

or at least this width, whether you're using
it on a phone, or a desktop computer, because

again, it takes up 70% of the width no matter
what it is. So that's just some of the basics

about some of these units. Now, like I said,
you don't need to know these by heart, you

can just go ahead and keep them at the back
of your head. And once we start using them

and start using them in our, you know, font
layout, things like that, we'll actually start

using these units a lot more, and they will
make a lot more sense. So this is just a quick

introduction to these units and why we should
use them. And you're not supposed to be going

ahead and you know, completely mastering every
single one by now. Alright, let's move on.

So the next few videos are going to be focused
on font and text manipulation. So we're going

to be working with actually changing how this
text looks. First thing I want to talk about

is there's actually two parts to this section,
text manipulation and font manipulation. And

although they sound like the same thing, they're
actually very different. So the first part

in this video, we're going to be covering
text manipulation. Now, there's not that much

to look at. But pretty much the difference
between the two is that text manipulation

is looking at things that you can change no
matter the font. So for example, something

like sizing would not apply, because the size
is going to be based obviously on the font

itself. So basically, things like underlining
or capitalization are going to be completely

regardless of the font, you can change them
no matter what they do. But things like bolding

and things like size, bolding, things like
that, they are completely dependent on the

font, because again, the font decides how
it how the font itself is going to look. So

it decides the size, the bolding, and just
the overall style. So the first part in this

video, we're going to be covering text manipulation.
And in the next few videos, we're going to

be looking at actual font manipulation. So
things like external fonts, which is probably

the most exciting part of this course, and
things like weight and bolding. Alright, let's

get started. So the first two things I want
to cover are text decoration and text transform.

So these are properties that are going to
be relating to the style of the text. Now

I know I just said that fonts. And mostly
styling is dependent on the font. But in this

case, these these properties don't actually
rely on the font at all. So let's get started.

So the first thing I'm going to talk about
is text decoration. So although it sounds

like you can do a bunch of cool things with
this, the only real thing that you can do

is change the lining of the text. So we're
going to go ahead and work with this anchor

tag here. So I'm going to go ahead and add
a cloud, there's already a class there, actually,

we can just go ahead and select it. So I'm
going to go dot link, like that. And now what

I can actually do is change the lining of
this right here. So by default, anchor tags

have a text decoration of underline, there's
actually three more properties that we can

use. So that the property to use it, it's
called text dash decoration, it's pretty obvious.

Now the first one I'm going to look at is
none. So this completely removes the line

from our links, they're completely gone, you
don't have them anymore. The next one, which

is the one by default is underlined, like
that. So that's our normal link, then you

have line through which is line dash through.
And it's pretty obvious what that does just

put the line straight through. And then of
course, there's the overlying which is the

line on the top. So there we go. Now we have
a line on the top. Now, although you won't

see the the two that we just showed line through
and overlap very commonly, it is very common

to see underline and text decoration none
applied. Because sometimes I'm sure you've

seen this in websites all over the place,
you can hover over links, and they may be

changed color. Again, we'll be learning how
to do that in this course. But you know, they

might change color and do all sorts of things,
but you usually don't see them with an underline.

So that's where this property comes into play.
So I'm just going to change this back to underline,

just to make things a little interesting.
Next thing I'm going to do is go ahead and

cover the next property, which in this case
is text transform. So you can see that we

have a bunch of text here. And let's say maybe
we're working as a freelancer and our client

wants us to capitalize all of our text. How
are we going to do that? Now obviously, we're

not going to go through and capitalize every
single individual word that's going to basically

be suicide. Although it is possible, it could
take a lot of time. So the easiest way to

do it is using the text transform property.
So I'm just going to go ahead and do this

on the whole body. For now, the property to
this is text dash transform, pretty easy to

memorize, or learn these because they don't
really require any weird memorization tactics.

So now what you can do is go ahead and add
our value. So there are three different values

that you can use for this uppercase, lowercase
and capitalize. So because we want to capitalize

everything, we can go ahead and type capitalize.
Now if we refresh the page, you can see every

single word is capitalized without us having
having to actually change the text. You can

also go ahead and use the other two, which
are lowercase and uppercase.

So the next few videos are going to be focused
on font and text manipulation. So we're going

to be working with actually changing how this
text looks. First thing I want to talk about

is there's actually two parts to this section,
text manipulation and font manipulation. And

although they sound like the same thing, they're
actually very different. So the first part

in this video, we're going to be covering
text manipulation. Now, there's not that much

to look at. But pretty much the difference
between the two is that text manipulation

is looking at things that you can change no
matter the font. So for example, something

like sizing would not apply, because the size
is going to be based obviously on the font

itself. So basically, things like underlining
or capitalization are going to be completely

regardless of the font, you can change them
no matter what they do. But things like bolding

and things like size, bolding, things like
that, they are completely dependent on the

font, because again, the font decides how
it how the font itself is going to look. So

it decides the size, the bolding, and just
the overall style. So the first part in this

video, we're going to be covering text manipulation.
And in the next few videos, we're going to

be looking at actual font manipulation. So
things like external fonts, which is probably

the most exciting part of this course, and
things like weight and bolding. Alright, let's

get started. So the first two things I want
to cover are text decoration and text transform.

So these are properties that are going to
be relating to the style of the text. Now

I know I just said that fonts. And mostly
styling is dependent on the font. But in this

case, these these properties don't actually
rely on the font at all. So let's get started.

So the first thing I'm going to talk about
is text decoration. So although it sounds

like you can do a bunch of cool things with
this, the only real thing that you can do

is change the lining of the text. So we're
going to go ahead and work with this anchor

tag here. So I'm going to go ahead and add
a cloud, there's already a class there, actually,

we can just go ahead and select it. So I'm
going to go dot link, like that. And now what

I can actually do is change the lining of
this right here. So by default, anchor tags

have a text decoration of underline, there's
actually three more properties that we can

use. So that the property to use it, it's
called text dash decoration, it's pretty obvious.

Now the first one I'm going to look at is
none. So this completely removes the line

from our links, they're completely gone, you
don't have them anymore. The next one, which

is the one by default is underlined, like
that. So that's our normal link, then you

have line through which is line dash through.
And it's pretty obvious what that does just

put the line straight through. And then of
course, there's the overlying which is the

line on the top. So there we go. Now we have
a line on the top. Now, although you won't

see the the two that we just showed line through
and overlap very commonly, it is very common

to see underline and text decoration none
applied. Because sometimes I'm sure you've

seen this in websites all over the place,
you can hover over links, and they may be

changed color. Again, we'll be learning how
to do that in this course. But you know, they

might change color and do all sorts of things,
but you usually don't see them with an underline.

So that's where this property comes into play.
So I'm just going to change this back to underline,

just to make things a little interesting.
Next thing I'm going to do is go ahead and

cover the next property, which in this case
is text transform. So you can see that we

have a bunch of text here. And let's say maybe
we're working as a freelancer and our client

wants us to capitalize all of our text. How
are we going to do that? Now obviously, we're

not going to go through and capitalize every
single individual word that's going to basically

be suicide. Although it is possible, it could
take a lot of time. So the easiest way to

do it is using the text transform property.
So I'm just going to go ahead and do this

on the whole body. For now, the property to
this is text dash transform, pretty easy to

memorize, or learn these because they don't
really require any weird memorization tactics.

So now what you can do is go ahead and add
our value. So there are three different values

that you can use for this uppercase, lowercase
and capitalize. So because we want to capitalize

everything, we can go ahead and type capitalize.
Now if we refresh the page, you can see every

single word is capitalized without us having
having to actually change the text. You can

also go ahead and use the other two, which
are lowercase and uppercase.

And that will obviously put everything in
uppercase for you. But now you're starting

to see a little bit about why these are text
manipulation and not font manipulation. Again,

it doesn't matter what font you're using,
whether you're using some weird symbol font,

or Times New Roman, you can always use these
to capitalize it, no matter what the font

is. On top of that, you can also move around
these lines, it's not dependent on the font

at all. So that's just a little bit about
our text manipulation properties. So the next

feature I want to cover is text align. So
this is a little bit different from the other

two that we've covered. Because it's not really
focused on the styling or decoration of our

text. Instead, it's going to be focused on
the justification or alignment of it. So if

you've ever used any text editor, for example,
Microsoft Word, or Google Docs, anything like

that, you'll know that you can justify your
text and align it to your site. So there are

four main ones that are included in CSS left,
right, center and justify. So I'm going to

breeze through the quick the first three ones,
because it's quite easy to use. But then the

last one I'm going to talk about a little
bit in more detail. So in order to achieve

this, you can go ahead and add text align
property. And here, I'm just going to go center

as an example. And you can see that now everything
is aligned. So the list items are a little

bit weird, they don't actually move the decoration
to the center, when you align it to the center,

but other than that all of the text is now
aligned to the center. So now let's talk about

justify. Now we're not going to go through
left and right, because we already know that

but what justify actually does, I'm just gonna
show you here is pretty much it takes all

of the text, and it kind of matches it. So
it's all fit in the same way, if you if it

makes sense. So although it might not fit
everything, the same length, what happens

is all of this text is now stretched out as
far as possible. So although you might not

be able to see a direct difference, let's
just look at this paragraph here, we're going

to just end off this property without changing
it, you can see that without the justify alignment,

all of these are different. So what actually
what the justify actually does is it sets

all of the lines to the same length. So I'm
going to go ahead and add that justify back.

So you can see this used a lot in research
papers, and, you know, academic papers, essays,

things like that. This justification is used
a lot. And although it's not very, it's not

really used very commonly, it's still a very
good feature if you have big bodies of text,

if you're trying to you know, make everything
look very streamlined. Alright, there we go.

So those are the four or sorry, three different
types of text manipulation properties that

you can use, and along with their respective
value. So I encourage you to go ahead and

try this out on your own, you can do a lot
of things with these three values alone, you

can really change how the page looks. Alright,
let's move on.

And that will obviously put everything in
uppercase for you. But now you're starting

to see a little bit about why these are text
manipulation and not font manipulation. Again,

it doesn't matter what font you're using,
whether you're using some weird symbol font,

or Times New Roman, you can always use these
to capitalize it, no matter what the font

is. On top of that, you can also move around
these lines, it's not dependent on the font

at all. So that's just a little bit about
our text manipulation properties. So the next

feature I want to cover is text align. So
this is a little bit different from the other

two that we've covered. Because it's not really
focused on the styling or decoration of our

text. Instead, it's going to be focused on
the justification or alignment of it. So if

you've ever used any text editor, for example,
Microsoft Word, or Google Docs, anything like

that, you'll know that you can justify your
text and align it to your site. So there are

four main ones that are included in CSS left,
right, center and justify. So I'm going to

breeze through the quick the first three ones,
because it's quite easy to use. But then the

last one I'm going to talk about a little
bit in more detail. So in order to achieve

this, you can go ahead and add text align
property. And here, I'm just going to go center

as an example. And you can see that now everything
is aligned. So the list items are a little

bit weird, they don't actually move the decoration
to the center, when you align it to the center,

but other than that all of the text is now
aligned to the center. So now let's talk about

justify. Now we're not going to go through
left and right, because we already know that

but what justify actually does, I'm just gonna
show you here is pretty much it takes all

of the text, and it kind of matches it. So
it's all fit in the same way, if you if it

makes sense. So although it might not fit
everything, the same length, what happens

is all of this text is now stretched out as
far as possible. So although you might not

be able to see a direct difference, let's
just look at this paragraph here, we're going

to just end off this property without changing
it, you can see that without the justify alignment,

all of these are different. So what actually
what the justify actually does is it sets

all of the lines to the same length. So I'm
going to go ahead and add that justify back.

So you can see this used a lot in research
papers, and, you know, academic papers, essays,

things like that. This justification is used
a lot. And although it's not very, it's not

really used very commonly, it's still a very
good feature if you have big bodies of text,

if you're trying to you know, make everything
look very streamlined. Alright, there we go.

So those are the four or sorry, three different
types of text manipulation properties that

you can use, and along with their respective
value. So I encourage you to go ahead and

try this out on your own, you can do a lot
of things with these three values alone, you

can really change how the page looks. Alright,
let's move on.

So in this video, we're going to be talking
about the other half of overall text manipulation.

And in this case, we're going to be looking
at different font properties. So in this video,

we're going to be looking at three font size,
font weight and font style. So first thing

I want to look at is font size. So right now
we have our pretty standard text here, right.

So I'm just actually going to go ahead and
erase our text transform from our previous

video. So now we have our text here. And what
I want to do is change the size of this. The

only problem is I want to use a responsive
design. So what I'm going to do is go ahead

and first use our font size property. And
then I'm going to go ahead and say let's just

say 1.25 em. So what happens here is make
this 25% more than the standard font size.

Now you can see it's a little bit bigger,
but it's not as big as doing something like

two n. So there we go. Now that we've done
that, we can also go ahead and actually use

pixel values, if we wanted to 40 pixels for
example, the only problem is this is going

to set everything consistently. So you can
see all of the sizes are the same, it doesn't

matter if they're a header, or while it does
actually matter. But because in the CSS defined

code, all of these headers actually have to
em but if we actually removed all of these,

they would be the same. So using something
like two e n, would be great, because what

actually happens is now everything stays consistent.
And it's also a relative unit. So that's always

good, because it stays responsive. So there
we go. That's pretty much it for font size,

I'm going to go ahead and actually change
this to one point 15 am, I think that's good.

So there we go. That's the first one. Now
let's go ahead and talk about font weight.

So this is a little bit more complicated.
So pretty much what font weight decides is

the bolding of a text or a font. So the values
for this can range from zero, which is nothing

all the way to? Well, pretty much infinity.
The only problem is, most fonts only support

up to 800, or 900. Because, again, for each
value, there is a different bolding stage.

So most fonts are only going to go up to maybe
100, or 900, some of them can go even higher.

But in theory, you can make these values as
big as you want. The only problem is, it's

not really going to show any change if you
make them very big. So there we go. That's

pretty much it for font weight, let's go ahead
and start adding it to our website. So let's

say I wanted to make our title a little bit
bolded. So I'm going to go ahead and say font

dash weight. And now I'm going to go ahead
and specify a value. Let's go ahead and start

with zero and see what happens, you can see
that nothing actually happens. But pretty

much like I said before, most fonts only support
certain values. So for example, 100 would

be a very specific kind of bolding, 200 300
400 and all the way up to as much as the font

supports. Now usually, the convention for
this is you're supposed to go up in hundreds

from 100. That's kind of like the minimum
supported font size. So if I go ahead and

set 100. Here, you can see it's very thin.
And if I go ahead and set it as 800, which

is usually the highest that you should go
realistically, this is kind of the standard

for each one. So there you go, you can set
it to something like 600, which isn't very

commonly seen, like I said, fonts only support
certain bolded ness, if that makes sense.

But you can go ahead and play around with
this. And like I said, depending on the font,

it's going to change what the text actually
looks like. So there we go. That's pretty

much it for font weight, I'm going to go ahead
and actually just set this to 400, which is

the standard font right there. So 400 is the
normal, it's like normal bolding, no bolding

and don't make it very thin. So that's kind
of what it's the normal range. So there we

go. That's it for font weight. Now let's go
ahead and look at font style. So just like

font sizes for size and font weight is for
bolding font style is for italic sizing. So

I'm going to go ahead and actually italicize
a small piece of text here. So let's just

go ahead into this. And I'm going to take
this first part, and actually just cut it

out. I'm going to create a span tag. So a
span tag is sort of an if you don't know it's

an inline day. It's an inline container tag,
which allows you to contain a certain pieces

of text without you know disrupting the flow
or moving them on to their own line. So I'm

going to give it a class, I'm just going to
say italics, I guess that would work. So then

I'm going to go ahead and use the class selector
italics. Open this up. Now we're going to

go ahead and start working on adding our italicizing.
So what you can do for this is called font

style. And although most of the selectors
these days are quite easy to remember, italics

and font style don't usually go hand in hand.
So it might be a little hard to remember this

one. So there's three different values they
can use for this normal, which is pretty much

the same as setting the font weight is 400
doesn't do anything, or it actually will change

it back to its normal state. Then you have
italic, which is to italicize it, and then

you have oblique, which is a little bit more
italic size. So let's go ahead and just add

the basic one. I'm gonna go and type metalic
here. Now if we refresh the page, you can

see that where it is, there we go. It's right
there

So in this video, we're going to be talking
about the other half of overall text manipulation.

And in this case, we're going to be looking
at different font properties. So in this video,

we're going to be looking at three font size,
font weight and font style. So first thing

I want to look at is font size. So right now
we have our pretty standard text here, right.

So I'm just actually going to go ahead and
erase our text transform from our previous

video. So now we have our text here. And what
I want to do is change the size of this. The

only problem is I want to use a responsive
design. So what I'm going to do is go ahead

and first use our font size property. And
then I'm going to go ahead and say let's just

say 1.25 em. So what happens here is make
this 25% more than the standard font size.

Now you can see it's a little bit bigger,
but it's not as big as doing something like

two n. So there we go. Now that we've done
that, we can also go ahead and actually use

pixel values, if we wanted to 40 pixels for
example, the only problem is this is going

to set everything consistently. So you can
see all of the sizes are the same, it doesn't

matter if they're a header, or while it does
actually matter. But because in the CSS defined

code, all of these headers actually have to
em but if we actually removed all of these,

they would be the same. So using something
like two e n, would be great, because what

actually happens is now everything stays consistent.
And it's also a relative unit. So that's always

good, because it stays responsive. So there
we go. That's pretty much it for font size,

I'm going to go ahead and actually change
this to one point 15 am, I think that's good.

So there we go. That's the first one. Now
let's go ahead and talk about font weight.

So this is a little bit more complicated.
So pretty much what font weight decides is

the bolding of a text or a font. So the values
for this can range from zero, which is nothing

all the way to? Well, pretty much infinity.
The only problem is, most fonts only support

up to 800, or 900. Because, again, for each
value, there is a different bolding stage.

So most fonts are only going to go up to maybe
100, or 900, some of them can go even higher.

But in theory, you can make these values as
big as you want. The only problem is, it's

not really going to show any change if you
make them very big. So there we go. That's

pretty much it for font weight, let's go ahead
and start adding it to our website. So let's

say I wanted to make our title a little bit
bolded. So I'm going to go ahead and say font

dash weight. And now I'm going to go ahead
and specify a value. Let's go ahead and start

with zero and see what happens, you can see
that nothing actually happens. But pretty

much like I said before, most fonts only support
certain values. So for example, 100 would

be a very specific kind of bolding, 200 300
400 and all the way up to as much as the font

supports. Now usually, the convention for
this is you're supposed to go up in hundreds

from 100. That's kind of like the minimum
supported font size. So if I go ahead and

set 100. Here, you can see it's very thin.
And if I go ahead and set it as 800, which

is usually the highest that you should go
realistically, this is kind of the standard

for each one. So there you go, you can set
it to something like 600, which isn't very

commonly seen, like I said, fonts only support
certain bolded ness, if that makes sense.

But you can go ahead and play around with
this. And like I said, depending on the font,

it's going to change what the text actually
looks like. So there we go. That's pretty

much it for font weight, I'm going to go ahead
and actually just set this to 400, which is

the standard font right there. So 400 is the
normal, it's like normal bolding, no bolding

and don't make it very thin. So that's kind
of what it's the normal range. So there we

go. That's it for font weight. Now let's go
ahead and look at font style. So just like

font sizes for size and font weight is for
bolding font style is for italic sizing. So

I'm going to go ahead and actually italicize
a small piece of text here. So let's just

go ahead into this. And I'm going to take
this first part, and actually just cut it

out. I'm going to create a span tag. So a
span tag is sort of an if you don't know it's

an inline day. It's an inline container tag,
which allows you to contain a certain pieces

of text without you know disrupting the flow
or moving them on to their own line. So I'm

going to give it a class, I'm just going to
say italics, I guess that would work. So then

I'm going to go ahead and use the class selector
italics. Open this up. Now we're going to

go ahead and start working on adding our italicizing.
So what you can do for this is called font

style. And although most of the selectors
these days are quite easy to remember, italics

and font style don't usually go hand in hand.
So it might be a little hard to remember this

one. So there's three different values they
can use for this normal, which is pretty much

the same as setting the font weight is 400
doesn't do anything, or it actually will change

it back to its normal state. Then you have
italic, which is to italicize it, and then

you have oblique, which is a little bit more
italic size. So let's go ahead and just add

the basic one. I'm gonna go and type metalic
here. Now if we refresh the page, you can

see that where it is, there we go. It's right
there

is a little bit more. The font, the font is
a little bit a little bit more italic size.

So there we go. Now let's go ahead and set
it as the other value which is oblique. And

you might notice a little bit of a difference.
So it's not immediately obvious, but it's

actually just a little bit more italicize.
So like I said, it's not very good. noticeable.

But that's just one thing to keep in mind.
So there we go, I'm just going to change this

back to italic. And that's pretty much it
for the three different font manipulation

techniques. Now, although I didn't cover font
family, which is what I'm going to cover in

the next video, these are the pretty much
three basic ones that you can use to work

with text without changing the font itself.
So you can go ahead and work with changing

the font weight, you know, make it bolded
or italicized, you can also change the size.

So you can really do a lot with this. But
font family is a little bit more complicated,

which is why I want to leave it for its own
video. All right, let's move on.

is a little bit more. The font, the font is
a little bit a little bit more italic size.

So there we go. Now let's go ahead and set
it as the other value which is oblique. And

you might notice a little bit of a difference.
So it's not immediately obvious, but it's

actually just a little bit more italicize.
So like I said, it's not very good. noticeable.

But that's just one thing to keep in mind.
So there we go, I'm just going to change this

back to italic. And that's pretty much it
for the three different font manipulation

techniques. Now, although I didn't cover font
family, which is what I'm going to cover in

the next video, these are the pretty much
three basic ones that you can use to work

with text without changing the font itself.
So you can go ahead and work with changing

the font weight, you know, make it bolded
or italicized, you can also change the size.

So you can really do a lot with this. But
font family is a little bit more complicated,

which is why I want to leave it for its own
video. All right, let's move on.

So in this video, we're going to be talking
about the last property related to text and

fonts. And that is font family. So I'm going
to talk a little bit about that. But in the

next few videos, we're going to actually looking
at how to include external fonts, which is

going to be a very fun activity. And that's
going to really change the way that we use

CSS. But before we do that, we need to learn
about font families. So first of all, if you

don't already know, a font family is basically
a collection of fonts that have similar features.

So there are three main font families that
you can use serif, sans serif, and monospace.

So first of all, let's talk about serif fonts.
So serif fonts have these small lines on the

end of some letters, and pretty much every
or a lot of the academic papers. And well

printed documents use these serif fonts. So
right now, for example, our font is a Sarah

because you can see these tiny lines at the
end of some of the letters. So these are used

very commonly on like I said, papers, essays,
you know, journals, anything that's pretty

much printed out or given to you physically,
is usually going to use a serif font. But

unfortunately, it makes it very hard to read
on the computer. So there's actually a another

group of fonts, that which is the sans serif
group. And if you don't know sans serif groups,

are basically the fonts that don't have those
lines, if it's not obvious enough, from name.

So right now, this is a serif font. A sans
serif font, on the other hand, would not have

those lines, it would look a lot cleaner,
and easier to read. Now, a lot of the websites

that you use today, so for example, pretty
much all the news websites, if you've used

WordPress before that also uses Sarah sorry,
sans serif fonts unless you specify otherwise,

Google Facebook, pretty much every website
that you see commonly today, the big ones,

usually always use Sans Serif fonts, because
they're much easier to read. So those are

the two main groups. But like I said, there's
also a third one, which is called mono space.

So mono space is pretty much where all of
the characters have the same width. So they

all take up kind of the same space each character.
Whereas something like this, you can see that

each letter kind of takes a different amount
of space, depending on what the letter is.

So some pretty good examples of a sarafan
are Times New Roman, which is probably the

most famous, and Georgia. Some pretty good
examples of Sans Serif fonts are Arial and

Calibri. If you've ever used Google Docs before,
Calibri is a pretty common font. And then

a pretty good example of a monospace font
is Korea new if you know what that is. Korea

news, one of the monospace fonts but like
I said, there's many more out there that you

can use. Like I said, it all depends on what
family you pick, and what what kind of result

you're trying to achieve out of your fonts
or you're trying to make it readable Are you

making a paper or a journal, it all depends
on what you want out of your while document.

So in this case, because we're doing or creating
a website, we're gonna want to use Sans Serif

fonts. So in order to specify a font family,
or in specific a font, you're gonna have to

use the font family

So in this video, we're going to be talking
about the last property related to text and

fonts. And that is font family. So I'm going
to talk a little bit about that. But in the

next few videos, we're going to actually looking
at how to include external fonts, which is

going to be a very fun activity. And that's
going to really change the way that we use

CSS. But before we do that, we need to learn
about font families. So first of all, if you

don't already know, a font family is basically
a collection of fonts that have similar features.

So there are three main font families that
you can use serif, sans serif, and monospace.

So first of all, let's talk about serif fonts.
So serif fonts have these small lines on the

end of some letters, and pretty much every
or a lot of the academic papers. And well

printed documents use these serif fonts. So
right now, for example, our font is a Sarah

because you can see these tiny lines at the
end of some of the letters. So these are used

very commonly on like I said, papers, essays,
you know, journals, anything that's pretty

much printed out or given to you physically,
is usually going to use a serif font. But

unfortunately, it makes it very hard to read
on the computer. So there's actually a another

group of fonts, that which is the sans serif
group. And if you don't know sans serif groups,

are basically the fonts that don't have those
lines, if it's not obvious enough, from name.

So right now, this is a serif font. A sans
serif font, on the other hand, would not have

those lines, it would look a lot cleaner,
and easier to read. Now, a lot of the websites

that you use today, so for example, pretty
much all the news websites, if you've used

WordPress before that also uses Sarah sorry,
sans serif fonts unless you specify otherwise,

Google Facebook, pretty much every website
that you see commonly today, the big ones,

usually always use Sans Serif fonts, because
they're much easier to read. So those are

the two main groups. But like I said, there's
also a third one, which is called mono space.

So mono space is pretty much where all of
the characters have the same width. So they

all take up kind of the same space each character.
Whereas something like this, you can see that

each letter kind of takes a different amount
of space, depending on what the letter is.

So some pretty good examples of a sarafan
are Times New Roman, which is probably the

most famous, and Georgia. Some pretty good
examples of Sans Serif fonts are Arial and

Calibri. If you've ever used Google Docs before,
Calibri is a pretty common font. And then

a pretty good example of a monospace font
is Korea new if you know what that is. Korea

news, one of the monospace fonts but like
I said, there's many more out there that you

can use. Like I said, it all depends on what
family you pick, and what what kind of result

you're trying to achieve out of your fonts
or you're trying to make it readable Are you

making a paper or a journal, it all depends
on what you want out of your while document.

So in this case, because we're doing or creating
a website, we're gonna want to use Sans Serif

fonts. So in order to specify a font family,
or in specific a font, you're gonna have to

use the font family

property. So if you go ahead and set font
family. Now, this isn't just for setting the

family. This is also for spreading the specific
fonts. And I'll talk about that in just a

second. So I'm going to go ahead and say sans
serif. So this is the font family that I want

and watch what happens to our page. Now, you
can see that it looks completely different.

We can actually read everything and it looks
a lot cleaner. So that's why I like san serif

fonts. And that's why most developers much
prefer Sans Serif fonts over serif fonts,

you can see that it just looks a lot easier
on the eyes. It's just much easier to read

and use. But like I said, you can you don't
just have to specify the family you can actually

specify the specific font. And you can actually
do this using the comma separator. So first

of all, I'm basic set times new roman as the
main font. And then I'm going to insert a

comma, and then serif. So I'll explain this
right now, first of all, if a font has more

than one word or it's separated by spaces,
you're going to need to use quotation marks

to contain it. Now, the second thing is this
comma here, pretty much what's going to happen

is, if Times New Roman is available, use that
as the font. But if it isn't available, then

fall back to the standard serif font. So you
can actually include more than just Times

New Roman on here. So you can include three
or even for layers sometimes. But for now,

we're just going to use two and we'll talk
about including very specific fonts in the

next two videos, where we're going to be including
these external fonts. So there we go. Pretty

much what this is saying is set the font family,
in this case, the font, as Times New Roman,

but if Times New Roman isn't available, maybe
you know, if you're using an external font,

maybe this server has crashed, or maybe it's
just not available on the browser, then use

the serif family, there's the general serif
font. So if I actually go ahead and remove

this, you're not going to see much of a difference
between Times New Roman and Sarath. Like I

said, you can see there's not much of a change
because it pretty much the same thing. But

it is there. And if you use a different Sarah
font, such as Georgia, there will be some

sort of a difference between the two, you
can see that now, although they aren't exactly,

they aren't exactly the same, you can see
they both contain those lines, things like

that. So that's why you commonly use more
than more than one fonts, just in case maybe,

if you're using a different browser, maybe
someone's using a very old browser, like Internet

Explorer six or seven, then you can use some
of the older fonts. So there you go. That's

pretty much it. For font families, it's really
not that hard to grasp. And once you really

get into it, it becomes a very, very useful
tool. So I'm going to go ahead and actually

just change this. But like I was saying, it
becomes a very useful tool, once you get into

the later parts of web development, because
changing the font can completely change the

look of your site. So that's just one thing
you want to keep in mind. Alright, let's move

on.

property. So if you go ahead and set font
family. Now, this isn't just for setting the

family. This is also for spreading the specific
fonts. And I'll talk about that in just a

second. So I'm going to go ahead and say sans
serif. So this is the font family that I want

and watch what happens to our page. Now, you
can see that it looks completely different.

We can actually read everything and it looks
a lot cleaner. So that's why I like san serif

fonts. And that's why most developers much
prefer Sans Serif fonts over serif fonts,

you can see that it just looks a lot easier
on the eyes. It's just much easier to read

and use. But like I said, you can you don't
just have to specify the family you can actually

specify the specific font. And you can actually
do this using the comma separator. So first

of all, I'm basic set times new roman as the
main font. And then I'm going to insert a

comma, and then serif. So I'll explain this
right now, first of all, if a font has more

than one word or it's separated by spaces,
you're going to need to use quotation marks

to contain it. Now, the second thing is this
comma here, pretty much what's going to happen

is, if Times New Roman is available, use that
as the font. But if it isn't available, then

fall back to the standard serif font. So you
can actually include more than just Times

New Roman on here. So you can include three
or even for layers sometimes. But for now,

we're just going to use two and we'll talk
about including very specific fonts in the

next two videos, where we're going to be including
these external fonts. So there we go. Pretty

much what this is saying is set the font family,
in this case, the font, as Times New Roman,

but if Times New Roman isn't available, maybe
you know, if you're using an external font,

maybe this server has crashed, or maybe it's
just not available on the browser, then use

the serif family, there's the general serif
font. So if I actually go ahead and remove

this, you're not going to see much of a difference
between Times New Roman and Sarath. Like I

said, you can see there's not much of a change
because it pretty much the same thing. But

it is there. And if you use a different Sarah
font, such as Georgia, there will be some

sort of a difference between the two, you
can see that now, although they aren't exactly,

they aren't exactly the same, you can see
they both contain those lines, things like

that. So that's why you commonly use more
than more than one fonts, just in case maybe,

if you're using a different browser, maybe
someone's using a very old browser, like Internet

Explorer six or seven, then you can use some
of the older fonts. So there you go. That's

pretty much it. For font families, it's really
not that hard to grasp. And once you really

get into it, it becomes a very, very useful
tool. So I'm going to go ahead and actually

just change this. But like I was saying, it
becomes a very useful tool, once you get into

the later parts of web development, because
changing the font can completely change the

look of your site. So that's just one thing
you want to keep in mind. Alright, let's move

on.

So in this video, we are going to be looking
at actually using some external fonts. We've

looked at fonts and text, and we know how
to manipulate it now. But we don't actually

know the one crucial piece, which is using
external fonts. So your computer will most

likely come preloaded with a bunch of different
fonts. If you use things like Microsoft Word,

or, you know, maybe Google Docs, things like
that. They all come with pre loaded fonts.

And although Google Docs technically isn't
on your computer, we'll just leave it in there

for now. So obviously, we have a lot of fonts
to choose from in CSS. But first of all, how

do we actually know which fonts to use? And
what if we don't have the font? I mean, you

know, maybe it doesn't come with our computer,
how are we supposed to get it? Well, the first

thing that I would recommend doing is going
and getting fonts from the internet. Now,

if you don't already know this, most people
would think that you know, the fonts that

you have are set for life, you can't download
anymore. Well, fonts are actually a huge growing

industry. And there are so many different
fonts out there that you can use, and you

can even make your own. So there's obviously
a lot more fonts to choose them than what's

provided on your computer. So in this video,
I'm going to be teaching you how to go and

find your own fonts. And then in the next
video, we're going to be including it into

our project. So the first source I'm going
to recommend here, which is actually only

source, but it's called Google fonts, it was
put together by Google. And it's a collection

of 915 font families. So you can see we have
a bunch of different fonts here. And when

I say font families, just think fonts default,
because

So in this video, we are going to be looking
at actually using some external fonts. We've

looked at fonts and text, and we know how
to manipulate it now. But we don't actually

know the one crucial piece, which is using
external fonts. So your computer will most

likely come preloaded with a bunch of different
fonts. If you use things like Microsoft Word,

or, you know, maybe Google Docs, things like
that. They all come with pre loaded fonts.

And although Google Docs technically isn't
on your computer, we'll just leave it in there

for now. So obviously, we have a lot of fonts
to choose from in CSS. But first of all, how

do we actually know which fonts to use? And
what if we don't have the font? I mean, you

know, maybe it doesn't come with our computer,
how are we supposed to get it? Well, the first

thing that I would recommend doing is going
and getting fonts from the internet. Now,

if you don't already know this, most people
would think that you know, the fonts that

you have are set for life, you can't download
anymore. Well, fonts are actually a huge growing

industry. And there are so many different
fonts out there that you can use, and you

can even make your own. So there's obviously
a lot more fonts to choose them than what's

provided on your computer. So in this video,
I'm going to be teaching you how to go and

find your own fonts. And then in the next
video, we're going to be including it into

our project. So the first source I'm going
to recommend here, which is actually only

source, but it's called Google fonts, it was
put together by Google. And it's a collection

of 915 font families. So you can see we have
a bunch of different fonts here. And when

I say font families, just think fonts default,
because

you know, when you think of it as a family,
you think there's multiple fonts, but there's

actually only one and then you can change
the bolding and other settings, we'll go over

that a little bit later in this video. So
you can head over to this, I've linked it

in the lecture resources, or you can just
copy the link here from video. And it's going

to take you to this site. So there's actually
915 families on this site, which is a lot

to choose from. Now you can see that there
are even you know things in different languages.

There's all sorts of different styles, maybe
from different general families. So this could

be from, you know, a sensory family. This
could be from a Sarah family. So you can see

that there are so many different choices that
you can use. And depending on what type of

website you want to create, you can actually
choose the fonts that you want. So I'm gonna

actually go through now and start picking
some fonts. So what I would recommend is just

go through and look at the many different
fonts you have here. So for example, I think

this is a very nice font. So what I'm going
to do is just go ahead and click this plus

icon And what it's going to do here it says
there's one family selected, right? If you

open it up, you can see that our font has
been selected. Now we're going to work on

embedding this in the next video. But for
now, I just want to leave it like this. So

you can see that we can actually go ahead
and customize our font now. So for example,

if I wanted to choose some different bolding,
so for example, you can see, this is a font

weight of 100. And this is a font weight of
900. So you can select as many as you want.

But you can see that we actually have a load
type here. So the reason that this is given

is because we are including this from the
internet, obviously. So if you try to pull

too many resources from an intranet or from,
you know, outside of your local machine, it's

going to really slow down the load time of
your website, because obviously, it's not

instantaneous, you need to send over requests,
and there's a whole lot that goes behind.

So while I would recommend is not trying to
select every single one of these weights,

only select the ones that you think you're
going to need. So for example, for now, I'm

just going to select the regular and the bolt.
Now, I don't want any italics. So I'm just

going to exclude this. And you can see that
our load time is fast. So we're okay. So you

can see that apart from our buildings, we
can actually select some of some of the stuff

from here. So instead of having to go into
our selection, we can actually just go and

straight select it. From here, we can also
change the size if we wanted to. And then

we can click the plus icon. So you can go
ahead and play around with those when you

include your own fonts. But for now, I think
I'm just going to go with the default size

and just add a bolded. So now I'm going to
go ahead and actually include a second font,

because it's pretty common in web development
and web design to include at least two fonts,

you know, maybe one for headings, and one
for text. So I'm going to go ahead and find

something that kind of fits in with the later
font that we have here, I'm going to just

select it back to the default size. So I'm
going to try and find something that kind

of matches this. It doesn't have to be obviously
exactly the same. It can just be something

that you know, kind of fits in the theme,
or makes the website look kind of complements

the other font. So I think this is good. It's
actually Sarah serif. So I don't I'm not going

to use it, you can see those lines there.
I'm looking for a sans serif font. Let me

see. So I think this is a pretty good font.
So what I'm going to do is go ahead and add

this as well just click on that plus icon.
And now we can actually customize both fonts.

So I'm going to go ahead and add that bold
700 as well, you can see that the load time

is moderate now because of course, we're including
more than one font, but we don't need to worry

about that too much. So there we go. We have
that setup now. So there we go. That's pretty

much it for Google fonts. And you know, using
all these different fonts, now you can go

ahead and customize it. Choose whatever makes
your website look good, or maybe whatever

you want. But just make sure that you choose
a font that really works with your website

well and make sure you don't include too many
different weights. So you can keep the load

time within Bay. So in the next video, we're
actually going to go through and start importing

this into our website. And I'm going to teach
you some really good failsafe tricks in case

Google Fonts fails. Alright, let's move on.

you know, when you think of it as a family,
you think there's multiple fonts, but there's

actually only one and then you can change
the bolding and other settings, we'll go over

that a little bit later in this video. So
you can head over to this, I've linked it

in the lecture resources, or you can just
copy the link here from video. And it's going

to take you to this site. So there's actually
915 families on this site, which is a lot

to choose from. Now you can see that there
are even you know things in different languages.

There's all sorts of different styles, maybe
from different general families. So this could

be from, you know, a sensory family. This
could be from a Sarah family. So you can see

that there are so many different choices that
you can use. And depending on what type of

website you want to create, you can actually
choose the fonts that you want. So I'm gonna

actually go through now and start picking
some fonts. So what I would recommend is just

go through and look at the many different
fonts you have here. So for example, I think

this is a very nice font. So what I'm going
to do is just go ahead and click this plus

icon And what it's going to do here it says
there's one family selected, right? If you

open it up, you can see that our font has
been selected. Now we're going to work on

embedding this in the next video. But for
now, I just want to leave it like this. So

you can see that we can actually go ahead
and customize our font now. So for example,

if I wanted to choose some different bolding,
so for example, you can see, this is a font

weight of 100. And this is a font weight of
900. So you can select as many as you want.

But you can see that we actually have a load
type here. So the reason that this is given

is because we are including this from the
internet, obviously. So if you try to pull

too many resources from an intranet or from,
you know, outside of your local machine, it's

going to really slow down the load time of
your website, because obviously, it's not

instantaneous, you need to send over requests,
and there's a whole lot that goes behind.

So while I would recommend is not trying to
select every single one of these weights,

only select the ones that you think you're
going to need. So for example, for now, I'm

just going to select the regular and the bolt.
Now, I don't want any italics. So I'm just

going to exclude this. And you can see that
our load time is fast. So we're okay. So you

can see that apart from our buildings, we
can actually select some of some of the stuff

from here. So instead of having to go into
our selection, we can actually just go and

straight select it. From here, we can also
change the size if we wanted to. And then

we can click the plus icon. So you can go
ahead and play around with those when you

include your own fonts. But for now, I think
I'm just going to go with the default size

and just add a bolded. So now I'm going to
go ahead and actually include a second font,

because it's pretty common in web development
and web design to include at least two fonts,

you know, maybe one for headings, and one
for text. So I'm going to go ahead and find

something that kind of fits in with the later
font that we have here, I'm going to just

select it back to the default size. So I'm
going to try and find something that kind

of matches this. It doesn't have to be obviously
exactly the same. It can just be something

that you know, kind of fits in the theme,
or makes the website look kind of complements

the other font. So I think this is good. It's
actually Sarah serif. So I don't I'm not going

to use it, you can see those lines there.
I'm looking for a sans serif font. Let me

see. So I think this is a pretty good font.
So what I'm going to do is go ahead and add

this as well just click on that plus icon.
And now we can actually customize both fonts.

So I'm going to go ahead and add that bold
700 as well, you can see that the load time

is moderate now because of course, we're including
more than one font, but we don't need to worry

about that too much. So there we go. We have
that setup now. So there we go. That's pretty

much it for Google fonts. And you know, using
all these different fonts, now you can go

ahead and customize it. Choose whatever makes
your website look good, or maybe whatever

you want. But just make sure that you choose
a font that really works with your website

well and make sure you don't include too many
different weights. So you can keep the load

time within Bay. So in the next video, we're
actually going to go through and start importing

this into our website. And I'm going to teach
you some really good failsafe tricks in case

Google Fonts fails. Alright, let's move on.

So in the previous video, we started looking
at what type of fonts we can use in our website.

Now we're going to go through and actually
include them. So first of all, let's just

look at our website. For now we have all of
our fonts setup, we have a bunch of text manipulation,

ready to go and working on the website. But
now what I'm going to do is actually go through

and start using these external fonts. So we're
not going to use this Arial font anymore,

so I'm going to go ahead and erase that. And
also for the font weight, I'm also going to

go ahead and erase that because there's some
issues with it that I'll talk about in just

a second. So there we go. Now that we removed,
all of the properties will be directly affected

by the font. Let's go ahead and work on setting
up our website with these external fonts.

So the first thing you'll notice here is that
when you go over to your Google fonts, it

gives you this link tag to include. So this
link tag is pretty much going to link to Google

fonts and pull them from their servers. So
this is what you're going to need to copy

right here. You're just going to copy this
and up in your HTML document, you're going

to paste your link tag above your stylesheet.
Now make sure you post it above this above

your stylesheet because you want to have the
fonts ready so that when your stylesheet comes

along and the compiler is reading it, all
of the fonts are already there and ready to

go. So there we go. Now that everything's
linked and set up, why don't we go ahead and

see what happened on our website. Obviously,
we removed the font You can see that nothing

actually happens. So, by doing this, we don't
actually set up our website to use our fonts,

we're just bringing them into our website.
Now what we need to do is go through in CSS

and start utilizing these fonts, so that we
can see the changes on the website. So on

top of that, this, there's this little text
here that allows you to do you know, you can

just copy the style straight, but I'm going
to go ahead and do it manually. So first of

all, let's go ahead and add our body font.
So I'm going to go ahead and say, font family.

And now we're going to go through and select
our font. So we included two fonts, Leto and

sorrow boon we're going to go through is go
ahead and see which one we want to use. So

I'm going to use Leto for the body text. So
right here in quotes, I'm going to go ahead

and say, Leto, just like that. And now let's
go ahead and refresh the page. And you can

see how much of a difference that makes. Now
using this new font, everything has changed,

it makes the website look completely different
from what it used to be. So there we go, we've

included that. But let's go ahead and include
our second font here. So I'm going to go through

and actually add it on the title and the subtitle.
And remember going back to specificity, the

class and Id selectors are going to be more
specific than the body selectors. So our font

family is going to override the body font
family. So let's go ahead and add that. Right

there. Just like that. And let's go ahead
and add it to our subtitle as well. All right,

well, let's go ahead and see what happens.
So you can see that, although the difference

is quite subtle, it's still changed the font
of the titles and subtitles. And you can see

why using two fonts on your website makes
it look a whole lot better. So there we go.

We've added all of our fonts. But the only
problem is, we know that what what's happening

beside behind the scenes is that this link
tag is going to Google servers, pulling these

fonts, and then including them in our website.
But what if it fails? What if there's no internet

connection, or what if it's down, maybe the
Google Fonts servers themselves are down.

This is where we need to use the trick we
learned in the font families video, in which

we can actually add a backup font to this.
And if we actually go on Google Fonts right

here, you can see they already do this. Now,
because the sans serif family is included

by default, what's going to happen is, normally
it's going to use the font specified. But

if there's some problem, and we can't get
these fonts, maybe Google servers are down,

it's going to go over to the next font. And
we know that sans serif is included on every

single machine, which means that it's going
to work fine. So let's go ahead and do that.

Now. If you remember, all we have to do is
go ahead and add a comma, and then put the

name of the family, which in this case is
sans serif. We're going to do this for the

other two as well.

So in the previous video, we started looking
at what type of fonts we can use in our website.

Now we're going to go through and actually
include them. So first of all, let's just

look at our website. For now we have all of
our fonts setup, we have a bunch of text manipulation,

ready to go and working on the website. But
now what I'm going to do is actually go through

and start using these external fonts. So we're
not going to use this Arial font anymore,

so I'm going to go ahead and erase that. And
also for the font weight, I'm also going to

go ahead and erase that because there's some
issues with it that I'll talk about in just

a second. So there we go. Now that we removed,
all of the properties will be directly affected

by the font. Let's go ahead and work on setting
up our website with these external fonts.

So the first thing you'll notice here is that
when you go over to your Google fonts, it

gives you this link tag to include. So this
link tag is pretty much going to link to Google

fonts and pull them from their servers. So
this is what you're going to need to copy

right here. You're just going to copy this
and up in your HTML document, you're going

to paste your link tag above your stylesheet.
Now make sure you post it above this above

your stylesheet because you want to have the
fonts ready so that when your stylesheet comes

along and the compiler is reading it, all
of the fonts are already there and ready to

go. So there we go. Now that everything's
linked and set up, why don't we go ahead and

see what happened on our website. Obviously,
we removed the font You can see that nothing

actually happens. So, by doing this, we don't
actually set up our website to use our fonts,

we're just bringing them into our website.
Now what we need to do is go through in CSS

and start utilizing these fonts, so that we
can see the changes on the website. So on

top of that, this, there's this little text
here that allows you to do you know, you can

just copy the style straight, but I'm going
to go ahead and do it manually. So first of

all, let's go ahead and add our body font.
So I'm going to go ahead and say, font family.

And now we're going to go through and select
our font. So we included two fonts, Leto and

sorrow boon we're going to go through is go
ahead and see which one we want to use. So

I'm going to use Leto for the body text. So
right here in quotes, I'm going to go ahead

and say, Leto, just like that. And now let's
go ahead and refresh the page. And you can

see how much of a difference that makes. Now
using this new font, everything has changed,

it makes the website look completely different
from what it used to be. So there we go, we've

included that. But let's go ahead and include
our second font here. So I'm going to go through

and actually add it on the title and the subtitle.
And remember going back to specificity, the

class and Id selectors are going to be more
specific than the body selectors. So our font

family is going to override the body font
family. So let's go ahead and add that. Right

there. Just like that. And let's go ahead
and add it to our subtitle as well. All right,

well, let's go ahead and see what happens.
So you can see that, although the difference

is quite subtle, it's still changed the font
of the titles and subtitles. And you can see

why using two fonts on your website makes
it look a whole lot better. So there we go.

We've added all of our fonts. But the only
problem is, we know that what what's happening

beside behind the scenes is that this link
tag is going to Google servers, pulling these

fonts, and then including them in our website.
But what if it fails? What if there's no internet

connection, or what if it's down, maybe the
Google Fonts servers themselves are down.

This is where we need to use the trick we
learned in the font families video, in which

we can actually add a backup font to this.
And if we actually go on Google Fonts right

here, you can see they already do this. Now,
because the sans serif family is included

by default, what's going to happen is, normally
it's going to use the font specified. But

if there's some problem, and we can't get
these fonts, maybe Google servers are down,

it's going to go over to the next font. And
we know that sans serif is included on every

single machine, which means that it's going
to work fine. So let's go ahead and do that.

Now. If you remember, all we have to do is
go ahead and add a comma, and then put the

name of the family, which in this case is
sans serif. We're going to do this for the

other two as well.

And this one as well. Now, of course, this
is going to change based on the font that

you use. And I'm actually going to show you
this right here. Let's remove both of these

and add a serif font. So this would be considered
a serif font. Let's go ahead and add that.

Now if we go ahead and look at the family,
well, it's actually not not serif. It's a

different family called cursive. But you can
see just to prove that point that the family

is going to depend on the font itself. So
we explained a little bit about font families

in that video. And obviously, all of them
have different characteristics. So of course,

like I said, it depends completely on the
type of font. So if I go ahead and see the

family there, you can see that that sans serif.
But if we use something like this font, it's

going to be a different font family. So that's
just one thing you need to keep in mind is

that you want to make sure your fallback font
is both included on every machine. And it's

kind of similar to our font here. Now, if
I actually go ahead and erase this, now let's

go ahead and see, obviously, there is a visual
difference, but it still has that same style.

There's no lines, it's clean to read. It's
just straightforward. So that's one thing

you want to make sure of. Alright, so that's
pretty much it for fonts. Next, we're going

to move on to layout, which is really gonna
change the way that this website looks. Alright,

let's move on.

And this one as well. Now, of course, this
is going to change based on the font that

you use. And I'm actually going to show you
this right here. Let's remove both of these

and add a serif font. So this would be considered
a serif font. Let's go ahead and add that.

Now if we go ahead and look at the family,
well, it's actually not not serif. It's a

different family called cursive. But you can
see just to prove that point that the family

is going to depend on the font itself. So
we explained a little bit about font families

in that video. And obviously, all of them
have different characteristics. So of course,

like I said, it depends completely on the
type of font. So if I go ahead and see the

family there, you can see that that sans serif.
But if we use something like this font, it's

going to be a different font family. So that's
just one thing you need to keep in mind is

that you want to make sure your fallback font
is both included on every machine. And it's

kind of similar to our font here. Now, if
I actually go ahead and erase this, now let's

go ahead and see, obviously, there is a visual
difference, but it still has that same style.

There's no lines, it's clean to read. It's
just straightforward. So that's one thing

you want to make sure of. Alright, so that's
pretty much it for fonts. Next, we're going

to move on to layout, which is really gonna
change the way that this website looks. Alright,

let's move on.

So the next few videos are going to be focused
on CSS layout. So we're pretty much done,

at least for now with coloring and text and
all of the cool features we can do with them.

But now we're gonna actually go through and
start using our skills with different well,

new skills that we can actually put together
and create really, really nice, awesome websites.

So layout is probably one of the most powerful
tools that you can use in CSS and completely

change the way your website looks. But before
we move on, we need to learn a little bit

of theory behind how CSS works. So there's
this concept in CSS called the box model,

and it's pretty much the the what happens
is every Simple element is surrounded by an

invisible box. Now this box has different
layers, which we're going to explain in the

next video. But all of these boxes are touching
together, they're kind of connected, what

you can do is actually change the shapes of
these boxes and change the shapes of the layers

in order to move things around, and position
them on a page in a way that makes the website

look much better. Now, obviously, this isn't
the only way of shaping your website, there

are so many different methods, Flexbox, and
grid, and we're all going to cover them later

in this course. But for now, this is the basic
kind of layout features that you need to use,

so that you can move on and start using some
of the most complex features. So this is kind

of what that invisible box looks like. So
at the center is where your content is. Now

I'm going to explain this in just a second,
all of these little terms, padding, border

and margin. But you can see that the center
contains the content. But then the other three

layers are something completely unknown. And
we're going to be going through and explaining

what those do. But for now, just understand
that you have the content on the center. But

then there's this invisible box around it,
that is split up into three layers. So let's

go over the first one, which is the padding.
Now the padding represents the space between

the content and the border of the content.
Now you can see up in this model, we have

this padding section, and then we have a border.
So pretty much what the border does is it

separates the content and the padding from
the margin. But pretty much let's just assume

for now that the margin kind of move things
around, and it doesn't actually move the content

around, what padding is supposed to do is
it's basically supposed to give more room

around the content itself, it's not really
meant to move the content around. So it'll

make some more sense when I go over margin
if you don't understand it now, but let's

move on to the next layer. The border is pretty
much the divide, or the separation line between

the content, the padding and the margin. So
borders can be styled and changed. And by

default, they're invisible. But we can actually
go through and change how they look which

we're going to be going through in a couple
videos time. So the border doesn't actually

create any spacing or anything itself, unless
you wanted to. But pretty much what the border

is supposed to be is kind of that division
line. So the last layer that I want to talk

about is the margin. So just like how the
padding is supposed to give spacing, or well

padding around the content, the margin is
supposed to move the content around and give

it space between other elements. So while
the padding is used for internal space, the

margin is used for external space and is made.
So that to give room and spacing around external

elements. So for example, if you have an image
and then some text under it, you can use the

margin of the text to kind of push it down
from the image, whereas the padding will just

kind of make internal space. Now, although
it's not the best example, as we go on and

start using it, you'll get this a lot more
if you don't already. Alright, so that's pretty

much it for the box model. It's a very, very
simple concept. But it can be really used

to a very high potential, and it does contain
a lot of features that we're going to be going

over in the next few videos. Alright, let's
move on.

So the next few videos are going to be focused
on CSS layout. So we're pretty much done,

at least for now with coloring and text and
all of the cool features we can do with them.

But now we're gonna actually go through and
start using our skills with different well,

new skills that we can actually put together
and create really, really nice, awesome websites.

So layout is probably one of the most powerful
tools that you can use in CSS and completely

change the way your website looks. But before
we move on, we need to learn a little bit

of theory behind how CSS works. So there's
this concept in CSS called the box model,

and it's pretty much the the what happens
is every Simple element is surrounded by an

invisible box. Now this box has different
layers, which we're going to explain in the

next video. But all of these boxes are touching
together, they're kind of connected, what

you can do is actually change the shapes of
these boxes and change the shapes of the layers

in order to move things around, and position
them on a page in a way that makes the website

look much better. Now, obviously, this isn't
the only way of shaping your website, there

are so many different methods, Flexbox, and
grid, and we're all going to cover them later

in this course. But for now, this is the basic
kind of layout features that you need to use,

so that you can move on and start using some
of the most complex features. So this is kind

of what that invisible box looks like. So
at the center is where your content is. Now

I'm going to explain this in just a second,
all of these little terms, padding, border

and margin. But you can see that the center
contains the content. But then the other three

layers are something completely unknown. And
we're going to be going through and explaining

what those do. But for now, just understand
that you have the content on the center. But

then there's this invisible box around it,
that is split up into three layers. So let's

go over the first one, which is the padding.
Now the padding represents the space between

the content and the border of the content.
Now you can see up in this model, we have

this padding section, and then we have a border.
So pretty much what the border does is it

separates the content and the padding from
the margin. But pretty much let's just assume

for now that the margin kind of move things
around, and it doesn't actually move the content

around, what padding is supposed to do is
it's basically supposed to give more room

around the content itself, it's not really
meant to move the content around. So it'll

make some more sense when I go over margin
if you don't understand it now, but let's

move on to the next layer. The border is pretty
much the divide, or the separation line between

the content, the padding and the margin. So
borders can be styled and changed. And by

default, they're invisible. But we can actually
go through and change how they look which

we're going to be going through in a couple
videos time. So the border doesn't actually

create any spacing or anything itself, unless
you wanted to. But pretty much what the border

is supposed to be is kind of that division
line. So the last layer that I want to talk

about is the margin. So just like how the
padding is supposed to give spacing, or well

padding around the content, the margin is
supposed to move the content around and give

it space between other elements. So while
the padding is used for internal space, the

margin is used for external space and is made.
So that to give room and spacing around external

elements. So for example, if you have an image
and then some text under it, you can use the

margin of the text to kind of push it down
from the image, whereas the padding will just

kind of make internal space. Now, although
it's not the best example, as we go on and

start using it, you'll get this a lot more
if you don't already. Alright, so that's pretty

much it for the box model. It's a very, very
simple concept. But it can be really used

to a very high potential, and it does contain
a lot of features that we're going to be going

over in the next few videos. Alright, let's
move on.

So now what we're going to be doing is going
through and starting to use the first layer

of the box model, which in this case is the
content itself. So although not technically

a layer of this invisible box, it's still
a big part of layout, and the shaping of things

on your document, because the way you shape
and while style, your content is going to

completely change how the rest of the box
models affected your padding and your margin.

So what we're going to be doing is going through
and using some of these. And if you actually

remember, right here, we have already used
the two main features of shaping content,

height and width. So we've already pretty
much learned these properties. But I'm going

to go through and do a couple more examples
just so you can get the shape of things and

how to use them. So first thing I want to
talk about is the units that you should use.

So usually on a page, the best way to do this
is using pixels or some absolute unit for

height. But then for width, use a relative
units such as v w, or percentage. Now we do

this because although height is very, very
hard to determine responsively at least, they

kind of stay the same as you move down so
the height is going to kind of stay consistent.

The only problem is the width completely changes
everything. So the width of devices is very

different from place to place. So a phone
would be quite a small width whereas you know

full screen TV would be very wide width. So
that's why you use relative units for width

is that you can keep it consistent. Or still,
you can keep both of the values consistent

while still using different units. So let's
go through and actually use it on this image

here. So the first thing I want to do is go
ahead and give this a class, we're actually

I'm going to give it an ID. So I'm going to
give it an ID of about us image, just like

that. All right, now, let's go ahead and select
it here, I'm going to go hash about us image.

Remember the id selector. And now what we're
going to do is go through and start adding

our, our properties. So the first thing I'm
going to add is the height. So I'm just going

to make this a cool 300 pixels, just to see
how it is. And most of this is very experimental,

you're not supposed to go through and change
everything. And, you know, well, well you

are, but you're not supposed to go through
and set everything to a constant value. So

you're supposed to, you know, play around,
see what works. And then once you're familiar

with it, and once you know what you want,
you can leave it as it is. So there we go,

we set the height. Now, obviously, this with
the width of the image itself is always relative,

but I'm going to go ahead and change it anyways,
I'm going to go ahead and say the width is

60 v w. Now, you could always say 60%, it
would pretty much be the same thing. But I'm

going to go ahead and use v w here just to

So now what we're going to be doing is going
through and starting to use the first layer

of the box model, which in this case is the
content itself. So although not technically

a layer of this invisible box, it's still
a big part of layout, and the shaping of things

on your document, because the way you shape
and while style, your content is going to

completely change how the rest of the box
models affected your padding and your margin.

So what we're going to be doing is going through
and using some of these. And if you actually

remember, right here, we have already used
the two main features of shaping content,

height and width. So we've already pretty
much learned these properties. But I'm going

to go through and do a couple more examples
just so you can get the shape of things and

how to use them. So first thing I want to
talk about is the units that you should use.

So usually on a page, the best way to do this
is using pixels or some absolute unit for

height. But then for width, use a relative
units such as v w, or percentage. Now we do

this because although height is very, very
hard to determine responsively at least, they

kind of stay the same as you move down so
the height is going to kind of stay consistent.

The only problem is the width completely changes
everything. So the width of devices is very

different from place to place. So a phone
would be quite a small width whereas you know

full screen TV would be very wide width. So
that's why you use relative units for width

is that you can keep it consistent. Or still,
you can keep both of the values consistent

while still using different units. So let's
go through and actually use it on this image

here. So the first thing I want to do is go
ahead and give this a class, we're actually

I'm going to give it an ID. So I'm going to
give it an ID of about us image, just like

that. All right, now, let's go ahead and select
it here, I'm going to go hash about us image.

Remember the id selector. And now what we're
going to do is go through and start adding

our, our properties. So the first thing I'm
going to add is the height. So I'm just going

to make this a cool 300 pixels, just to see
how it is. And most of this is very experimental,

you're not supposed to go through and change
everything. And, you know, well, well you

are, but you're not supposed to go through
and set everything to a constant value. So

you're supposed to, you know, play around,
see what works. And then once you're familiar

with it, and once you know what you want,
you can leave it as it is. So there we go,

we set the height. Now, obviously, this with
the width of the image itself is always relative,

but I'm going to go ahead and change it anyways,
I'm going to go ahead and say the width is

60 v w. Now, you could always say 60%, it
would pretty much be the same thing. But I'm

going to go ahead and use v w here just to

actually, you know what, we have V w here
already, so I'm going to go ahead and add

percentage, there we go. Now, of course, you
could use whichever unit you want, they're

gonna mean pretty much the same thing. Obviously,
apart from the different viewports, and things

like that, but they're pretty much the same
for our purposes. So you can use whichever

one you want. So there we go, we've changed
it. Now if we go ahead and resize of most,

you can actually go ahead and see that the
width is going to be pretty much the same,

well, the height stays constant. So one thing
I want to talk about is a really cool feature

that we can use in Chrome. And you can see
that's a little bit weird there. But we'll

worry about it, we'll worry about that later,
is a really cool feature that allows you to

actually change the viewport of your Chrome
window without actually having to use different

devices. So if you go ahead and click on the
icon, just right click anywhere on the page,

click on Inspect, and it's going to bring
you here to this page. And you can actually

select any device you want from the drop down
menu and see how it would look on that on

that device. So I can pretty much do whatever
I want here. If I wanted to select an iPad,

even an iPad Pro, you can actually see what
it would look like on the device. So this

is a really useful feature that you can use
to make sure that your website works everywhere,

instead of having to go and upload it somewhere
and then view it on all those different devices.

You can also set select this responsive design,
which I really liked, because then you can

change the size however you want. Just like
that you can see, and it will work perfectly.

So yeah, that's great. And you know, if maybe
if you don't want to use these devices from

this drop down menu, you can actually go through
and change the size here, which is really

useful. So I'm going to go ahead and close
this off now. And you can see that our website

is looking good. Obviously, our image here,
it looks quite weird. But like I said, it's

all about experimentation, you're supposed
to go through and see what works. And obviously,

you don't have to use an absolute value. It's
not set in stone, but you're supposed to go

through and see what works for you. And from
there, you can set the value. So this is just

kind of a little experimental thing to teach
you how to use these features. But like I

said, this website's all about what this course
is all about practicing and getting experienced

with this. So you can go through, check out
the project files and play around with these

values yourself, really get a feel for how
this works. So that's pretty much it for content

resizing, it's very easy, there's only two
properties you need to know. And pretty much

the rest of the box model is also quite easy.
But it's good that we learn it step by step

so that we master every stage and by the end
of it, we'll really know how to master the

layout and really manipulate our page in the
best possible way. Alright, let's move on.

actually, you know what, we have V w here
already, so I'm going to go ahead and add

percentage, there we go. Now, of course, you
could use whichever unit you want, they're

gonna mean pretty much the same thing. Obviously,
apart from the different viewports, and things

like that, but they're pretty much the same
for our purposes. So you can use whichever

one you want. So there we go, we've changed
it. Now if we go ahead and resize of most,

you can actually go ahead and see that the
width is going to be pretty much the same,

well, the height stays constant. So one thing
I want to talk about is a really cool feature

that we can use in Chrome. And you can see
that's a little bit weird there. But we'll

worry about it, we'll worry about that later,
is a really cool feature that allows you to

actually change the viewport of your Chrome
window without actually having to use different

devices. So if you go ahead and click on the
icon, just right click anywhere on the page,

click on Inspect, and it's going to bring
you here to this page. And you can actually

select any device you want from the drop down
menu and see how it would look on that on

that device. So I can pretty much do whatever
I want here. If I wanted to select an iPad,

even an iPad Pro, you can actually see what
it would look like on the device. So this

is a really useful feature that you can use
to make sure that your website works everywhere,

instead of having to go and upload it somewhere
and then view it on all those different devices.

You can also set select this responsive design,
which I really liked, because then you can

change the size however you want. Just like
that you can see, and it will work perfectly.

So yeah, that's great. And you know, if maybe
if you don't want to use these devices from

this drop down menu, you can actually go through
and change the size here, which is really

useful. So I'm going to go ahead and close
this off now. And you can see that our website

is looking good. Obviously, our image here,
it looks quite weird. But like I said, it's

all about experimentation, you're supposed
to go through and see what works. And obviously,

you don't have to use an absolute value. It's
not set in stone, but you're supposed to go

through and see what works for you. And from
there, you can set the value. So this is just

kind of a little experimental thing to teach
you how to use these features. But like I

said, this website's all about what this course
is all about practicing and getting experienced

with this. So you can go through, check out
the project files and play around with these

values yourself, really get a feel for how
this works. So that's pretty much it for content

resizing, it's very easy, there's only two
properties you need to know. And pretty much

the rest of the box model is also quite easy.
But it's good that we learn it step by step

so that we master every stage and by the end
of it, we'll really know how to master the

layout and really manipulate our page in the
best possible way. Alright, let's move on.

So in this video, we're going to be focusing
on one of the parts of the box model, which

are mortars. So in the previous video, I talked
a little bit about some of the different layers

of the box model and how they work. But in
this video, we're actually going to be focusing

on manipulating one of those layers, which
is the border. And although it's not the really

the main part of the whole box model idea,
it's still a pretty useful skill to know and

it really helps you understand how the box
model comes together. Alright, let's get started.

So for the next few videos, we're mainly going
to be working with the images simply because

they're just easier to manipulate and set
the layout over something working with something

like that. text or titles, things like that.
So we're going to be working with our circular

gray here that we created in a previous video,
as well as this custom image. So let's get

started. So now there are many different styles
that you can use to style the borders. But

we're going to be using the main shorthand
that allows us to style everything all at

once. So the property is similar to our background
property here, all you need to type is border,

whoops, you do on the image. So I'm going
to go here on our radial gradients. And I'm

going to start adding our border. So let's
go ahead and get started. So what I'm going

to do is just type border. And remember, every
single element has a box around it has this

box model or invisible box. So it doesn't
matter what you choose, you can always style

these elements, it might look weird on some
elements like this text here, but you can

do it with everything. So there are three
main parts to this element here. First is

going to be the size. So we'll talk about
that in a second, then you're going to have

the style, which is probably the main part.
And then finally, you're going to have the

color. So now that we have this, we can go
ahead and start talking about this. So size

is pretty similar to you know, changing the
size of an image, for example, yeah, it can

be in pixels percent or em, it doesn't matter,
I'm going to go with pixels for now. Now,

the usual range for a border is somewhere
between, you know, one and three or four pixels,

we can go much thicker than that, depending
on what you need. So I'm going to go ahead

and show you want to pixels looked like. So
remember separated by a space. Now we're going

to go over the style. So there are many different
styles you can use on your borders. But there's

three main ones that we're going to talk about,
or sorry, four main ones, we're going to talk

about dotted, dashed, solid and double. Now
normally, you're going to see solid, that's

pretty much the most common one, I'll show
you the other versions of this in just a second.

So I'm going to go ahead and type solid, and
now come to the color. So as we learned refer

before this can be a named color, this can
be an RGB code, or even a hex code, I'm going

to go ahead and just choose a darkish blue,
I think that will fit in really well with

the page. And in fact, you know what, let's
not, let's not use the color picker, let's

just use our RGB color skills. And take the
color of the background, which is here. So

we're going to take those four. And I'm going
to go back to our image here and paste it

in. And now what I'm going to do is just darken
everything. And if you remember, the darker

it gets the higher oak sorry, the lower all
of these values get. So I'm just going to

lower them all by about 50. So here, I'm just
going to go 154. Now, again, this doesn't

have to be exact, or anything you can, you
can put really, whatever you want here, but

I'm just trying to darken everything, I'm
just gonna make this 200. Let's go ahead and

refresh the page and see how our border looks.
Now. Let's scroll down. So there's the problem,

we actually forgot a semicolon here on the
end of the background. So that's one thing

you need to keep in mind. There we go. Now
it's working. And you can see and I did actually

change the color there just to test it out.
And you can see, there we go, we have our

background. So obviously, it's pretty obvious
here with our bright red color there. But

what I'm actually going to do is go ahead
and just play around with some of these and

see if we can change the features. So first
thing I'm going to do is go ahead and change

the height. So I'm going to go ahead and set
it as 10 pixels. For example, you can see

that they open up the height sorry, the size,
you can see that that gets a lot thicker,

so you can change it depending on how you
want your border to look like. So now let's

go ahead and change the style. So let's go
ahead and try out some of these other styles.

So first, I'm going to try dotted. So you
can see now we have a dotted border. Now let's

go ahead and try dashed.

So in this video, we're going to be focusing
on one of the parts of the box model, which

are mortars. So in the previous video, I talked
a little bit about some of the different layers

of the box model and how they work. But in
this video, we're actually going to be focusing

on manipulating one of those layers, which
is the border. And although it's not the really

the main part of the whole box model idea,
it's still a pretty useful skill to know and

it really helps you understand how the box
model comes together. Alright, let's get started.

So for the next few videos, we're mainly going
to be working with the images simply because

they're just easier to manipulate and set
the layout over something working with something

like that. text or titles, things like that.
So we're going to be working with our circular

gray here that we created in a previous video,
as well as this custom image. So let's get

started. So now there are many different styles
that you can use to style the borders. But

we're going to be using the main shorthand
that allows us to style everything all at

once. So the property is similar to our background
property here, all you need to type is border,

whoops, you do on the image. So I'm going
to go here on our radial gradients. And I'm

going to start adding our border. So let's
go ahead and get started. So what I'm going

to do is just type border. And remember, every
single element has a box around it has this

box model or invisible box. So it doesn't
matter what you choose, you can always style

these elements, it might look weird on some
elements like this text here, but you can

do it with everything. So there are three
main parts to this element here. First is

going to be the size. So we'll talk about
that in a second, then you're going to have

the style, which is probably the main part.
And then finally, you're going to have the

color. So now that we have this, we can go
ahead and start talking about this. So size

is pretty similar to you know, changing the
size of an image, for example, yeah, it can

be in pixels percent or em, it doesn't matter,
I'm going to go with pixels for now. Now,

the usual range for a border is somewhere
between, you know, one and three or four pixels,

we can go much thicker than that, depending
on what you need. So I'm going to go ahead

and show you want to pixels looked like. So
remember separated by a space. Now we're going

to go over the style. So there are many different
styles you can use on your borders. But there's

three main ones that we're going to talk about,
or sorry, four main ones, we're going to talk

about dotted, dashed, solid and double. Now
normally, you're going to see solid, that's

pretty much the most common one, I'll show
you the other versions of this in just a second.

So I'm going to go ahead and type solid, and
now come to the color. So as we learned refer

before this can be a named color, this can
be an RGB code, or even a hex code, I'm going

to go ahead and just choose a darkish blue,
I think that will fit in really well with

the page. And in fact, you know what, let's
not, let's not use the color picker, let's

just use our RGB color skills. And take the
color of the background, which is here. So

we're going to take those four. And I'm going
to go back to our image here and paste it

in. And now what I'm going to do is just darken
everything. And if you remember, the darker

it gets the higher oak sorry, the lower all
of these values get. So I'm just going to

lower them all by about 50. So here, I'm just
going to go 154. Now, again, this doesn't

have to be exact, or anything you can, you
can put really, whatever you want here, but

I'm just trying to darken everything, I'm
just gonna make this 200. Let's go ahead and

refresh the page and see how our border looks.
Now. Let's scroll down. So there's the problem,

we actually forgot a semicolon here on the
end of the background. So that's one thing

you need to keep in mind. There we go. Now
it's working. And you can see and I did actually

change the color there just to test it out.
And you can see, there we go, we have our

background. So obviously, it's pretty obvious
here with our bright red color there. But

what I'm actually going to do is go ahead
and just play around with some of these and

see if we can change the features. So first
thing I'm going to do is go ahead and change

the height. So I'm going to go ahead and set
it as 10 pixels. For example, you can see

that they open up the height sorry, the size,
you can see that that gets a lot thicker,

so you can change it depending on how you
want your border to look like. So now let's

go ahead and change the style. So let's go
ahead and try out some of these other styles.

So first, I'm going to try dotted. So you
can see now we have a dotted border. Now let's

go ahead and try dashed.

And you're kind of getting the idea of how
this works. Let's see doubled, I think or

double actually, I think that's probably the
best other than solid. Yeah, you can see that

that looks pretty nice. Here, we have that
double border. It's pretty useful in styling,

but it's not really used very commonly. So
the last thing I want to go ahead and change

is the color. So I'm going to go ahead and
just take a color from the color picker, I

don't really feel like going through the whole
RGB process again, let's go ahead and just

take this color, it's quite dark. Let's go
ahead and refresh our page and see what it

looks like. And now you can see the color
has changed. So you can see the borders are

not only useful for just changing the style
of this of an image or a box or any box in

that for that matter. They're also useful
for showing how the box model works. So I'm

going to go ahead and change this back to
solid so you can get a better view. So if

you remember in the last video we talked about
the different layers of the wall model, and

we remembered that the padding was used to
separate or create spacing between the content

and the border. In this case, you can see
that the border and the content are directly

touching, which means there is pretty much
no padding at all, because there's no space

in between them. On top of that, you can see
that this border is also touching also elements

on the page or other elements on the page.
So like, for example, this table, there's

a little bit of space between the header and
the image. But that's due to other margins.

We'll talk about that when we get later in
this section. And so you can see that this

doesn't have much margin either. So you can
start to see here how this whole box model

comes together and how you can see what's
going on. So yeah, that's a pretty useful

way to kind of look at the box model and see
how everything comes together. In the next

few videos, we're going to be looking at the
other layers of the box model. And then we're

going to bring it all together and start really
changing up this the way this website looks.

Alright, let's move on.

And you're kind of getting the idea of how
this works. Let's see doubled, I think or

double actually, I think that's probably the
best other than solid. Yeah, you can see that

that looks pretty nice. Here, we have that
double border. It's pretty useful in styling,

but it's not really used very commonly. So
the last thing I want to go ahead and change

is the color. So I'm going to go ahead and
just take a color from the color picker, I

don't really feel like going through the whole
RGB process again, let's go ahead and just

take this color, it's quite dark. Let's go
ahead and refresh our page and see what it

looks like. And now you can see the color
has changed. So you can see the borders are

not only useful for just changing the style
of this of an image or a box or any box in

that for that matter. They're also useful
for showing how the box model works. So I'm

going to go ahead and change this back to
solid so you can get a better view. So if

you remember in the last video we talked about
the different layers of the wall model, and

we remembered that the padding was used to
separate or create spacing between the content

and the border. In this case, you can see
that the border and the content are directly

touching, which means there is pretty much
no padding at all, because there's no space

in between them. On top of that, you can see
that this border is also touching also elements

on the page or other elements on the page.
So like, for example, this table, there's

a little bit of space between the header and
the image. But that's due to other margins.

We'll talk about that when we get later in
this section. And so you can see that this

doesn't have much margin either. So you can
start to see here how this whole box model

comes together and how you can see what's
going on. So yeah, that's a pretty useful

way to kind of look at the box model and see
how everything comes together. In the next

few videos, we're going to be looking at the
other layers of the box model. And then we're

going to bring it all together and start really
changing up this the way this website looks.

Alright, let's move on.

So in this video, we're going to be moving
on to the next two main layers of our box

model. And in this video, we're going to be
talking about margin and padding. So you kind

of already have an idea of what these two
are, we've talked about them. In the first

video, we've talked about what they do, we
haven't actually talked about how to manipulate

them. So in this video, what I'm going to
be doing, what I'm going to be doing is going

through and working with these two properties
to actually manipulate our layout. And that's

when the real power of the box model shows.
So let's go ahead and get started. The first

thing I want to do is go ahead and choose
the right thing to manipulate. And in this

case, the best thing to work with is an image
right here, because it's very easy to see

and see the changes when you when you do these
margin padding changes. And it's also very

useful to have a border here, which I added,
you can really see the difference between

margin and padding and see which one is responsible
for what. So let's get started. Now similar

to the rest of the properties, the naming
is pretty straightforward. In this case, we're

going to go ahead and use the shorthand margin
property. But I'm also going to be showing

you a few other ways, which I didn't show
you with the border. Because these are a little

bit easier. And they're kind of hard to understand
if you just use the shorthand property, so

I'm going to be just building it from the
ground up. So the first property I'm going

to look at is, of course, the shorthand margin
property, and how to add margin and padding

to all sides at the same time. So in case
you didn't know, this is called top, this

is called bottom, this is left and this is
right. But I'm sure you know that especially

with working with multiple backgrounds, things
like that. And pretty much the same throughout

all of CSS. So let's get started. So the first
thing I'm going to do is go ahead and find

my image. And then I'm going to choose which
box model layer I want to manipulate. I'm

going to go ahead and work with padding first,
because it's a little bit easier to understand.

And we're going to go and work with margin.
So we're just going to type out cutting here.

And now what we're going to do is go and start
adding whatever we want. So remember, if you

add just one value, it's going to add it the
same value to all sides. So I'm going to say

for example, right now 20 pixels. Now if I
go ahead and refresh the page, you can see

that there is 20 pixels of space in between
all sides of our image. So you can see 20

pixels on the left on the right on the top
and on the bottom. So you can see what's going

on here with our padding free increase this
value, for example, it's going to it's going

to almost double and now we have 40 pixels
on each side. So that's just a little bit

of information about padding, you can see
the spacing between the content, and the border

is getting a lot bigger. Now let's go ahead
and change this to margin and see what happens.

So I'm actually just going to completely remove
this and refresh the page. So now let's go

ahead and add our 40 pixel margin, we'll just
say for now, so you can really see the difference.

So now you can see that the content or the
space between the content and the border is

still the same. There's no spacing at all.
But you can see that everything around it

has kind of been pushed down. And remember,
it's adding margin to all sides, there's 40

pixels between the border and the left side
of the page, the border and the top side,

the border on the right and the border and
the bottom. So you can see that margin is

moving the image itself around the page, whereas
the padding is just adding space inside the

image. So now let's go ahead and talk about
some of the more specific properties in case

you wanted to maybe style specific sides.
So I'm going to go ahead and change this back

to padding, just like this. And now we can
go ahead and see our differences a lot more

clear. So what you can actually do is add
a dash and then the name of the side to it.

To actually specify which side you want the
padding to be added to. So let's just say

I wanted to add it to the right side. Now
if I refresh the page, you can see that all

of this still stays the same. But on the right
side, there is 40 pixels of padding. You can

do this with as many as you want. So you can
go padding top, for example. And I want 100

pixels on the top, and let's just say on the
bottom. And remember, always with the dash,

I just want only five pixels. Now if we go
ahead and refresh the page, you can see it

looks quite unbalanced, but you have 100 pixels
on the top, we have 40 pixels on the right

and five on the bottom. Now obviously, this
gets a little bit tedious after a while, after

you keep you know doing padding right top
bottom left, top right, top right, bottom

left, and it gets quite irritating after a
while. So what I'm going to do is show you

a really cool shorthand that you can use to
style them all at the same time. So we're

going to go back to using our shorthand property.

So in this video, we're going to be moving
on to the next two main layers of our box

model. And in this video, we're going to be
talking about margin and padding. So you kind

of already have an idea of what these two
are, we've talked about them. In the first

video, we've talked about what they do, we
haven't actually talked about how to manipulate

them. So in this video, what I'm going to
be doing, what I'm going to be doing is going

through and working with these two properties
to actually manipulate our layout. And that's

when the real power of the box model shows.
So let's go ahead and get started. The first

thing I want to do is go ahead and choose
the right thing to manipulate. And in this

case, the best thing to work with is an image
right here, because it's very easy to see

and see the changes when you when you do these
margin padding changes. And it's also very

useful to have a border here, which I added,
you can really see the difference between

margin and padding and see which one is responsible
for what. So let's get started. Now similar

to the rest of the properties, the naming
is pretty straightforward. In this case, we're

going to go ahead and use the shorthand margin
property. But I'm also going to be showing

you a few other ways, which I didn't show
you with the border. Because these are a little

bit easier. And they're kind of hard to understand
if you just use the shorthand property, so

I'm going to be just building it from the
ground up. So the first property I'm going

to look at is, of course, the shorthand margin
property, and how to add margin and padding

to all sides at the same time. So in case
you didn't know, this is called top, this

is called bottom, this is left and this is
right. But I'm sure you know that especially

with working with multiple backgrounds, things
like that. And pretty much the same throughout

all of CSS. So let's get started. So the first
thing I'm going to do is go ahead and find

my image. And then I'm going to choose which
box model layer I want to manipulate. I'm

going to go ahead and work with padding first,
because it's a little bit easier to understand.

And we're going to go and work with margin.
So we're just going to type out cutting here.

And now what we're going to do is go and start
adding whatever we want. So remember, if you

add just one value, it's going to add it the
same value to all sides. So I'm going to say

for example, right now 20 pixels. Now if I
go ahead and refresh the page, you can see

that there is 20 pixels of space in between
all sides of our image. So you can see 20

pixels on the left on the right on the top
and on the bottom. So you can see what's going

on here with our padding free increase this
value, for example, it's going to it's going

to almost double and now we have 40 pixels
on each side. So that's just a little bit

of information about padding, you can see
the spacing between the content, and the border

is getting a lot bigger. Now let's go ahead
and change this to margin and see what happens.

So I'm actually just going to completely remove
this and refresh the page. So now let's go

ahead and add our 40 pixel margin, we'll just
say for now, so you can really see the difference.

So now you can see that the content or the
space between the content and the border is

still the same. There's no spacing at all.
But you can see that everything around it

has kind of been pushed down. And remember,
it's adding margin to all sides, there's 40

pixels between the border and the left side
of the page, the border and the top side,

the border on the right and the border and
the bottom. So you can see that margin is

moving the image itself around the page, whereas
the padding is just adding space inside the

image. So now let's go ahead and talk about
some of the more specific properties in case

you wanted to maybe style specific sides.
So I'm going to go ahead and change this back

to padding, just like this. And now we can
go ahead and see our differences a lot more

clear. So what you can actually do is add
a dash and then the name of the side to it.

To actually specify which side you want the
padding to be added to. So let's just say

I wanted to add it to the right side. Now
if I refresh the page, you can see that all

of this still stays the same. But on the right
side, there is 40 pixels of padding. You can

do this with as many as you want. So you can
go padding top, for example. And I want 100

pixels on the top, and let's just say on the
bottom. And remember, always with the dash,

I just want only five pixels. Now if we go
ahead and refresh the page, you can see it

looks quite unbalanced, but you have 100 pixels
on the top, we have 40 pixels on the right

and five on the bottom. Now obviously, this
gets a little bit tedious after a while, after

you keep you know doing padding right top
bottom left, top right, top right, bottom

left, and it gets quite irritating after a
while. So what I'm going to do is show you

a really cool shorthand that you can use to
style them all at the same time. So we're

going to go back to using our shorthand property.

And now we're going to go ahead and add four
values separated by spaces, but it's a little

bit confusing at first, okay, so just bear
with me. Now, what I'm going to do is for

the left, I don't want anything. So let's
just start from the start from the top. So

on the top, I want 100 pixels, like that.
On the right, I want 40 pixels. On the left,

I don't want anything, so I'm just going to
say zero. Now, you could say zero pixels.

But in this case, we don't want anything at
all. So it doesn't really matter which one

you choose, I just prefer to put a zero there.
And then of course, on the right, or sorry,

on the bottom, we want five pixels. Now let's
go ahead and refresh and see what happens.

It stays pretty much it looks must have confused,
confused, something over there. So 100. On

the top, we have 40 on the right, and on the
bottom of the so there's the problem. On the

bottom, we want five pixels, and on the left,
we want zero. So you can see it gets quite

confusing after some time. So you can see
that now it's exactly the same. So here's

what you have to kind of remember, the first
one is the top, the second is the right, then

the bottom and left. So an easy way to remember
this is by looking at the pieces of the border,

if you draw a diagonal line straight in half,
you style the top on the right first, and

then the bottom on the left. So just keep
that in mind and you'll be fine. So if you

if you ever forget, you can always go and
check online, there's a lot of references

talking about these different values here.
And I'm actually just going to go ahead and

change it to margin for a second. So you can
see what's going on. Now you can see if I

change the margin, actually, it stays in the
same position. But instead of adding internal

space, it's adding external space. So that's
just one thing to keep in mind. But like I

said, if you want to go ahead and review this,
you can always find some resources online,

there's a lot going on there. Now let's talk
about shortening this into actually only two

sections, because let's just say on the top
and bottom, you want a certain margin, but

then on the left hand, right you want another
this is a pretty common thing that you you're

going to want to do in CSS. So I'm going to
show you how to do that, all you have to do

is go ahead and shorten it to two values,
I'm actually going to go ahead Yeah, I'll

go with margin. The first two values are going
to be for the top and bottom at the same time.

So I'm going to go ahead and add 80 pixels
of padding, Oh, whoops, 80 pixels. There we

go. And now for ourselves whoops, now for
our second value, it's going to be our left

and right values at the same time. So I'm
going to go ahead and add 40 pixels doesn't

matter the order, because this is always going
to be for the top and bottom, this is always

going to be 40, left and right. So just make
sure that they are equal. So let's go ahead

and refresh. And now you can see the left
and right have kind of stayed a little bit

shorter. Whereas the top and bottom are very
the margin is very big. As you can see here,

the top and bottom is double the left and
right. So that's a nice shorthand that you

can use to style to different or Well, two
different sides. So for example, now, if you

split, if you can just take this part and
this part style, the style and at the same

time, and then you take the left and right
and do the same thing with them. So I know

that's a lot to take in. And there's a lot
of different ways. But just remember, if you

ever get confused, you can either use the
internet, or just use margin dash and then

the position. But other than that, all you
need to know for now is the concept. You just

need to know how margin and padding work and
how you can actually manipulate them what

they do. I mean, what do you do when you say
the margin left is 10 pixels. So just make

sure that you know that, you know when you
add a certain space to a position, you're

basically changing the spacing between something
and another thing based on what whichever

layer you chose. So for example, if you chose
padding, you're going to be changing the spacing

between the content and the border. So that's
pretty much it for margin and padding. Now

we're going to get a lot more experience with
this as we go through the course and style

more things. But for now, just make sure you
know how to use the shorthand properties,

you know how to use all these different shortcuts.
Now you don't need to memorize them, you just

need to know kind of how they work. Obviously,
memorizing them is good. But if you, if you

forget them, don't worry too much about that.
Just make sure you know how to use these properly.

And that's pretty much it. Let's move on.

And now we're going to go ahead and add four
values separated by spaces, but it's a little

bit confusing at first, okay, so just bear
with me. Now, what I'm going to do is for

the left, I don't want anything. So let's
just start from the start from the top. So

on the top, I want 100 pixels, like that.
On the right, I want 40 pixels. On the left,

I don't want anything, so I'm just going to
say zero. Now, you could say zero pixels.

But in this case, we don't want anything at
all. So it doesn't really matter which one

you choose, I just prefer to put a zero there.
And then of course, on the right, or sorry,

on the bottom, we want five pixels. Now let's
go ahead and refresh and see what happens.

It stays pretty much it looks must have confused,
confused, something over there. So 100. On

the top, we have 40 on the right, and on the
bottom of the so there's the problem. On the

bottom, we want five pixels, and on the left,
we want zero. So you can see it gets quite

confusing after some time. So you can see
that now it's exactly the same. So here's

what you have to kind of remember, the first
one is the top, the second is the right, then

the bottom and left. So an easy way to remember
this is by looking at the pieces of the border,

if you draw a diagonal line straight in half,
you style the top on the right first, and

then the bottom on the left. So just keep
that in mind and you'll be fine. So if you

if you ever forget, you can always go and
check online, there's a lot of references

talking about these different values here.
And I'm actually just going to go ahead and

change it to margin for a second. So you can
see what's going on. Now you can see if I

change the margin, actually, it stays in the
same position. But instead of adding internal

space, it's adding external space. So that's
just one thing to keep in mind. But like I

said, if you want to go ahead and review this,
you can always find some resources online,

there's a lot going on there. Now let's talk
about shortening this into actually only two

sections, because let's just say on the top
and bottom, you want a certain margin, but

then on the left hand, right you want another
this is a pretty common thing that you you're

going to want to do in CSS. So I'm going to
show you how to do that, all you have to do

is go ahead and shorten it to two values,
I'm actually going to go ahead Yeah, I'll

go with margin. The first two values are going
to be for the top and bottom at the same time.

So I'm going to go ahead and add 80 pixels
of padding, Oh, whoops, 80 pixels. There we

go. And now for ourselves whoops, now for
our second value, it's going to be our left

and right values at the same time. So I'm
going to go ahead and add 40 pixels doesn't

matter the order, because this is always going
to be for the top and bottom, this is always

going to be 40, left and right. So just make
sure that they are equal. So let's go ahead

and refresh. And now you can see the left
and right have kind of stayed a little bit

shorter. Whereas the top and bottom are very
the margin is very big. As you can see here,

the top and bottom is double the left and
right. So that's a nice shorthand that you

can use to style to different or Well, two
different sides. So for example, now, if you

split, if you can just take this part and
this part style, the style and at the same

time, and then you take the left and right
and do the same thing with them. So I know

that's a lot to take in. And there's a lot
of different ways. But just remember, if you

ever get confused, you can either use the
internet, or just use margin dash and then

the position. But other than that, all you
need to know for now is the concept. You just

need to know how margin and padding work and
how you can actually manipulate them what

they do. I mean, what do you do when you say
the margin left is 10 pixels. So just make

sure that you know that, you know when you
add a certain space to a position, you're

basically changing the spacing between something
and another thing based on what whichever

layer you chose. So for example, if you chose
padding, you're going to be changing the spacing

between the content and the border. So that's
pretty much it for margin and padding. Now

we're going to get a lot more experience with
this as we go through the course and style

more things. But for now, just make sure you
know how to use the shorthand properties,

you know how to use all these different shortcuts.
Now you don't need to memorize them, you just

need to know kind of how they work. Obviously,
memorizing them is good. But if you, if you

forget them, don't worry too much about that.
Just make sure you know how to use these properly.

And that's pretty much it. Let's move on.

So this is a pretty important video, because
we're talking about a concept that is going

to be used constantly in the next few sections.
And it's a very, very important part of CSS,

and kind of defines the way that you look
at documents. So the two properties that we're

going to be looking at are float, which is
the less important one and display, which

is the very important properties that we need
to learn. So let's cover float first, because

it's an easier thing to approach. But before
we start for both of these elements, you need

to understand the concept of inline and block
level elements. So first of all elements have

a certain display type, which we're going
to be manipulating in the next property. This

display type pretty much defines the behavior
of the elements. So there are two main display

types block and inline. So pretty much if
we look at our HTML document, here we go through

and you can see all of these tags, creating
these tags create a sort of a sort of display

behavior for the content inside them. So the
block level element, what it basically does

is move moves everything onto its own section,
its own while block. So an example of one

of these elements would be a p tag, you can
see that if this was an inline element would

be flowing with the rest of the things. But
you can see here, despite the margin, this

is moved on to its own section, it's not playing
or moving after the image, it's moved on to

its own section, and everything after it comes
after Well, the block. On the other hand,

an inline element is something that won't
really move anything onto its own section,

it's going to keep it keep it intact, it's
not going to move it or change it in any way,

it's just going to leave it how it naturally
occurs on the page. So an example, a very

good example of one of these would be a span
tag, because what a span tag pretty much does

is it's used to contain some piece of content
in an inline style. So for example, this italics

class would be a perfect representation of
an inline tag, what we're trying to do is

I telesign, some text. And if the span was
a block level element, this text here, this

italic size, text would be moved on to its
own section, so everything preceding it would

come before it. And then there would be a
new line with the text. And then after it

would come the rest of the text. So you can
see there that the inline and block level

tags really make a difference depending on
what you want to use it for. So what we're

going to be doing in this video is going through
and learning how to change the display type

of these different elements. But first, let's
talk about float. So again, these tags come

with a natural display type and how they are
placed on the page is how they naturally occur.

But there's actually a way to change the way
that they look. And this is done using float.

So if you just listen to the name there, what
element pretty much does is change how the

element will float on the page. So I'll go
ahead and do do some examples here. For example,

let's just take this gradient here, this div.
So I'm going to go and look for it the service

image, I'm going to say set the float and
I'm going to say it float to the right and

watch what happens. You can see that now what
happens is pretty much this just flows over

to the right side of the page. And it also
changes all the content after it. So you can

see that this content here has now been pushed
up. So this kind of shows how a little bit

of how flow works. And this doesn't just have
to be with images, we can do it with text

as well. So if I go through and choose something
like this element over here, this some link

here, so I'm going to go ahead on this link.
And I'm going to say it float to the right.

Now let's go ahead and refresh the page. And
you can see that that kind of flows over to

the right and everything before it is now
kind of pushed up where it was. So you can

think of this as kind of a kind of a Tetris
puzzle block. When you're moving something

over, everything is going to be pushed up
or moved around as well. So to fit the page

so you can kind of think of it in that way.
Now obviously, once you start getting some

really a lot of experience with float, you
can kind of predict where everything is going

to move on the page. But floats are really
useful for laying out documents. Especially

if you want to kind of Have position images
next to text or move things around in a way

that looks more like a proper document. So
I'm going to remove that float. And I'm just

going to do it with our image over here, which
with our image, our about us image. So I'm

going to go ahead and say it floats over to
the right.

So this is a pretty important video, because
we're talking about a concept that is going

to be used constantly in the next few sections.
And it's a very, very important part of CSS,

and kind of defines the way that you look
at documents. So the two properties that we're

going to be looking at are float, which is
the less important one and display, which

is the very important properties that we need
to learn. So let's cover float first, because

it's an easier thing to approach. But before
we start for both of these elements, you need

to understand the concept of inline and block
level elements. So first of all elements have

a certain display type, which we're going
to be manipulating in the next property. This

display type pretty much defines the behavior
of the elements. So there are two main display

types block and inline. So pretty much if
we look at our HTML document, here we go through

and you can see all of these tags, creating
these tags create a sort of a sort of display

behavior for the content inside them. So the
block level element, what it basically does

is move moves everything onto its own section,
its own while block. So an example of one

of these elements would be a p tag, you can
see that if this was an inline element would

be flowing with the rest of the things. But
you can see here, despite the margin, this

is moved on to its own section, it's not playing
or moving after the image, it's moved on to

its own section, and everything after it comes
after Well, the block. On the other hand,

an inline element is something that won't
really move anything onto its own section,

it's going to keep it keep it intact, it's
not going to move it or change it in any way,

it's just going to leave it how it naturally
occurs on the page. So an example, a very

good example of one of these would be a span
tag, because what a span tag pretty much does

is it's used to contain some piece of content
in an inline style. So for example, this italics

class would be a perfect representation of
an inline tag, what we're trying to do is

I telesign, some text. And if the span was
a block level element, this text here, this

italic size, text would be moved on to its
own section, so everything preceding it would

come before it. And then there would be a
new line with the text. And then after it

would come the rest of the text. So you can
see there that the inline and block level

tags really make a difference depending on
what you want to use it for. So what we're

going to be doing in this video is going through
and learning how to change the display type

of these different elements. But first, let's
talk about float. So again, these tags come

with a natural display type and how they are
placed on the page is how they naturally occur.

But there's actually a way to change the way
that they look. And this is done using float.

So if you just listen to the name there, what
element pretty much does is change how the

element will float on the page. So I'll go
ahead and do do some examples here. For example,

let's just take this gradient here, this div.
So I'm going to go and look for it the service

image, I'm going to say set the float and
I'm going to say it float to the right and

watch what happens. You can see that now what
happens is pretty much this just flows over

to the right side of the page. And it also
changes all the content after it. So you can

see that this content here has now been pushed
up. So this kind of shows how a little bit

of how flow works. And this doesn't just have
to be with images, we can do it with text

as well. So if I go through and choose something
like this element over here, this some link

here, so I'm going to go ahead on this link.
And I'm going to say it float to the right.

Now let's go ahead and refresh the page. And
you can see that that kind of flows over to

the right and everything before it is now
kind of pushed up where it was. So you can

think of this as kind of a kind of a Tetris
puzzle block. When you're moving something

over, everything is going to be pushed up
or moved around as well. So to fit the page

so you can kind of think of it in that way.
Now obviously, once you start getting some

really a lot of experience with float, you
can kind of predict where everything is going

to move on the page. But floats are really
useful for laying out documents. Especially

if you want to kind of Have position images
next to text or move things around in a way

that looks more like a proper document. So
I'm going to remove that float. And I'm just

going to do it with our image over here, which
with our image, our about us image. So I'm

going to go ahead and say it floats over to
the right.

See that. So now you can see that it floats
over to the right. And now everything before

it has kind of been pushed up onto this section
here. So there we go. Now it's working, and

everything is looking great. Now let's look
at the next property, which is display. So

display is pretty much a way of changing the
display property of an element that it naturally

comes with. So of course, we know things like
a div or a paragraph tag come as a block level

element, whereas something like a span or
a bolding tag would come as an inline element.

So what we're going to be doing is going through
and changing these properties. Now, I didn't

actually cover the properties of float, which
I'm going to go over in just a second. But

what I'm going to talk about is the different
properties of display. So of course, you have

the standard inline and block, which is pretty
obvious, but then you have a few others. So

the one that I'm going to be covering here
is none now. So what the display none property

does is pretty much just completely, almost
remove the element from the page. Now it doesn't

actually remove it. But what happens is the
entire that invisible box that contains everything

just suddenly disappears, you can't see it
anymore, it doesn't take up any space. It's

just completely gone from the page. So I'm
going to show you what that looks like right

now. Let's go ahead. And for example, let's
just say that this table is kind of annoying,

we don't really want it here. So what I'm
going to do over here in my table is given

a class of site table. Now I'm going to go
ahead and select it here, dot site dash table,

and I'm going to say display is none. Now
watch what happens, you can see that that

table completely disappears. And it doesn't
even take up the space anymore. It's not like

the table. It's just invisible or not, not
what not visible, but it's completely gone.

Now, this is very, very commonly used once
you start using JavaScript. And would you

start making your site's interactive to maybe
create web games or hide something, maybe

create some sort of hidden token, it can be
used for all sorts of things. So this is a

very useful display property. So I'm going
to go ahead and remove that. Now the next

one I want to talk about, I'm actually going
to, I'll just keep it there, if we decide

to use it later. The next one I'm going to
talk about is inline block. So we know that

we have two different display types, inline,
and block. But there's actually a combination

of the two, which is a little bit hard to
understand. But once we start using it, you

can see how useful it is. So inline block
is a little bit Well, like I said, it's a

little bit hard to understand. But pretty
much what it does is take features from both

inline and block level elements and combines
them together. So we know that inline elements

do not move anything onto their own line,
we know that they stay in their place, they

don't touch anything or move anything around.
Whereas block level elements, move them onto

the new line. Now, what happens is that in
light, or this inline block element takes

that new sticks that sort of new line feature
and removes it completely, it does not move

anything onto its own new line. But what the
block level elements do is they actually create

some spacing around the element once it's
moved on to its new block. So the inline block

element then takes this and puts it into itself.
So the inline block element pretty much keeps

everything in the same line, but creates that
block level spacing that can be found in other

block level elements. So let's go through
and actually demonstrate how this works. I'm

going to go back to my table and add our inline
block display property here, inline block.

See that. So now you can see that it floats
over to the right. And now everything before

it has kind of been pushed up onto this section
here. So there we go. Now it's working, and

everything is looking great. Now let's look
at the next property, which is display. So

display is pretty much a way of changing the
display property of an element that it naturally

comes with. So of course, we know things like
a div or a paragraph tag come as a block level

element, whereas something like a span or
a bolding tag would come as an inline element.

So what we're going to be doing is going through
and changing these properties. Now, I didn't

actually cover the properties of float, which
I'm going to go over in just a second. But

what I'm going to talk about is the different
properties of display. So of course, you have

the standard inline and block, which is pretty
obvious, but then you have a few others. So

the one that I'm going to be covering here
is none now. So what the display none property

does is pretty much just completely, almost
remove the element from the page. Now it doesn't

actually remove it. But what happens is the
entire that invisible box that contains everything

just suddenly disappears, you can't see it
anymore, it doesn't take up any space. It's

just completely gone from the page. So I'm
going to show you what that looks like right

now. Let's go ahead. And for example, let's
just say that this table is kind of annoying,

we don't really want it here. So what I'm
going to do over here in my table is given

a class of site table. Now I'm going to go
ahead and select it here, dot site dash table,

and I'm going to say display is none. Now
watch what happens, you can see that that

table completely disappears. And it doesn't
even take up the space anymore. It's not like

the table. It's just invisible or not, not
what not visible, but it's completely gone.

Now, this is very, very commonly used once
you start using JavaScript. And would you

start making your site's interactive to maybe
create web games or hide something, maybe

create some sort of hidden token, it can be
used for all sorts of things. So this is a

very useful display property. So I'm going
to go ahead and remove that. Now the next

one I want to talk about, I'm actually going
to, I'll just keep it there, if we decide

to use it later. The next one I'm going to
talk about is inline block. So we know that

we have two different display types, inline,
and block. But there's actually a combination

of the two, which is a little bit hard to
understand. But once we start using it, you

can see how useful it is. So inline block
is a little bit Well, like I said, it's a

little bit hard to understand. But pretty
much what it does is take features from both

inline and block level elements and combines
them together. So we know that inline elements

do not move anything onto their own line,
we know that they stay in their place, they

don't touch anything or move anything around.
Whereas block level elements, move them onto

the new line. Now, what happens is that in
light, or this inline block element takes

that new sticks that sort of new line feature
and removes it completely, it does not move

anything onto its own new line. But what the
block level elements do is they actually create

some spacing around the element once it's
moved on to its new block. So the inline block

element then takes this and puts it into itself.
So the inline block element pretty much keeps

everything in the same line, but creates that
block level spacing that can be found in other

block level elements. So let's go through
and actually demonstrate how this works. I'm

going to go back to my table and add our inline
block display property here, inline block.

Now I'm going to go ahead and refresh the
page and see what happens. So you can see

that it's kind of kept on the same line. But
it's given that sort of spacing or well block

level spacing that you can't really find with
a normal inline element. If I actually go

ahead and change this to inline here, you'll
see this very apparent, you can see that that

click here to Google text has now moved around.
It's a little bit of a weird box here. So

you can see the difference between an inline
element and an inline block element. So there

you go. inline block is a very useful display
property. You can use it a lot in your website

to maybe layout grids, and all sorts of things
like that. And we're actually going to be

using some very special display properties
later in this course called flex and grid,

which are really going to help us create these
beautiful grids and layouts that can transform

our website. Everywhere. So that's pretty
much it for display. Now let's go on to talk

about some of the other float properties,
because I kind of wanted to save it for last.

So we already know that there are two main
float properties, which are left and right.

But there's actually a few more that we can
use that are sort of different. And they're

not very conventional, but they're still apparent.
And they can well change the way that while

a palette, an element floats on the page.
So the first one is the most interesting one

is the one that is, well, the only real floating
element, which is called inherit. So you can

see here that we have Child Elements and parent
elements. Now, what's really interesting is,

what can happen is if we have, let's say,
a div with an h2 and an image in it, what

we can do is pretty much set the divs float
as right. And we can set the one of the child

elements such as the h2, we can set its float
as inherit, what's going to happen is it's

going to take the float property of the parent
element. Now, you're probably asking why this

would be useful at hoc at all? Well, pretty
much, what you can do is you can actually

lay out multiple elements without having to
specify their float as long as their children

and parents. So for example, if you have an
element that's maybe four or five levels deep,

and you don't want to specify the float every
time, you can just use an inherit element

to move everything to the right side, with
only specifying the float once to the last

value I want to talk about is the is the non
value. So this is kind of the default value

that you're going to see if you don't specify
anything. And it's pretty much just going

to keep the item in its place. It's not going
to change its float or display, and it's pretty

much not going to move it around at all. It's
not the same as display none, though, it doesn't

really remove anything, what float none pretty
much does, it's just leaves it where it naturally

occurs in the text. So for example, if you
have a block level, div tag, and you've set

its float to none, then it's just going to
appear as a block level elements is not going

to move around or do anything similar. So
there you go. That's pretty much it for floats,

and displays. We're going to be working with
these a lot throughout the rest of this course.

And they're very important property. So I
recommend you get some practice with them,

and start using them. So you can see all of
the different ways that you can use the display

and flow properties in your website. Now,
apart from the box model, and a few other

ways displays and floats are a very common
way or at least a word of manipulating your

website and making it look really good. So
without it, the website is just kind of everywhere,

all the elements are scattered around. But
if you want to really make the website, look

how you want it to look, you need to use this
in combination with a few other features that

we are going to learn in the future in order
to make your website look great. Alright,

let's move on.

Now I'm going to go ahead and refresh the
page and see what happens. So you can see

that it's kind of kept on the same line. But
it's given that sort of spacing or well block

level spacing that you can't really find with
a normal inline element. If I actually go

ahead and change this to inline here, you'll
see this very apparent, you can see that that

click here to Google text has now moved around.
It's a little bit of a weird box here. So

you can see the difference between an inline
element and an inline block element. So there

you go. inline block is a very useful display
property. You can use it a lot in your website

to maybe layout grids, and all sorts of things
like that. And we're actually going to be

using some very special display properties
later in this course called flex and grid,

which are really going to help us create these
beautiful grids and layouts that can transform

our website. Everywhere. So that's pretty
much it for display. Now let's go on to talk

about some of the other float properties,
because I kind of wanted to save it for last.

So we already know that there are two main
float properties, which are left and right.

But there's actually a few more that we can
use that are sort of different. And they're

not very conventional, but they're still apparent.
And they can well change the way that while

a palette, an element floats on the page.
So the first one is the most interesting one

is the one that is, well, the only real floating
element, which is called inherit. So you can

see here that we have Child Elements and parent
elements. Now, what's really interesting is,

what can happen is if we have, let's say,
a div with an h2 and an image in it, what

we can do is pretty much set the divs float
as right. And we can set the one of the child

elements such as the h2, we can set its float
as inherit, what's going to happen is it's

going to take the float property of the parent
element. Now, you're probably asking why this

would be useful at hoc at all? Well, pretty
much, what you can do is you can actually

lay out multiple elements without having to
specify their float as long as their children

and parents. So for example, if you have an
element that's maybe four or five levels deep,

and you don't want to specify the float every
time, you can just use an inherit element

to move everything to the right side, with
only specifying the float once to the last

value I want to talk about is the is the non
value. So this is kind of the default value

that you're going to see if you don't specify
anything. And it's pretty much just going

to keep the item in its place. It's not going
to change its float or display, and it's pretty

much not going to move it around at all. It's
not the same as display none, though, it doesn't

really remove anything, what float none pretty
much does, it's just leaves it where it naturally

occurs in the text. So for example, if you
have a block level, div tag, and you've set

its float to none, then it's just going to
appear as a block level elements is not going

to move around or do anything similar. So
there you go. That's pretty much it for floats,

and displays. We're going to be working with
these a lot throughout the rest of this course.

And they're very important property. So I
recommend you get some practice with them,

and start using them. So you can see all of
the different ways that you can use the display

and flow properties in your website. Now,
apart from the box model, and a few other

ways displays and floats are a very common
way or at least a word of manipulating your

website and making it look really good. So
without it, the website is just kind of everywhere,

all the elements are scattered around. But
if you want to really make the website, look

how you want it to look, you need to use this
in combination with a few other features that

we are going to learn in the future in order
to make your website look great. Alright,

let's move on.

So today we're going to get started with a
new topic in CSS. And this is a very exciting

one, because we're going to start learning
more about very advanced layout techniques.

So in the past, we've learned about two pretty
basic layout to learn about floats and displays

and the box model, but they're not really
enough to create the best websites possible.

To do that, we're going to need some extra
advanced techniques, which is what we're going

to be covering in the next three sections.
In this first section, we're going to be looking

at CSS Flexbox. Now we're going to give a
quick or I'm going to give a quick introduction

to it. In this video, we'll be talking a little
bit about what it is, how it works, and how

you can apply it and what you can do with
it. But for now, we're just going to go ahead

and get started with it. So first of all,
what actually is Flexbox. So if you don't

know already, Flexbox stands for flexible
box. And similar to the box model. It's a

concept in CSS, or a feature that allows you
to create and arrange items or elements very

easily. So it's a great alternative to using
something like the box model or floats or

displays if you want to create very responsive
websites or lay out your items in a way that

makes it look great. So this is an alternative
to using those traditional techniques that

were using earlier versions of CSS. So the
Flexbox or the main Flexbox is split into

two different components. You have the container
and the flex items. So the container is the

parent element, it's what is going to become
the container for all of the items now. Usually

what you would do is use this on a div or
some other form of container element. And

then use some special properties which we're
going to be covering in the next video to

create the flex container. But then the next
part is the flex items. So this can be pretty

much anything you want images, links, spans
whatever you want, you can add them as flex

items and this is what makes up the flex box.
Now What you can do with these two components

is actually use different properties to manipulate
them and create really nice layout like this

one that we have here. And that's what we're
actually going to be covering in the next

few videos is learning how to manipulate the
container as well as the items inside. So

what can you actually do with Flexbox? Well,
you know that you can create these nice responsive

grids, but what would you actually use them
for? Well, although it might not be apparent,

pretty much all pages these days use some
form of CSS layout, whether it be the box

model, or Flexbox, or CSS Grid, which we're
going to be covering in the next section,

there are so many ways that it can be used.
Flexbox is mainly used to layout a website

or create different components. So for example,
the top of the page is going to contain your

sidebar, that's one flex item. And then you
have the right side of your page, which takes

up maybe 30% of the page. And that's your
or Yeah, so the top is your menu, for example.

And then the side on the right is your sidebar,
and you have the rest is content and you have

little widgets everywhere. And you can start
to see how this all connects together, you

can create really good looking websites by
creating one huge flex container, and then

creating a bunch of separate items, putting
all of your different things in those items.

So it's pretty much just a way to layout your
website. Now in the past, we've used floats

to move images around. And we've used also
margin and padding to push things up and down.

But that's not a really efficient way, it's
more of a kind of hack to move things around.

And using something like Flexbox pretty much
lets you do all of this naturally. Alright,

so there we go. That's a little introduction
to Flexbox. And how it works. Now what we're

going to do is go ahead and go onto our machine
and start creating some flex containers. Alright,

let's move on.

So today we're going to get started with a
new topic in CSS. And this is a very exciting

one, because we're going to start learning
more about very advanced layout techniques.

So in the past, we've learned about two pretty
basic layout to learn about floats and displays

and the box model, but they're not really
enough to create the best websites possible.

To do that, we're going to need some extra
advanced techniques, which is what we're going

to be covering in the next three sections.
In this first section, we're going to be looking

at CSS Flexbox. Now we're going to give a
quick or I'm going to give a quick introduction

to it. In this video, we'll be talking a little
bit about what it is, how it works, and how

you can apply it and what you can do with
it. But for now, we're just going to go ahead

and get started with it. So first of all,
what actually is Flexbox. So if you don't

know already, Flexbox stands for flexible
box. And similar to the box model. It's a

concept in CSS, or a feature that allows you
to create and arrange items or elements very

easily. So it's a great alternative to using
something like the box model or floats or

displays if you want to create very responsive
websites or lay out your items in a way that

makes it look great. So this is an alternative
to using those traditional techniques that

were using earlier versions of CSS. So the
Flexbox or the main Flexbox is split into

two different components. You have the container
and the flex items. So the container is the

parent element, it's what is going to become
the container for all of the items now. Usually

what you would do is use this on a div or
some other form of container element. And

then use some special properties which we're
going to be covering in the next video to

create the flex container. But then the next
part is the flex items. So this can be pretty

much anything you want images, links, spans
whatever you want, you can add them as flex

items and this is what makes up the flex box.
Now What you can do with these two components

is actually use different properties to manipulate
them and create really nice layout like this

one that we have here. And that's what we're
actually going to be covering in the next

few videos is learning how to manipulate the
container as well as the items inside. So

what can you actually do with Flexbox? Well,
you know that you can create these nice responsive

grids, but what would you actually use them
for? Well, although it might not be apparent,

pretty much all pages these days use some
form of CSS layout, whether it be the box

model, or Flexbox, or CSS Grid, which we're
going to be covering in the next section,

there are so many ways that it can be used.
Flexbox is mainly used to layout a website

or create different components. So for example,
the top of the page is going to contain your

sidebar, that's one flex item. And then you
have the right side of your page, which takes

up maybe 30% of the page. And that's your
or Yeah, so the top is your menu, for example.

And then the side on the right is your sidebar,
and you have the rest is content and you have

little widgets everywhere. And you can start
to see how this all connects together, you

can create really good looking websites by
creating one huge flex container, and then

creating a bunch of separate items, putting
all of your different things in those items.

So it's pretty much just a way to layout your
website. Now in the past, we've used floats

to move images around. And we've used also
margin and padding to push things up and down.

But that's not a really efficient way, it's
more of a kind of hack to move things around.

And using something like Flexbox pretty much
lets you do all of this naturally. Alright,

so there we go. That's a little introduction
to Flexbox. And how it works. Now what we're

going to do is go ahead and go onto our machine
and start creating some flex containers. Alright,

let's move on.

So in this video, we're going to be going
ahead and creating our first flex container

or Flexbox. Now, I already have some apparatus
set up here so that we can get started straight

away without having to go and do anything
with any of the styling. And this is the best

way to really see how Flexbox works. Because
without it, you know, it's just kind of look,

it's gonna look kind of weird, all the invisible
backgrounds and things. So I think this is

the best way to really see demonstrate how
Flexbox works. Alright, let's get started.

So well, it's actually quite easy to set up
a flex container, the hard part is creating

how you want, but it uses the display property
just like any other item on this page. So

when we set the display to block or inline,
block or inline, we do all of that. But we

can actually set it to flex. And what that's
going to do is create our flex container.

So all we have to do is go ahead and find
our parent element, the container that we

want, and I already have the class set up
here. If you want to go ahead and do this

on your own, you can, like I said, if maybe
if you want to copy these styles, for example,

you can go ahead and check out the project
files. But like I said, you can just go ahead

and create your own setup so that you can
start working with it. So first of all, we're

going to go ahead and find our parent element.
So in this case, these are going to be our

items in the future. And then this div is
our main element. So I'm going to go over

here. And I will go into go ahead and give
it the display property of flex. Now, instead

of doing something like block or inline block,
instead, we set it to flex. And what this

is going to do is create our flex container.
Now watch what happens. You can see now that

instead of having it just in a row, all of
these items have been spaced out accordingly.

Now all of the default values of all of the
flex properties have now been set up now that

our display mode has been activated. Now in
the next few videos, we're actually going

to be going through and manipulating these
properties. For example, changing the order,

we're going to change the size and width of
these. And we're going to go ahead and justify

and align the content. But that's for a future
video. For now, all you need to know is that

by setting the display property to flex on
a parent container, it's going to set up all

the default values of the flex properties
and create the flex container that we want

to work with in the next few videos. Alright,
let's move on.

So in this video, we're going to be going
ahead and creating our first flex container

or Flexbox. Now, I already have some apparatus
set up here so that we can get started straight

away without having to go and do anything
with any of the styling. And this is the best

way to really see how Flexbox works. Because
without it, you know, it's just kind of look,

it's gonna look kind of weird, all the invisible
backgrounds and things. So I think this is

the best way to really see demonstrate how
Flexbox works. Alright, let's get started.

So well, it's actually quite easy to set up
a flex container, the hard part is creating

how you want, but it uses the display property
just like any other item on this page. So

when we set the display to block or inline,
block or inline, we do all of that. But we

can actually set it to flex. And what that's
going to do is create our flex container.

So all we have to do is go ahead and find
our parent element, the container that we

want, and I already have the class set up
here. If you want to go ahead and do this

on your own, you can, like I said, if maybe
if you want to copy these styles, for example,

you can go ahead and check out the project
files. But like I said, you can just go ahead

and create your own setup so that you can
start working with it. So first of all, we're

going to go ahead and find our parent element.
So in this case, these are going to be our

items in the future. And then this div is
our main element. So I'm going to go over

here. And I will go into go ahead and give
it the display property of flex. Now, instead

of doing something like block or inline block,
instead, we set it to flex. And what this

is going to do is create our flex container.
Now watch what happens. You can see now that

instead of having it just in a row, all of
these items have been spaced out accordingly.

Now all of the default values of all of the
flex properties have now been set up now that

our display mode has been activated. Now in
the next few videos, we're actually going

to be going through and manipulating these
properties. For example, changing the order,

we're going to change the size and width of
these. And we're going to go ahead and justify

and align the content. But that's for a future
video. For now, all you need to know is that

by setting the display property to flex on
a parent container, it's going to set up all

the default values of the flex properties
and create the flex container that we want

to work with in the next few videos. Alright,
let's move on.

So in this video, we're going to be covering
two of the properties of our flex container,

direction and wrap. So right now we have everything
set up. We have five flex items here labeled

A to E, and then we also have our container.
But now we're going to go through and start

manipulating it. So the first thing I want
to talk about is flex direction. So pretty

much right now it's laid out in a row here,
but what we can actually do is specify the

direction that we want our items to go in.
We can also reverse the order using a special

suffix. Let's get started. So the property
that we're going to use is flex direction,

flex dash direction. And you add this to the
container to the flex container. So here we're

going to specify either row or column row
is the default value, and it's going to be

going in a direction to the right side of
the container. We also have column, which

is what we kind of saw before. And you can
see it's a little bit better spaced out. And

you can see it goes A to E, except it goes
in a column. Now, that's pretty easy to understand.

But we can also go reverse. So instead of
A to E, it goes eat a, all we have to do is

add dash reverse to column a row, and it's
going to flip the direction that our item

is going in. Let's refresh. And now you can
see it's going in reverse. We can also do

the same thing with row or pretty much any
other value for this property here. You can

see now it goes E to a, and it also goes in
the opposite way to the left side of the page

instead of to the right side. So that's it
for flex direction, it's very easy to understand,

I'm just going to go ahead and set it back
to wrote the default. The next item I want

to talk about is flex wrap. So this is a little
bit more complicated to understand. But once

we start using it, it gets quite easy. Pretty
much when you wrap an item, it's going to

move it to a new row or column to avoid the
exceeding the maximum length. So for example,

if we had more than the specified amount of
items here, so if we had a, b, c, d, e, and

then F, G, H, I and all the ways to K or L,
we don't want it to keep going on forever.

So what we want to do is once it gets to a
certain length, rump length, wrap it around

and move it to a new line. So I'm actually
going to go ahead and do that here. I'm going

to go ahead and copy all of these items, pretty
much double it. And then I'm going to say

f, g, h, i and j. And now let's go ahead and
refresh the page and see how this looks. You

can see we have now abcdefg H I J. And of
course it's not going past the page yet, but

we can actually wrap this around and see how
it looks. So all we have to do is add the

flex dash wrap property. And now we can either
specify we can specify one of two values,

wrap and no rap. So I'm going to go ahead
and say rap. Now if we go ahead and refresh

the page, you can see that instead of kind
of squeezing in the space or changing the

spacing, it just moves this to a new row,
we can also go ahead and use rock reverse,

which pretty much revolves, it does the exact
same thing, but it reverses the order. So

now if we go ahead and refresh, you can see
that this whole thing is kind of flipped.

Now normally, you won't see rapper verse used.
So I would just go ahead and learn how to

use rap and no rap. Now, of course, if you're
going to go ahead and use no rap, it's usually

because of some inherited value, because again,
no rap is the default value that's used, so

you won't really see it commonly in CSS. Let's
go ahead and set the property back to wrap.

So those are the two main properties that
we're going to cover in this video is wrap

and flex direction. Now, of course, these
are two very basic properties, but they're

still very useful. And you can really see
how this can be used commonly inside our website

and inside web development as a whole. Alright,
so that's pretty much it for these two properties.

Let's move on to some of the other properties
that we can use on our flex container in CSS.

So in this video, we're going to be covering
two of the properties of our flex container,

direction and wrap. So right now we have everything
set up. We have five flex items here labeled

A to E, and then we also have our container.
But now we're going to go through and start

manipulating it. So the first thing I want
to talk about is flex direction. So pretty

much right now it's laid out in a row here,
but what we can actually do is specify the

direction that we want our items to go in.
We can also reverse the order using a special

suffix. Let's get started. So the property
that we're going to use is flex direction,

flex dash direction. And you add this to the
container to the flex container. So here we're

going to specify either row or column row
is the default value, and it's going to be

going in a direction to the right side of
the container. We also have column, which

is what we kind of saw before. And you can
see it's a little bit better spaced out. And

you can see it goes A to E, except it goes
in a column. Now, that's pretty easy to understand.

But we can also go reverse. So instead of
A to E, it goes eat a, all we have to do is

add dash reverse to column a row, and it's
going to flip the direction that our item

is going in. Let's refresh. And now you can
see it's going in reverse. We can also do

the same thing with row or pretty much any
other value for this property here. You can

see now it goes E to a, and it also goes in
the opposite way to the left side of the page

instead of to the right side. So that's it
for flex direction, it's very easy to understand,

I'm just going to go ahead and set it back
to wrote the default. The next item I want

to talk about is flex wrap. So this is a little
bit more complicated to understand. But once

we start using it, it gets quite easy. Pretty
much when you wrap an item, it's going to

move it to a new row or column to avoid the
exceeding the maximum length. So for example,

if we had more than the specified amount of
items here, so if we had a, b, c, d, e, and

then F, G, H, I and all the ways to K or L,
we don't want it to keep going on forever.

So what we want to do is once it gets to a
certain length, rump length, wrap it around

and move it to a new line. So I'm actually
going to go ahead and do that here. I'm going

to go ahead and copy all of these items, pretty
much double it. And then I'm going to say

f, g, h, i and j. And now let's go ahead and
refresh the page and see how this looks. You

can see we have now abcdefg H I J. And of
course it's not going past the page yet, but

we can actually wrap this around and see how
it looks. So all we have to do is add the

flex dash wrap property. And now we can either
specify we can specify one of two values,

wrap and no rap. So I'm going to go ahead
and say rap. Now if we go ahead and refresh

the page, you can see that instead of kind
of squeezing in the space or changing the

spacing, it just moves this to a new row,
we can also go ahead and use rock reverse,

which pretty much revolves, it does the exact
same thing, but it reverses the order. So

now if we go ahead and refresh, you can see
that this whole thing is kind of flipped.

Now normally, you won't see rapper verse used.
So I would just go ahead and learn how to

use rap and no rap. Now, of course, if you're
going to go ahead and use no rap, it's usually

because of some inherited value, because again,
no rap is the default value that's used, so

you won't really see it commonly in CSS. Let's
go ahead and set the property back to wrap.

So those are the two main properties that
we're going to cover in this video is wrap

and flex direction. Now, of course, these
are two very basic properties, but they're

still very useful. And you can really see
how this can be used commonly inside our website

and inside web development as a whole. Alright,
so that's pretty much it for these two properties.

Let's move on to some of the other properties
that we can use on our flex container in CSS.

So in this video, we're going to be talking
about two very important elements or what

properties that can be used to justify and
align flex items inside of container. So we're

going to be talking about two main properties,
one of them is going to be responsible for

the horizontal alignment, and the other for
the vertical alignment. So let's talk about

them. The first one which is for horizontal
alignment is called justify content. Now,

both of these ello, both of these properties
actually contained three main values which

are shared between the two of them. And then
each of them can take two special values,

which actually align them in a pretty different
way than you would expect. So let's talk about

justify content. Now first of all, you'll
notice that these are a little bit stretched

out, don't worry about that for now, that's
just because of the added height to the container

will talk about that in just a second. But
let's get started. So the first three properties

that are pretty common are flex start, flex
end, and center. So flex start is going to

be where the container starts, which in this
case is on the left. On the other hand, the

end is going to be the opposite. So on in
this container, it's on the right and then

center positions in the middle. So what I'm
going to do here is just set it as center

for now. And you can see that now all of our
eyes limbs have been centered in the middle

here. If I said something like flex end, and
remember, it does contain a dash in there,

it's going to move everything to the end of
the container here. So those are the three

main values. Let's talk about the two special
ones now. Now, pretty much these ones are

going to be messing a little bit with the
spacing between these, but they are still

related to alignment, because it's changing
the spacing in a way that does actually align

our elements here. So the two main values
are space around and space between. So let's

talk about space between first, what happens
is that space, the spacing between the flex

items is created so that it's all equal. And
it creates equal divisions to move everything

on well, equally divided from each other on
the same row. On the other hand, space around

actually creates spacing on all sides of the
item. So instead of just creating them between,

it's going to create them between some of
the flex items and the edges. So though, that's

the main difference between the two, and it
depends on what you really want. So for example,

if you want a centered kind of item or a centered
Flexbox, what you would do is use the space

around property. Whereas if you wanted something
to be stretched out, you would use the space

between property.

So in this video, we're going to be talking
about two very important elements or what

properties that can be used to justify and
align flex items inside of container. So we're

going to be talking about two main properties,
one of them is going to be responsible for

the horizontal alignment, and the other for
the vertical alignment. So let's talk about

them. The first one which is for horizontal
alignment is called justify content. Now,

both of these ello, both of these properties
actually contained three main values which

are shared between the two of them. And then
each of them can take two special values,

which actually align them in a pretty different
way than you would expect. So let's talk about

justify content. Now first of all, you'll
notice that these are a little bit stretched

out, don't worry about that for now, that's
just because of the added height to the container

will talk about that in just a second. But
let's get started. So the first three properties

that are pretty common are flex start, flex
end, and center. So flex start is going to

be where the container starts, which in this
case is on the left. On the other hand, the

end is going to be the opposite. So on in
this container, it's on the right and then

center positions in the middle. So what I'm
going to do here is just set it as center

for now. And you can see that now all of our
eyes limbs have been centered in the middle

here. If I said something like flex end, and
remember, it does contain a dash in there,

it's going to move everything to the end of
the container here. So those are the three

main values. Let's talk about the two special
ones now. Now, pretty much these ones are

going to be messing a little bit with the
spacing between these, but they are still

related to alignment, because it's changing
the spacing in a way that does actually align

our elements here. So the two main values
are space around and space between. So let's

talk about space between first, what happens
is that space, the spacing between the flex

items is created so that it's all equal. And
it creates equal divisions to move everything

on well, equally divided from each other on
the same row. On the other hand, space around

actually creates spacing on all sides of the
item. So instead of just creating them between,

it's going to create them between some of
the flex items and the edges. So though, that's

the main difference between the two, and it
depends on what you really want. So for example,

if you want a centered kind of item or a centered
Flexbox, what you would do is use the space

around property. Whereas if you wanted something
to be stretched out, you would use the space

between property.

So there we go. Those are some of the little
items or values that you can use under justify

content property. Now let's move on to align
items. So this is the property that aligns

it vertically. Now by default, it's set to
stretch, which is what we can see here. So

it just stretches all the way across down
to the bottom of the container, we can actually

change this. So let's go ahead and add this
property align items. Now what we're going

to do is change it to center. So just like
before, we have three main values, flex, start

flex, and and center, you can see that immediately.
Now all of these items are still spaced in

between, but they have been moved to the center
here. So you can see here that on the Align

items, this has been arranged vertically,
it this is the start at the top and the and

the bottom and the flex end is well at the
bottom of the container, justify content says

the flex start is on the left side, and the
flex end is on the right. So there we go,

you can see what this is what this looks like
right here is when we align the items, it

centers it in between the top and the bottom.
So let's go ahead and just see what the other

values look like. So for example, flex start.
So for, let's just say you want to keep the

height of these items the same, you don't
want to stretch them, this is what you would

do, you could also set it to flex and if you
wanted something to appear at the end of the

page. And yeah, that's pretty much it for
those three main values. Now let's talk about

the two special values. So these are a little
bit different because they don't follow some

general convention. But the two values are
baseline and stretch. Now we've already covered

stretch a little bit in the beginning of this
in which we could set stretch as our default

value. And all that does is just align it
all the way through from top to bottom. But

baseline is a little bit different. Now unfortunately,
we can't really see the effect, apparent right

here. But pretty much what happens is that
all of these items, no matter their size,

are aligned to a baseline. Now if I actually
go and add some inline styles to override

some of these, so for example B, I'm going
to let's just say I'm going to make the line

height, which is a property we haven't actually
learned yet, what we're going to do is just

set the line height to whoops, real problem
there, I'm going to set this to 100 pixels,

like that. And now what I'm going to do is
go ahead and refresh the page and see what

happens, you can see that this is a little
bit higher, but they're all aligned on the

same line, you can see that the fonts here
have been changed a little bit not really

not really apparent here. But you can see
the heights are different, but they're still

all in the same line. So that's what baseline
actually does it just no matter the size,

or the font text or anything, it's all going
to keep them or it's going to keep them all

on the same baseline. And that's what it does.
Alright, so I'm going to go ahead and remove

this inline style, since we don't need it.
And those are pretty much the two main alignment

properties. Now if you wanted to align something
to the center of a Flexbox, what you would

do is just set justify content and jaw and
align items, both of them to the center. And

what that's gonna do is just align everything
to the center of the flex box. So that's what

I've just done here is I've set both of them
to center so that way on top, it's centered

between the top and the bottom as well as
the left and the right. Alright, let's move

on.

So there we go. Those are some of the little
items or values that you can use under justify

content property. Now let's move on to align
items. So this is the property that aligns

it vertically. Now by default, it's set to
stretch, which is what we can see here. So

it just stretches all the way across down
to the bottom of the container, we can actually

change this. So let's go ahead and add this
property align items. Now what we're going

to do is change it to center. So just like
before, we have three main values, flex, start

flex, and and center, you can see that immediately.
Now all of these items are still spaced in

between, but they have been moved to the center
here. So you can see here that on the Align

items, this has been arranged vertically,
it this is the start at the top and the and

the bottom and the flex end is well at the
bottom of the container, justify content says

the flex start is on the left side, and the
flex end is on the right. So there we go,

you can see what this is what this looks like
right here is when we align the items, it

centers it in between the top and the bottom.
So let's go ahead and just see what the other

values look like. So for example, flex start.
So for, let's just say you want to keep the

height of these items the same, you don't
want to stretch them, this is what you would

do, you could also set it to flex and if you
wanted something to appear at the end of the

page. And yeah, that's pretty much it for
those three main values. Now let's talk about

the two special values. So these are a little
bit different because they don't follow some

general convention. But the two values are
baseline and stretch. Now we've already covered

stretch a little bit in the beginning of this
in which we could set stretch as our default

value. And all that does is just align it
all the way through from top to bottom. But

baseline is a little bit different. Now unfortunately,
we can't really see the effect, apparent right

here. But pretty much what happens is that
all of these items, no matter their size,

are aligned to a baseline. Now if I actually
go and add some inline styles to override

some of these, so for example B, I'm going
to let's just say I'm going to make the line

height, which is a property we haven't actually
learned yet, what we're going to do is just

set the line height to whoops, real problem
there, I'm going to set this to 100 pixels,

like that. And now what I'm going to do is
go ahead and refresh the page and see what

happens, you can see that this is a little
bit higher, but they're all aligned on the

same line, you can see that the fonts here
have been changed a little bit not really

not really apparent here. But you can see
the heights are different, but they're still

all in the same line. So that's what baseline
actually does it just no matter the size,

or the font text or anything, it's all going
to keep them or it's going to keep them all

on the same baseline. And that's what it does.
Alright, so I'm going to go ahead and remove

this inline style, since we don't need it.
And those are pretty much the two main alignment

properties. Now if you wanted to align something
to the center of a Flexbox, what you would

do is just set justify content and jaw and
align items, both of them to the center. And

what that's gonna do is just align everything
to the center of the flex box. So that's what

I've just done here is I've set both of them
to center so that way on top, it's centered

between the top and the bottom as well as
the left and the right. Alright, let's move

on.

So for the first part of this section, we've
been talking about a lot of the properties

that we can use for the actual flex container.
So you can see that we've covered five here,

the display type, which is to create the container,
the direction wrap, and our content alignment

properties. But we haven't actually talked
anything about the items themselves, because

we've just been looking at the container.
So that's what we're going to be doing over

the next few videos is looking at some of
the properties that we can use on our items

themselves to change how they look. And that's
when the real power of Flexbox comes in, and

really shows how it can be used. So the first
item that we're going to be covering or property

in this case is flex item order. Now, instead
of adding this directly to the container,

we can actually go through and add this to
the flex items themselves. So I'm going to

hold Ctrl or Command if you're on Mac, and
go ahead and add our style property to all

five of these flex items, because what we're
going to actually have to do is add this property

to all of our items, seems like a new line
was created there. Let's get started. So pretty

much what we're going to be doing is using
a property to change the positioning or order

in this case of our flex items. So I'm going
to go ahead and create that multiple cursor

feature again. And the property we're going
to use is order. Now what we can do is go

ahead and start specifying our order. So pretty
much what we're going to do is go through

and change what this looks like and how this
looks like in our place here. So what we're

going to do is go and specify our values.
And then we're instead of having it from A

to E, we're actually going to go through and
add something to make these properties look

in a different way instead of having to actually
move all of these around. So instead of moving

the divs around, and you know changing all
of them, we're actually going to go through

and specify some numbers. So let's get started.
So what we're going to use for this is numbers.

Now, this ranges from one all the way up to
as many numbers or as many items as you have,

and the default value is zero. And this is
just going to keep it in its position. But

we can actually specify the number to see
where it lands. So let's just say that I want

D first, what I'm going to do is go ahead
and under my order property, add a one, just

like that. Now I'm going to go ahead and add
E, so I'm going to set my order to two. Now

if you've worked with computers before, you
might think that it starts with zero, but

in this case, zero is our default value. So
we're not actually going to be using that.

So I have D then E. Now let's say I would
be next. So I'm going to put it under the

third position. Now for C or actually a, I'm
going to put as the fourth position, and C

is the last. So let's see if this holds up
here, we refresh the page d V AC. So you can

see that we can actually change the order
of these flex items directly from our CSS

instead of having to go through and move them
around. Now you might know you might be wondering

why this could be useful at all. Now, although
might not be apparent here because we haven't

actually gotten, we're using the JavaScript.
Once you start making your website interactive,

this becomes a very useful features. Because
you can't just go through and program something

to move the divs around in your HTML document
without using some sort of file reading. Instead,

it's much easier to just add a style to it,
where you can change the order, maybe even

randomly. So you can see how this would work.
And although like I said, although it's may

not be useful in this case, it will definitely
be useful once you start learning about JavaScript

and start making your websites interactive.
So that's a little bit about flex order. Now

just one thing, you don't actually have to
use it with an inline style tag. But it would

be much easier considering that if without
it, you'd have to go and add an individual

class to every single item. Now, of course,
it's much easier to just go ahead and add

a style tag to each of these. But if you want
to use it with a class method, maybe you already

have an existing class, you can go ahead and
do that. There's nothing wrong with that.

I'm just using this because it's a lot more
convenient and easy to use. Alright, so that's

pretty much it about flex order. It's quite
easy to learn once you know how to find the

positions of items and how you know how to
order them in the right way. As long as you

know the number of items you have, it's very
easy to position them just the way you like

it. Alright, let's move on.

So for the first part of this section, we've
been talking about a lot of the properties

that we can use for the actual flex container.
So you can see that we've covered five here,

the display type, which is to create the container,
the direction wrap, and our content alignment

properties. But we haven't actually talked
anything about the items themselves, because

we've just been looking at the container.
So that's what we're going to be doing over

the next few videos is looking at some of
the properties that we can use on our items

themselves to change how they look. And that's
when the real power of Flexbox comes in, and

really shows how it can be used. So the first
item that we're going to be covering or property

in this case is flex item order. Now, instead
of adding this directly to the container,

we can actually go through and add this to
the flex items themselves. So I'm going to

hold Ctrl or Command if you're on Mac, and
go ahead and add our style property to all

five of these flex items, because what we're
going to actually have to do is add this property

to all of our items, seems like a new line
was created there. Let's get started. So pretty

much what we're going to be doing is using
a property to change the positioning or order

in this case of our flex items. So I'm going
to go ahead and create that multiple cursor

feature again. And the property we're going
to use is order. Now what we can do is go

ahead and start specifying our order. So pretty
much what we're going to do is go through

and change what this looks like and how this
looks like in our place here. So what we're

going to do is go and specify our values.
And then we're instead of having it from A

to E, we're actually going to go through and
add something to make these properties look

in a different way instead of having to actually
move all of these around. So instead of moving

the divs around, and you know changing all
of them, we're actually going to go through

and specify some numbers. So let's get started.
So what we're going to use for this is numbers.

Now, this ranges from one all the way up to
as many numbers or as many items as you have,

and the default value is zero. And this is
just going to keep it in its position. But

we can actually specify the number to see
where it lands. So let's just say that I want

D first, what I'm going to do is go ahead
and under my order property, add a one, just

like that. Now I'm going to go ahead and add
E, so I'm going to set my order to two. Now

if you've worked with computers before, you
might think that it starts with zero, but

in this case, zero is our default value. So
we're not actually going to be using that.

So I have D then E. Now let's say I would
be next. So I'm going to put it under the

third position. Now for C or actually a, I'm
going to put as the fourth position, and C

is the last. So let's see if this holds up
here, we refresh the page d V AC. So you can

see that we can actually change the order
of these flex items directly from our CSS

instead of having to go through and move them
around. Now you might know you might be wondering

why this could be useful at all. Now, although
might not be apparent here because we haven't

actually gotten, we're using the JavaScript.
Once you start making your website interactive,

this becomes a very useful features. Because
you can't just go through and program something

to move the divs around in your HTML document
without using some sort of file reading. Instead,

it's much easier to just add a style to it,
where you can change the order, maybe even

randomly. So you can see how this would work.
And although like I said, although it's may

not be useful in this case, it will definitely
be useful once you start learning about JavaScript

and start making your websites interactive.
So that's a little bit about flex order. Now

just one thing, you don't actually have to
use it with an inline style tag. But it would

be much easier considering that if without
it, you'd have to go and add an individual

class to every single item. Now, of course,
it's much easier to just go ahead and add

a style tag to each of these. But if you want
to use it with a class method, maybe you already

have an existing class, you can go ahead and
do that. There's nothing wrong with that.

I'm just using this because it's a lot more
convenient and easy to use. Alright, so that's

pretty much it about flex order. It's quite
easy to learn once you know how to find the

positions of items and how you know how to
order them in the right way. As long as you

know the number of items you have, it's very
easy to position them just the way you like

it. Alright, let's move on.

So in this video, we're going to be talking
about three very important properties that

come with Flexbox which are flex grow, flex,
shrink and flex basis. Now, although it might

not seem like it, these actually are completely
responsible for the responsive power of Flexbox.

And it's what really makes it what it is today
and why it's used so commonly over things

like floats and display types. So first of
all, if we look at it, now, it might seem

that flex grow and shrink, just specify the
width and height. And although they sort of

do, they are very different when it comes
to the core concept and how it's decided.

So the first thing we need to do is talk about
the flex basis property, because from there,

we're going to define everything else. Now,
we all know that we have five items here,

and they take up a certain amount of space
each. But you can see that there's all of

this extra room here on the side. So what
actually happens is these properties work

to define how the extra space or this remaining
excess space is divided up between them. And

from there, we can actually specify the width
based on the you know, browser width, and

it's all responsive. So it's all decided completely
based on the browser and on the properties

that you define. So the first thing I'm going
to do is go ahead and actually add this property

to all of them. And I'm gonna explain why
in just a second. And why we need to do that.

So what I'm going to do is first download,
I'm going to go ahead and add the flex grow

property, and the flex shrink property. Now
we're not going to use all these in one go,

we're just going to do this gradually, and
then our flex basis. Okay, so let's talk about

flex basis. First, what this does is it pretty
much defines the minimum width of an item

or a flex item. So this can be any value doesn't
just have to it doesn't have to be a specific

number or unit. So for example, I'm going
to go ahead and set this as maybe 100 pixels

for each one as its minimum width, we go ahead
and refresh the page. And now you can see

it's a lot wider. But you can see that there's
still this extra space. So this is where our

flex grow property comes in. Now what happens
is, if I actually go ahead and go to all of

them, and set them all as one, what this is
pretty much going to say is every flex item

is going to get the same amount of extra space.
So you can see that this gets if all of them

are one, they all get the same amount. Let's
go ahead and see that when we refresh the

page, you can see now there's only a little
bit of margin, which is normal. But all of

them are divided up equally. Now that we've
set them as one. But what happens if we go

ahead and actually change this value? Let's
go ahead and for example, set our fifth item

as to maybe. So now you can see that, although
it's not much bigger, it is a little bit bigger.

So what this is pretty, I'm gonna go ahead
and set it to actually something a little

bit bigger, so it's more obvious. So you can
see now this is a lot bigger than the other

items. So pretty much what this is saying
is our fifth item, this container item is

going to get five times as much excess space
as the rest of the items here. So one thing

you need to know about flex grow is that you
need to add this property to every single

one of them and make sure that they have a
defined value. If they don't, if you want

them just to give them a default space, give
them a value of one. And this is because what

happens is when you don't give them any value.
If you give this flex grow property to anything,

it's going to eat up all that extra space.
Let's go ahead and demonstrate this. Now,

I'm going to go ahead and erase all of this,
all of these flex grow properties just temporarily.

And then I'm going to leave it on this one.
Now I'm going to set it to one. Now you might

expect this is to be just a little bit bigger.
But let's see what actually happens. If we

go ahead and refresh the page, you can see
that this is actually bigger than when we

set this to flex this flex grow property to
five. So what's going on here, pretty much

what's happening is the default value for
our flex grow property is actually zero, which

means it's going to remain the same width,
and it's not going to take up any excess space.

So pretty much what's happening is when we
set this to one, everything else is not taking

any excess space, leaving it all to that one
value. So all of that extra space is taken

up by this block here. And you can see that
and it's proved proven because there is still

no excess space here, since it's all taken
up out by this property. So what I would recommend

is before we learn the flex

So in this video, we're going to be talking
about three very important properties that

come with Flexbox which are flex grow, flex,
shrink and flex basis. Now, although it might

not seem like it, these actually are completely
responsible for the responsive power of Flexbox.

And it's what really makes it what it is today
and why it's used so commonly over things

like floats and display types. So first of
all, if we look at it, now, it might seem

that flex grow and shrink, just specify the
width and height. And although they sort of

do, they are very different when it comes
to the core concept and how it's decided.

So the first thing we need to do is talk about
the flex basis property, because from there,

we're going to define everything else. Now,
we all know that we have five items here,

and they take up a certain amount of space
each. But you can see that there's all of

this extra room here on the side. So what
actually happens is these properties work

to define how the extra space or this remaining
excess space is divided up between them. And

from there, we can actually specify the width
based on the you know, browser width, and

it's all responsive. So it's all decided completely
based on the browser and on the properties

that you define. So the first thing I'm going
to do is go ahead and actually add this property

to all of them. And I'm gonna explain why
in just a second. And why we need to do that.

So what I'm going to do is first download,
I'm going to go ahead and add the flex grow

property, and the flex shrink property. Now
we're not going to use all these in one go,

we're just going to do this gradually, and
then our flex basis. Okay, so let's talk about

flex basis. First, what this does is it pretty
much defines the minimum width of an item

or a flex item. So this can be any value doesn't
just have to it doesn't have to be a specific

number or unit. So for example, I'm going
to go ahead and set this as maybe 100 pixels

for each one as its minimum width, we go ahead
and refresh the page. And now you can see

it's a lot wider. But you can see that there's
still this extra space. So this is where our

flex grow property comes in. Now what happens
is, if I actually go ahead and go to all of

them, and set them all as one, what this is
pretty much going to say is every flex item

is going to get the same amount of extra space.
So you can see that this gets if all of them

are one, they all get the same amount. Let's
go ahead and see that when we refresh the

page, you can see now there's only a little
bit of margin, which is normal. But all of

them are divided up equally. Now that we've
set them as one. But what happens if we go

ahead and actually change this value? Let's
go ahead and for example, set our fifth item

as to maybe. So now you can see that, although
it's not much bigger, it is a little bit bigger.

So what this is pretty, I'm gonna go ahead
and set it to actually something a little

bit bigger, so it's more obvious. So you can
see now this is a lot bigger than the other

items. So pretty much what this is saying
is our fifth item, this container item is

going to get five times as much excess space
as the rest of the items here. So one thing

you need to know about flex grow is that you
need to add this property to every single

one of them and make sure that they have a
defined value. If they don't, if you want

them just to give them a default space, give
them a value of one. And this is because what

happens is when you don't give them any value.
If you give this flex grow property to anything,

it's going to eat up all that extra space.
Let's go ahead and demonstrate this. Now,

I'm going to go ahead and erase all of this,
all of these flex grow properties just temporarily.

And then I'm going to leave it on this one.
Now I'm going to set it to one. Now you might

expect this is to be just a little bit bigger.
But let's see what actually happens. If we

go ahead and refresh the page, you can see
that this is actually bigger than when we

set this to flex this flex grow property to
five. So what's going on here, pretty much

what's happening is the default value for
our flex grow property is actually zero, which

means it's going to remain the same width,
and it's not going to take up any excess space.

So pretty much what's happening is when we
set this to one, everything else is not taking

any excess space, leaving it all to that one
value. So all of that extra space is taken

up by this block here. And you can see that
and it's proved proven because there is still

no excess space here, since it's all taken
up out by this property. So what I would recommend

is before we learn the flex

property in the next video, just go ahead
and add this flex grow property to every single

item or container if you plan to use it. So
now if we go ahead and refresh the page, you

can see that that's working great now what's
the advantage of

property in the next video, just go ahead
and add this flex grow property to every single

item or container if you plan to use it. So
now if we go ahead and refresh the page, you

can see that that's working great now what's
the advantage of

Using this, before we move on to our next
property, if I actually resize this window,

right here, I'm just gonna resize it, you
can see that when it grows, it still takes

up the same proportions of excess space. Now
we'll talk about getting smaller in just a

little bit. But you can see here that it does
actually take up the same proportion. And

that's where the really responsive power of
Flexbox comes in, is when you're resizing

your windows and browsers and there's all
of the different devices, this actually stays

the same. So let's move on to our next property.
Now flex shrink. So we know that the basis

for the minimum width is 100 pixels, that's
the minimum it can go. But when we actually

shrink this down, and all of these get smaller,
I'm actually going to go ahead and move the

flex wrap property from here because it's,
it's some little intrusive here. And although

it's not good for this, it's not good for
this example, we'll go ahead and use it later.

So when we go ahead and actually shrink this
window, you can see that that proportion is

actually lost. So what's going on here, pretty
much when you go below the minimum width,

whether it's defined on our flex basis, or
the minimum width of the of the, of the container

item itself, what's happening is that proportion
is completely removed, and you go to the default

value of flex shrink. So flex shrink is similar
to flex grow, except what happens is it defines

the rate of shrinkage of each container item
again, relative to the rest of the items.

So in this case, what we have to do is go
ahead and look at how this trig property works.

The default value for this, unlike flex grow
is one, not zero. So what this is saying is

shrink each item at the same rate as all the
other items. And that's why we can see that

once we go under the minimum height, or sorry,
minimum width, you can see that all of those

items begin to look the

same.

So what I'm going to do here is actually go
ahead and show you how to manipulate this.

And this is where the real responsive power
comes in. And where you can really change

how everything looks on different devices,
all we have to do is go ahead and specify

the value that we want here. And one thing
to note is that if you don't want something

to shrink, you can just set the value to zero.
So for example, if I wanted to remove the

shrinkage of our fourth item here, well let
me go with our first item. Right here, all

I have to do is go ahead and shet set, sorry,
our shrink value to zero. And what this is

going to say is don't shrink the item, even
if it goes below, do not shrink the item at

all, let everything else shrink. Let's go
ahead and see how this looks on our site.

So we're going ahead, we're removing that
space. But you can see that our first value

does not shrink at all. So there we go. Now
let's go ahead and start adding our shrinkage

values to the rest of our items here. So what
I'm going to do is first add a value of one

to all of them, just like this, just to keep
everything the same. And now what we're going

to do is go ahead and start manipulating them.
So first of all, let's go ahead and say that

we want our middle value to shrink three times
as fast. So we're gonna go over to our middle

value and change the flex shrink to three
times. So now we go ahead and refresh the

page. And when we shrink it, you can see that
that value shrinks three times as fast as

everything else. So you can see that and it's
pretty apparent there. So there we go. That's

pretty much it for our three values. Now one
thing I forgot to mention is if your flex

shrink is one and it's not there on purpose,
you can actually go ahead and remove it since

the default value is one forgot to mention
that in the when I started changing them.

But there we go. Now what I'm going to say
is, why would you use something like this

flex grow and flex shrink, when you're laying
out entire pages based on Flexbox, you want

to make it as responsive as possible, you
don't want to go and you know, have it looked

completely different on one device to the
other. What you can actually do is use this

to change the look of a website, depending
on what device you're on. So for example,

you can use this property to change the look
of a website on a mobile phone versus on a

widescreen TV, it's going to be completely
different. And you can do this using only

a few properties instead of having to go and
define entire styles for separate devices.

So from here, we can actually really see the
true cloud power of Flexbox. From here, we

can go ahead and actually model our website
with just a few styles that are very streamlined

and efficient to change the look of a website
completely on different devices. So I hope

that was a little bit easy. To understand
now, I know it's quite hard to wrap your head

around. But this is the core concept of Flexbox.
And it's what really makes Flexbox what it

is. So if you understand this, the rest of
Flexbox, and using it is going to be a breeze.

Alright, let's move on. So in this video,
we're going to be moving on from flex grocery

in basis and actually talking about a really
useful shorthand property that can summarize

all three of these into an even more streamline
method. So in the past video, I talked just

briefly about the flex property. And pretty
much what it is, is a shorthand to use the

flex grow shrink and basis property in one
go. So we can use this to our great advantage,

because instead of adding all of these properties
to every single one of these items, we can

actually just summarize it down into one simple
property. So let's go ahead and talk about

it. Pretty much the flex property, which is
the property that we're going to be using

follows or takes in three values, the grow
the shrink, and the basis. So what we're going

to do is first add our growth. In this case,
it's one, and then we're going to add our

shrink, which is the default value of

one.

And that's just a little tip, if you don't
actually have that defined, just go ahead

and set it as the default value. So just a
quick summary grow the default is zero, which

means it's not growable. The default string
value is one, which means shrink it at the

rate of everyone else. And then the there
is no default for the basis property, unless

you use something like auto. So what you can
do is go ahead and define that as 100 pixels.

Now, what we're going to do is go ahead and
do it for the rest of these items, flex, flex

just the property. Here, we're going to go
one, which is the grow three, which is the

shrink, and again, 100 pixels for the basis.
And you can start to see kind of the rhythm

that I'm getting into here, five for the grow
one for the shrink, which is the default,

and 100 pixels for our basis.

Let's go ahead and do it for this one.

And like I said, you can see the rhythm here,
and you can just go ahead and do this very

quickly, without having to manually go through
and add all three of these properties. One,

one, and 100 fixes.

All right, now let's go ahead and erase all
of these other unnecessary properties. Now

that we have our flex property and restart.
So if we did this, right, pretty much what's

going to happen is everything is going to
look the same, since all of our values are

still working, we just threw them into a shorthand.
Let's go ahead and first before we refresh,

check out the behavior. Whoops, something's
going wrong there. Yeah, there we go. So let's

just check out the behavior, we shrink B get
smaller D doesn't shrink at all. And we when

we size up, our last value gets bigger. Let's
go ahead and refresh the page and see if this

worked. So when we shrink, D is supposed to
stay the same, and B gets smaller. There we

go. So D stays the same, and B gets smaller.
And if we enlarge it, you can see that C gets

larger. So there we go, you can see how all
of this works. Instead of adding three properties,

we can actually just go ahead and do this
in one straight swoop, just go through and

add all of all three values using one property,
the flex property. Alright, let's move on.

So this is going to be the last video on Flexbox.
And I'm sure that we've summarized all of

the different things that you can do with
Flexbox in this section, and then you can

go off and start using it and creating all
sorts of really cool responsive websites and

layouts with it. But for now, what we're going
to be doing is going through and learning

the final property. Now we've learned how
to align all of the elements at the same time

in our flex container, we learned how to align
it both vertically and horizontally, but we're

actually going to be doing is learning how
to align each item. And remember, because

each item is laid out with width wise in a
certain way, we can only align it vertically.

So just keep that in mind for now. So let's
get started. Now in order to align it vertically,

we use the Align items property to work with
and align all of these. So in this case, what

we did with our container is aligned all of
them to center. But what we're going to be

doing now is going through and aligning each
individual item using a special property called

align itself. Now one thing to note is that
this property will override the Align items

property if you have it enabled. So for example,
if I wanted to align this to the top, it would

override our center and what The line this
only only and only this item to the top. So

let's get started. First thing I want to do
is go ahead and add the property. And remember,

we have to go and add it just like everything
else. So I'm going to go through and add it

now. So first thing I'm going to do is go
and let's just take our first item, for example.

Where is it? There we go. So now I'm going
to go ahead and add a line self. And now we

can go ahead and add our different values.
So let's go ahead and get started, I'm going

to go ahead and try something just like with
the normal values, let's go ahead and save

flex start. So just like our other values
with our default container, what we can actually

do is align them with the same values. So
center flex start and flex end. So let's go

ahead and refresh the page. And you can see
now that that specific item, which is D, or

the first item is aligned to the start of
the flex container, whereas the rest of the

items are aligned to the middle, which is
based on the Align items property that we

had on our container. So now let's go ahead
and create a sort of V shape out of all of

our items here. So what I'm going to do is
first go and add our flex, sorry, aligned

self property to all of our values, here are
all of our container items. And now what I'm

going to do is start styling them. So we know
that the first one is at the start, we want

the second one here to be in the center. So
although it's already defined, I'm just going

to say center to make everything a little
easier to read. Now we're going to go ahead

and look for the third one, which needs to
be at the bottom. So what I'm going to say

here is flex

end.

And let's go ahead and refresh working so
far. Our fourth one has to be on the same

level as he so we're going to keep that in
the center here, wherever it is, let's see.

Yep, it's the fourth one centered. And now
we want our final one to be at the top as

well. So it is a little confusing to read
with the orders. But after a little bit of

looking, you can see how this whole thing
works. Now obviously, it's a little bit out

of proportion because of our sizes here. But
you can see that our thing is still responsive.

It's still resizing in the same way, we just
aligned the items differently. Alright, so

there you go. That's pretty much how this
works. And one thing to note that before we

move on is you can't actually use stretch
and baseline on a line self, they just don't

work because they are kind of container specific
properties and they won't, they work off of

values of the container. So aligning it on
an item just wouldn't really work in the same

way. So that is one thing you need to keep
in mind is that you can only use these three

values. Alright, so like I said, we were moving
on and learning about all of the different

alignments. And now that we've learned how
to align each item, we can really use this

along with our flex property and some other
Flexbox properties on the container to create

a really nice responsive layout. So I encourage
you to go ahead and try this on your own,

create your own flex layouts, and don't even
just use these blocks, you can go through

and use images and forums and all sorts of
things. And just style them in a way that

makes the website look good. Because now that
you've learned the tools to create a responsive

container, you can go through and actually
start practically applying it to the real

world. Alright, let's move on. So in this
video, we're going to be looking at grid versus

Flexbox. Now in the previous section, we looked
at Flexbox as a whole, we looked at all the

different container properties, we also looked
at some of the other properties that we can

use on our items. But today, we're going to
be looking at a different type of well layout

property, and that is grid. So before we get
started, I'm going to give a little introduction

to grid and what it actually is. So similar
to Flexbox grid is a display type that's going

to allow us to work with our layout and our
CSS in a different way. So again, they are

both completely all complete alternatives
to some of the other layout features that

were used in the older times and in other
versions of CSS. So what we're going to be

doing is again, in this section, going through
looking at the different types, and what we

do with grid, and how it actually all fits
together.

So now that we know some of the similarities,
let's look at the differences. So although

they are both alternatives to our, to our
different layouts, what we can actually do

is look at how they work at a core level.
And although they are completely the same

in what they achieve and their core goals,
they are completely different in how they

work. So first of all, the grid system is
a lot more manual it requires well it doesn't

require but you can control your container
in a much easier way. So you can really customize

your layout and see how everything fits together
with a lot more tools. So one of the the main

difference is how the grid system focuses
on both the width and height. So although

Flexbox does have some height features, it's
mainly focused on the width of flex items

in the container. Whereas grid is focused,
very focused on providing both tools for width

and height to create Well, a grid. And that's
really the reason for the name is because

it is more focused on creating a grid, providing
tools for columns and rows, and all sorts

of things that we're going to cover in the
next few videos looking at, you know, some

of the tools that we can use in grid and the
inherent differences between grid and Flexbox.

So I hope that was a really in depth view
at the differences between grid and Flexbox.

And we will go through and talk more about
them as we go through the section, you know,

learning more tools and properties that we
can use on our grid. Alright, so I hope that

you took a lot from this video. And although
you're not really supposed to know anything

about how they work, it's good to keep in
mind about some of the differences between

them, and draw your own conclusions about
whether you should use grid or Flexbox depending

on what type of website or application you
are creating. Alright, let's move on.

So in this video, we're going to be starting
creating our different grid items and working

with our grids. So I've already created and
set up a little playground or sandbox for

our grid here, we've pretty much adopted the
same style as the Flexbox here using all of

our different, you know, widths and heights
and all these different blocks. But I encourage

you, when you're doing this on your own to
go ahead and experiment around, maybe use

some different items. I'm just doing this
because it's easy for demonstrations. Alright,

so let's get started. Pretty much grid. And
while Flexbox have very similar ways of activation,

they both use a display type or the display
property to set or activate the container.

Now the only difference is is is the property
that it or sorry, the value that needs to

be used to activate these, which is pretty
fair, which is fairly obvious. So let's get

started. First of all, we need to put it on
the container. Remember, we're not working

with the items, we're working with the container
as a whole. So all I need to do similar to

how we created our flex container is that
of saying Flexbox, or grid box or whatever,

all we have to do is type in grid. And what
this will do is set up our grid container.

Let's go and refresh. And you can see that
although you know may not appear that nothing

has changed, we have activated a whole range
of properties that we can now use on our grid

here to set up everything and start creating
our grid. Now you'll notice that when we set

up our Flexbox, so many things different so
many different things change. But without

grid, we actually need to go through and set
up the grid by ourselves, which is what the

whole manual element about it, which is where
the whole manual element comes in is we have

to go and create a grid and sort of shape
it in a way that suits our needs. Alright,

so that's pretty much it for creating the
grid. Now I know this wasn't a very heavy

video, but there are going to be a lot more
concepts that we're going to need to learn

in the future. So this is quite an easy video,
just setting up the grid. And now that we've

done the easy part, we're going to go through
and start learning some of the more difficult

parts of CSS Grid.

Alright,

let's move on. So in this video, we're going
to be moving on with grid and start creating

and setting up this grid to really just define
the style that we want to use for our website.

So what we're going to do is go ahead and
get started with some of the two basic properties

that we're going to be using, which are template
rows and columns. So unlike Flexbox, we can

actually specify the number of grids are well
the number of rows and columns that we want

manually and create the exact style that we
want to divide up all our elements. So what

we're going to be doing is using two special
properties that we can go ahead and use. And

what this is going to do is allow us to split
up our grid into a specified number of rows

and columns, which we can then divide the
items up into, and then start specifying the

sizes and other parts of these items. So like
I said, we're going to be going through and

you know, doing all of this and as we go through.
In this section, we're going to be getting

more experienced with rows and columns and
some of the other core concepts in grid that

will allow us to really shape up this grid
box that we have right here and start applying

it in different places. So Let's get started.
So like I said, the two properties that we're

going to be learning today are about template
columns and rows. So pretty much what this

does is sets up the grid to start off with
a certain number of rows or columns depending

on what property that you're using. And then
from there, you can actually specify the sizes

of each column and row. Now, we're not to
changing individual item sizes yet, but we

can actually go ahead and change the size
of each individual row or column to create

alternating sizes and alternating boxes, which
have alternating sizes. So let's get started.

Now the two properties that we need to use,
which are pretty easy to learn our grid, template

columns, and rows, don't forget about areas
for now we don't need to know them. Now, what

we're going to do is set up our grid template
columns first. So instead of doing something

where we might be taken a function or something,
this is actually set up in a really nice and

elegant way. And all we have to do is type
out the sizes that we want. And based on the

number of sizes or values that we input, it
will decide the number of rows that we want.

So I'll give you an example here, let's just
say I'm going to the first row to be 10 pixels

wide, which is pretty small. And then I wanted
the second one to be 50 pixels, and the third

one to be 10

pixels again.

So what we're pretty much doing here is setting
up setting it up so that we have three columns.

Because we've passed in three values, the
first is going to be about 10 pixels, which

is very, very small, the next one is going
to be 50 pixels. And then the last is going

to be 10 pixels. Now let's see how this looks.
Now if you don't already know this already,

columns are going downwards, not this way.
So just keep that in mind, we refresh the

page. And you can see what kind of an effect
that has here,

we have

a lot of empty space open here. Again, because
we're using absolute values and not relative

values. Or at least relative to the box that
we have here, you can see that our boxes here

are really divided up in a weird way. So our
first column is 10 pixels very small. And

then the second one is it's getting really
mixed up you can see here with our wrapping

and all of this different stuff. And of course,
we don't have those lines to show us how our

grid is set up. But you can see that doing
something like this would obviously really

mess up the grid. Now, obviously, you're not
going to go and set all of this to 10 pixels

at 50 pixels. But you can just see what kind
of an effect this has already. We haven't

even created any rows yet. And we've already
completely customized the way our grid looks

without touching or doing anything. Unlike
Flexbox, we had to actually really go in and

specify it in a way that changed everything.
So let's get started on some of the next one,

the next one, which is our grid template.
What's it called rows. So what's going to

happen here is instead of specifying the columns,
we're going to go ahead and specify the rows

and it works in exactly the same way, all
we need to do is pass in a set number of values,

and it'll decide what we need for us. And
just one thing to note, these don't need to

be the same imagine it imagine it as sort
of a table here, we have three columns going

downwards, and three rows going from left
to right. So let's go ahead and specify this

year, I'm going to go ahead and say I only
want two rows. So I'm gonna say the first

one is 50 pixels. The second one is 250 pixels.
Now let's see how this looks. So you can see

again, this whole thing has expanded. And
now our first row is much smaller, and our

second row is a lot bigger. So you can see
already what you can do with this. And that

you have power as of using these template
columns and rows, as I've explained before,

but this isn't a really convenient, or efficient
way to create a nice looking grid. Because

how are we supposed to know the elements or
the amounts of each device, especially with,

you know, all these different viewports and
sizes, we need to keep this consistent across

all devices. So there's actually a really
easy value that we can use, which is called

auto. Now if we actually go ahead and set
all of our rows to auto, what's going to happen

is it's actually going to divide the space
evenly between the three no matter the size.

And I can also even go ahead and do this with
my rows. And now if I refresh the page, you

can see this looks a lot better. Now you can
kind of see how the spacing is working here,

we have three columns. And obviously there's
nothing in our third column for the bottom

row. But then we also have two rows, so it's
kind of split down the middle. And now we

have our three elements up here and our fourth
and fifth element down here. So you can see

here that what's happening is it's dividing
the space evenly between our elements or our

grid. And if we did actually go ahead and
remove on the values and change it to an absolute

value, use something like 100 pixels, what's
going to happen is the remaining space is

going to be kind of divvied up between the
two columns. And obviously, it doesn't look

like it here, because we don't have spacings
enabled. There's a bunch of things going on

behind the scenes. But what happens is the
remaining space is kind of divided up between

the two columns. So you can see already that
with these values, we can create some really

nice looking grids without even having to
do much work. Now, what I would recommend

is, instead of going and specifying all of
our absolute values, go ahead and just create

the number of columns and rows that you want,
while also using auto values. Because later

in the future, what we're going to do is learn
some techniques to split up our items and

make them look a lot larger without having
to change the size of the columns and rows.

Because it is a much easier, it's much easier
to work with our items rather than the grid

itself. Alright, so that's pretty much it
for template columns and rows. Now, like I

said, just for any other exercise, I recommend
you to go ahead and play with this on your

own. Try and create your own custom grids
and throwing images and all sorts of things

in there, play around with it, and try and
see what you can create. And just try and

come up with this many cool crazy ideas as
possible. Because there is a lot you can do

with just these two. Properties, which are
grid template columns, and grid template rows.

Alright, let's move on. So in this video,
we're going to be looking at some more properties

relating to the grid container. Now, these
properties are very similar to the ones we

learned in Flexbox, which is actually somewhere
up here, where we've learned how to justify

and align items in different ways. But there
are very similar concepts. The only problem

is some of the values and the properties themselves
are actually kind of different. So we need

to go ahead and look over those differences.
So that we can get used to interchanging these

properties between the two without kind of
affecting our understanding of the properties.

So what I'm going to be doing in this video
is going and teaching you in this video how

to align and justify our items both horizontally
and vertically. So let's start with the first

one, which is very similar to Flexbox. And
it is the justify content property. So just

like we've learned before, this is going to
justify it on kind of the horizontal axis

instead of on the vertical axis. So for example,
if we were to center these items, what we

would do is we'll push them all to the center,
instead of moving them up and down. So there

we go. Let's go ahead and get started with
this, I'm going to go ahead and create a new

property here justify content. Now, just like
with our previous property, there are three

main values that are used both in our justify
content property, and the aligned content

property, which we're going to learn in just
a second. The only problem is in our Flexbox

section, we looked at them and they did have
a prefix, which are flex start and flex end.

So basically, like I said, these are sort
of do signify the start and end of the flex

box depending on what axes you're aligning
your items on. But instead of adding that

prefix here, we're just going to say start
and and center, instead of something like

grid start or granddad, they don't use any
of that prefixes. All that's included are

the three main keywords. So it's a lot simpler
to understand. And but it is a little bit

harder when you start using both Flexbox and
grid, and you get the two very mixed up or

confused. So let's go ahead and do that. Now.
I'm just going to go ahead and justified the

content to the center. Why don't I go ahead
and do it or justify it to the end this time

just to spice

things up a little bit.

If I refresh the page, you can see that our
template columns, and that's the key word

there template are ignored, and everything
is completely aligned to the right side of

our grid. So we can also do it just like with
our previous properties in our Flexbox, we

can also align it to the start and do pretty
much whatever we want with these. So the next

value, or the next two values that we're going
to use for this property are space around

and space evenly, which is a little bit different
from space between. So they both work in the

same way, in that they create spacing between
the items to give them to you all even them

out in the grid. But the only difference is
on our Flexbox we actually used space between

whereas on our grid, we're using the value
space evenly. So I'm going to go ahead and

show you that here. I'm going to just go ahead
and say space evenly. Like that. Now if I

refresh the page, you can see that although
it doesn't actually show up here, maybe because

of a developer error or something like that,
we now have our it Here spaced evenly, just

like we can see here in this grid box. Now
there are remember spaces between or before

and after our first items, and that's the
key word there. You can see instead of saying

between it says evenly. And pretty much, what
this is saying is, we're actually going to

space them evenly, not just put space in between
them. So like I said, I talked about a lot

of uses of these in the previous section,
but we're not going to go over those now.

So let's go ahead and try out the next value,
which is space around. And when we refresh

the page, you can see that this looks pretty
much exactly the same. Now, of course, we

don't have lots of space or room to work with
here. So you're not going to see the direct

impact or differences between these. So for
now, let's just consider them the same purpose.

Like I said, we've used both of these in the
past, and you know exactly what they do. So

now let's go ahead and get started with our
next value or sorry, property, which is our

align content property. Now, instead of using
align items, we're using aligned content.

So that's just one thing to keep in mind.
But I'm going to go ahead and say is aligned

content. And before that, let's actually go
ahead and give it a little bit more height,

I'm going to say maybe 500 pixels, refresh
the page. And obviously, these stretch out,

we don't have any defined heights for them.
But we don't have to worry about that for

now, I'll go ahead and change that in just
a second. So what I'm going to do is go ahead

and start playing around with some of these
properties. Now, what's actually really interesting

is for our align items, we can actually use
both space evenly and space around. But we

also we also have our space between property
from our Flexbox section. So if I go ahead

and try that out now,

space in between,

and refresh the page, you can see what happens
is that we have our space between right there

just as we've signified and it's not spaced
evenly. Remember if there's no space, before

or after our top and bottom items. So that's
a really cool feature to keep in mind with

our aligned content, property. And of course,
along with space evenly and space around,

we also have our three standard values, just
go ahead and show you that here are three

standard values, which are center start and
end. So I can go ahead and show you that

now. Start

out or sorry, line content to the end. And
that will push everything down to the bottom

of bottom of the page. So there we go. There's
a lot to digest. In this video, there's a

lot of different properties to cover and memorize.
But don't worry about all that for now just

understand which property does which. And
everything will just fall naturally into place.

And remember, if you ever forget how to do
something, you can always go and both review

the lectures or just Google it. It's really
that simple. There are tons of articles and

helpful resources out there to help you decide
or figure out some of the properties you may

have lost or forgotten in your time using
CSS. So there we go. That's pretty much it

for aligning content, it's quite easy in terms
of properties. Although there are a lot of

values once you start using them and getting
used to some of the subtle differences, everything

will just fall naturally into place. As I
said before, alright, let's move on. So in

this video, we're going to be looking at another
feature of our grids here, and that is going

to be column, column gaps column and row gaps.
So we've looked at aligning content, we've

looked at creating columns and rows. Now we're
going to look at the final piece that kind

of connects everything together for our containers,
which are gaps. So we've talked about how

our grid is kind of set up, we have our boxes,
we have our columns and our rows. And then

we can actually change these or override them
using our justification here, I'm actually

going to go ahead and erase these or comment
them out just for this lecture. So we can

create some good demonstrations here. So what
I'm going to be doing is going through and

talking about these gaps. And they're actually
pretty important when it comes to the whole

thing because you can completely change the
way a grid looks by creating spacing. And

obviously, if you've seen any websites, and
really look closely at it, you'll understand

the importance of spacing in websites, they
really bring everything together and create

sort of a hierarchy that's easy on the eyes
if you've taken any UX or design. So let's

get started. Now what I'm going to be doing
is going ahead and creating these column and

row gaps. So the first the first one I want
to talk about is column gaps. And just as

we were working with our call template columns
and template rows, the the properties that

we need to use are pretty similar. So first,
I'm going to go ahead and start with our columns.

Now the property that we're going to be using
is grid column gap. And you can obviously

kind of associate these together to memorize
them or maybe learn them easier. But besides

that, we're going to go ahead and get this
started. Now, of course, this only takes one

value, we don't need to specify any more,
because what we're going to be doing is giving

each while each column A gap between them.
So let's go ahead and give it a value, I'm

just going to go ahead and say 150 pixels.
To make it a little bit evident, go ahead

and refresh the page. And although it may
not be obvious, immediately, you can kind

of see that these columns are a little bit
more spaced out now. Now, of course, there's

no lines to kind of show you the visualization.
But you can kind of deduce from this, that

there is definitely a bigger gap between the
columns. Now that we've specified it. So now

what I'm going to do is go ahead and actually
change this and give it a row gap. So very

similar to our previous previous property,
we're going to use grid row gap. And this

is pretty much the exact same thing, except
it specifies the gap between rows. So this

is probably going to be a lot more obvious
here, what I'm going to do is just going ahead

and saying 300 pixels, and notice how the
gap of this place kind of gets bigger. You

can see now that there is a much bigger gap
between our top row and our bottom row. So

that's pretty easy. But obviously, you don't
want to go through and specify these every

single time. So there's actually a really
nice shorthand property that we can use to

bring this all together, I'm going to go ahead
and actually, I'll keep these for now, and

then I'll erase them

when we're done.

So instead of specifying which axes you want
to do it on, or which axis sorry, you can

just say grid gap. And what this is going
to do is just create the gap instantly, where

you can pass in two values and specify it
or do it all in one go. So this takes the

column first. And then the row, kind of just
how template columns goes first. And template

rows go first in a shorthand, which we haven't
actually talked about. But we'll get to that

later. For here, what we're going to do is
specify our column first, which is 150 pixels,

and our row gap next 300 pixels. Now, I'm
going to go ahead and erase these other values

that we don't need and refresh the page. So
I actually made a little mistake there, and

I put the column before the rows or if I cause
any confusion there. So what I'm going to

do is actually just go ahead and change this
really quickly. So that this will work. Now

if I go ahead and refresh, you can see that
they look exactly the same. Again, sorry for

that mix up. Just remember that the row or
the row size comes before the column size,

just keep that in mind. So there we go. Now
we have our grid gap setup. Now this is pretty

much it for our well, column gap or row gap
are all of these gaps for our grid layout.

Now, there's really not that much to it, it's
very easy to set up. But once you do that,

it becomes very easy to sort of work with
your grid along with the other properties

to create some really nice looking layouts.
And once we start learning some more of the

properties in the next few videos, you can
really maximize the use of the grid layout

in CSS. Alright, let's move on. So now we're
going to be moving on to a little bit more

complex, the more complicated parts grid,
and in this video, we're going to be covering

quite a big topic, it's going to be a lot
to chew. And don't worry, if you don't get

it on the first try. We're going to go through
this slowly, and we're going to go through

it step by step so that we can learn everything
about this. So in this video, we're gonna

be learning about the real true power of grid
and more we're going to be learning is how

to rearrange and resize items based on starting
at starting and ending points. So that's what

we're going to be doing today. The first thing
we need to do is obviously go and go to our

grid container on our HTML file, since we
need to specify the start and end points of

each item individually. So let's get started.
Now the first thing I'm going to do is actually

go ahead and remove all of these values because
it'll be much easier to see and understand

what's going on. When we just have these fives
here, what I'm actually going to do is go

ahead and add a sixth item just to break even
here and make everything look great. So I'm

going to go ahead and choose another color.
something random here, maybe a purple. Do

we have that? Yeah, we do have that will be
a green something. Actually, let's just go

for a nice dark orange something here. And
we're going to go ahead and copy that. And

now we have a sixth values to break even here.
So what we're going to be learning in this

video is how to, like I just said resize items,
and there are actually a few. There we go,

we have our colors have now, we do have a
few different shorthands and properties that

we can use to set this up. So the first thing
we need to learn is the lines and the concept

of lines. So we do know that we have our columns
and our rows. Well, what's happening here

is that each column starts and ends or well,
each column is designated a certain line.

So for example, this would be line one beginning
here, this would be line two, and then this

would be line three. And then for our rows,
we have our line one and our line two. So

what we can actually do is say set, set this
item to go from line one to line three, and

from row line one to row, line two. And we
can do this using a few properties and some

shorthand, and some other keywords and other
other things that we can do to set this whole

thing up. So one thing you need to keep in
mind that is that lines are the basically

the core concept, the most important part
of grid, it's what makes grid what it is,

all of the properties that we've learned,
are all kind of revolving around lines, and

the model is created by those lines. So that's
just one thing to keep in mind. Alright, let's

get started. So the first thing I'm going
to do is talk about how to start an end at

certain item at a designated area. So we're
going to go through and specify the start

and end points. Now there are many different
ways to do this. But we're going to start

with the basic sort of syntax that we should
use to set this up. And then we'll move in

some into some of the more advanced syntax
to set this thing up and start creating shorthands

and other shorts of properties. So let's go
ahead and get started. What I'm going to do

is select what item I want, let's just go
ahead and say the first item. And now what

we need to do is go ahead and set read column
like this.

So what I need to do from here is up whoops,
what I need to do from here is to specify

a start and an end point. And they are separated
by a slash. So the start point is going to

be the starting column line. So I'm going
to say one, and the end point is going to

be well, the ending, and I'm just going to
say two, or Yeah, I'm gonna say two or three.

For now, I'm just going to go ahead with three.
Now if I go ahead and refresh the page, you

can see what's going on here. Now, obviously,
it looks really weird with all of these different

items here, and they're being rearranged in
a different way. What's happening is we're

starting at line one, and then we're going
to end at line three. And you can see that

although it's not resizing properly, it still
does take up that space in an invisible way.

So we have our item two at the start of line
three, and everything is pushed right past

it overriding those template rows and columns
that we created. Now let's go ahead and specify

our next value, which is the grid row value.
So what we're going to do here is just with

our first one, we're going to set a start
and an end point and separate them by a slash.

So what I'm going to do is go ahead and say,
start at row one. And we're going to whoops,

and we're going to end again, let's just go
ahead and say line two, just like this. Now

I'm going to refresh the page. And you can
see nothing's happened because it does start

at one and end at two. Let's go ahead and
set three right there. So now you can see

what's going on here. Although it didn't,
it didn't show anything before when we had

one to two, because it already took up that
space. When we set it to 123, you can see

that everything has now been pushed again,
and the space has been separated accordingly.

So you can kind of see the power of this already,
you can create all sorts of layout menus and

sidebars, just by using this syntax alone.
And it is very powerful. But there's also

many different ways to do it, which we're
going to be covering over the next few videos.

Now instead of specifying an endpoint or an
end line. Because these can get quite confusing,

you don't know where line start and where
lines end. And it does get quite confusing,

especially when you have very big grids with
lots of different columns and rows. So instead

of this, you can actually specify the distance
that you want it to take up. So the keyword

that you can use for this is span. What this
is going to say is start at some line, whichever

one you choose, and span or take up a certain
amount of well spaces depending on what value

you're using. So for now, I'm going to say
span two, and here. I'm also going to change

this to span two. Now let's refresh and see
what happened. You can see that nothing has

changed. Of course because They are exactly
the same thing, you start at column one. And

you take up two more spaces, you go up two
more lines, you start at row one, and then

you go down two more lines. So you start at
line 112, just like that. And this is a much

easier way to work with grid columns and rows,
because you can kind of see what you're doing,

instead of just specifying start and end points
like this, you can actually kind of visualize

the what you're doing with your grids, and
how big you want to make your items. So that's

pretty much it for these different items.
Now, there are, like I said, many different

shorthands that you can use, which we're going
to be learning in just a few videos time.

But this is kind of the basic idea of specifying
these items, you can go through and you can

set start and end point, add points based
on the different lines and the sort of model

created by the grid. And then you can set
how big you want each item to be. Alright,

let's move on. So today we are going to be
covering or looking at the last feature of

our grid section. And it's pretty much just
a summary of what we did here, but using a

shorthand. So you can see that we have our
grid column and our grid row. So we identify

our starting and ending points for both axes.
But there's actually a way that you can do

this whole thing in one go. And usually when
you're developing what websites, you're going

to want to do this, you don't want to go and
do each of these properties individually.

For all of them, you're going to want to do
it quick and fast for both axes. And that's

how you get the maximum out of grid. So what
we're going to be using is something called

the grid area property. And just like before,
pretty much what happens is this is a shorthand

that summarizes these two in one property.
So it is a little bit confusing to get your

head around the

starting and ending points. So I'm just going
to go through it with you. So right now I

have changed this part a little bit of kind
of messed around with the column starts and

ends so that you can differentiate between
the values. So pretty much what the first

value we're going to input just like here
is going to be your row starting point. So

you're going to go ahead and input two in
this case, because we want to match this exactly.

And the next instead of your row end is actually
your column starting point. So then we're

going to put one. Now from here, this is where
a lot of people get mixed up and confused.

Pretty much what's happening is just how like
with margin, you go top right, bottom left,

or with any other kind of property that deals
with those kind of multiple value scenarios,

what's going to happen here is you have the
row column start, and then you have the row

column. And so just keep that in mind. And
everything will work out for you. So all you

have to do is go ahead and say two, one. And
now we're going to put our row end. Remember,

we have row start column, start row end, and
then column end. So here we're gonna put span

to Now remember, this can be a span value,
or an end value, it doesn't actually matter.

So you can do whatever you want here. And
then of course, the column ending value, which

in this case is span three. Should now what
we're going to do is go ahead and and just

comment these out for now and see if anything
has changed. And you can see, of course, it

hasn't. Since we pretty much summarize this
into our shorthand, we don't actually have

a use for these anymore, so I'm going to go
ahead and get rid of them. So now that you

know how to do it, let's talk about some of
the benefits of this. Now, when you're creating

a grid, you're creating a huge practical system,
most likely, you're going to be organizing

pages into headers, and sidebars, and all
sorts of things. And you don't want to go

and input those two for each one, it gets
a little bit confusing after a while. So it's

much easier if you just have one property
that can summarize both the column and the

row in one clean swoop. And then you can apply
them to all of your different pieces. So your

sidebar would go and start and end here, then
your header would go here and you get the

idea. So that's pretty much it for grids and
grid area, there's a lot to cover. And of

course, practice makes perfect with these
kinds of things. But the more you use it,

the more you will understand how to sort of
work with it and play around with some of

the tricks that really get grid to work properly.
Now these tricks can't really be taught, because,

of course, they're personal to the user, the
developer and what kind of work they're doing.

So there's always shortcuts and all sorts
of little tricks you can use with these properties

to really lay out your website related to
your special field of development or work.

Alright, let's move on. So this is going to
be starting a brand new section. And we're

actually going to be looking at a very cool
and useful feature in CSS. Now, of course,

this isn't a very old or considered a essential
feature, but it's still very useful. And it

can help you make your website look a lot
better. So in this section, we're going to

be covering everything to do with movement
on your page. So things like animations, transitions,

and some other features that you can use to
sort of change the way your website looks

without actually changing it, in a sense.
Now, of course, this will make a lot more

sense once we go forward and start working
with some of the properties. But the first

one I want to talk about in this video is
our transition property. So there is a lot

to cover in this video. And transition is
actually a shorthand for four different properties.

So there's going to be a lot to work with
and talk about, so I'm going to go through

it a little bit slow. But once you get to
the end of this video, you'll understand everything

about transitions and how to work with them.
Now you can see I've touched up this website

a little bit using any all of the skills that
we've learned in this section selectors, displays,

margins, all sorts of things like that, including
styling the button just with a little creativity.

And now we have our page kind of a little
bit better laid out for our animation. So

the main part that we're going to be focusing
on is our contact us section, and notably

our Submit button. So this is the main kind
of focus piece of this section. So pretty

much right now we have a static page, there's
nothing moving nothing changing positions

or properties or anything like that. And right
now, what I want to do is focus on the submit

button to create some transitions. Now pretty
much what's going to happen is we're going

to use pseudo selectors to change the state
of this button.

Or change some of the properties in it. So
for example, the background or the text color,

or anything like that, and then we're going
to use the transition property to make it

appear smooth. So that's one thing to keep
in mind, the transition property itself isn't

that big of a deal. But the real work goes
behind the pseudo selectors and how you use

them. So let's get started. The first thing
I want to do is use a pseudo selector to change.

Let's just go with the background for now.
So what I'm going to do is use my class that

I added, you can go ahead and add this on
your own if you're following along. And then

I'm going to use a pseudo selector. And I'm
just going to say for now, let's go with hover,

which is a pretty common pseudo selector.
Now, just to test this, that this works, I'm

going to change the color to black, because
again, there could always be issues. Let's

refresh hover, it's black, you can see that
it's already working, it's just not smooth.

So let's go through and start changing some
of these properties. What I'm going to do

is change the background to a lighter shade,
I'm actually going to just use the color picker

here, I'm going to go ahead and use a lighter
shade of blue, something that would indicate

that you're hovering over. So I'm going to
go ahead and do that. And for now, we're just

going to stick with one property. Well, once
we go forward, we're actually going to add

more and more properties to make it look a
lot cleaner. Let's go ahead and refresh. See

if that works, you can see that it is a much
lighter shade. And it looks like a proper

hover on a website. So let's get started.
Now we have our Submit button or our base

class, the one that's always active, and our
special pseudo class, which kind of uses specificity

to override our base class in certain conditions,
in this case, the hover. Now what we're going

to do is add our transition property. So what
we do is go to our base class. And we're going

to set our transition property here. And now
we have a bunch of different values to input.

The first is going to be the property that
you want to well transition because remember,

the property is basically going to smooth
it out and move the property on one hand and

from the base class slowly to the other in
a nice, clean, automated way. So if you want

to select all of your properties, you can
just hit all, but I wouldn't recommend that

unless you unless you want to shorten things
or smooth over time, because sometimes your

classes can change. And it can cause errors
in the long run. So what I would do is for

now I'm just going to select the specific
property that I want. Next thing I want to

talk about is the duration. So this is pretty
much the time it's going to take to move from

one property or one value to the other. Now
this can be anything. Now you would specify

this in seconds or milliseconds depending
on what you want to choose. I'm going to go

ahead and use seconds. So I'm going to say
two seconds. And s by the way is the unit

for seconds in case you didn't know. The next
we want to go is talk about the sort of transition

style So this is probably the most complicated
thing to work with, because there's a lot

of different styles and haven't really used
them in daily life. But it's pretty easy.

Pretty much what you're going to do is decide
what kind of a change do you want? Do you

want it to go straight from A to B? Do you
want it to be smooth or speedy. And what I'm

going to do is just run through some of the
main ones you have here. So the first one,

and the most common one is going to be ease
typing is, and pretty much what this does

is it's kind of the standard transition, it
goes is it goes straight from A to B, then

you have linear, which is not very commonly
used, especially in transitions. But it just

goes straight from A to B without any, you
know, speed changes or anything like

that.

And you also have a couple more, there is
one called ease in out like this. And you

can pretty much just read this a name, it
goes it eases using the previous one that

I just talked about. But of course in that

order.

So those are pretty much the three, or the
sorry, the four common ones that you would

use. And of course, there's a bunch more,
but these are really the main ones that you

would work with here. So pretty much let's
start working with our transition property

here. So I'm actually going to go with ease
and out just to spice it up a little bit,

not use the basic ones. And then the last
property that we're going to select is the

delay. So pretty much what's going to happen
is when you hover over it right now there's

no delay, it's zero seconds, the animation
plays instantly. Or what you can actually

do is set a delay that you can use to let's
just say after you hover, wait two seconds,

and then play the animation. So let's just
go ahead and set a delay of one second. And

that offer the semicolon a lot to digest there,
I know. But um, don't worry about it just

leave, it's just keep it there for now. And
if you don't understand it, we'll break it

down and do some more examples. Let's go ahead
and refresh the page. So what I'm going to

do is hover over my button here, you can see
that it's going to wait whoops. So I'm going

to hover over. Now we're going to wait. And
you can see after one second, it turns into

that kind of shade that we want it. Now I
feel like we're going to remove that one second

delay, because we don't need it. And I'm actually
going to shorten this down 2.5 seconds. Now

what I want to do is refresh the page. And
now you can see it's a lot faster. Now once

you get into this range of one, you want to
start using milliseconds. So we're going to

go 300 ms, which is milliseconds.

Let's refresh the

page. And like I said, just play around with
this tinker with it and see how it works.

So you can see when we do this, that it changes
the color. And when we hover over it changes

back. So now you can see the difference between
not having a transition and having it. Let's

comment this out for a second. And you can
see how that works. Without the transition,

it looks kind of jarring and quick and sharp.
It doesn't really look appealing. But when

you add that transition, it just completely
changes everything. Now why don't we go ahead

and try out some of the other styles because
it's much easier to show you how these styles

works, rather than just explaining them. So
let's go ahead and see linear.

So

pretty much what's going to happen, it just
goes straight from A to B, no speech changes

or anything. Of course, with something this
small, it's not very noticeable. But when

you have translations and all these different
changes, then it will definitely be noticeable.

So there you go, you have a linear transition
there. Now let's go ahead and try our ease

transition, refresh it. And you can see that
it is a lot faster. And like I said, not very

noticeable. But we can see a clear difference
in the speed and agility or what not agility

but the kind of curves of the transition,
it starts out very fast in towards the middle

and gets a little bit slower. And then towards
the end, it's much faster. Now of course,

it would be easier to demonstrate if it wasn't
300 milliseconds. Let's go ahead and see this

when it is on a higher time, so you can see
kind of how that works there. So there we

go. Those are the different types of transition
types. That's probably the hardest property

to or sorry value to work with. And then after
that, everything becomes a lot

simpler.

So now let's go ahead and start adding some
more properties here to make this a little

bit more interesting. I'm going to go ahead
and add some padding. So I'm going to say

when it's hovered over pretty much double
the padding, so 20 pixels, 30 pixels. Now

here, what we're going to do is either use
a comma to separate the different property

That we want to use. Or we can just erase
all of this and say all. Now we refresh it.

And you can see that that gets a lot bigger,
let's change that back to about 500 milliseconds.

Make that a lot shorter. And now you can see
it gets bigger. On top of that, the sorry,

the background changes. Now, of course, you
can do so many different changes with this,

you can maybe change the color, the font size,
even the weight. And once we learn some of

the translation, or sorry, transformation
functions, we can do a lot more with it. But

for now, we need to stick with the basics
of the transition concept. So before we move

on, there's one thing I need to talk about.
And those are the prefixes that we need to

use for browser support. So I think is with
much newer CSS versions is that not all browsers

support them, they all compile in a different
way. And some of them don't support these

newer properties, especially in the older
version. So for example, Internet Explorer

seven, Internet Explorer eight, all of those
very old browsers, which people still use,

won't be able to see this property. Now you
have two solutions to this, either use a fallback,

which is you know, if the transition doesn't
work, just maybe have a fallback image or

don't play it at all. Or you can use a browser
support prefix. So each one or each type of

browser has a different prefix, but the main
ones are for Chrome and Safari, we need to

use WebKit, like this. And remember, you need
to start it with a dash and end it with a

dash like this. Then you one for Mozilla Firefox
is going to be dash m o z. And then of course,

for some of the other browsers like opera,
you would use Oh, whoops, online, would you

Oh, for that. And those are pretty much the
three main ones. Now. WebKit is pretty much

an essential, it covers two browsers at once.
Now, of course, and result is also still important.

opera is important, but not as important as
these other two. Now one thing you need to

note is you can't just string these together,
you can't go dash WebKit dash smalls dash

O, you have to use separate property. So you
have to go and copy each one, and it is a

pain. But if you want the maximum browser
support, you need to do this. So of course,

if we refresh the page, nothing's gonna happen
here. But anybody who's using an older browser,

if I was testing this on maybe Internet Explorer
seven, would see a clear difference between

before and after we added these browser support
prefixes. So that's pretty much it for transitions.

Now, there is a lot to cover, and we will
work with them throughout the future. But

all you need to do is go ahead, select pretty
much any element you want, and start playing

around with it, add some different properties,
maybe go and change the pseudo selector. So

for example, if you want it to be active or
something like that, or if you click it, you

want to change some of these properties. There's
a bunch of pseudo selectors out there. And

combining that with the transition property
and the skills you've learned in CSS, you

can really make this website or whatever website
you're working on interactive, without even

having to learn any animation, or proper transformation
properties. Alright, let's move on. So in

this video, we're going to be covering different
transform properties. And this is going to

be quite a long video. Just like the transition
video, we do have a lot to cover. There's

many different values and functions that we
need to use to complete this. But it is a

pretty essential step of this section. So
let's just get straight into it. So firstly,

what we're going to be using in this video
are actually not values, their functions.

Now, just like this RGB thing is a function
that takes a bunch of inputs and gets a value

out. Or maybe something else. Well, it seems
like this is the only one on the page. But

what we're going to be doing is using a bunch
of functions that take in inputs, and actually

physically change what this is on the page.
Now obviously, all of these do physically

change what they are on the page. But instead
of inputting absolute or direct values, this

kind of processes in a different way behind
the scenes. So let's just jump straight into

it. First thing we need to learn is the property.
Now we're going to use our button again, and

I'm going to be using a value called transform.
So what we're going to do is plug in a bunch

of different values in here and see how it
affects this. So pretty much we have two different

sections of this video, we have our physical
change properties or our movement, so our

translation and our scaling, and then we also
have our different rotation properties, or

Well, I should say functions, but there we
go. So we're going to have our Translation

in our scale, so our physical changes, and
then our rotation. And at the end, I'm going

to throw in a nice shorthand function that
summarizes all of it. So let's start with

our physical changes. So the first thing we
need to learn about is translate. So we're

only going to be covering 2d translations
for today, because 3d can get very complicated

very quick. And it's not really useful in
day to day life or developer life, unless

you're making something that specifically
needs it. So we're just going to cover 2d

translations, and other function transformation
functions for

today.

So pretty much what this is going to do is
taken two different values, one of them is

going to be the Y shift and the x shift. And
it's going to actually shift physically shift

the elements to that position. So for example,
if you said, I want to move this button or

this image a little bit to the left, and I
wanted to move, or let's just say 10 pixels

to the left, and I wanted to move it 10 pixels
up, it would do that. And of course, there

are many different ways to do it. But what
we're going to do is use this translate method

to really change the way that this whole thing
works. So what we're going to do is are we're

going to use an alternative method to you
know, something like margin or grid or all

of those. So the first thing you want to do
is specify the x axis value. Now, in case

you haven't, you know, learned about graphs,
or you maybe forgot it, pretty much, what

happens is the x axis is going to be your
left and your right shift, right is going

to be your positive value, so anything above
zero, and if you want to shift it left, you

use negative values. And then of course, the
second value is the y axis. So up as positive

and down is negative. So let's start with
our x shift, I'm going to just go ahead and

say 50 pixels here. So I want to shift it
pick 50 pixels to the right. And remember,

we don't need we need to, we don't need to
say anything like to write or anything like

that, we just need to specify the value, then
we throw in a comma. And here, what we're

going to do is add our Y axis shift. So here,
I'm also going to say, let's just go with

30 pixels, refresh the page, see what happens.
Now, we can see here that it's actually staying

exactly the same. It's not moving. It's not
changing anything here. But you can see that

when we hover over it, it does actually move.
So what's going on here. Now, here's where

you have to be careful about where you add
your properties, you can see that I added

it to our pseudo selector instead of our base
class. And that's one thing or one point I

just wanted to make about these pseudo selectors
is that if you add them on, maybe here, it's

not just going to inherit it magically and
put it on the base class, you do need to be

specific. Remember, these two are completely
different classes, it's just that some of

them are being overridden. So for example,
our background and our padding already exist.

So what happens is that all of these styles
are already applied. And then the new styles

here are overridden. But this is a completely
new property, it doesn't actually

exist on our base class. So just make sure
that you don't make that mistake. Let's go

ahead and paste that on the base class. I'll
do it just above the transitions. Now refresh

the page, and it's translated perfectly. So
now that we've done that, I want to talk about

browser support for a second. Now all of these
are very new features to CSS, you do need

to make sure that you add your browser prefixes.
So WebKit, mas, and O. Now, I'm not going

to go through and add it for all of them.
I'm just going to leave it blank for now.

But you need to keep in mind that if you want
the maximum support on your on your page on

your site, you want to make sure you include
those prefixes. So there we go, we've covered

it translates. Now let's work with our next
value, which is going to be scale. So scale

works in a similar way to how maybe increasing
the padding would work. What's gonna happen

is you're going to go and you're going to
type in scale, which is the name of the function,

and then you're going to pass in a decimal
value, it doesn't have to be a decimal, but

pretty much what you're going to do is just
say, let's say I want to scale this up by

two and a half times, what's gonna happen
is this is going to size up by two and a half,

we refresh, you can see that it's gotten a
lot bigger, and padding and all of that it

doesn't really apply or change anything here.
It just scales everything up by two and a

half. So you can obviously see some of the
issues here with margin and padding and all

sorts of things like this. So be pretty careful
when you do this. You don't want to mess up

your page or change your style, or anything
like that. You just want to make sure that

you can scale without having to to mess with
the layout of your page. So that's for scale,

and all of the physical properties. Now let's
move on to some of the rotation properties.

So the first two, we're going to cover or
sorry, the first one I'm going to cover is

pretty simple. It's just a standard rotate.
But then after that, I'm going to cover two

really special ones, which are actually skewing
on different axes. So we'll get to that in

just a second. Let's refresh the page. So
the first one I'm going to use is rotate,

and this takes one value, obviously, it's
going to be our degree value. So if you don't

remember from our gradient section, what happens
pretty much here is we rotated kind of circularly.

Well, not for this one. But we can use degrees
to actually change the angle or direction

of our gradient. So for example, 90 degrees
B, a 90 degree shift, so would go to the right,

and then negative 90 degrees would go the
other way. So it would go to the left. So

if you just remember that you'd be doing great
here. So let's just say I wanted to use minus

45 degrees, and remember the symbol for it.
So what's gonna happen pretty much this is

going to shift slightly, or will not shift,
but it's going to rotate. And you can see

what happens there. Now, if this was minus
90, it will pretty much flip. So it was facing

up vertically. And I'll actually show you
that now. But pretty much what you're doing

here is just rotating it around it center,
and changing the rotation of it. Pretty simple,

pretty easy to use. So now let's talk about
the two special ones. So pretty much what's

going to happen here is they're going to skew
them along certain axes. Now, this is really

hard to explain. And most likely, nobody will
get it if it explained. So the only real way

to show it or the only real way to teach it
is by showing it. So what I'm going to do

is use skew. And you can see we have our shorthand
and we also have skew x and skew y. So what

I'm going to select this skew x first, and
pretty much this is going to shift it or rotate

it along the x axis instead of its center.
So remember, the X is kind of

a horizontal rod. So just kind of imagine
a stick or a paper attached to a rod and you're

rotating it around that rod. So now let's
go ahead and input our value just like before,

we're going to use degree values. So I'm going
to go 45 degrees positive, we refresh the

page. And obviously, it looks quite weird,
because it's pretty hard to simulate these

kinds of things. But you can see that pretty
much what this has happened is rotated along

that axis. So if I go negative 45, it's going
to go the other way, just like that. And you

can kind of see how that works. Now if we
change this to skew y, it's going to go it's

going to do this exact same thing. But it's
going to be on the opposite axis. So it's

going to be on a vertical rod. So just imagine
that, refresh the page, and you can see how

that is working. Now obviously, it is very
hard to see and visualize. So I wouldn't encourage

you to use skew X or Y. If you want to rotate
something you should most likely stick or

you should try and stick to the three I just
covered. So the last value we're going to

be talking about or the last function is going
to be our matrix function. So this is going

to be a shorthand to summarize everything
into one go. And pretty much from here, what

we're going to do is pretty much just summarize
everything in one clean swoop. So pretty much

this takes six arguments. And one thing you
do have to note is it doesn't take rotation

into account, it only works with skews, so
you just have to keep that in mind. If you're

planning to rotate it, you should probably
add that as a as another function. So let's

get started. What we're going to do is go
ahead and work with our matrix function. So

we're going to erase this. And we're going
to go ahead and add our matrix. Now these

six arguments do follow a very, very specific
pattern or a order. So we're going to have

to go through it slowly so that you can understand
it. And it is a little bit out of order, logically,

so we're just going to take our time this.
Now the first value is going to be your x

scale. Now one thing I forgot to mention is
that we were actually using shorthand. shorthand

functions to avoid all the mess with scale
x and scale y and just shorten things up.

So one thing you do need to keep in mind is
that every scale component or function like

this will have an x and a y value. And what
we pretty much did is summarize them down

into one or into those shorthand functions.
So we can just do it really easily. But here

it's actually split up into different functions.
So let's To start with our scale x. Now one

thing to note is that if you want to keep
it the same, all you have to do is input one,

pretty much this is not typing pretty much
what this is going to happen. Or what this

is going to do is say set this button or object
or element one times as big as itself, which

is, of course, just going to result in the
same. So the next is your skew y and your

skew x. Now if you don't want to do anything,
you set it to zero. But if you do want to

skew it along the axes, you do have to use
decimal

decimal values here. And one thing also to
note is that you don't have to include the

unit's like we did before. So no PX or mm
or dagger do anything like that, you just

include the numbers. So you do include decimal
points here. So I'm just going to go quick

45 on both of these. And remember, this is
actually 45 degrees, so keep that in mind.

Next thing we're going to do is input our
scale y. So again, you do have scale x and

scale y, if you want to keep it the same,
set it to one, and then you have your translate

x and translate y. So I'm going to say 100
pixels. Whoops, 150. Remember, pixels pixels.

So this is a little bit confusing, but it's
don't try not to use it that much only use

it if you really have to, or if you want to
shorten code down. But I would recommend not

using this function very often. It's quite
clunky and ordered, and it doesn't really

allow for freedom. So just keep that in mind
when you're using it. Let's refresh. And you

can see our new item here scaling is, of course,
the same it shifted on the x and y axes. So

you can see that here, it doesn't create that
rotation that you may be expecting, because

remember, it is a skew on individual axes.
Just remember that. And of course, our scale

on the x and y is one, our translation of
x is 100. So it's about this much. And then

our translation of y is 50. So there we go,
we have everything set up. And now it's pretty

much just all working, we have our shifts
our movements here, and we also have our scaling.

So go ahead and try these out on different
elements, it doesn't just have to be with

a button, you can use this on Grid Elements,
although some of them may not work. You can

use this on images, text, all sorts of things,
these work on any element, and they can really

help you to style your website without having
to use some of the traditional methods that

we've learned. Alright, let's move on. So
in this video, we're going to be looking at

CSS animations. So we've looked at transitions
and some of the different transformation functions

that we can use to sort of work with our elements
in a different way. But now we're going to

be learning another essential component, which
are animations. So we're going to be covering

this over the next few videos. And for the
first one, we're going to be creating the

animation. So first of all, what are the advantages
of using an animation? Well, firstly, when

you're using a transition, you have to apply
those specific styles to everything you want

to perform a transition with. But with an
animation, you can define the changes once

and then apply them to anything. So for example,
let's just say I wanted to create an animation

that turns something from red to black, or
sorry, turns the background from red to black,

then you can apply it to any item. Whereas
if you use transitions, you'd have to go through

and go through every single element, change
the suit of selectors, and do all sorts of

things. On top of that, when you're using
animations, you can play something at the

start, instead of having or with a delay instead
of having to wait for some event to happen

with a pseudo selector. So pretty much what
happens here is you can say, we can pretty

much just remove this image completely from
the page or translate it at the

start

when the page is first refreshed. We can also
use this to really make our website interactive

and change the way this website looks completely.
So let's get started. Now, first thing you

need to realize is that these animations are
completely custom, custom. You can name them

whatever you want and do whatever you want
inside them. There are a few keywords that

we need to use to get this set up. Now an
animation is split up into something called

keyframes. Now pretty much each animation
has at least one at least two keyframes. So

you have the starting and the ending. And
then you can add keyframes in between to decide

the different stages of the animation. So
to define an animation, all you have to do

is go at keyframes. So in this case Is the
prefix and keyframes is going to be our keyword.

And then you name the animation. I'm just
going to say, translate elements just like

that. Now you can name this whatever you want.
Remember, it's completely up to you, then

you're going to open it up with brackets.
So now it's a little bit different to how

we've been using CSS, we can just define styles
and expect it to work perfectly. There are

two different ways or two different main ways
that we can define our keyframes. So pretty

much the kind of standard way of writing one
of these keyframes is typing out the the keyword.

So for example, I'm just going to type example
here. Now, of course, if in a real world scenario

wouldn't be like this, it would be a number
or a percentage, or an actual keyword, but

it wouldn't just say example, then you're
going to create these curly braces, again

inside of our keyframes. And here, you would
type the styles at this stage. So for example,

if I wanted a red background, you would type
it here. So what I'm going to do is talk about

the first two keywords, which are to and from.
So first of all, let's start with from, so

this is pretty much going to be your initial
starting point. And then two, which is going

to be your ending starting or ending point
sorry, here, what you're going to do is type

in whatever you want. So for example, let's
just say our, I'm actually going to change

this black to red, since that's what the or
sorry, red to black, red to black. Now here,

I would say start from when the background
is red. Now there doesn't have to be anything

here. But it would be recommended that you
do start with something unless you're going

for something specific after that. And then
here to, I'm going to say at the end of it,

make sure the background is black. Now, of
course we don't have to work with timings

or anything here, because that's all decided
when we add and work with the animation on

our element. So there we go, we have a define.
Now these are the first this is the first

way to do something. But what if you wanted
more than one background, you can't just add

two background properties in one go. So instead
of this, what we use is percentages. So you

can say at 0%, you want to have some special
properties. So I'm going to say background

is red. And then you can say at 100%. So at
the end of the animation, this is when it's

100% complete the background to be black.
Now, the direct advantage to using this, you

can actually add more than more than two stops.
So for example, I can go at 50%, I want the

background to be yellow.

Now realistically, you can add as many properties
here as you want, it doesn't really change

anything. But of course, you want to try and
limit the amount of properties you add or

sorry, stops or keyframes to maybe six or
seven at the max. Now unless you're doing

something very specific. Maybe you want strobe
lights or something like that, you're going

to want to keep it limited. So there we go,
we have these steps here. But the last thing

I want to cover is that you don't just have
to work with one property. What if we wanted

to translate something. So what I can do is
actually set the Transform, remember, it is

a property. And then I can say translate this.
So by zero pixels and zero pixels. So of course,

we don't actually have to type out this property.
What I'm going to do is now copy this over.

And so 50% of the way we want it to translate
by 10 pixels, and 10 pixels. And at the end

of it, we want to translate by 20 pixels and
20 pixels. So you can see how this works.

So for example, let's just say we wanted to
enlarge something and change the color from

red to black. We can do it just like this
except maybe using scale or padding or any

other way that you choose whichever one whichever
one you think is best for the specific website

you're developing. Now one thing I'm going
to mention is that the kind of convention

is to keep these curly brackets on the same
line. But if it is getting a little bit long

like this one, you can definitely open and
close them just like I'm doing here. Don't

be limited by the whitespace. It's not really
a defining factor. You can space these however

you want. But usually you're not going to
use more than one property on a keyframe like

this. If you do have a giant animation, something
with, you know backgrounds, transforms and

margins you're going to want to, you know,
space it out make it easy for people to read.

So this doesn't just have to be multiples
of 10. This could be 30% 37% way 37% of the

way through, it could be 25 you could split
it into quarters, you could do pretty much

anything you want with this But the key thing
you have to remember is you're designing your

own animation, you're going to want to fit
it to how you want. So for example, if you

just wanted to enlarge something, you didn't
really you don't really have to use these

percentages you can just use to and from or
from and to, since you only have two stops,

but if you want to do something like multiple
color change, then you most likely want to

switch to percentages. So you want to go from
0% to 33% 66%, you know, work with it, just

kind of see how everything works together
and design the animation based on what you

need. So this is the video based on designing
the animation. Now in the next video, we're

actually going to be adding our animation
and start working with it, to change it based

on what we need for each element. Alright,
let's move on. So in this video, we are going

to be adding the animation that we created
in the previous video to one of our elements.

And then we're actually going to be going
through and working with it in the next video.

So first of all, let's just recap what we've
done. So far. In the previous video, we created

some keyframes for animation, I talked about
all the different units, and how you can actually

set these values. And we covered all of that.
But now that we've actually created our animation,

it's time to go through and add them to some
of our elements. So this is going to be quite

a short video because it is quite easy to
just go ahead and add the animation. But there

is a lot to cover about the different properties
of animations, which we're going to be talking

about in the next video. So let's get started.
The first thing is to find a suitable item

that we can apply this to. So obviously, this
is used with translation and background colors.

So we can pretty much apply it to anything
on this page. For now I'm just going to go

with our about me text right there. So the
first thing I'm going to do is go ahead and

select it by adding a class, it looks like
where is it hold on, let's see seems to be

have lost and all this. It's got to be somewhere
there we go about me. So he already has a

class subtitles. So what we're going to do
is, well, actually, there's already stuff

applied there. So it would be much better
if we actually added an ID to it using specificity.

And we're just going to say about

me

just like that. Now what I would recommend
you keep your animations and keyframes at

the bottom so that if you ever need to reference
them, you can just scroll down and see all

of them there. So what I'm going to do is
go ahead and select this. So I'm going to

go hash, and then about me, open up the curly
braces. And now what we're going to do is

go and start adding our animation. So this
is pretty easy to do, all you have to do is

use one property animation name. And you can
see a little shorthand there. But we're going

to be covering that a little bit later. Let's
go ahead and add that. And here we're going

to put the name of our animation. So this
would be red to black. And remember, it's

going to be the exact name of the animation
that we specified here. So let's go ahead

and refresh the page, see how this works.
And you can see that nothing's happening.

So this is something that I want to cover
in the next video because we're actually going

to be working with some of the properties.
But for now, all you need to know is that

we do need to apply some special properties
for the animation to start running. So for

now, all we've done is taken the keyframes
just slot them on to the about me title. And

in the next video, we're going to go and actually
set this up so that we can start seeing it

moving, changing the times and actually making
the animation come to life. Alright, let's

move on. So now we're actually going to be
going ahead and covering the different properties

that we can do in our little CSS stylesheet.
Here, we're going to go through, we're going

to add some of these different animation properties.
And we're actually going to start working

with it so that we can really get into how
the animation works and how we can work with

it. So let's get started. Now, I'm only going
to be covering some of the basic properties

here. But there are many more out there. There
are so many different ways that you can work

with these animations and change their properties
or how they work. Well, what we're going to

do is go ahead and use some of these basic
functions, so we can get this up and running

and working. So let's get started. The first
one, I want to talk about an animation duration.

And this is probably the best or well not
really the best, but it's the most important

one, because pretty much what happens is the
animation duration is going to actually allow

your animation to run. So what I'm going to
do here is first of all set up this function

here. And pretty much the default value of
this property here it's actually zero. And

that's why in the last video, this wasn't
running at all, we added the animation, but

because the default value is zero, pretty
much the animation style starts and finishes

at the exact same time. Well, not really.
But we can't see it at all the time is zero.

So we're going to do here is specify a second
value here. So I'm going to go ahead and say

two seconds, which is quite fast. So I'm actually
going to go ahead with four seconds. Now if

we refresh the page, you can see that that
animation does play. And you can see it kind

of works like that, it goes from red to yellow
to black. So that's the first thing about

the animation that you'll notice it goes,
it stops, and then it finishes. And we're

going to be using some of the other properties
to actually change how this work and maybe,

you know, repeat it over and over again and
do all sorts of things with them. So the next

property I'm going to be covering is the sort
of style of how the property works. So we've

already covered the name of the property,
which is obviously applying the property or

the animation itself. We've also talked about
the duration. But now we're going to be talking

about the style. So pretty much the style
is probably the hardest property to learn

about kind of how, you know, we looked at
transition properties or styles. And those

were the hardest, this is pretty much the
exact same. So pretty much what happens here

is that this style is going to define the
speeds, or how the animation works out. So

all we have to do is go ahead and type out
animation. Animation, dash, sorry, timing

function. There we go. And now from here,
we can apply the different speeds or

styles.

So I'm going to be talking about the main
ones. And you can probably recognize these

from the transitions video. So we have ease,
which is the normal one you can see there.

And then we also have a few more. So let's
go ahead and check it out. We have linear,

of course, which is just straight, there's
no speed changes, or weird anything like that,

you can see just go straight down. So you
can see a very clear difference there, especially

here, unlike the transition. Whereas with
ease, it would stop in the middle and then

speed back up. Whereas linear, it just goes
straight. Of course, we also have ease in

and ease out and ease in out just like we
covered before. So there we go, I'm going

to leave it at linear, because I think it
looks the best. There we go. And you can see

we've set that speed curve there. So now let's
talk about the next property, which is going

to be the animation delay. So the delay is
a little bit of a weird case here, because

you can use positive values. But you can also
use negative values, which is a little bit

confusing, but let's talk about it here. So
I'm going to go ahead and add an animation

delay, just like that. And here, I'm going
to specify a delay time. So for example, two

seconds. Now, of course, this works perfectly.
we refresh waits two seconds, and then the

animation plays just like you would normally.
But what if we added a negative to here, what

do you think would happen? If we refresh,
you can see it's already at yellow. So what's

pretty much happening here is that it starts
when the animation is zero, which is the default,

it starts right as the page loads. But if
you go negative two, it's pretty much acting

as if you're already two seconds into the
animation. That's kind of how negative values

work here. Now, obviously, there's no real
application for this unless you're looking

for something really, really niche that you
need it. But this isn't really widespread

or used. very commonly, it's just a really
cool thing to know about animation delays.

So the next thing we're going to cover is
the iteration count. And I talked about this

a little bit when we started the duration.
And it's pretty much going to say how many

times this thing is going to loop over. So
we can use the property animation iteration

count. And here, what we're going to do is
apply our the number of times we wanted to

iterate. So for example, if I wanted to, to
iterate or loop over two times, I could refresh,

of course, it starts a little bit early, and
it goes another time. And there we go after

that is finished, so it went over two times.
Now there's also a really special value you

can use here, which is infinite. And then
this means that this is just going to keep

going over and over pretty much forever until
you terminate the page or close it or even

change something. But when this is set, it's
gonna keep looping over and over again pretty

much forever. So there we go. Now let's go
ahead and talk about the shorthand property.

And pretty much what we're gonna do here,
whoops, actually, we need to cover one more

value before we use that shorthand. And that's
going to be our animation direction. So this

is the final value just like you're seeing
here before we started, but it's actually

pretty useful unlike something like the negative
animation delay value here. Pretty much what

this is going to say is the starting and ending
points of the animation. So for example, let's

go ahead and add that property their animation
direction. And now we're going to talk about

the four main values for this function. Of
course, the default value is going to be normal,

which is just like that. And that, of course,
plays from 0% to 100%, just like normal. And

I'm actually going to set this iteration to
two times and remove the delay. Just like

that, so that we can get the full picture
here. So if we refresh the page, you can see

that it's just normal, it goes from start
to finish. And then you have your opposite

way, which is reverse. So pretty much what
happens here is it goes from 100% to 0%. And

the properties aren't flipped, they stay exactly
the same. So if you look at this, it goes

back in time, all the way to its starting
position. So the other two, which are a little

bit more complicated to understand, are alternate.
So just like this, so alternate pretty much

means it's going to go forward and then go
backward. So it kind of bounced back, you

can see there, so it goes from zero to 100.
And then in the same animation, well not the

same. It goes from 100 to zero. And then of
course, just like with our first two, you

have alternate reverse, which does still the
alternation, but it starts at 100, instead

of at zero, so it's kind of going to start
here and then go back to it starting and bounce

back to 100.

Let's look at that here. You can see it goes
up, and then it bounces all the way back to

its starting position. So there we go. That's
pretty much how this whole thing works.

And those are the four are actually here,
it's five main main functions and or sorry,

properties. What we're going to have to do
here is summarize all of them because there

is a lot to cover. And you're not going to
add five animations every time, especially

when you have to use all of the different
browser support tools and prefixes. And it

gets really complicated after some time. So
what I'm going to do is use a very cool shorthand

that just summarizes everything for us. So
we don't even have to use our animation name

here, we can just cover it all once in our
animation shorthand, so I'm going to do it

here, animation. So the first, this takes,
of course, five values, your first value is

going to be your animation name, which is
red to black. Your next value is going to

be the duration, which is a pretty important
one. So we're going to set it the same at

four seconds, your next value is going to
be your timing function or your speed. So

we're going to set it linear here. And then
next is going to be your delay. Now we removed

that there, but we do have to put that delay.
So I'm just going to say zero. Next, I'm going

to put the iteration count, which is two.
And finally the direction which is alternate.

Whoops, alternate reverse. Now you can see
that does get a little bit long there. So

I'm going to leave both of these versions
on in the project file for you to decide for

yourself. Now let's refresh the page, see
what happens. Oh, whoops, forgot the pixels.

Sorry, forgot the second value there. Let's
refresh. And now you can see that it goes

from the back to the start, just like we had
here. So like I said that shorthand is a little

bit hectic to memorize and you know, learn
all of the different values. But there is

always Google if you forget the order or anything
like that. And what makes this really useful.

If you want to add any browser freebet for
prefixes like this, you can easily do that.

And then just copy this over for the different
prefixes. So you can go here, here, here and

put your different prefixes. So I have from
Mozilla, we have from Microsoft, so Internet

Explorer. And then of course, we have our
opera. So we have four different prefixes

here and five values for one element, you'd
have to put 20 properties just to get this

all covered. Now, you can probably see the
advantage of using something like this, with

that shorthand over all of the really clunky
properties. Alright, so that's pretty much

it for animation properties, or the different
types of animations or ways you can manipulate

these animations. Of course, there is once
you learn this, there's a lot of power that

can go into it. You can create all sorts of
different animations, grow styles, and then

you can really manipulate them just by using
these five values. We didn't even we didn't

even have to touch the animation to make it
look completely different. So that's pretty

much it. Now we've covered a lot of features
in CSS. And in the next section, we're actually

going to be going through and styling the
website from scratch as a challenge. So you're

going to have a challenge to style a website.
And then the solution is the video I'm going

to show you and that's where you're really
going to get challenged to use all of the

skills you've learned in this section. Maybe
touch up on some things that you may not have

been comfortable with, or you may have been
fuzzy on. Alright, let's move on.

So now that you've learned pretty much all
of the basic skills, or some of the more advanced

skills as well, in CSS, it's time to move
on and start working on a challenge. So pretty

much in this challenge, you are given an unstyled
website, which by the way, a zip, or a packaged

file of all of the files that you can use
to get started is available for download on

this Udemy lecture. So what you can do is
just go ahead and download that, and it's

going to prompt you and bring up this page.
So you can see, we have a lot of stuff See

here, and I'm actually going to zoom out,
just to get a better view of it. But there's

a lot of raw images, raw HTML, there's no,
there's no styling on it at all. And what

your job is to do is to follow these objectives
here, given here, just follow them and obviously,

don't follow them to the core to the bone,
you can, you know, make any attendance upended,

you know, amendment sorry, to, to these lists
of tasks as you like, but pretty much, you're

just gonna have to style this website from
scratch using the techniques that we've learned

coloring the layout grid Flexbox animations,
just completely revamped this website. Now

one note is I do have my own solution video
posted in on the next lecture. But it is quite

long, so you don't have to watch that. But
if you want to see how I did it, maybe you

want to, you know, review everything or get
a little view on some of the topics, you can

always watch that but don't feel forced or
don't feel like you have to watch that lecture.

If you don't want to watch it, all you have
to do is click on it the bulleted list icon

and just tick off the lecture, just make sure
that if you want it to mark as complete, just

tick off the lecture make sure that it is
finished. And then you don't have to watch

it. But other than that, we have this website
that is just completely unstyled. And we have

to go and style it. Now just to show you this
is what our website here looks like I'm going

to actually refresh the page. So you can see
that nice fade in, we have a sidebar, which

we styled and created borders for. And we
also have a nice image grid. So you can see

there that is responsive. So if I go and actually
resize the window, you can see there that

it is responsive, we have a little bit of
image changing there. And it is just overall

a responsive website. So this is how it looks.
And there you go, you can see we've changed

the backgrounds, we've imported our own custom
fonts. And we use Flexbox and grid to set

up this website along with animations, you
can see a nice transition in color there.

So we're going to be doing all of this in
the solution video. Again, you don't have

to watch it, you can either copy what it looks
like on this page. Or instead, you can just

go and do whatever you want. Pretty much just
take the content I give you and style it however

way. And I would encourage you to either go
on the video lab website, or the q&a section

of this course and post what you've got, you
know, show off your skills and show off what

you can create out of this website, it's really
encouraged to you know, share it with the

community, and everyone can learn from each
other and the skills. So don't feel limited

by anything you've learned in this course,
if you want to do something very specific

that you haven't learned or you forgot how
to do just for you feel free to use Google,

this isn't a test, it's more of a fun activity
to see how far you've gotten in CSS. So that's

just one thing to keep in mind. Alright, I
will see you in the solution video. So in

this video, we're going to get started and
start finishing up this website, we're going

to, you know, do all of the skills and use
everything we've learned over the course to

get this all set up and running. Alright,
let's get started. So the first thing I want

to do is just flip the page over here with
my HTML. And then we're going to get started

straight away. So before we start anything,
I think we need to link a CSS stylesheet,

I'm actually just going to go ahead and close
off our previous site. Because what's happening

here is we have our actual site set up. But
we need to start working on our CSS through

an external stylesheet as we've been doing
for the last well for most of this course.

So we're going to get started with that. We're
going to use Ctrl or Command n to create a

new file. And then I'm going to save it in
my CSS folder here. And I'm going to call

it style dot CSS. All right, there we go.
So the next thing I want to do is start laying

out what we need for the website. And what
I like to do before I start is just kind of

get myself in the right mind frame by setting
out the kind of phones I want to use, the

different colors, everything like that. So
what I'm going to do is just create a comment

Up here using this notation. I've used it
a couple times throughout the course. And

what we're going to do is in here, we're going
to type out all of the stuff we need. So I'm

going to say primary font. Whoops. So we have
our primary font, here, we have our secondary

font.

And now we have our different colors. So what
I like to do for my colors is have my RGB

code, do whatever here, and then you have
the name of the color. So this would be for

example, black, pretty much. So we're going
to do that in just a second. But first of

all, let's just go and find the fonts that
we want to use. We're not going to import

them yet. But we just want to look and see
what kind of fonts we need. So what I'm going

to do is just choose two here, pretty randomly,
again, usually most websites will use at maximum

three fonts, but you should use or maybe two
fonts, one for headers, and one for normal

text. So I'm going to go ahead and use later,
we used it previously to pretty nice font.

And we're also going to go ahead and for our
headers, we're going to use Roboto condensed,

so we have normal Roboto here, but we're going
to use the condensed version. So for the primary

font, it's going to be later. And for our
secondary, which is for pretty much headers

and subtitles, things like that, it's going
to be Roboto condensed. Alright, there we

go. Let's go ahead and check out the website.
And the color scheme is blue, and orange.

So if you made your website using a different
color scheme, don't worry about it, it doesn't

really matter. But what we're going to do
is go ahead and try and find some blues and

oranges. So I'm going to find for each color,
a main color, so pretty dark, bold color,

and then one that's a little bit lighter and
easier on the eyes. So let's start off with

blue here, I'm going to go with quite a dark
kind of blue something around here. And I'm

going to copy that in. And I'm going to say
dark blue, although it's not really dark,

dark blue. But I'm going to say that and paste
in the code. Now let's go with a lighter blue.

Now we can always use RGBA color codes. But
again, doing this allows us more freedom in

the long run when we start working with everything.
So let's go ahead and just copy that. And

this is going to be our light blue. Now let's
move on to orange. So again, these are very

opposing colors. That's why I chose them.
So we're going to go again with quite a striking,

you know, very bold orange. So something like
this would be good. So I'm just going to say

the bold orange. And again, it doesn't really
matter what you give these, your names, as

long as you kind of understand them, you can
name them whatever you want. And then we're

going to go with a lighter orange. So something
around here. Now what I like to do, if you're

trying to create a lighter color, is just
look for something on the this side of the

spectrum closer towards the higher values
of the RGB. So if it's low, it's most likely

going to be dark, you can see that in effect
here. So I'm going to go ahead and say in

light orange, is just like that. Alright,
so we've set up our color schemes now. So

we have everything written down and ready
to go. But next thing we need to do is actually

link the stylesheet because we haven't linked
it yet. So what I'm going to do in my head

here is create a link tag, hit tab. And now
we're going to reference it just like before,

we need to go back one directory, we use dot
dot. Now we're up here in our challenge directory.

So previously, we were here. Now we'll jump
back up to challenge. Now we need to jump

back forward one into the CSS directory. And
then from there, we need to reference the

file, which is style dot CSS.

Just like that, refresh the page. And of course,
nothing's gonna visibly change because we

haven't written anything down yet. But that's
a pretty good first task. So again, none of

these have to be in order, as I said in the
last video, so we're just going to go ahead

and fix up these images because they are quite
big. So that's what I'm going to do. First,

I'm going to go ahead and reference all the
images for now. Now we can go and change the

classes and do specificity later. But for
now, I'm just going to specify them and group

them all at once. So I'm going to set their
width to 400 pixels, and their height 200

pixels. Now, obviously, I've kind of created
a, a, I really don't like absolute values.

But for something like this, it isn't, it's
kind of necessary. And we can work with the

relative newness or the responsiveness of
these images later. So let's go ahead and

refresh see how it looks. So now we know for
sure that our images are working fine. And

of course, you can see how the absolute values
are kind of stretching this out. They're not

kept in proportion. But for now we don't need
to worry about that. So there we go. We've

resized our images, and now we can see everything
a lot more clearly. So we have our images

set up. The next thing I want to do is actually
set up our page. To have two sections, we

want to have our content section. And we want
to have our sidebar. So we have our sidebar

section, I'm actually going to create a divider
there, our sidebar section and our main section.

So that's what we're going to do. So I'm sorry,
our content section. So we have a main div

here, which clot groups everything together.
So in my eyes, the best way to do this would

be using a grid. So what I'm going to do is
select the class main. Although now that I'm

looking at it, we could probably just use
an ID instead. So I'm going to go ahead and

change the ID to main, remember, there's only
one main on the whole page. So it's not like

we need to use a class. And from here, we'll
get started. So the first thing I want to

do is set the display type to grid. Right.
So this is going to obviously set up a grid.

Now, we won't be able to see anything here
pretty obviously. But now we're going to start

working with it. So pretty much what I have
vision for the change is we have our content

section, which is taking up the majority of
the page, and then we have our posts section.

So our post section is going to be much smaller,
it's going to be while a sidebar, that's kind

of the definition of it. And it's going to
take up a small portion on this side of the

page. So that's what I'm going to do here,
I'm going to create two columns. So one of

the grid template columns, just like that,
and I'm going to set them to 70% and 30%.

Now, instead of using auto auto, which would
just change them to the exact same height,

we're now giving the first column a preference.
So it's going to be a little bit bigger than

the second one, we refresh. And it's working
great. Now, what I recommend that you do while

you're doing this is always try and go and
see how your page looks in different viewpoints.

So if you go ahead and you click on Inspect
anywhere on your page, you can actually go

and use your Chrome responsiveness kind of
thing here to check out how your page would

look on different devices. So I would recommend
using this over resizing the browser, because

resizing, the browser actually shows some
inaccuracy. So you can really see how it would

look like on your phone, or you know, maybe
an iPad or a tablet or something like that

without having to actually go on those tablets.
So there we go. Now what I'm going to do is

go ahead and manipulate this a little bit.
So I'm going to go ahead and create a grid

gap. to separate the two, I'm going to say
it's about 50 pixels. There we go. And, yeah,

let's you can see now that that gap has been
created. And if we go ahead and inspect the

page, you can see let me go to a phone, actually,
you can see that there's a gap there a clear

gap. And at least for now, it's not very evident.
But once we start, you know, creating borders

and things like that, we can really see this
in a much better way. So there we go. That's

great and working fine. So now that we've
set up the set that up, I want to do something

that we actually should have done at the beginning,
which is add classes here because you can

see that although I've added the main classes
myself, we still want to be able to, you know,

group subtitles together or paragraph text,
so that once we start doing all of the important

stuff, like importing images, and all sorts
of things like that, we want to be able to

group all of them or style all of them together
at the same time. So that's what I'm going

to do here. First thing I want to do is add
a class of subtitle to all of the subtitles,

just pretty obvious. Now again, some of them
are h1, some of them are h tos and all sorts

of things like that. So I'm going to go class

is subtitle. And here as well, class is subtitle.
Now, we kind of want all of the subtitles

to be relatively the same size. But you can
see here that there's actually a mini topic

which we want to be smaller. So what I'm going
to do is change the class and change this

actually to topic,

subtitle.

So now we can specify this in a more specific
way. So instead of having to use the subtitle

class, we can actually go and talk about this
in a different way. So there we go. Now let's

go ahead and start looking at some of the
other parts of the site. Oh, we actually still

have more, you can see we have a lot of stuff
here. So what I'm going to do is actually

add classes to each of these posts, because
they are going to be a little bit different

considering the grid situation that we have
here. So I have six posts. So I'm going to

set their class to post title,

like that.

And what I want to do is also set some of
the other stuff. So here, for example, our

paragraphs, or kind of our descriptions and
our posts, I want to also create a class for

those. So I'm going to say class, I'm going
to say post text, or post description, it

doesn't really matter, whichever one you are
comfortable with. And we're going to leave

these blank for now. And actually also go
ahead and add a class to these dips. Because

remember, the more we can specify The better
our page is going to look. Now obviously,

we're just doing baseline kind of stuff here.
If we ever need to specify something in the

future, you just go and add a class, a class
to that. So there we go, we have everything

set up. Now we've added our classes. So the
next thing I want to do is go ahead and import

my different fonts. So firstly, let's go ahead
and check out our little documentation mini

documentation there. And we're going to start
selecting some of these fonts. So first thing

I want to do is download or import in Leto.
So I'm going to go and select Leto. And here,

I'm going to go ahead and just copy that link.
Or actually, before that, let's go ahead and

add some more families so that we can import
it all at the same time. So we have our Roboto

condensed, there we go. add that. Now what
we're going to do is go ahead and whoops,

didn't mean to do that. Now, we're going to
go ahead and select some other fonts here

or sorry, weights here. So I'm going to select
bold 704. Later, I'm going to also select

bold 700. And we're also going to go with
a light. So the load time is moderate, it's

not going to, you know be very easy on the
site. But it is worth it. Because these are

all the fonts that we need. And without them,
the site would look completely different.

So let's go ahead and import those. I'm going
to go into my index and insert the link right

below here. So I'm going to do that oh, because
actually, we need to put the stylesheet below

the below the fonts, remember, because we
need the fonts to load in first. So there

we go, we have that important. Now what we're
going to do is just go ahead and copy these

onto our onto here, just for reference. Now
we are going to, you know, put these and specify

these different selectors, obviously, but
for now, I just want to leave them in there.

So it just in case we forget some of these
fallbacks or anything like that, we're just

going to keep that there. For reference, I'm
going to actually put that in our little notepad

there. So now let's go ahead and refresh the
page. And obviously, we won't see much of

a change since we just add added classes.
But there we go, we have our kind of hierarchy

set up to start working with our website.
So let's go ahead and start using these fonts.

Now, what I'm going to do first is select
everything that has a class of

subtitle, right here.

And what I'm going to do is paste in this
font family, or actually, before we do that,

why don't we use the CSS specificity chart,
we're going to start by selecting everything

that has the class of key, so all paragraphs,
so I'm going to do the lips, I'm going to

select all classes, all paragraph elements.
And I'm going to give them that later font

family. So what this is going to do is style
everything. And if we don't like that, what

we can do instead is just go and change the
font family. So that for example, if maybe

we want to have a different font, maybe it's
a subtitle or some special text, we can just

easily specify it without having to go through
and you know, specify each one every single

time. So it's a much easier way. So now that
we are starting to do this, we can actually

start to see flaws here. So for example, we
also want the list items to be styled. So

I'm going to do select all allies,

allies.

And now I'm going to paste in that same font
family, and refresh. And you can see that

that is now working we have everything set
up here. And you can see there's also a little

bit of text here. So you can kind of start
to notice bugs in you know, maybe HTML that

you've written or anything like that, you
can easily start to notice bugs in it, once

you start styling it. So this is most likely
an indentation error. Maybe this text ended

up outside the paragraph tag, so I'm going
to look for it. It is next to our l eyes.

And you can see it is right there. So what
I'm going to do is just erase that we started

out, we start up our p tag. And I'm going
to create a new one under it just to make

things a little cleaner. Now I refresh and
that is working. This is most likely an error

with indentation, things like

that.

So now we have our paragraph text, everything
like that set up. What I'm going to do is

now work on our headers. So I'm going to start
off with our h ones. And I'm going to give

it that header font family. So I'm going to
Ctrl x which is cut or Command x if you're

on Mac. And I'm going to paste that in refresh.
And you can see that that is worked on our

heading here. Now we're going to do it on
all of our h twos, which remember if you've

kind of looked at the code, our our subtitles,
do that and now those have also been styled.

So just by doing that our page has been completely
transformed. We've you know, imported this

custom font and laid out our site in a way
that just makes it look a lot better. So that

is working fine. So There we go, we have this
set up, and it is working fine. Now what I

want to do is go ahead and start working on
some of other layout features on this page.

Once we get into that, we can start tackling
coloring and formatting and all the other

things after we've used the fonts. So let's
get started. What I want to do first is working

on our little image grid here. So we don't
actually have a proper grid setup, which is

what I'm looking to fix in this in this part
of the video. So I'm going to go ahead and

do that. Now. I'm going to first of all, select
it. So we're going to look for that class

that we use, which is image grid. So we're
going to go into here and select that using

dot image dash grid. And there are many different
ways to create a grid these days, but the

way I'm going to use to make it a lot easier
is just use Flexbox. So we've already used

grid once Flexbox would be a great way to
solve this. So let's go ahead and refresh

the page. And now you can see that we have
created a little Flexbox here. So we have

that set up. And obviously you can see that
it is pretty badly laid out right after creating

the Flexbox. So we're going to tackle that
problem now. Now, there are actually only

two commands that we need to fix this, we
can go and set up our flex grow and shrink

to make it just how we like it. But there
is an easy workaround to it, the first thing

we want to do is turn wrapping on. So we're
going to say flex wrap, wrap. And this is

just going to move everything on to a new
line, which is pretty easy. You can see there

that that is working fine now. And when I
resize the page or turn it into full width,

you can see that that creates a nice three
by three image grid. But even if we go into

our inspector or change the responsiveness,
it also resizes accordingly. The last thing

I want to do is change it so that it's not
kind of you know, placed like this, I want

to kind of make it in the center of the page.
So what I'm going to do is just use the simple

justify content property and set that to center.
Now we refresh, and you can see that this

has been realigned to the center of the page.
And remember, we do have a sidebar here, which

is kind of, you know, giving us the illusion
that it's not taking up the space, it actually

should be. But it is centered. So it's centered
to that 80% of the page, you do need to keep

that in mind when you're working with this.
Once you start working with coloring, you'll

really start to see the page come together.
So the last thing I want to do is kind of

create a gap between some of these images
because they don't look that good when they're

just slammed together, you want to create
some kind of contrast between colors. So we're

going to use a nice special selector. To do
this, we're going to select every single image

inside of the grid instead of having to place
new classes on them. So what I'm going to

do is go ahead and select dot image grid,
and then this symbol, which is the greater

than symbol, and then image. So this is every
image inside of our image grid, open that

up. And we're just going to give it a margin
of 10 pixels very easy, we don't need to work

with anything else, refresh the page, and
that margin has been added. So you can see

how that looks a lot better now that we've
done it. And it's still responsive when we

you know, change the display, maybe to iPad
or anything like that you can see it is still

responsive, it's not changing it at, it's
not changing it at all. So that's really good.

So there we go, I'm going to set that up.
So now that we have our image grid set up,

the last thing I want to work with is this
right here. So it says in our objective list,

we want to move this image onto the side.
So there you could use Flexbox, or grid, this

is a pretty simple scenario. So what I'm going
to do, instead of doing that is just use a

simple float. So I'm going to give this an
ID since we only need to do this as a one

time thing. So I'm going to go ahead and look
for that image, give it an ID of image, one,

because it is the first image on the page.
You can name this anything you want, depending

on the purpose of the

element. But I'm going to give it that class
there. So I'm going to set it as image one,

just like this. So what I'm going to do is
go ahead and give that a float of right, just

like that. And whoops, forgot the id selector
there, we refresh the page. And now that is

working fine. Now obviously, you can see there
is a little bit of an issue with the spacing.

So we're going to use a quick fix for this
and give it a margin of about 15 pixels. So

this is going to kind of push everything to
the side. And obviously you can see there

are still issues with positioning and everything.
But that's kind of the you know, issue with

using floats and things like that you can't
really control where the spacing is going

to go. So what I'm going to do to fix this
is just increase the height a little bit.

So instead of setting a height of 200 pixels,
I'm going to go ahead and set it to maybe

250. Now we're going to refresh and it's almost
there. We're going to actually use 300 pixels.

Now, of course, in a normal scenario, you
wouldn't have to use this, you know, maybe

you would want to use a grid or Flexbox, like
I specified here. But like I said, you can

pretty much use whatever creative methods
you deem necessary. And this is much easier

because again, there are only three items
and using something like a grid, or a Flexbox

wouldn't really be practical in this situation.
So there we go, we have this, this and this

laid out just perfectly. Now we're gonna go
ahead and tackle some of the other parts of

this site. So we have our little image grid
here, we have things like this, let's go ahead

and check out our item list here. So we do
have animations, which we're going to leave

for last, we have our image grid. And there
we go. So our next task is going to be creating

those borders. So we did create our post here.
So remember, we have our post class. So let's

go ahead and select that. I'm going to go
ahead and say dot post. So first thing I'm

going to do is go ahead and set a border.
So this is going to be our first use of the

color scheme that we created. So I'm going
to say to pixels, because monnit, that big,

solid.

And now we're going to go ahead and copy a
color from up here. So I'm going to go ahead

and use a dark blue. Just like that, copy
it in just like an RGB color code.

We've done it many times before, refresh,
and we have our borders. Now, obviously, there

are some issues with margining. So what I'm
going to do is give each of those a margin

of about 10 pixels, just like our images,
refresh the page, and it's working. So there

we go, we have our posts, and they are separated.
Now, pretty much we do have some internal

padding issues, which is normal, we'll go
ahead and style those in just a second. But

first of all, if you can start to see our
sidebar working here, we have that little

grid gap. And we have our the start of our
second column there. So it's working great.

Let's go ahead and start working with our
margins here. So first thing I'm going to

select is our post title. So I'm going to
go ahead and say post title. Now you can do

this in two ways. Since there's only one h2
and every post, you could go and say it like

this. Or you can use this class that we created.
So we're going to actually just go ahead and

use that. So what I'm going to say is give
it a margin on the left of maybe five pixels.

And now what that's going to do is push that
inside. And we're going to have to do the

same for our paragraph text. So I'm going
to go ahead and add our post text class here,

I must have forgotten it. So we're going to
go on dot post text and give that the same

margin. There we go. And now we have everything
pushed in. So there are still margining issues

there. You can see that with some of these
here. So I'm actually going to go ahead and

also give our text a right margin. And again,
this is all about experimentation. So go ahead,

and you know, play around with this and see
what really works for you. And you can see

that now that's really fixed that up. And
we have our posts sorted. So there we go,

we have everything working. Now let's go ahead
and try and work with more of our color scheme.

Because right now, it's pretty blank here.
So what I'm going to do is go ahead and just,

you know, use this color scheme in a better
way. So firstly, I'm going to give the page

a background. So what I'm going to do is give
the whole page so I'm going to use the body

selector. I'm actually going to do that at
the top. So I'm going to use the body selector

body. And I'm going to give it a color, or
sorry, background, a background and I'm going

to give it our light blue color, just like
that. Oh, let's copy the name as well, you

just want to copy the color code, remember.
And there we go. Our whole page now has a

light blue color. Now, I'm actually going
to go ahead and use an RGBA because this isn't

light enough. So that's what I meant about
flexibility at the beginning of the video,

you can go ahead and change the colors based
on your main four here. So I'm going to give

this about point five, just make it a little
bit lighter on the eyes. You can see that

looks a lot better now. So now that we've
done that, I'm actually considering changing

the border color here. So what I'm going to
do is go ahead and find it. And instead of

using our blue, I'm going to use a bold orange
so it's going to be quite striking on the

eyes there. So I'm going to go ahead and do
that. And there we go. We have our dark orange

there. Now what I'm going to do is specify
this and select our sidebar class. So I'm

going to go ahead and do that right below
all of these. So I'm going to go dot sidebar.

And I'm going to give it a background of a
light orange. So it's going to create a nice,

a nice contrast, in effect tabin. And again,
I copied the name. So I'm going to go ahead

and give it that background that we need,
which is our light orange. Now I refresh the

page. And oh, something must Oh is selected
subtitle went on to the wrong one. So I'm

going to paste that in here. And there we
go. Now refresh the page, and we have that

orange background color there. So we could
you know, do some color changes and mess around

with these. But for now, I think this is fine.
We don't really need to change these in any

way. For now. So we have our orange background,
we've kind of incorporated this color scheme

very well. So we're going to do a little checkup
of our sections here. So we've laid out our

content, we've created our margins, or spacing,
things like that, we pretty much have everything

set up here, except for our links and our
hovers and our transitions.

So this is going to be the final part of the
video, we're going to go we're going to set

up our, you know, maybe our changes our resizes,
things like that, and then we're going to

finish off the solution, it is getting quite
long. And I want to keep this short. So let's

get started. So first thing I'm going to do
is work with our links. Now, we haven't actually

added anything to the links. So that's what
I'm going to do first of all, now I kind of

left it up to you what you want to add to
the links, but what I'm going to do is just

go and check out each of these. So I'm going
to go click on all of them. And I'm just going

Oh, whoops, I went into the href. And here,
I'm just going to add lorem ipsum and some

dummy text, like that. So now we're going
to use because I don't really feel like going

and adding a whole bunch of classes and selectors,
I'm going to use our special advanced selector

there. So inside of our sidebar here, we're
actually inside of our post, sorry, we're

going to go post and then our a or our anchor
tag. Now we're going to go ahead and work

with these. So I'm going to refresh the page,
make sure they're there. So first thing we

need to do is give it that left right margin
that we need, remember, because to space it

out a little bit, then what I'm going to do
is say text decoration none. So pretty much

what this is going to do. Oh whoops, didn't
need to add that text, what I'm going to do

is give it a text decoration property of none.
So pretty much what this is going to do is

change this. So that pretty much instead of
having this underline, it's just going to

be blank text. So this looks a lot cleaner,
especially when we go ahead and add our um,

our fonts, so I'm going to do that next. So
remember, we have it added to our paragraphs

or allies. And I think it only makes sense
if we added to our anchor tags, as well. So

I'm going to go ahead and add that whoops.
So I'm going to add that there. And now we

have that font, so it's looking great again.
So now let's go ahead and start adding some

pseudo selectors. So we have our basic colors.
Now all of these are already clicked. But

pretty much we have our post color. So I'm
going to say the post color is going to be

our that dark blue that we had. So this is
before it's clicked remember. So dark blue.

Copy that in and set this as the main color.
And now we're going to combine our special

selectors with a pseudo selector. Now, we
haven't actually seen this before, but it's

pretty easy to do, you just add it onto the
element. And the only thing that we're going

to change remember is going to be the color
of the text there. So I'm going to go and

find our light blue. And I'm going to paste
that in. So now when we hover over it, it

should change the color to a light blue. That's
working great. Now let's add our transition.

So I'm going to use the transition property.
Now I'm not going to use any of the prefixes.

But if you're using an older browser, you
want to support it or you want browser support,

you should always use this. So now I'm going
to specify specify what I want in the transition.

So I'm only going to use the basic properties.
So I'm going to say maybe point five seconds,

hover out sorry, point five seconds color.
And yeah, that's pretty much it. So let's

go ahead and fresh. Now we hover over it and
it takes 0.5 seconds to change color. Now

we could of course go and you know add our
special styles for our transition. But I'm

only going to use the two basic ones here,
which is the time and the property. So we've

changed that. Now we have our link color change.
The last thing we need, or the last two things

is the image grow. And the page animation
sequence, which is going to be our sidebar,

and our, our main section here kind of fading
in if if it makes sense. So that's what we're

going to do here. First thing I'm going to
do is go and set the image grow. So what I'm

going to do is go somewhere, where's my image,
I'm selecting my images. If there's none here,

I can just go and change that. Now, what I'm
going to do is first create our image hover,

just like that. And I Oh, yeah, I forgot I
put that up at the top here. So I'm going

to create my image hover. And here, I'm going
to put in what I need. So I want to, you know,

increase the height. So I'm going to say,
the height is going to be 250 pixels. And

the width is going to be 500 pixels, because
we want that two to one aspect ratio. So now

we refresh hover over an image becomes bigger,
we hover over an image becomes bigger. So

now what we want to do is add that transition
property. So we're going to go again, point

five seconds,

and we're going to add two properties. So
we're going to go height and width separated

by a comma, refresh. And of course, it seems
to be a little problem there. Whoops, I forgot

to

add that

misspelling here. Now we do that and it changed
it. Now you can see that there is a little

bit of a weird kind of transition effect there.
So it increases the width fully, and then

it increases the height. So what I'm going
to do to fix that is just use the all property.

So what this is going to do is transition
the height and the width together. When I

refresh, you can see that that styles or moves
everything together, because pretty much what's

happening is it's overriding our our width
property, it's just setting it instantly,

and then it's changing the height, which we
don't want. So I'm going to set that there,

you can see that's working great. So what
we're going to do now is go ahead and create

that fade in effect that we needed for our
content and sidebar. So first thing I want

to do is go ahead and select both of them.
So I'm going to select our content. And I'm

going to select our sidebar. And now what
I'm going to do is start creating our animation.

So the first thing we need to do is create
keyframes. So I'm going to go add keyframes,

and then the name of our animation, let's
just call it fade in for now. So the next

thing I need to do is select my, the different
time stamps I want. So I'm going to use the

from and two keywords to do this from and
to. Now we're going to use a property that

we haven't actually learned before. And hopefully
you Google this and try to find it when doing

the challenge. And it's actually called opacity.
So this allows us to go from opacity of zero,

no percents, no pixels, just straight number
to opacity one, just like our RGB a color

code, now we're going to do is just refresh
the page, obviously, we're not going to see

anything, just make sure that everything is
still running the same. So I'm going to go

ahead and now add our animations to both of
these sections or both of these block here.

Sorry, blocks. So I'm going to go ahead and
say the animation name is going to be fade

in. We're also going to set the duration.
Remember, we always need a duration to two

seconds, refresh the page. Hopefully this
works. And you can see that it now fades in.

So there we go, we have our page set up and
working, we refresh here, we can hover over

images and make them look better. And it just
looks really cool over also, you know, we

pretty much set up this page from scratch.
And now we have it all working, we have our

fonts, and everything seems to be looking
great. Alright, let's move on. So you've reached

the end of the course now. So before we move
on, I want to congratulate you it very few

people who ended up starting the course make
it to the end. And it does take a lot of discipline

to learn everything and stick to it throughout
the course. So I just like to say well done.

And it's great that you're here with me. But
now that you've learned CSS what what is there

to do next? I mean, should I just stop and
use my skills? Or are there other things that

I need to learn. So I'm going to give you
this helpful guide to maybe get you off your

feet and start learning new skills progressing
your careers. So I'm going to talk about it.

Now before we move on. Let's just take a second
and recap what position we're in right now.

So by now you should have pretty good proficiency
in both html5 and CSS three, which are just

the latest versions of the two. So you should
know all of the concepts and inner workings

behind CSS and how it works so you can really
see how a page is fit together using everything

so box models Flexbox responsive this things
like that. By now, you should have the skills

to style your website in pretty much any way
that you want. If you want to make it, you

know, a very rustic or vintage feel. Or if
you want to lay it out in a nice modern design,

you should be able to layout your website
with as much creative freedom as you want.

But here are some skills that you should learn,
learn next. So there are three main front

end technologies that are called the Big Three.
So you've already covered two of them, which

are HTML and CSS. The third one, and arguably
the most important is JavaScript. Now, JavaScript

is the programming language, it's kind of
what makes a website come to life, it gives

it that interactive feel. And you can also
change things in a much easier way. And without

JavaScript, you can't really grab the essence
of web development as a whole, you need it

to be able to bring your website together
and really take it to the next level. So that's

one skill that you should definitely learn
next, if you're planning on continuing. Now,

once you've learned JavaScript,

then you have to go on and choose what kind
of career path you want to go down. If you're

planning to go down a front end route, so
you're only developing things that you know,

you're only changing the look and feel of
the website, on the main mainframe, then you

should start learning some more advanced skills
on either of the big three. So I've let I've

left some examples there. So there are lots
of libraries, frameworks, that things people

have created. So you can go and research some
of these. Some of them I would recommend for

CSS, or some of the pre processors, which
are sass and less. So I would recommend you

go and check those out. You can also look
at some JavaScript frameworks. So things like

react ESX, and also some other libraries.
So bootstrap, Font Awesome, and semantic UI.

So again, don't take all of those, as you
know, you're trying to wrack your brain and

keep all those in your memory. Just go and
do some research on what where you want to

go and what kind of skills you should learn
next, those who are looking to go into server

architecture. So more back end development,
people who are looking to fix up the processing

website, saving users or, you know, delivering
specified content should look into some back

end architecture and programming languages.
So for example, Django would be one for web

development or server development for the
web. And it is made or powered by Python,

you also have PHP and a JavaScript, which
is JavaScript web server, which is called

node j, s. And then you have some others like
Ruby and dotnet. So there are so many out

there, you can always go and research and
you'll find tons of options. So there you

go. So that's pretty much it. We've covered
everything on CSS, we've talked about grids,

Flexbox. And pretty much everything there
is to know about the basic concepts behind

CSS, when you can start specializing and going
into very specific details. And obviously,

it's ever expansive, you're never going to
have to stop learning. So by the time you're

watching this, there could be an entirely
new version of CSS out with a ton of new features.

So never stop learning and always keep, you
know, taking up new skills and trying to learn

more about the skills that you already have.
So that's one thing I would recommend to keep

in mind and just continue down this path and
you will eventually end up as a web developer

that can really create things to his or her
creative freedom. Alright, thanks for taking

the course.