(12) CSS Tutorial - Zero to Hero (Complete Course) - YouTube

[Link]

Transcript:

(00:00) 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.

(00:23) 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.

(00:48) 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.

(01:14) 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.

(01:34) 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.

(02:02) 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.

(02:29) 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.

(02:35) 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

(02:41) 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

(02:47) 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

(02:53) 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

(02:59) 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

(03:05) 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.
(03:17) 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.

(03:39) 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.

(04:06) 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.

(04:25) 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.

(04:46) 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.

(05:06) 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.

(05:35) 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.

(05:59) 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.

(06:19) 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.

(06:41) 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.

(07:00) 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.

(07:19) 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.

(07:44) 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.

(08:09) 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.

(08:36) 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.

(08:56) 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.

(09:18) 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.
(09:39) 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.

(09:59) 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

(10:30) 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.

(10:46) 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.

(11:03) 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.

(11:29) 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.

(11:48) 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.

(12:00) 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.

(12:17) 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.

(12:50) 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.

(13:09) 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.

(13:32) 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.

(14:07) 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.

(14:29) 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.

(14:56) 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

(15:25) 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.
(15:45) 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.

(16:04) 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.

(16:24) 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.

(16:51) 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.

(17:14) 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.

(17:33) 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.

(17:51) 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.

(18:04) 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.
(18:33) 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.

(18:50) 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.

(19:11) 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.

(19:30) 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.

(19:49) 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.

(20:09) 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.

(20:28) 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.

(20:55) 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.

(21:10) 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.

(21:28) 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.

(21:42) 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.

(22:13) 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.

(22:29) 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.

(22:49) 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.

(23:16) 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.

(23:40) 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.

(24:10) 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.

(24:40) 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.

(25:05) 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

(25:45) 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.

(26:17) 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.

(26:43) 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.

(27:06) 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.

(27:33) 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.
(28:01) 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.

(28:18) 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.

(28:36) 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.

(28:49) 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.

(29:08) 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.

(29:30) 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.

(29:50) 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.

(30:02) 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.

(30:24) 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.

(30:51) 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.

(31:21) 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.

(31:45) 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.

(32:12) 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.

(32:33) 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.

(32:54) 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.

(33:16) 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.

(33:31) 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.

(34:04) 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.

(34:35) 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.

(34:55) 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.

(35:34) 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.

(36:02) 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.

(36:23) 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.

(36:45) 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.

(37:07) 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.

(37:30) 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.

(37:52) 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.

(38:17) 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.

(38:41) 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.

(39:15) 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.

(39:44) 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.

(40:06) 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.

(40:29) 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.

(40:54) 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.

(41:22) 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.

(41:40) 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.

(42:01) 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.

(42:21) 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.

(42:39) 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.

(42:57) 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.

(43:29) 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.

(43:47) 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.

(44:12) 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.

(44:40) 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.

(45:16) 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.

(45:42) 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.

(46:06) 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.

(46:30) 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.

(46:46) 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.

(47:00) 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.

(47:21) 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.

(47:46) 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.

(48:04) 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.

(48:36) 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.

(48:55) 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

(49:28) 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.

(49:53) 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.

(50:11) 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.

(50:28) 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.

(50:48) 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.

(51:10) 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.

(51:40) 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.

(52:01) 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.

(52:21) 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.

(52:40) 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.

(53:14) 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.
(53:39) 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.

(54:07) 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.

(54:41) 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.

(55:04) 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.

(55:29) 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.

(55:49) 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.

(56:15) 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.

(56:33) 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.
(56:48) 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.

(57:05) 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.

(57:32) 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.

(58:01) 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.

(58:21) 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.

(58:42) 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

(59:00) being the prefix here is [Link]. 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.

(59:26) 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.
(1:00:01) 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.

(1:00:23) 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.

(1:01:02) 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.

(1:01:25) 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.

(1:01:44) 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.

(1:02:07) 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.

(1:02:39) 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.

(1:03:08) 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.

(1:03:44) 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.

(1:04:06) 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.

(1:04:28) 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 [Link]. 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.

(1:05:01) 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.

(1:05:34) 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.

(1:05:56) 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.

(1:06:21) 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

(1:06:57) 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.

(1:07:19) 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.

(1:07:46) 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.

(1:08:14) 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.

(1:08:46) 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.

(1:09:04) 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.

(1:09:28) 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.

(1:09:59) 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.

(1:10:23) 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.

(1:10:47) 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.

(1:11:19) 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.

(1:11:51) 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.

(1:12:15) 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.

(1:12:32) 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.

(1:13:03) 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.

(1:13:25) 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.

(1:13:43) 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.
(1:14:04) 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.

(1:14:31) 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.

(1:15:04) 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.

(1:15:28) 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.

(1:15:48) 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.

(1:16:11) 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.

(1:16:31) 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.

(1:16:55) 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.
(1:17:12) 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.

(1:17:35) 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.

(1:18:06) 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.

(1:18:23) 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.

(1:18:38) 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.

(1:19:03) 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.

(1:19:24) 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.

(1:19:47) 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.
(1:20:18) 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.

(1:20:38) 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.

(1:20:56) 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.

(1:21:18) 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.

(1:21:42) 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.

(1:22:01) 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.

(1:22:23) 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.

(1:22:47) 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.
(1:23:10) 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.

(1:23:36) 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.

(1:24:00) 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.

(1:24:19) 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.

(1:24:42) 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.

(1:25:14) 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.

(1:25:44) 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.

(1:26:04) 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.

(1:26:33) 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.

(1:26:48) 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.

(1:27:06) 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.

(1:27:30) 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.

(1:27:59) 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

(1:28:34) 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.

(1:28:48) 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.

(1:29:11) 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
(1:29:25) 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.

(1:29:43) 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.

(1:29:57) 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.

(1:30:18) 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.

(1:30:35) 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.

(1:30:57) 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.

(1:31:20) 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.

(1:31:47) 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.
(1:32:12) 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.

(1:32:39) 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.

(1:33:11) 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.

(1:33:39) 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.

(1:34:02) 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.

(1:34:21) 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.

(1:34:45) 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.

(1:35:05) 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.

(1:35:23) 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.

(1:35:43) 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.

(1:36:03) 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.

(1:36:24) 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.

(1:36:49) 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.

(1:37:08) 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.

(1:37:28) 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.

(1:37:49) 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.

(1:38:09) 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.
(1:38:29) 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.

(1:38:42) 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.

(1:39:03) 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.

(1:39:20) 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.

(1:39:36) 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.

(1:40:00) 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.

(1:40:27) 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.

(1:40:56) 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.

(1:41:32) 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.

(1:41:46) 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.

(1:42:12) 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.

(1:42:28) 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.

(1:43:01) 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.

(1:43:24) 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.

(1:43:43) 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.

(1:44:07) 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.

(1:44:42) 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.
(1:45:06) 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.

(1:45:26) 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.

(1:45:56) 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.

(1:46:20) 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.

(1:46:37) 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.

(1:47:00) 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.

(1:47:39) 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.

(1:48:01) 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.
(1:48:25) 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.

(1:48:43) 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.

(1:49:10) 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.

(1:49:34) 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.

(1:49:55) 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.

(1:50:12) 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.

(1:50:30) 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.

(1:50:43) 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.
(1:51:06) 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.

(1:51:31) 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.

(1:51:42) 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.

(1:52:05) 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.

(1:52:30) 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

(1:53:01) 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.

(1:53:31) 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.

(1:53:51) 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.
(1:54:12) 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.

(1:54:29) 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

(1:55:05) 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.

(1:55:20) 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.

(1:55:42) 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.

(1:56:02) 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.

(1:56:26) 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.

(1:56:50) 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.

(1:57:04) 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.

(1:57:22) 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.

(1:57:35) 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.

(1:58:01) 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.

(1:58:24) 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.

(1:58:44) 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.

(1:59:05) 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.

(1:59:20) 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.

(1:59:47) 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.
(2:00:08) 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.

(2:00:32) 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.

(2:00:51) 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

(2:01:23) 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.

(2:01:44) 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

(2:02:08) 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.

(2:02:26) 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.

(2:02:41) 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.

(2:03:02) 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.

(2:03:25) 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.

(2:03:53) 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.

(2:04:25) 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.

(2:04:49) 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.

(2:05:09) 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.

(2:05:35) 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.

(2:06:01) 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.

(2:06:22) 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.

(2:06:49) 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.

(2:07:20) 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.

(2:07:38) 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.

(2:08:01) 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.

(2:08:24) 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.

(2:08:44) 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.
(2:09:13) 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.

(2:09:29) 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.

(2:09:44) 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.

(2:10:05) 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.

(2:10:20) 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.

(2:10:31) 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.

(2:11:02) 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.

(2:11:26) 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.

(2:11:50) 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.

(2:12:16) 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.

(2:12:45) 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.

(2:12:59) 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.

(2:13:15) 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.

(2:13:30) 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.

(2:13:49) 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.

(2:14:16) 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.

(2:14:33) 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.
(2:14:51) 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.

(2:15:11) 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.

(2:15:29) 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.

(2:15:54) 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.

(2:16:21) 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.

(2:16:37) 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.

(2:16:58) 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.

(2:17:15) 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.
(2:17:42) 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.

(2:18:06) 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.

(2:18:33) 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

(2:19:14) 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

(2:19:44) 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.

(2:20:02) 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.

(2:20:15) 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.

(2:20:38) 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.
(2:21:04) 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.

(2:21:28) 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.

(2:21:55) 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.

(2:22:17) 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

(2:22:47) 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.

(2:23:14) 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.

(2:23:35) 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.

(2:24:07) 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.
(2:24:30) 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.

(2:24:45) 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.

(2:25:07) 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.

(2:25:26) 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.

(2:25:47) 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.

(2:26:09) 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.

(2:26:28) 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

(2:26:51) 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.

(2:27:08) 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.

(2:27:25) 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.

(2:27:52) 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.

(2:28:17) 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.

(2:28:39) 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.

(2:29:03) 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.

(2:29:24) 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.

(2:29:52) 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.

(2:30:06) 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.
(2:30:30) 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.

(2:30:59) 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.

(2:31:19) 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.

(2:31:42) 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.

(2:32:06) 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.

(2:32:37) 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.

(2:32:55) 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.

(2:33:14) 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.

(2:33:36) 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.

(2:33:57) 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.

(2:34:23) 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.

(2:34:40) 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.

(2:34:57) 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.

(2:35:27) 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.

(2:35:45) 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.

(2:36:09) 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.

(2:36:36) 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

(2:37:07) 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.

(2:37:35) 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

(2:38:04) 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.

(2:38:21) 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.

(2:38:50) 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.

(2:39:10) 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.

(2:39:42) 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.
(2:40:02) 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.

(2:40:18) 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.

(2:40:50) 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.

(2:41:12) 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.

(2:41:43) 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.

(2:41:59) 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.

(2:42:25) 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

(2:42:46) 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

(2:43:16) 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.

(2:43:38) 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.

(2:44:00) 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.

(2:44:23) 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.

(2:44:44) 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.

(2:45:09) 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.

(2:45:36) 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.

(2:46:06) 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.

(2:46:33) 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.

(2:47:04) 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.

(2:47:27) 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.

(2:47:46) 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.

(2:48:01) 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.

(2:48:20) 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.

(2:48:42) 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.

(2:49:06) 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.
(2:49:35) 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.

(2:49:58) 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.

(2:50:26) 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.

(2:50:49) 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.

(2:51:05) 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.

(2:51:22) 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.

(2:51:45) 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.

(2:52:09) 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.

(2:52:31) 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.

(2:52:57) 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.

(2:53:19) 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

(2:53:53) 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.

(2:54:17) 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.

(2:54:38) 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.

(2:55:01) 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.

(2:55:18) 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.

(2:55:46) 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.

(2:56:10) 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.

(2:56:33) 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.

(2:56:46) 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.

(2:57:05) 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.

(2:57:27) 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.

(2:57:47) 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.

(2:58:13) 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.

(2:58:42) 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.

(2:59:08) 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.

(2:59:35) 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.

(2:59:57) 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.

(3:00:15) 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

(3:00:49) 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.

(3:01:11) 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.

(3:01:28) 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.

(3:01:50) 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.
(3:02:04) 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.

(3:02:22) 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.

(3:02:49) 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.

(3:03:13) 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.

(3:03:29) 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.

(3:03:55) 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.

(3:04:21) 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.

(3:04:38) 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.

(3:04:59) 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.

(3:05:21) 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.

(3:05:43) 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.

(3:06:08) 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.

(3:06:28) 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.

(3:06:49) 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

(3:07:28) 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.

(3:07:49) 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.

(3:08:11) 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

(3:08:47) 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.

(3:09:10) 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.

(3:09:42) 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.

(3:10:02) 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.

(3:10:20) 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.

(3:10:42) 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.

(3:11:05) 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.
(3:11:33) 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.

(3:12:00) 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.

(3:12:22) 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.

(3:12:41) 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.

(3:13:03) 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.

(3:13:23) 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.

(3:13:53) 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.

(3:14:23) 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.
(3:14:50) 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.

(3:15:11) 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.

(3:15:43) 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.

(3:16:01) 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.

(3:16:27) 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.

(3:16:45) 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.

(3:17:05) 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.

(3:17:26) 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.

(3:17:47) 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.
(3:18:13) 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.

(3:18:38) 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.

(3:18:55) 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.

(3:19:17) 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.

(3:19:33) 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.

(3:19:52) 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.

(3:20:15) 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.

(3:20:51) 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.
(3:21:12) 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.

(3:21:31) 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.

(3:21:56) 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.

(3:22:38) 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.

(3:23:01) 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.

(3:23:26) 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.

(3:23:45) 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.

(3:24:09) 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.

(3:24:34) 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.

(3:25:01) 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.

(3:25:29) 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

(3:26:01) 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.

(3:26:24) 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.

(3:26:55) 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.

(3:27:21) 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.

(3:27:49) 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.

(3:28:05) 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.

(3:28:24) 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.

(3:28:41) 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.

(3:29:07) 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.

(3:29:28) 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.

(3:29:43) 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.

(3:30:11) 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.

(3:30:30) 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.

(3:30:50) 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.
(3:31:05) 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.

(3:31:26) 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.

(3:31:43) 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.

(3:32:12) 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.

(3:32:35) 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.

(3:33:05) 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.

(3:33:27) 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.

(3:33:50) 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.

(3:34:05) 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.
(3:34:22) 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.

(3:34:43) 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.

(3:35:20) 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.

(3:35:42) 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.

(3:36:06) 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.

(3:36:23) 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.

(3:36:40) 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.

(3:36:58) 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%.
(3:37:21) 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.

(3:37:52) 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.

(3:38:20) 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.

(3:38:56) 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.

(3:39:19) 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.

(3:39:48) 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.

(3:40:13) 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

(3:40:46) 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.
(3:41:09) 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.

(3:41:29) 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.

(3:41:51) 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.

(3:42:15) 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.

(3:42:43) 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.

(3:43:07) 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.

(3:43:39) 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.

(3:44:01) 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.

(3:44:27) 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.

(3:44:50) 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.

(3:45:13) 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.

(3:45:36) 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.

(3:45:58) 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.

(3:46:23) 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.

(3:46:49) 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.

(3:47:16) 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.

(3:47:46) 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.
(3:48:17) 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.

(3:48:39) 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.

(3:49:03) 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.

(3:49:22) 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.

(3:49:40) 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.

(3:50:16) 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.

(3:50:46) 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.

(3:51:16) 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.

(3:51:41) 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.

(3:52:07) 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

(3:52:36) 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.

(3:53:03) 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.

(3:53:29) 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.

(3:53:51) 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.

(3:54:14) 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.

(3:54:36) 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.

(3:54:56) 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.

(3:55:19) 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.

(3:55:47) 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.

(3:56:03) 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.

(3:56:24) 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.

(3:56:54) 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.

(3:57:15) 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.

(3:57:33) 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.

(3:57:54) 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.
(3:58:16) 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.

(3:58:50) 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.

(3:59:18) 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.

(3:59:48) 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.

(4:00:16) 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.

(4:00:45) 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.

(4:01:16) 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.

(4:01:32) 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.

(4:01:57) 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.

(4:02:18) 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.

(4:02:57) 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.

(4:03:27) 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.

(4:03:58) 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.

(4:04:24) 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.

(4:04:50) 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.

(4:05:11) 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.
(4:05:27) 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.

(4:05:51) 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.

(4:06:14) 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.

(4:06:38) 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.

(4:06:52) 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.

(4:07:11) 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%.

(4:07:32) 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.

(4:07:49) 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.
(4:08:18) 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.

(4:08:35) 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.

(4:08:52) 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.

(4:09:18) 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.

(4:09:49) 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.

(4:10:12) 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.

(4:10:41) 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.

(4:11:00) 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.

(4:11:18) 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.

(4:11:53) 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.

(4:12:17) 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.

(4:12:49) 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.

(4:13:11) 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.

(4:13:34) 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.

(4:13:58) 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.

(4:14:21) 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.

(4:14:37) 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.
(4:14:54) 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%.

(4:15:23) 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.

(4:15:50) 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.

(4:16:14) 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.

(4:16:32) 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

(4:16:57) 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.

(4:17:12) 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.

(4:17:33) 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.

(4:17:57) 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.

(4:18:08) 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.

(4:18:33) 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.

(4:18:48) 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.

(4:19:11) 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.

(4:19:38) 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.

(4:20:11) 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.

(4:20:35) 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.

(4:21:03) 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.

(4:21:25) 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.

(4:21:53) 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.

(4:22:20) 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.

(4:22:40) 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.

(4:23:01) 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.

(4:23:24) 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.

(4:23:40) 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.

(4:23:58) 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.

(4:24:24) 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.

(4:24:49) 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.

(4:25:25) 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.

(4:25:51) 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.

(4:26:14) 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

(4:26:48) 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.

(4:27:16) 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.
(4:27:47) 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.

(4:28:09) 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.

(4:28:38) 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.

(4:29:01) 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.

(4:29:20) 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.

(4:29:42) 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.

(4:30:11) 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.

(4:30:38) 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.
(4:31:07) 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.

(4:31:26) 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.

(4:31:41) 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.

(4:32:01) 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.

(4:32:16) 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.

(4:32:39) 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.

(4:32:56) 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.

(4:33:20) 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.

(4:33:43) 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.

(4:33:58) 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.

(4:34:15) 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.

(4:34:38) 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

(4:35:20) 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.

(4:35:50) 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.

(4:36:11) 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.

(4:36:34) 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.

(4:36:48) 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.
(4:37:16) 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.

(4:37:32) 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.

(4:37:56) 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.

(4:38:22) 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.

(4:38:46) 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.

(4:39:14) 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

(4:39:40) 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.

(4:40:07) 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.
(4:40:30) 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.

(4:41:01) 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.

(4:41:31) 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.

(4:41:57) 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.

(4:42:15) 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.

(4:42:31) 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.

(4:42:56) 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.

(4:43:17) 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.
(4:43:41) 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.

(4:44:00) 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.

(4:44:18) 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.

(4:44:48) 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.

(4:45:12) 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.

(4:45:41) 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.

(4:46:03) 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.

(4:46:27) 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.

(4:46:52) 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.
(4:47:22) 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

(4:47:49) 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.

(4:48:11) 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.

(4:48:34) 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.

(4:48:58) 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.

(4:49:22) 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.

(4:49:47) 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.

(4:50:12) 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.

(4:50:38) 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.

(4:51:01) 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.

(4:51:27) 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.

(4:51:47) 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.

(4:52:06) 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.

(4:52:24) 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.

(4:52:37) 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.

(4:52:45) 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.

(4:53:12) 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.
(4:53:33) 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.

(4:53:54) 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.

(4:54:24) 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.

(4:54:50) 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.

(4:55:20) 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.

(4:55:58) 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.

(4:56:23) 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.

(4:56:50) 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.

(4:57:08) 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.

(4:57:26) 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.

(4:57:51) 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.

(4:58:07) 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.

(4:58:34) 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,

(4:59:04) 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.

(4:59:20) 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.

(4:59:41) 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.

(5:00:04) 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.

(5:00:35) 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.

(5:00:53) 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.

(5:01:08) 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.

(5:01:26) 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.

(5:01:48) 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.

(5:02:05) 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.

(5:02:34) 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.

(5:03:02) 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.

(5:03:28) 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.

(5:04:00) 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

(5:04:22) 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.

(5:04:41) 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

(5:05:19) 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.

(5:05:40) 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.

(5:06:05) 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.

(5:06:23) 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.

(5:06:49) 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.

(5:07:05) 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.

(5:07:29) 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.

(5:07:53) 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

(5:08:22) 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.

(5:08:54) 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.

(5:09:15) 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.

(5:09:43) 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.

(5:10:03) 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,

(5:10:31) 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.

(5:10:51) 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.

(5:11:18) 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.

(5:11:32) 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.

(5:11:51) 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.

(5:12:15) 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.

(5:12:37) 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.

(5:13:01) 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.

(5:13:24) 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.
(5:13:40) 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.

(5:14:06) 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.

(5:14:27) 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.

(5:14:56) 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.

(5:15:20) 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.

(5:15:44) 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.

(5:16:09) 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.

(5:16:44) 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.

(5:16:58) 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

(5:17:22) 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.

(5:17:37) 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.

(5:18:04) 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.

(5:18:17) 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.

(5:18:38) 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.

(5:18:55) 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.

(5:19:16) 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.

(5:19:39) 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.

(5:20:01) 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.

(5:20:20) 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.

(5:20:41) 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.

(5:21:14) 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.

(5:21:31) 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.

(5:21:53) 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.

(5:22:13) 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.

(5:22:34) 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.
(5:22:58) 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.

(5:23:17) 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.

(5:23:33) 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.

(5:23:58) 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.

(5:24:24) 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.

(5:24:51) 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.

(5:25:15) 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.

(5:25:29) 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.

(5:25:51) 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.

(5:26:17) 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.

(5:26:48) 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.

(5:27:19) 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.

(5:27:39) 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.

(5:27:55) 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.

(5:28:13) 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.

(5:28:46) 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.

(5:29:10) 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.

(5:29:35) 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.

(5:29:52) 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.

(5:30:11) 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.

(5:30:27) 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.

(5:30:47) 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.

(5:31:13) 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.

(5:31:32) 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.

(5:31:56) 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.
(5:32:20) 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.

(5:32:46) 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.

(5:33:11) 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.

(5:33:43) 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.

(5:34:10) 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.

(5:34:33) 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.

(5:34:46) 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.

(5:35:02) 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.
(5:35:36) 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.

(5:35:59) 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.

(5:36:21) 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.

(5:36:44) 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.

(5:37:08) 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.

(5:37:24) 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.

(5:37:50) 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.

(5:38:08) 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.
(5:38:30) 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.

(5:38:52) 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.

(5:39:19) 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.

(5:39:44) 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.

(5:40:01) 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.

(5:40:31) 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.

(5:40:45) 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.

(5:41:05) 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.
(5:41:25) 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.

(5:41:40) 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.

(5:42:03) 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.

(5:42:26) 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.

(5:42:47) 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.

(5:43:08) 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.

(5:43:27) 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.

(5:43:49) 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.
(5:44:02) 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.

(5:44:26) 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.

(5:44:49) 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.

(5:45:12) 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.

(5:45:33) 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.

(5:45:59) 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.

(5:46:31) 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.

(5:47:02) 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.

(5:47:28) 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.

(5:47:50) 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.

(5:48:15) 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.

(5:48:42) 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.

(5:49:03) 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.

(5:49:29) 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.

(5:49:52) 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.

(5:50:18) 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.

(5:50:38) 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,

(5:51:05) 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.

(5:51:27) 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.

(5:51:47) 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.

(5:52:08) 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.

(5:52:39) 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

(5:53:16) 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.
(5:53:48) 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.

(5:54:08) 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.

(5:54:25) 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.

(5:54:51) 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.

(5:55:10) 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.

(5:55:28) 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.

(5:55:50) 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.

(5:56:09) 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.

(5:56:29) 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.

(5:56:49) 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.

(5:57:06) 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.

(5:57:33) 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.

(5:58:00) 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.

(5:58:25) 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.

(5:58:51) 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.

(5:59:20) 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.

(5:59:41) 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.

(5:59:55) 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.

(6:00:13) 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.

(6:00:43) 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.

(6:01:08) 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.

(6:01:29) 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.

(6:01:57) 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.

(6:02:26) 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.

(6:02:49) 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.

(6:03:17) 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.

(6:03:37) 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.

(6:04:13) 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.

(6:04:36) 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.

(6:04:53) 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.

(6:05:20) 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.

(6:05:48) 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

(6:06:19) 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.

(6:06:36) 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.

(6:07:01) 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.

(6:07:24) 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.

(6:07:47) 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.

(6:08:13) 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.

(6:08:35) 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.

(6:08:56) 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.

(6:09:26) 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.

(6:09:52) 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.

(6:10:15) 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.

(6:10:40) 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.

(6:11:06) 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.

(6:11:31) 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.

(6:11:50) 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.

(6:12:12) 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.

(6:12:29) 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.
(6:12:47) 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.

(6:13:11) 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.

(6:13:34) 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.

(6:13:54) 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.

(6:14:16) 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.

(6:14:57) 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.

(6:15:19) 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.

(6:15:46) 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.
(6:16:06) 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.

(6:16:20) 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.

(6:16:33) 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

(6:16:44) 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.

(6:16:55) 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.

(6:17:09) 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.

(6:17:29) 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.

(6:17:46) 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.
(6:18:01) 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.

(6:18:06) 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,

(6:18:12) 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

(6:18:18) 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

(6:18:24) 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.

(6:18:30) 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.

(6:18:36) 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

(6:18:42) 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

(6:18:48) 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

(6:18:54) 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

(6:19:00) 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,

(6:19:06) 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

(6:19:12) 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
(6:19:18) 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.

(6:19:24) 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.

(6:19:30) 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

(6:19:36) 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,

(6:19:42) 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

(6:19:48) 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

(6:19:54) 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

(6:20:00) 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

(6:20:06) 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

(6:20:12) 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.

(6:20:18) 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

(6:20:24) 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

(6:20:30) 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,
(6:20:36) 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

(6:20:42) 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

(6:20:48) 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

(6:20:54) 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.

(6:21:00) 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

(6:21:06) 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.

(6:21:12) 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

(6:21:18) 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

(6:21:24) 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

(6:21:30) 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

(6:21:36) 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

(6:21:42) 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

(6:21:48) 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
(6:21:54) 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

(6:22:00) 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

(6:22:06) 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

(6:22:12) 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

(6:22:18) 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

(6:22:24) 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

(6:22:30) 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

(6:22:36) 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

(6:22:42) 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.

(6:22:48) 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

(6:22:54) 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,

(6:23:00) 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

(6:23:06) 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,

(6:23:12) 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

(6:23:18) 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.

(6:23:24) 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

(6:23:30) 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

(6:23:36) 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

(6:23:42) 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
(6:23:48) 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

(6:23:54) 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

(6:24:00) 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.

(6:24:06) 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

(6:24:12) 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

(6:24:18) 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

(6:24:24) 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

(6:24:30) 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

(6:24:36) 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

(6:24:42) 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

(6:24:48) 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.

(6:24:54) 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

(6:25:00) 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
(6:25:06) 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

(6:25:12) 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,

(6:25:18) 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.

(6:25:24) 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.

(6:25:30) 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.

(6:25:36) 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

(6:25:42) 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,

(6:25:48) 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

(6:25:54) 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

(6:26:00) 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

(6:26:06) 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

(6:26:12) 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

(6:26:18) 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
(6:26:24) 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

(6:26:30) 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

(6:26:36) 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

(6:26:42) 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

(6:26:48) 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

(6:26:54) 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

(6:27:00) 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

(6:27:06) 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

(6:27:12) 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.

(6:27:18) 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

(6:27:24) 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.

(6:27:30) 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,

(6:27:36) 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.

(6:27:42) 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

(6:27:48) 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.

(6:27:54) 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

(6:28:00) 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

(6:28:06) 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

(6:28:12) 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
(6:28:18) 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

(6:28:24) 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

(6:28:30) 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.

(6:28:36) 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

(6:28:42) 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

(6:28:48) 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

(6:28:54) 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,

(6:29:00) 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.

(6:29:06) 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

(6:29:12) 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

(6:29:18) 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

(6:29:24) 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

(6:29:30) 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
(6:29:36) 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

(6:29:42) 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.

(6:29:48) 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

(6:29:54) 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

(6:30:00) 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

(6:30:06) 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

(6:30:12) 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,

(6:30:18) 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

(6:30:24) 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.

(6:30:30) 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,

(6:30:36) 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

(6:30:42) 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

(6:30:48) 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
(6:30:54) 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

(6:31:00) 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,

(6:31:06) 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

(6:31:12) 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

(6:31:18) 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.

(6:31:24) 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

(6:31:30) 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

(6:31:36) 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

(6:31:42) 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

(6:31:48) 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

(6:31:54) 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

(6:32:00) 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

(6:32:06) 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
(6:32:12) 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.

(6:32:18) 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

(6:32:24) 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

(6:32:30) 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

(6:32:36) 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

(6:32:42) 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

(6:32:48) 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,

(6:32:54) 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

(6:33:00) 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.

(6:33:06) 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

(6:33:12) 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

(6:33:18) 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,

(6:33:24) 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
(6:33:30) 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

(6:33:36) 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

(6:33:42) 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.

(6:33:48) 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.

(6:33:54) 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.

(6:34:00) 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.

(6:34:06) 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

(6:34:12) 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,

(6:34:18) 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

(6:34:24) 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.

(6:34:30) 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

(6:34:36) 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

(6:34:42) 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
(6:34:48) 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,

(6:34:54) 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

(6:35:00) 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

(6:35:06) 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

(6:35:12) 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.

(6:35:18) 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,

(6:35:24) 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.
(6:35:30) 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

(6:35:36) 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

(6:35:42) 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

(6:35:48) 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

(6:35:54) 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

(6:36:00) 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

(6:36:06) 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

(6:36:12) 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.

(6:36:18) 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

(6:36:24) 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

(6:36:30) 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

(6:36:36) 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

(6:36:42) 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.
(6:36:48) 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

(6:36:54) 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

(6:37:00) 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

(6:37:06) 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

(6:37:12) 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

(6:37:18) 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

(6:37:24) 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

(6:37:30) 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.

(6:37:36) 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

(6:37:42) 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

(6:37:48) 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

(6:37:54) 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

(6:38:00) 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.
(6:38:06) 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.

(6:38:12) 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

(6:38:18) 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

(6:38:24) 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

(6:38:30) 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,

(6:38:36) 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,

(6:38:42) 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

(6:38:48) 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

(6:38:54) 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

(6:39:00) 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

(6:39:06) 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

(6:39:12) 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

(6:39:18) 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
(6:39:24) 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

(6:39:30) 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.

(6:39:36) 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

(6:39:42) 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

(6:39:48) 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

(6:39:54) 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

(6:40:00) 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.
(6:40:06) 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

(6:40:12) 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.

(6:40:18) 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

(6:40:24) 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

(6:40:30) 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

(6:40:36) 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

(6:40:42) 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

(6:40:48) 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

(6:40:54) 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

(6:41:00) 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.

(6:41:06) 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

(6:41:12) 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

(6:41:18) 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
(6:41:24) 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

(6:41:30) 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

(6:41:36) 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.

(6:41:42) 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

(6:41:48) 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

(6:41:54) 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.

(6:42:00) 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

(6:42:06) 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.

(6:42:12) 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

(6:42:18) 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,

(6:42:24) 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

(6:42:30) 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

(6:42:36) 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

(6:42:42) 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

(6:42:48) 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.

(6:42:54) 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,

(6:43:00) 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.

(6:43:06) 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

(6:43:12) 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
(6:43:18) 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

(6:43:24) 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,

(6:43:30) 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

(6:43:36) 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

(6:43:42) 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,

(6:43:48) 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

(6:43:54) 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

(6:44:00) 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

(6:44:06) 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

(6:44:12) 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

(6:44:18) 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.

(6:44:24) 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

(6:44:30) 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.
(6:44:36) 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

(6:44:42) 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

(6:44:48) 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

(6:44:54) 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.

(6:45:00) 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.

(6:45:06) 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

(6:45:12) 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.
(6:45:18) 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.

(6:45:24) 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

(6:45:30) 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

(6:45:36) 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

(6:45:42) 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,

(6:45:48) 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

(6:45:54) 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

(6:46:00) 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

(6:46:06) 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

(6:46:12) 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

(6:46:18) 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.

(6:46:24) 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

(6:46:30) 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
(6:46:36) 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

(6:46:42) 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

(6:46:48) 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

(6:46:54) 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

(6:47:00) 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,

(6:47:06) 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,

(6:47:12) 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

(6:47:18) 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

(6:47:24) 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

(6:47:30) 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

(6:47:36) 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

(6:47:42) 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

(6:47:48) 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

(6:47:54) 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.

(6:48:00) 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

(6:48:06) 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.

(6:48:12) 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

(6:48:18) 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

(6:48:24) 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
(6:48:30) 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

(6:48:36) 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

(6:48:42) 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.

(6:48:48) 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

(6:48:54) 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

(6:49:00) 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

(6:49:06) 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

(6:49:12) 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

(6:49:18) 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

(6:49:24) 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.

(6:49:30) 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

(6:49:36) 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

(6:49:42) 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
(6:49:48) 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

(6:49:54) 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.

(6:50:00) 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

(6:50:06) 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

(6:50:12) 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.

(6:50:18) 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

(6:50:24) 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

(6:50:30) 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

(6:50:36) 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.

(6:50:42) 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

(6:50:48) 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

(6:50:54) 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

(6:51:00) 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.
(6:51:06) 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

(6:51:12) 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

(6:51:18) 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,

(6:51:24) 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

(6:51:30) 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

(6:51:36) 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

(6:51:42) 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

(6:51:48) 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

(6:51:54) 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

(6:52:00) 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.

(6:52:06) 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

(6:52:12) 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

(6:52:18) 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.

(6:52:24) 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

(6:52:30) 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

(6:52:36) 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.

(6:52:42) 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

(6:52:48) 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

(6:52:54) 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

(6:53:00) 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

(6:53:06) 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

(6:53:12) 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

(6:53:18) 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

(6:53:24) 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.

(6:53:30) 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

(6:53:36) 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.
(6:53:42) 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.

(6:53:48) 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

(6:53:54) 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.

(6:54:00) 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

(6:54:06) 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

(6:54:12) 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

(6:54:18) 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.

(6:54:24) 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

(6:54:30) 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.

(6:54:36) 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

(6:54:42) 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

(6:54:48) 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.

(6:54:54) 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

(6:55:00) 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

(6:55:06) 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

(6:55:12) 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.

(6:55:18) 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.

(6:55:24) 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.

(6:55:30) 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

(6:55:36) 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

(6:55:42) 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.

(6:55:48) 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.

(6:55:54) 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

(6:56:00) 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.

(6:56:06) 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.

(6:56:12) 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.

(6:56:18) 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.

(6:56:24) 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.

(6:56:30) 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

(6:56:36) 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

(6:56:42) 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

(6:56:48) 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

(6:56:54) 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
(6:57:00) 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

(6:57:06) 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.

(6:57:12) 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,

(6:57:18) 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.

(6:57:24) 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

(6:57:30) 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

(6:57:36) 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

(6:57:42) 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.

(6:57:48) 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.

(6:57:54) 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

(6:58:00) 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

(6:58:06) 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

(6:58:12) 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
(6:58:18) 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

(6:58:24) 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

(6:58:30) 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.

(6:58:36) 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

(6:58:42) 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

(6:58:48) 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

(6:58:54) 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

(6:59:00) 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

(6:59:06) 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,

(6:59:12) 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,

(6:59:18) 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,

(6:59:24) 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.

(6:59:30) 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.
(6:59:36) 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

(6:59:42) 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

(6:59:48) 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.

(6:59:54) 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

(7:00:00) 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

(7:00:06) 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

(7:00:12) 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

(7:00:18) 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,

(7:00:24) 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.

(7:00:30) 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

(7:00:36) 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

(7:00:42) 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

(7:00:48) 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.