Original subtitles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a list of

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a list of

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

go ahead and get started working with CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

go ahead and get started working with CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let's move on.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let's move on.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nature.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nature.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

then here I would select it

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

then here I would select it

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

selector property. So what we're going to do is actually go through and talk about the

different powers or specificities, or specifics of each selector and we're going to see which

one is most powerful. So right now We know that the element selectors are less powerful

than the class. But there is actually two more that are more powerful than the class

selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know

it's not really going to make much sense. So I'm actually just going to rename it to

subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there

we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the

class name. with CSS fun. There we go. So now we have two blue sub titles and one red.

So you can see that the class will overwrite the header, or sorry, the element tag. But

there are like I said, there are still two that are more powerful. The next after the

class is the ID. So I'm going to go over here to services and add an ID of services, oops,

services. All right. Now, what I'm going to do is go into my CSS file, and use the id

selector. color green. So I'm going to go ahead and refresh now. And you can see that

it's right here, it's green. So now that we know the ID is going to overwrite the class,

and the class is going to overwrite the header. So there is still one more that is more powerful.

And that is called inline styling. So we don't actually know what inline styling is. But

pretty much we don't need to use a CSS file to do inline styling. All we need is the element

and the HTML file. So why don't I go ahead and use services here, because we're kind

of on a roll, and I want to use this again. So what I'm going to do is a style, which

is the attribute. And then here, we add all of our CSS properties, no selector nothing.

So I'm going to say here, that color is still blue. And we don't actually, still blue is

part of the CSS color collection, we'll explain all of those in future sections. So if I go

ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class

and the header here. So pretty much there are, there's an order here that you need to

take away from this video. headers are the least specific, they kind of applied to everything,

and they're not that powerful. The class selector is above that, and then the ID and then the

inline styling, or the style attribute. So if you follow this order, you will pretty

much you can predict what is going to be the outcome and which styles are going to be followed.

So this is a pretty useful tool and in CSS, and it pretty much allows you to structure

your file in a way that makes sense to other people when they're reading it. But there's

still one more question we need to answer. What's the difference between a class and

an ID. Apart from the obvious specificity difference, we actually use classes and IDs

in different situations. And they're pretty simple. Classes are meant to be used multiple

times. So if you have done any programming before, you'll know that a class is kind of

like a blueprint, it's made so that you can create multiple objects from it. But the thing

is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention

is, you're only supposed to use an ID for one single element. So for example, let's

take this file we have here we have three sub titles, and one for the about me section.

In this structure, what we would do is create a sub title class for every sub title on the

page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple

h2 is on this page. So we only want to apply it to the subtitles. But then for our bio

about me here, there's only going to be one of them on this whole document, which means

we're going to use the ID of about me. And then from there, we can go and apply our styles

and do all of that. So that's just the main difference between classes and IDs. And now

that you know how to use them, you can actually go through and apply them properly in real

world scenarios. So that's just a very important thing to keep in mind. You're only supposed

to use IDs once and classes can be used multiple times. Alright, let's move on.

selector property. So what we're going to do is actually go through and talk about the

different powers or specificities, or specifics of each selector and we're going to see which

one is most powerful. So right now We know that the element selectors are less powerful

than the class. But there is actually two more that are more powerful than the class

selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know

it's not really going to make much sense. So I'm actually just going to rename it to

subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there

we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the

class name. with CSS fun. There we go. So now we have two blue sub titles and one red.

So you can see that the class will overwrite the header, or sorry, the element tag. But

there are like I said, there are still two that are more powerful. The next after the

class is the ID. So I'm going to go over here to services and add an ID of services, oops,

services. All right. Now, what I'm going to do is go into my CSS file, and use the id

selector. color green. So I'm going to go ahead and refresh now. And you can see that

it's right here, it's green. So now that we know the ID is going to overwrite the class,

and the class is going to overwrite the header. So there is still one more that is more powerful.

And that is called inline styling. So we don't actually know what inline styling is. But

pretty much we don't need to use a CSS file to do inline styling. All we need is the element

and the HTML file. So why don't I go ahead and use services here, because we're kind

of on a roll, and I want to use this again. So what I'm going to do is a style, which

is the attribute. And then here, we add all of our CSS properties, no selector nothing.

So I'm going to say here, that color is still blue. And we don't actually, still blue is

part of the CSS color collection, we'll explain all of those in future sections. So if I go

ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class

and the header here. So pretty much there are, there's an order here that you need to

take away from this video. headers are the least specific, they kind of applied to everything,

and they're not that powerful. The class selector is above that, and then the ID and then the

inline styling, or the style attribute. So if you follow this order, you will pretty

much you can predict what is going to be the outcome and which styles are going to be followed.

So this is a pretty useful tool and in CSS, and it pretty much allows you to structure

your file in a way that makes sense to other people when they're reading it. But there's

still one more question we need to answer. What's the difference between a class and

an ID. Apart from the obvious specificity difference, we actually use classes and IDs

in different situations. And they're pretty simple. Classes are meant to be used multiple

times. So if you have done any programming before, you'll know that a class is kind of

like a blueprint, it's made so that you can create multiple objects from it. But the thing

is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention

is, you're only supposed to use an ID for one single element. So for example, let's

take this file we have here we have three sub titles, and one for the about me section.

In this structure, what we would do is create a sub title class for every sub title on the

page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple

h2 is on this page. So we only want to apply it to the subtitles. But then for our bio

about me here, there's only going to be one of them on this whole document, which means

we're going to use the ID of about me. And then from there, we can go and apply our styles

and do all of that. So that's just the main difference between classes and IDs. And now

that you know how to use them, you can actually go through and apply them properly in real

world scenarios. So that's just a very important thing to keep in mind. You're only supposed

to use IDs once and classes can be used multiple times. Alright, let's move on.

So in this video I am we are going to be looking at pseudo selectors. So this is a special

type of selector that is used commonly in interactivity with your website. So this is

usually visible only when something is done on the website. So it's a pretty it's pretty

cool feature. And it's used very commonly throughout CSS. And once we get to the animations

and transitions part, we're actually going to be used soon as we be we're going to be

using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors

I want to cover here. There's a lot of number of only going to be covering the main ones

that are we're going to be using. So before we go on, I'm just going to show you what

a pseudo selector actually is. So usually what you would do is, after a selector, you

would add a colon, and then the name of the pseudo selector. So this is just an example

of one of them. And then the properties will apply normally. Now watch what happens when

I hover over our h2 here, you can see that it's working perfectly. And when we hover

over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the

services part here. Because again, these are all separate classes. And obviously, with

specificity and everything like that, they won't apply. So there we go. We have everything

working here. And that's one of the pseudo selectors, which is hover. So let's move on

to some of the next ones. Now, there's also two that I'd like to talk about, which is

first child and last child. So the concept behind child and parent elements is that right

here, if we look Actually, this is a little bit complicated example, let's look at this

unordered list here, we have an A ul unordered list, and then we have three allies. Okay,

so pretty much this is going to be the first child because it's placed inside of the UL,

the second is going to be the second child, and then this is going to be the third child.

So you can see here that this is kind of the relationship between child and parent. And

what we can actually do is specify which one we want to select. So if I go over here and

select all URLs, and then of course, the colon for the pseudo selector, and select first

child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm

gonna refresh the page, and you can see that it's not working. Now, although it might seem

like you want to put the URL first, obviously, because, again, you're looking for the first

child of the URL, this isn't actually how you're supposed to write it. Instead, you're

supposed to write the element that you're trying to select, which in this case is our

list item, or our Li. So now if I go ahead and refresh the page, you can see that the

first one here is going to be blue, it's a little bit of a confusing rule to get around.

But once you get used to it, it becomes very easy. We also change this to last or last

child like this. And then what's going to happen is it's going to select the last one.

Now, there's also one more that I'd like to talk about quickly, which is nth child. So

I'm just going to show you how this thing works and child. And then in brackets, you

put the number here. So when you're going to put here is pretty much what number of

the child you want to style. In this case, I want every second Li child to be colored

steel blue. So throughout the page, every second Li that is inside of a that is the

child element is going to be styled blue, go ahead and refresh the page, you can see

that works there. So there's actually one more selector that I want to talk about, at

least for children, and that is the only child selector. So I think it makes perfect sense,

pretty much what we're trying to look for is something that there's only one child inside

of it. So for example, nothing on this page here actually has one child. But why don't

we go ahead and add that. So under this list, I'm just going to temporarily remove these

here, just like that. All right, let's go ahead and save, make sure it's working. There

we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by

car. And I'm going to say only child. So pretty much what this is saying is for every Li that

is the only child of its parent. And you can see this, the UL does only has one child.

So I'm going to go ahead and give it a color of purple, for example. And you can see that

it works perfectly. But what would happen if I tried this on, let's just say for example,

the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm

also going to give this a color of purple.

So in this video I am we are going to be looking at pseudo selectors. So this is a special

type of selector that is used commonly in interactivity with your website. So this is

usually visible only when something is done on the website. So it's a pretty it's pretty

cool feature. And it's used very commonly throughout CSS. And once we get to the animations

and transitions part, we're actually going to be used soon as we be we're going to be

using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors

I want to cover here. There's a lot of number of only going to be covering the main ones

that are we're going to be using. So before we go on, I'm just going to show you what

a pseudo selector actually is. So usually what you would do is, after a selector, you

would add a colon, and then the name of the pseudo selector. So this is just an example

of one of them. And then the properties will apply normally. Now watch what happens when

I hover over our h2 here, you can see that it's working perfectly. And when we hover

over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the

services part here. Because again, these are all separate classes. And obviously, with

specificity and everything like that, they won't apply. So there we go. We have everything

working here. And that's one of the pseudo selectors, which is hover. So let's move on

to some of the next ones. Now, there's also two that I'd like to talk about, which is

first child and last child. So the concept behind child and parent elements is that right

here, if we look Actually, this is a little bit complicated example, let's look at this

unordered list here, we have an A ul unordered list, and then we have three allies. Okay,

so pretty much this is going to be the first child because it's placed inside of the UL,

the second is going to be the second child, and then this is going to be the third child.

So you can see here that this is kind of the relationship between child and parent. And

what we can actually do is specify which one we want to select. So if I go over here and

select all URLs, and then of course, the colon for the pseudo selector, and select first

child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm

gonna refresh the page, and you can see that it's not working. Now, although it might seem

like you want to put the URL first, obviously, because, again, you're looking for the first

child of the URL, this isn't actually how you're supposed to write it. Instead, you're

supposed to write the element that you're trying to select, which in this case is our

list item, or our Li. So now if I go ahead and refresh the page, you can see that the

first one here is going to be blue, it's a little bit of a confusing rule to get around.

But once you get used to it, it becomes very easy. We also change this to last or last

child like this. And then what's going to happen is it's going to select the last one.

Now, there's also one more that I'd like to talk about quickly, which is nth child. So

I'm just going to show you how this thing works and child. And then in brackets, you

put the number here. So when you're going to put here is pretty much what number of

the child you want to style. In this case, I want every second Li child to be colored

steel blue. So throughout the page, every second Li that is inside of a that is the

child element is going to be styled blue, go ahead and refresh the page, you can see

that works there. So there's actually one more selector that I want to talk about, at

least for children, and that is the only child selector. So I think it makes perfect sense,

pretty much what we're trying to look for is something that there's only one child inside

of it. So for example, nothing on this page here actually has one child. But why don't

we go ahead and add that. So under this list, I'm just going to temporarily remove these

here, just like that. All right, let's go ahead and save, make sure it's working. There

we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by

car. And I'm going to say only child. So pretty much what this is saying is for every Li that

is the only child of its parent. And you can see this, the UL does only has one child.

So I'm going to go ahead and give it a color of purple, for example. And you can see that

it works perfectly. But what would happen if I tried this on, let's just say for example,

the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm

also going to give this a color of purple.

Now let's go ahead and refresh and see what's going on. All right. So you can see that that

TD right here, it's somewhere in this table, nothing's actually happening. That's because

as we can see here, there is nothing on this page where there's only one TD as a child.

So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually

style anything if they don't exist. So there we go. That's pretty much for the basic children

kind of pseudo selectors. Let's move on to some other students, selectors. Now, there

are selectors of this type that are actually specific to certain elements, and one of them

is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag

under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint

of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click

here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There

we go, we have our link there. So I click on it takes me there, pretty standard stuff.

Now, we can actually create pseudo selectors for this. So I'm going to be giving you two

for now. Now, there are many, many more. But these are the two main ones you need to focus

on. The rest of them are kind of generalized. And these are the main two that you're going

to be using. So I'm going to create them here. And remember, you're using the element name,

you can use the class if you want, it's not limited to single element names, actually,

why don't I go ahead and do that, I'm going to give it an ID, because again, we only have

one of these on the page, I'm going to give it an ID of Google link, just like that. So

now I'm gonna go ahead and reference that in here. So remember, it's just the name of

this electric Google dash link, in this case, and then the colon. So here, I'm going to

go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also

a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just

a second. Alright, so let's look at the first one here, Google link, like, pretty much what

this is saying is, if you've ever been on a web page, you know that there is a difference

between before you click on the link and after, there's kind of some stylistic changes. So

that's where pseudo selectors actually come into play. The website has of those has those

defined properties. And they actually change the way that the link looks before and after

it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember,

so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going

to go ahead and give it a color of red tie blue there. Remember, usually, the default

is that it is going to be purple like this color here. Let's go ahead and refresh the

page, you can see that it's actually read now. Now, obviously, I can't really go back

in time, and change the link so that it doesn't look clicked. But you can see how powerful

this the pseudo selectors are, because you can do so many different things. And once

we learn more properties, you can actually change different parts of the page. And it

becomes very powerful to use these pseudo selectors. So that's just one thing to keep

in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm

actually going to go ahead and add that hover property there back in case anyone wants to

use the project files. So there we go. We've covered everything here. And we've added all

of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that

help you to look at all of the different pseudo selectors. And most of them, you're not really

going to use very often, they are useful in any way, because they're usually you just

use some basic pseudo selectors like hover and active, which I haven't actually covered.

But things like that. So you're not really going to use all of them. But I just wanted

to give you an introduction to the main ones, so that when it comes time to use them, you

have the tools to finish the job or create that effect that you've always wanted. Alright,

let's move on.

Now let's go ahead and refresh and see what's going on. All right. So you can see that that

TD right here, it's somewhere in this table, nothing's actually happening. That's because

as we can see here, there is nothing on this page where there's only one TD as a child.

So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually

style anything if they don't exist. So there we go. That's pretty much for the basic children

kind of pseudo selectors. Let's move on to some other students, selectors. Now, there

are selectors of this type that are actually specific to certain elements, and one of them

is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag

under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint

of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click

here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There

we go, we have our link there. So I click on it takes me there, pretty standard stuff.

Now, we can actually create pseudo selectors for this. So I'm going to be giving you two

for now. Now, there are many, many more. But these are the two main ones you need to focus

on. The rest of them are kind of generalized. And these are the main two that you're going

to be using. So I'm going to create them here. And remember, you're using the element name,

you can use the class if you want, it's not limited to single element names, actually,

why don't I go ahead and do that, I'm going to give it an ID, because again, we only have

one of these on the page, I'm going to give it an ID of Google link, just like that. So

now I'm gonna go ahead and reference that in here. So remember, it's just the name of

this electric Google dash link, in this case, and then the colon. So here, I'm going to

go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also

a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just

a second. Alright, so let's look at the first one here, Google link, like, pretty much what

this is saying is, if you've ever been on a web page, you know that there is a difference

between before you click on the link and after, there's kind of some stylistic changes. So

that's where pseudo selectors actually come into play. The website has of those has those

defined properties. And they actually change the way that the link looks before and after

it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember,

so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going

to go ahead and give it a color of red tie blue there. Remember, usually, the default

is that it is going to be purple like this color here. Let's go ahead and refresh the

page, you can see that it's actually read now. Now, obviously, I can't really go back

in time, and change the link so that it doesn't look clicked. But you can see how powerful

this the pseudo selectors are, because you can do so many different things. And once

we learn more properties, you can actually change different parts of the page. And it

becomes very powerful to use these pseudo selectors. So that's just one thing to keep

in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm

actually going to go ahead and add that hover property there back in case anyone wants to

use the project files. So there we go. We've covered everything here. And we've added all

of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that

help you to look at all of the different pseudo selectors. And most of them, you're not really

going to use very often, they are useful in any way, because they're usually you just

use some basic pseudo selectors like hover and active, which I haven't actually covered.

But things like that. So you're not really going to use all of them. But I just wanted

to give you an introduction to the main ones, so that when it comes time to use them, you

have the tools to finish the job or create that effect that you've always wanted. Alright,

let's move on.

Today, we're going to be looking at Advanced selectors. So right now, we've looked at our

basic selectors, or class selectors, element selectors, and Id selectors. And we've also

looked at some pseudo selectors, which is very useful. But now we're going to look at

some of the more advanced selectors. Now, you're not going to use these every day. They're

not used very commonly, but it just shows what you can actually do with these selectors,

because there is a lot. So there's a bunch of advanced selectors. And I'm actually going

to be breaking these down into two parts, we're going to be looking first at our basic

advanced selectors. And I know that sounds a little bit contradictive. But we'll get

into that in just a second. And then after that, we're going to be talking about attribute

selectors, which are probably the hardest type of selector to get used to. Alright,

let's get started. So the first thing I want to talk about is how you actually set up these

selectors. Now, these sometimes contain one, two, or sometimes even three elements in one

selector. So I'm going to be going through these and talking about how they all work.

So the first selector I'm going to be talking about is something called the adjacent sibling

selector. So pretty much what this does is selects every single element that directly

follows a different element. So I'll show you how to set this up. Let's first take a

look at our HTML page every over here, sorry. Now you can see we have our services, which

is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead

and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl,

slash, like that. So if you type control slash comments here with which pretty much just

renders it useless, it doesn't run or anything like that. Let's get started. So the first

thing I want to do is go ahead and set this up. So I want to be able to apply styles to

every a tag or anchor tag that comes directly after an h2. So the way to set this up is

all you have to do is go the element that you Want to be the first element. So in this

case, it's going to be our h2. And then afterwards, it's going to be the element that you want

after, which is our a tag. So you want h2 plus a. So this is pretty much saying every

anchor tag that follows an h2. So then we can pretty much just set the style however

we want. So I'm going to say color is red, just like that. Now remember, this isn't any

there is no pseudo selector on this, if you could add it if you wanted to. Because this

is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh

the page. And you can see it turns red again. So that's the first type of selector. Next

thing I want to look at is the general sibling combinator, or selector. So this is a little

bit more difficult to understand. But All in good time, it's once you get used to it,

it becomes much easier to understand. So pretty much what the general sibling selector does,

is goes for the same kind of idea as this selector here, it looks for elements that

go directly after one another, except they have to be sharing the same parents, okay.

So for example, let's see our input here our form, we have an input and a text area, or

a button followed by a text area, for example. So what we're going to do here is I want to

style every button that's followed by a text area, except in this case, they have to share

the same parent. So what we're going to do is go and say, every button, which is going

to be the next one, or the final one, which is eight here. So sorry, it's actually going

to be text area. Right, because that's the first element here, which is our text area.

And then this symbol followed, and then it's going to be a button, like that. So this is

seeing every button that is followed, or that is after a text area, but they're in the same

parent. So from here, we can go and style it however we want. So in this case, I'm going

to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you

can see that the button color is purple. So like I said, the main difference between these

two is that the first one is going to be styling elements that follow each other no matter

where they are on the scale. So if you actually look up here, they don't share any parents,

they're completely separate elements. Whereas here, they have to follow each other. And

I'll actually demonstrate that quickly. If we change this to a plus here. and refresh,

the style is still going to work because they are directly preceded. But the only thing

is if they aren't. So for example, I'm just going to actually move this button out of

the form.

Today, we're going to be looking at Advanced selectors. So right now, we've looked at our

basic selectors, or class selectors, element selectors, and Id selectors. And we've also

looked at some pseudo selectors, which is very useful. But now we're going to look at

some of the more advanced selectors. Now, you're not going to use these every day. They're

not used very commonly, but it just shows what you can actually do with these selectors,

because there is a lot. So there's a bunch of advanced selectors. And I'm actually going

to be breaking these down into two parts, we're going to be looking first at our basic

advanced selectors. And I know that sounds a little bit contradictive. But we'll get

into that in just a second. And then after that, we're going to be talking about attribute

selectors, which are probably the hardest type of selector to get used to. Alright,

let's get started. So the first thing I want to talk about is how you actually set up these

selectors. Now, these sometimes contain one, two, or sometimes even three elements in one

selector. So I'm going to be going through these and talking about how they all work.

So the first selector I'm going to be talking about is something called the adjacent sibling

selector. So pretty much what this does is selects every single element that directly

follows a different element. So I'll show you how to set this up. Let's first take a

look at our HTML page every over here, sorry. Now you can see we have our services, which

is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead

and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl,

slash, like that. So if you type control slash comments here with which pretty much just

renders it useless, it doesn't run or anything like that. Let's get started. So the first

thing I want to do is go ahead and set this up. So I want to be able to apply styles to

every a tag or anchor tag that comes directly after an h2. So the way to set this up is

all you have to do is go the element that you Want to be the first element. So in this

case, it's going to be our h2. And then afterwards, it's going to be the element that you want

after, which is our a tag. So you want h2 plus a. So this is pretty much saying every

anchor tag that follows an h2. So then we can pretty much just set the style however

we want. So I'm going to say color is red, just like that. Now remember, this isn't any

there is no pseudo selector on this, if you could add it if you wanted to. Because this

is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh

the page. And you can see it turns red again. So that's the first type of selector. Next

thing I want to look at is the general sibling combinator, or selector. So this is a little

bit more difficult to understand. But All in good time, it's once you get used to it,

it becomes much easier to understand. So pretty much what the general sibling selector does,

is goes for the same kind of idea as this selector here, it looks for elements that

go directly after one another, except they have to be sharing the same parents, okay.

So for example, let's see our input here our form, we have an input and a text area, or

a button followed by a text area, for example. So what we're going to do here is I want to

style every button that's followed by a text area, except in this case, they have to share

the same parent. So what we're going to do is go and say, every button, which is going

to be the next one, or the final one, which is eight here. So sorry, it's actually going

to be text area. Right, because that's the first element here, which is our text area.

And then this symbol followed, and then it's going to be a button, like that. So this is

seeing every button that is followed, or that is after a text area, but they're in the same

parent. So from here, we can go and style it however we want. So in this case, I'm going

to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you

can see that the button color is purple. So like I said, the main difference between these

two is that the first one is going to be styling elements that follow each other no matter

where they are on the scale. So if you actually look up here, they don't share any parents,

they're completely separate elements. Whereas here, they have to follow each other. And

I'll actually demonstrate that quickly. If we change this to a plus here. and refresh,

the style is still going to work because they are directly preceded. But the only thing

is if they aren't. So for example, I'm just going to actually move this button out of

the form.

Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay,

so we have the button back. Now I'm going to go ahead and change this back to our symbol

there. And if we go ahead and refresh, you can see that the button right there, it doesn't

actually have that styling anymore, because although they directly follow each other,

they're not under the same parent. So that's just one minor difference. Alright, let's

move on to the next one. It's called the child selector. So this is probably the most basic

out of all of these advanced selectors. And pretty much what is saying is every single

child have a certain element. So I'll give you an example. Here, we have an Li and a

ul, this is pretty basic, all you have to do is type ul, which is going to be a parent.

And then this symbol or the greater than symbol, and Li so this is gonna say every single Li

inside of a ul, open up the brackets. And let's start to color this time to blue. I'm

just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity

rules, once you use these advanced selectors get quite complicated. But for example, if

we actually look at the Li here, the style for this, we can see that the Li with the

pseudo selector is actually more specific than the this general selector. So I'm going

to go ahead and comment that out. Now if we refresh the page, you can see that it's blue.

So that's just one thing to keep in mind with these advanced selectors. They can get pretty

complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is

to be able to classify these once we get and start using these advanced selectors. Like

I said, usually you won't use these in your general use. So I'm not going to go over specificity

especially because usually, you'll group up all of these styles into one selector. Okay,

so that's the child selector. The next one is very similar to the child selector, but

instead of having direct children, there's actually something called a descendant. So

I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay,

but then I'm going to create an ordered list inside of the Output training to create an

Li and put the ordered list inside of that. So pretty much what's going on here is I'm

creating an ordered list or a numbered list inside of a list item that is inside of a

ul. So a little bit complicated. But we'll get to that in just a second. So I'm going

to create an Li inside of this. And I'm going to say, my numbered list item, just like that.

Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item

here with our item. All right, so let's get started on using this descendant selector.

So I'm going to get started, first thing I want to do is actually set this up. So first

thing we're going to have is the parent. Okay, so in this case, it's going to be our ul,

remember, because that's the top level. But then I'm going to select the Li here, but

I'm not going to put our greater than symbol. So that's the big difference. This is the

descendant selector, and then this is going to be our child selector. So that's just the

main difference, it's very easy to miss, just make sure that you don't mess that up. So

now I'm going to select the color and set it to four. Now let's just say green. All

right, now let's go ahead and refresh the page. And you can see that all of the lies

inside of there are going to be green, right? Only problem is our ordered list right here

is actually purple, right? And of course, you know, our list here is getting a little

bit complicated. So I'm going to go ahead and comment this out. Remember, this is a

very specific selector. Now, if I go ahead and refresh, both of them are green. All right.

So what do you need to take away from this, it's pretty much what this is saying is any

Li that eventually boils back or propagates up if you have done any programming before,

that goes up to N A ul, okay, so I'll just show you what that means. In this case, the

Li is a direct child of the UL, right. But then we have another Li in here, which is

a child of n o l, which is just child of an Li, which is a child of the UL, right. So

as you move up and up, it eventually comes back to the UL as the parent element. So the

main difference you need to take away from this is that the child selector is selecting

any direct children. So anything here would not apply, because we're actually

Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay,

so we have the button back. Now I'm going to go ahead and change this back to our symbol

there. And if we go ahead and refresh, you can see that the button right there, it doesn't

actually have that styling anymore, because although they directly follow each other,

they're not under the same parent. So that's just one minor difference. Alright, let's

move on to the next one. It's called the child selector. So this is probably the most basic

out of all of these advanced selectors. And pretty much what is saying is every single

child have a certain element. So I'll give you an example. Here, we have an Li and a

ul, this is pretty basic, all you have to do is type ul, which is going to be a parent.

And then this symbol or the greater than symbol, and Li so this is gonna say every single Li

inside of a ul, open up the brackets. And let's start to color this time to blue. I'm

just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity

rules, once you use these advanced selectors get quite complicated. But for example, if

we actually look at the Li here, the style for this, we can see that the Li with the

pseudo selector is actually more specific than the this general selector. So I'm going

to go ahead and comment that out. Now if we refresh the page, you can see that it's blue.

So that's just one thing to keep in mind with these advanced selectors. They can get pretty

complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is

to be able to classify these once we get and start using these advanced selectors. Like

I said, usually you won't use these in your general use. So I'm not going to go over specificity

especially because usually, you'll group up all of these styles into one selector. Okay,

so that's the child selector. The next one is very similar to the child selector, but

instead of having direct children, there's actually something called a descendant. So

I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay,

but then I'm going to create an ordered list inside of the Output training to create an

Li and put the ordered list inside of that. So pretty much what's going on here is I'm

creating an ordered list or a numbered list inside of a list item that is inside of a

ul. So a little bit complicated. But we'll get to that in just a second. So I'm going

to create an Li inside of this. And I'm going to say, my numbered list item, just like that.

Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item

here with our item. All right, so let's get started on using this descendant selector.

So I'm going to get started, first thing I want to do is actually set this up. So first

thing we're going to have is the parent. Okay, so in this case, it's going to be our ul,

remember, because that's the top level. But then I'm going to select the Li here, but

I'm not going to put our greater than symbol. So that's the big difference. This is the

descendant selector, and then this is going to be our child selector. So that's just the

main difference, it's very easy to miss, just make sure that you don't mess that up. So

now I'm going to select the color and set it to four. Now let's just say green. All

right, now let's go ahead and refresh the page. And you can see that all of the lies

inside of there are going to be green, right? Only problem is our ordered list right here

is actually purple, right? And of course, you know, our list here is getting a little

bit complicated. So I'm going to go ahead and comment this out. Remember, this is a

very specific selector. Now, if I go ahead and refresh, both of them are green. All right.

So what do you need to take away from this, it's pretty much what this is saying is any

Li that eventually boils back or propagates up if you have done any programming before,

that goes up to N A ul, okay, so I'll just show you what that means. In this case, the

Li is a direct child of the UL, right. But then we have another Li in here, which is

a child of n o l, which is just child of an Li, which is a child of the UL, right. So

as you move up and up, it eventually comes back to the UL as the parent element. So the

main difference you need to take away from this is that the child selector is selecting

any direct children. So anything here would not apply, because we're actually

this one wouldn't apply, because the ordered list is actually a child of the Li remember,

but when you're using the descendant selector, what actually happens is, if it is contained

inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate

this. Now. Let's go ahead and actually remove this Li remember, because once you get to

this point, CSS gets a little bit complicated. This is going to end up styling everything

inside it. So I'm actually just going to remove this and leave it just the ordered list. So

right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh.

And you can see it still stays the same, because we have this style applied. But why don't

we go ahead and remove this, what do you think's going to happen? Well, you can see here that

this stays blue, remember, because of our direct child selector, but then this doesn't

have any style at all. So this Li works perfectly. It is a direct child of the UL, which means

it's going to be colored with the style specified. The only problem is this Li is a direct child

have the ordered list, which is completely separate from this one. So the styles aren't

going to be applied on this one. On the other hand, if we did have our descendant selector

enabled, it's going to style both of them because remember, the Li is a child of the

oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference

between the two, you might be able to miss it, it could really mess up your code. So

just make sure to keep that in mind. Alright, so those are pretty much the basic advanced

selectors, those are the four that you're mainly going to use. Again, there's many more,

but they are quite difficult. And we're not going to cover them because they're not very

useful. So there we go. Those are the four selectors that you can use. Go ahead and practice

them as much as you want. You know, try messing them around, open up some HTML files and just

see what you can do with them. All right, let's move on.

this one wouldn't apply, because the ordered list is actually a child of the Li remember,

but when you're using the descendant selector, what actually happens is, if it is contained

inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate

this. Now. Let's go ahead and actually remove this Li remember, because once you get to

this point, CSS gets a little bit complicated. This is going to end up styling everything

inside it. So I'm actually just going to remove this and leave it just the ordered list. So

right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh.

And you can see it still stays the same, because we have this style applied. But why don't

we go ahead and remove this, what do you think's going to happen? Well, you can see here that

this stays blue, remember, because of our direct child selector, but then this doesn't

have any style at all. So this Li works perfectly. It is a direct child of the UL, which means

it's going to be colored with the style specified. The only problem is this Li is a direct child

have the ordered list, which is completely separate from this one. So the styles aren't

going to be applied on this one. On the other hand, if we did have our descendant selector

enabled, it's going to style both of them because remember, the Li is a child of the

oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference

between the two, you might be able to miss it, it could really mess up your code. So

just make sure to keep that in mind. Alright, so those are pretty much the basic advanced

selectors, those are the four that you're mainly going to use. Again, there's many more,

but they are quite difficult. And we're not going to cover them because they're not very

useful. So there we go. Those are the four selectors that you can use. Go ahead and practice

them as much as you want. You know, try messing them around, open up some HTML files and just

see what you can do with them. All right, let's move on.

Welcome back. So in this video, I am going to be talking about the last type of selector.

These are called attribute selectors. They're a little bit complicated once you get started,

but once we actually start using them, they become very easy to use. So first of all,

what is an attribute selector? Well, as we know, in HTML, we can actually add attributes

to all of our elements. So for example, this image here has an attribute of source which

tells the image tag where the source of the images. But what we can actually do in CSS

is use these to our advantage, we can select certain elements that for certain attributes

and their values. So for example, let's go ahead and try and rewrite this subtitle class

here. So we know if we go over here that all of our, all of our subtitle classes are used

in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So

what we do is first start off with our tag name, which is h2. But then inside of some

square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're

not going to do it like this, we're going to have to select some sort of attribute.

What this allows us to do is actually select certain things or certain elements based on

their attributes. So in this clip, in this case, we want to select everything that has

the attribute of class, and we want to make sure that the class itself is subtitled. Okay.

Now, you do not need quotation marks for these, unlike how they were in HTML, you can see

we do need quotation marks, but in CSS, we don't actually need them. Alright, so there

we go. We have rewritten our class here. But we've read we've but we've written it in a

way that allows us to select it based on its act on the attribute of it itself. So let's

go ahead and refresh the page and see what happens, you can see that this state exactly

the same. Now nothing has changed. If I go ahead and change this back to dot subtitle,

just like that, refresh the page, you can see nothing's changed. So that's pretty basic.

Now, it doesn't just have to be class, we can select it based on many different things.

So for example, if I wanted to select this image over here, I'm going to go over to the

bottom, I could say image, image, and then every and then the source has to be equal

to something. All right. So there we go. Now we've done that. But there's actually more

than one type of selector. Now, usually, this is the basic one where you just equate one

side to the other. But there's actually many more types of selectors, which allow you to

kind of modify the attribute selectors and make them much more powerful than they are

right now. So how do we do this? Well, I'm going to be covering just a few of them with

you today, and showing you how you can use them. So we have two images on this page.

Now both of them are located in this image folder. Is there do you think that there's

any way that we can select both of them in one go using an attribute selector? Well,

there actually is. So here's what we have to do. First of all, let's find the common

factor between these two images. They both are contained inside this folder. So they

both start definitely start with this path, dot dot slash IMG slash, both of them are

going to contain this. And if we actually go back and look, you can see that both images

actually do contain this link here, wherever the other images, there it is. So there we

go. Now we've done that. But remember that this is direct equating this has to be equal

to this. And unfortunately, neither of them are equal to that. So how do you think we

fix this? Well, all we have to do is put a carrot behind the attribute, just like this.

So what this says is every single image where the source contains or starts with, sorry,

yeah, starts with this piece of information, what comes after, it doesn't matter. But what

we're doing is selecting all of the images where the source attribute starts with this

value right here. So this is you can already see how powerful this is. Now, if we go ahead

and refresh the page, obviously, we can't see anything because we didn't add any styles.

But I'm going to go ahead and add a quick style for you. Or you don't need to know how

to do this,

Welcome back. So in this video, I am going to be talking about the last type of selector.

These are called attribute selectors. They're a little bit complicated once you get started,

but once we actually start using them, they become very easy to use. So first of all,

what is an attribute selector? Well, as we know, in HTML, we can actually add attributes

to all of our elements. So for example, this image here has an attribute of source which

tells the image tag where the source of the images. But what we can actually do in CSS

is use these to our advantage, we can select certain elements that for certain attributes

and their values. So for example, let's go ahead and try and rewrite this subtitle class

here. So we know if we go over here that all of our, all of our subtitle classes are used

in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So

what we do is first start off with our tag name, which is h2. But then inside of some

square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're

not going to do it like this, we're going to have to select some sort of attribute.

What this allows us to do is actually select certain things or certain elements based on

their attributes. So in this clip, in this case, we want to select everything that has

the attribute of class, and we want to make sure that the class itself is subtitled. Okay.

Now, you do not need quotation marks for these, unlike how they were in HTML, you can see

we do need quotation marks, but in CSS, we don't actually need them. Alright, so there

we go. We have rewritten our class here. But we've read we've but we've written it in a

way that allows us to select it based on its act on the attribute of it itself. So let's

go ahead and refresh the page and see what happens, you can see that this state exactly

the same. Now nothing has changed. If I go ahead and change this back to dot subtitle,

just like that, refresh the page, you can see nothing's changed. So that's pretty basic.

Now, it doesn't just have to be class, we can select it based on many different things.

So for example, if I wanted to select this image over here, I'm going to go over to the

bottom, I could say image, image, and then every and then the source has to be equal

to something. All right. So there we go. Now we've done that. But there's actually more

than one type of selector. Now, usually, this is the basic one where you just equate one

side to the other. But there's actually many more types of selectors, which allow you to

kind of modify the attribute selectors and make them much more powerful than they are

right now. So how do we do this? Well, I'm going to be covering just a few of them with

you today, and showing you how you can use them. So we have two images on this page.

Now both of them are located in this image folder. Is there do you think that there's

any way that we can select both of them in one go using an attribute selector? Well,

there actually is. So here's what we have to do. First of all, let's find the common

factor between these two images. They both are contained inside this folder. So they

both start definitely start with this path, dot dot slash IMG slash, both of them are

going to contain this. And if we actually go back and look, you can see that both images

actually do contain this link here, wherever the other images, there it is. So there we

go. Now we've done that. But remember that this is direct equating this has to be equal

to this. And unfortunately, neither of them are equal to that. So how do you think we

fix this? Well, all we have to do is put a carrot behind the attribute, just like this.

So what this says is every single image where the source contains or starts with, sorry,

yeah, starts with this piece of information, what comes after, it doesn't matter. But what

we're doing is selecting all of the images where the source attribute starts with this

value right here. So this is you can already see how powerful this is. Now, if we go ahead

and refresh the page, obviously, we can't see anything because we didn't add any styles.

But I'm going to go ahead and add a quick style for you. Or you don't need to know how

to do this,

I'm actually going to make it a little bit more obvious. So you don't need to know how

to do this. We're going to cover it later. But you can see now both images are covered

in black. Okay. So there we go. That's just one way, one of the selectors we can do, we

can also change this to $1 sign, and in this case, it's going to be make sure that the

source attribute ends with this value. Okay. So there we go, we can do that. Obviously,

the style isn't going to work anymore, because this doesn't apply. But there's also another

one that we can do, which is using a star the multiplication symbol. And pretty much

what this is, is if it contains it anywhere, anywhere in the the value for beginning and

middle doesn't matter. As long as it contains this. It's going to be there. So I'm going

to go ahead and refresh and you can see now that works because both of them do contain

this. So those are the three basic ones, but there's also some more complicated selectors

now I'm going to go ahead and cover them. But you don't exactly need to know these,

because they're a little bit complicated. So I'm just going to go ahead and do them.

The first one is called a whitespace attribute selector. So pretty much, if you don't know

this already, you can actually add multiple classes to something in HTML. So I'm actually

going to go ahead and add another class to the subtitles. And I'm just going to call

it just something random particle subtitle. Obviously, it's a little bit confusing, but

just bear with me. So you can actually add multiple classes or multiple arguments separated

by white spaces or spaces, inside these inside these attributes. Now, obviously, this is

specific to some very small, a very small number of attributes, where you can do this

now just keep that in mind. For now, what we're going to do is go forward and start

using this. So I'm going to go ahead and select anything that contains this, this class specifically.

Now I couldn't do you know, maybe the attribute selector where it ends in this or contains

it, but there is another selector that we can use. So I'm going to go ahead and say

h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol,

okay, and then equals, and then our value in this in this case, it's going to be our

class, which is article subtitle. All right. So now we can go ahead and add whatever you

want. So I'm actually going to go ahead and give it a background. Now, again, you do not

need to know what this is yet. I'm just trying to vary up the properties a little bit here.

So let's go ahead and refresh the page and see what happens, you can see that a green

background has been added to this, I'm not going to try hovering over that it's a little

bit different compensate, but you can see that a green background has been added to

it. Now, this could be used for a using a contain attribute selector. But this is a

little bit more specific. And it only works for things that are separated by whitespace.

So if you want to isolate certain elements that contain a certain class x, for example,

you can do it with these class attributes. And that would work perfectly. So the next

selector I'm going to talk about is a little bit more complicated. And it's very similar

to the first step, the first one that we talked about, which was the general attribute selector,

the one where, where it's exactly quality. But there's a little bit of a difference here.

There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here.

Okay. So pretty much what this is saying is fine, every h2, where the class is equal either

equal to directly article dash subtitle, or article dash subtitle with a dash. So, again,

it does have to start with this. So it can't just be containing followed by a dash, it

does have to start with this. So why would you want to use something like this? Why can't

you just use the exact equality? Well, this is a pretty basic site right here. Now, we're

not really doing anything complicated, or any multiple stylesheets or anything like

that. But sometimes when you have want to have multiple elements, or you want to build

libraries, you can create multiple elements that are followed by an ID. So for example,

just list them here. I'm gonna actually put this in a comment. So I could have subtitle,

dash, and then some Id like that subtitle, dash, and then again, some ID. So you can

see why we would use something like this, pretty much. What you want to do is select

everything that

I'm actually going to make it a little bit more obvious. So you don't need to know how

to do this. We're going to cover it later. But you can see now both images are covered

in black. Okay. So there we go. That's just one way, one of the selectors we can do, we

can also change this to $1 sign, and in this case, it's going to be make sure that the

source attribute ends with this value. Okay. So there we go, we can do that. Obviously,

the style isn't going to work anymore, because this doesn't apply. But there's also another

one that we can do, which is using a star the multiplication symbol. And pretty much

what this is, is if it contains it anywhere, anywhere in the the value for beginning and

middle doesn't matter. As long as it contains this. It's going to be there. So I'm going

to go ahead and refresh and you can see now that works because both of them do contain

this. So those are the three basic ones, but there's also some more complicated selectors

now I'm going to go ahead and cover them. But you don't exactly need to know these,

because they're a little bit complicated. So I'm just going to go ahead and do them.

The first one is called a whitespace attribute selector. So pretty much, if you don't know

this already, you can actually add multiple classes to something in HTML. So I'm actually

going to go ahead and add another class to the subtitles. And I'm just going to call

it just something random particle subtitle. Obviously, it's a little bit confusing, but

just bear with me. So you can actually add multiple classes or multiple arguments separated

by white spaces or spaces, inside these inside these attributes. Now, obviously, this is

specific to some very small, a very small number of attributes, where you can do this

now just keep that in mind. For now, what we're going to do is go forward and start

using this. So I'm going to go ahead and select anything that contains this, this class specifically.

Now I couldn't do you know, maybe the attribute selector where it ends in this or contains

it, but there is another selector that we can use. So I'm going to go ahead and say

h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol,

okay, and then equals, and then our value in this in this case, it's going to be our

class, which is article subtitle. All right. So now we can go ahead and add whatever you

want. So I'm actually going to go ahead and give it a background. Now, again, you do not

need to know what this is yet. I'm just trying to vary up the properties a little bit here.

So let's go ahead and refresh the page and see what happens, you can see that a green

background has been added to this, I'm not going to try hovering over that it's a little

bit different compensate, but you can see that a green background has been added to

it. Now, this could be used for a using a contain attribute selector. But this is a

little bit more specific. And it only works for things that are separated by whitespace.

So if you want to isolate certain elements that contain a certain class x, for example,

you can do it with these class attributes. And that would work perfectly. So the next

selector I'm going to talk about is a little bit more complicated. And it's very similar

to the first step, the first one that we talked about, which was the general attribute selector,

the one where, where it's exactly quality. But there's a little bit of a difference here.

There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here.

Okay. So pretty much what this is saying is fine, every h2, where the class is equal either

equal to directly article dash subtitle, or article dash subtitle with a dash. So, again,

it does have to start with this. So it can't just be containing followed by a dash, it

does have to start with this. So why would you want to use something like this? Why can't

you just use the exact equality? Well, this is a pretty basic site right here. Now, we're

not really doing anything complicated, or any multiple stylesheets or anything like

that. But sometimes when you have want to have multiple elements, or you want to build

libraries, you can create multiple elements that are followed by an ID. So for example,

just list them here. I'm gonna actually put this in a comment. So I could have subtitle,

dash, and then some Id like that subtitle, dash, and then again, some ID. So you can

see why we would use something like this, pretty much. What you want to do is select

everything that

has subtitle and then the dash in it. And you're probably also wondering, okay, why

can't you just use one or the other selectors like something that starts with it? Well,

sometimes this is contained in a chain, or sometimes there's multiple dashes. And on

top of that, some sometimes it may change, you know, maybe this could be in the middle

of 15 other classes. So you can see why you'd want to use something like this. And although

it's not used very commonly, it's still very important to know. Alright, so those are pretty

much all of the advanced Arctic attribute selectors. Like I said, You aren't going to

use these very commonly. But again, it is good to know they are very powerful selectors.

So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice,

and just try using the selectors on your own. All of the project files are available on

GitHub, the they the link to the repository was posted at the beginning of the course.

So you can go ahead and check that out if you want to download the files and work with

them. But other than that, there we go. That's pretty much it for selectors now we can actually

move on and start using CSS. Alright, let's move on.

has subtitle and then the dash in it. And you're probably also wondering, okay, why

can't you just use one or the other selectors like something that starts with it? Well,

sometimes this is contained in a chain, or sometimes there's multiple dashes. And on

top of that, some sometimes it may change, you know, maybe this could be in the middle

of 15 other classes. So you can see why you'd want to use something like this. And although

it's not used very commonly, it's still very important to know. Alright, so those are pretty

much all of the advanced Arctic attribute selectors. Like I said, You aren't going to

use these very commonly. But again, it is good to know they are very powerful selectors.

So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice,

and just try using the selectors on your own. All of the project files are available on

GitHub, the they the link to the repository was posted at the beginning of the course.

So you can go ahead and check that out if you want to download the files and work with

them. But other than that, there we go. That's pretty much it for selectors now we can actually

move on and start using CSS. Alright, let's move on.

I'm not really going to talk a lot in this video because there's not really much to talk

about, but this video and the next are very important because right now you're probably

just piecing things together about the whole way that we use CSS. And we've had to use

a couple properties here and there, but you Probably don't actually know what these brackets

do, or how selectors work or how any of this is actually put together. So that's what I'm

going to be doing in the next few videos is explaining how all of this comes together.

And once we learn that, we can actually move on to the fun part, which is using CSS and

styling this website. So first thing I want to explain is properties. Now, we've talked

a little bit about properties here and there, because we've needed them to demonstrate points

on how selectors work. Now, obviously, it might have been better if we use properties

first. But in my opinion, it's better that you learn selectors before you learn properties.

Because if you learn selectors First, you'll be able to understand the premise or the theory

behind CSS, and how things work. Whereas if you just learn properties first, then most

of your focus will be on how the properties work and not the selectors. And I feel that

it's much more important that you learn the selectors before the properties so that you

can actually understand CSS and how it works as a whole. So that aside, let's move on to

properties. Now, like I said, we've used these a little bit in the past, we haven't actually

talked about them in detail. So this is a property. Now, they're contained within selectors.

And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector

is going to target the element. But the actual properties are what give it its change. And

what make it what it is, without the or without properties than the selectors would be completely

useless. So let's go ahead and talk about the parts of properties. Now first of all,

a colon is always needed, you cannot use a property without a colon and a semi colon,

the colon comes after the property. Now the property is pretty much defining what is going

to change the color, the background, the positioning, the height, the width, there are so many properties

out there. And they are all used in different ways. And then next is the value. Now, most

of the time, you can actually use multiple types of values. But for something like color,

there are very specific rules that you need to use for them. And we're actually going

to be learning those rules and how to use colors in the next section. But for now, the

just think of the value as a key or Well, not a key, the value is sort of the guideline

towards the property, the value is like the value to the attribute that actually defines

what's changing. and the value actually gives it that change. So just keep that in mind.

So that's pretty much it for properties, it's very simple. And we're going to get lots of

exposure to them as we move through the course. But for now, all you need to keep in mind

is that properties have two components, the actual property itself, which is kind of the

guideline on what's changing, followed by a colon, and then the value itself, which

is going to be the change or the type of change that happens in our our element. So what happens

through our selector, and at the end of it all, you always put a semi colon, if we remove

the semi colon, it's not going to work. So yeah, that's pretty much it for properties.

Let's move on. So this is going to be the final video on or in this section, we're not

really going to be doing anything or styling the website. But for now, I just want to talk

a little bit about a very important part of CSS. Now, this is pretty much going to define

the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really

looking at properties yet. But we've covered a lot of different selectors and how they

work. But now we need to put the two together, we know what properties are. And we definitely

know what selectors are. So we need to know how these two work together. Now, I've talked

a little bit about this in the past, but we haven't actually gone through it in detail.

So that's what I'm going to be doing in this video. So first of all, if you look at all

of the CSS code, we can see a pattern involved here. First of all, in every single one of

these there are these curly braces. And on top of that in every single one, there is

some italicized text, which is due to the development tool that we're using, but there's

some italicized text, and then some other text here, and there's always a colon and

a semi colon. And on top of that before every first curly brace, there's always going to

be some form of text here, which is our selectors. But how do these actually work together? So

this is very important for something called the CSS a general rule. And it's pretty much

going to teach you how all CSS is supposed to look. So first of all, there's always three

parts to your

I'm not really going to talk a lot in this video because there's not really much to talk

about, but this video and the next are very important because right now you're probably

just piecing things together about the whole way that we use CSS. And we've had to use

a couple properties here and there, but you Probably don't actually know what these brackets

do, or how selectors work or how any of this is actually put together. So that's what I'm

going to be doing in the next few videos is explaining how all of this comes together.

And once we learn that, we can actually move on to the fun part, which is using CSS and

styling this website. So first thing I want to explain is properties. Now, we've talked

a little bit about properties here and there, because we've needed them to demonstrate points

on how selectors work. Now, obviously, it might have been better if we use properties

first. But in my opinion, it's better that you learn selectors before you learn properties.

Because if you learn selectors First, you'll be able to understand the premise or the theory

behind CSS, and how things work. Whereas if you just learn properties first, then most

of your focus will be on how the properties work and not the selectors. And I feel that

it's much more important that you learn the selectors before the properties so that you

can actually understand CSS and how it works as a whole. So that aside, let's move on to

properties. Now, like I said, we've used these a little bit in the past, we haven't actually

talked about them in detail. So this is a property. Now, they're contained within selectors.

And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector

is going to target the element. But the actual properties are what give it its change. And

what make it what it is, without the or without properties than the selectors would be completely

useless. So let's go ahead and talk about the parts of properties. Now first of all,

a colon is always needed, you cannot use a property without a colon and a semi colon,

the colon comes after the property. Now the property is pretty much defining what is going

to change the color, the background, the positioning, the height, the width, there are so many properties

out there. And they are all used in different ways. And then next is the value. Now, most

of the time, you can actually use multiple types of values. But for something like color,

there are very specific rules that you need to use for them. And we're actually going

to be learning those rules and how to use colors in the next section. But for now, the

just think of the value as a key or Well, not a key, the value is sort of the guideline

towards the property, the value is like the value to the attribute that actually defines

what's changing. and the value actually gives it that change. So just keep that in mind.

So that's pretty much it for properties, it's very simple. And we're going to get lots of

exposure to them as we move through the course. But for now, all you need to keep in mind

is that properties have two components, the actual property itself, which is kind of the

guideline on what's changing, followed by a colon, and then the value itself, which

is going to be the change or the type of change that happens in our our element. So what happens

through our selector, and at the end of it all, you always put a semi colon, if we remove

the semi colon, it's not going to work. So yeah, that's pretty much it for properties.

Let's move on. So this is going to be the final video on or in this section, we're not

really going to be doing anything or styling the website. But for now, I just want to talk

a little bit about a very important part of CSS. Now, this is pretty much going to define

the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really

looking at properties yet. But we've covered a lot of different selectors and how they

work. But now we need to put the two together, we know what properties are. And we definitely

know what selectors are. So we need to know how these two work together. Now, I've talked

a little bit about this in the past, but we haven't actually gone through it in detail.

So that's what I'm going to be doing in this video. So first of all, if you look at all

of the CSS code, we can see a pattern involved here. First of all, in every single one of

these there are these curly braces. And on top of that in every single one, there is

some italicized text, which is due to the development tool that we're using, but there's

some italicized text, and then some other text here, and there's always a colon and

a semi colon. And on top of that before every first curly brace, there's always going to

be some form of text here, which is our selectors. But how do these actually work together? So

this is very important for something called the CSS a general rule. And it's pretty much

going to teach you how all CSS is supposed to look. So first of all, there's always three

parts to your

to your selector here, there is the selector itself. There's the curly braces, which actually

represents something called a CSS block. And then there's the properties. So first of all,

let's talk about the selector. Now, we all know that selector defines what elements you're

trying to collect or target on your HTML page. A selector can look any different way it can

look like this with some weird symbols. It could have colons and pseudo selectors or

it can just It looks something very plain like this. But we all know that they do something

different. And over the last few videos, we've been covering what selectors actually do.

So now what we're going to do is go through, and I'm going to teach you how this selector

plays in with everything else. So we have our selector over here, this could be anything,

an element selectors, pseudo selector attribute selector like one of these. But for now, we

have our selector. So this is going to target some element on a page. Now, the part we haven't

talked about is something called the CSS block. So pretty much once you select something,

you need to define all of your styles. And as we know, all of your styles have to go

in between these two curly braces. So that's what we call a CSS block. The curly braces

define the beginning and end of this block. And it can be empty, it doesn't need to have

anything inside it. But what's going on here is this block is going to contain all of the

styles that are then going to be targeted towards our selector. And then of course,

we have the properties. So all of these have only had one property where you can actually

do more than one property. So a property looks like this property, a colon, and then a value,

and a semicolon. So the property is going to be the name of the actual style, this can

be color background, and we're going to learn a bunch of these throughout this course. But

this could be anything. On the other hand, the value has to be sort of targeted or matching

the style of the property. So for example, if this was a color, we can use pixels, because

pixels are for size. So there are many different ways that you can use these different values.

And they all depend on your property. So what I didn't show you is you can actually have

more than one property. Now these can be in any style, as long as they have the semi colon

and the colon. And they come inside the block. So this can be property to add value to. And

you can put pretty much as many styles as you want in here. So for example, if you wanted

to style a subtitle, and you wanted to change the font size, the color, and the background

all at the same time, you don't need to create three separate CSS blocks, you can do it all

in one. And that's the real power of CSS is that you don't have you can keep your code

concise and clean, without having to create all of these different blocks. So this is

pretty much the general rule, you have to follow this pretty much for all of the CSS

you write using a selector and then different properties contained inside of a block. So

like I said, we're going to get much more experience with actually using CSS, as we

delve more into CSS and learning all of the different features it has to offer. Alright,

let's move on.

to your selector here, there is the selector itself. There's the curly braces, which actually

represents something called a CSS block. And then there's the properties. So first of all,

let's talk about the selector. Now, we all know that selector defines what elements you're

trying to collect or target on your HTML page. A selector can look any different way it can

look like this with some weird symbols. It could have colons and pseudo selectors or

it can just It looks something very plain like this. But we all know that they do something

different. And over the last few videos, we've been covering what selectors actually do.

So now what we're going to do is go through, and I'm going to teach you how this selector

plays in with everything else. So we have our selector over here, this could be anything,

an element selectors, pseudo selector attribute selector like one of these. But for now, we

have our selector. So this is going to target some element on a page. Now, the part we haven't

talked about is something called the CSS block. So pretty much once you select something,

you need to define all of your styles. And as we know, all of your styles have to go

in between these two curly braces. So that's what we call a CSS block. The curly braces

define the beginning and end of this block. And it can be empty, it doesn't need to have

anything inside it. But what's going on here is this block is going to contain all of the

styles that are then going to be targeted towards our selector. And then of course,

we have the properties. So all of these have only had one property where you can actually

do more than one property. So a property looks like this property, a colon, and then a value,

and a semicolon. So the property is going to be the name of the actual style, this can

be color background, and we're going to learn a bunch of these throughout this course. But

this could be anything. On the other hand, the value has to be sort of targeted or matching

the style of the property. So for example, if this was a color, we can use pixels, because

pixels are for size. So there are many different ways that you can use these different values.

And they all depend on your property. So what I didn't show you is you can actually have

more than one property. Now these can be in any style, as long as they have the semi colon

and the colon. And they come inside the block. So this can be property to add value to. And

you can put pretty much as many styles as you want in here. So for example, if you wanted

to style a subtitle, and you wanted to change the font size, the color, and the background

all at the same time, you don't need to create three separate CSS blocks, you can do it all

in one. And that's the real power of CSS is that you don't have you can keep your code

concise and clean, without having to create all of these different blocks. So this is

pretty much the general rule, you have to follow this pretty much for all of the CSS

you write using a selector and then different properties contained inside of a block. So

like I said, we're going to get much more experience with actually using CSS, as we

delve more into CSS and learning all of the different features it has to offer. Alright,

let's move on.

So this is the start of a new section. And now that we've learned all we need to know

about selectors, we're going to actually start styling up our website and making it look

good. So first of all, let's just talk about coloring. In general, I mean, what is coloring?

And what are we supposed to do with it. So as we know, we already have a bunch of colors

here. And they all look fine. But what we're actually trying to do here is color our website

in a way that makes it look modern, and appealing to users. So we're going to be learning a

bunch of different techniques that you can use to color your website. Now we've already

used one in the past, and it's a very common one. And that is, of course, the color property.

Now we're going to be talking more about this in the next video and using it in depth. But

first thing I want to talk about is the different types of colors, because there's actually

more than one. So first of all, we've all used and while you've at least seen me use

the colors have given by name so for example, red, green, blue, and purple. But there's

actually more than that there's so much more to colors than just those names, because as

you know, they're actually quite limiting, you can't really change the color and choose

as you want. So what I'm here to teach you about is the three different types of colors

and how they work. So the first one is obviously the CSS color codes or names. And what they

do is is pretty much given a name, and they each have a designated color. So this is a

really easy way for testing colors. For example, if you want to test if a property works, as

we saw at the beginning of this course. And you can also use them for you know, maybe

quick fixes or trying to just try out different colors. But once you get into the really specific

detailed web design, and once you start producing your website properly, you're going to want

more than just the color CSS gives you. So I've actually attached to the lecture resources,

this website here, you have a bunch of different CSS color codes. And you can see that there's

actually a huge range of them, we only use the basic ones that are quite vibrant and

they really hit the eyes very hard. But you can see there's actually a lot more than what

we just use. The only problem is nobody wants to memorize all of these different names.

So what we're actually going to be doing is learning how to use these two, which are the

ones I'm going to be talking about in this video. So first of all, let's talk a little

bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate

how this whole thing works. We actually don't need this for now. So I'm going to discipline

full screen. So this is a color picker that I found on Google, you can go ahead and search

it anywhere. But I like using Google's provided one, because it provides you with both the

hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first

of all, you can slide up and down this thing and choose whichever color you want. And you

can see that these two codes change. So what do they actually mean? Well, first, let's

talk about the hex code. So we all know that when you're normally using numbers, you range

from zero to nine. So any given number in this new in that numeral system can be made

up of 012, and all the way up to nine. So in that case, there's 10 possible combinations.

But in hex code, there's actually 16 different possible combinations, you can go from zero

to nine, and then A to F. So for example, let's just take this right here, this could

actually be converted into a number if we wanted to, suppose B, actually stands for

12, because it goes zero to nine, and then a B, so 12. And you can actually convert this

into a number, which is very interesting. So I'm not really going to be talking about

the applications of hex code in this in this video, because that goes all the way down

into computer science. And we're not really looking at that now. But one thing we can

do is actually create colors based on this. So first of all, you'll notice that our code

here starts off with a hashtag. And then you have six digits. So each one can have 16 possible

combinations. But as we know, color any color is made up of either red, green, or blue,

at least on the computer for the standard color palette. So it's made up of red, green,

and blue. Now basically, this hex code is split up into three two digit pairs. So the

first pair of numbers is meant to represent the amount of red in the color, the second,

the amount of green, and the third, the amount of blue, RGB. And these parents can range

from 00, which means none of that color to F F, which is the highest value. Remember,

hexadecimal goes from zero to f. So I'm just going to choose something very basic here,

like a standard blue. You can see here that this is the purest blue that you can get.

Pretty much what this is saying is the first two is 00, which means there's no red, the

second pair, or Yeah, the second pair is also 00, which means no green. But then the third

is F F, which means all blue. So this is pretty easy. So if we go to something like white,

for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which

actually creates white. And if we chose black, you can see that that's zero. So this is a

pretty hard thing to understand. Once you get into some of these more complicated colors.

Again, we don't really use hexadecimal in normal in normal use, when we're creating

colors or writing code, we don't really use these numbers. So it's actually much easier

to work with RGB codes. So RGB is a little bit different in the style that it's written.

But it all represents the same concept. Pretty much there are three numbers here. And these

aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the

first for red, the second for green, and the third for blue, just like this one, except

in this case, the numbers can go from zero to 255, zero being the minimum and 255 being

the maximum. So this is actually much easier to read. Let's go back to our blue here. And

I'm actually just going to write the code here. So you can see that there's zero red,

zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum.

And obviously, you can see that once we go back to those complicated colors. When you

look here, it's quite complicated to understand. But when we look at the RGB code, we can see

that there's a moderate amount of red, a large amount of green and large amounts of blue,

and therefore it should theoretically be a cold color. Now again, you don't really need

to know how to construct these QR codes from your head, they're quite hard to understand.

So what I would recommend is when you're designing these colors, or designing these, these websites,

I would recommend you just go and use a color picker, too much easy too much, much easier

to decide. And you can also get a lot more experience hands on experience with these

colors rather than memorizing all the theory behind them. So both of these will work fine

and in the next video I'm going to show you how to actually use these codes in our in

our website and actually use them to style and color text. Alright, let's move on.

So this is the start of a new section. And now that we've learned all we need to know

about selectors, we're going to actually start styling up our website and making it look

good. So first of all, let's just talk about coloring. In general, I mean, what is coloring?

And what are we supposed to do with it. So as we know, we already have a bunch of colors

here. And they all look fine. But what we're actually trying to do here is color our website

in a way that makes it look modern, and appealing to users. So we're going to be learning a

bunch of different techniques that you can use to color your website. Now we've already

used one in the past, and it's a very common one. And that is, of course, the color property.

Now we're going to be talking more about this in the next video and using it in depth. But

first thing I want to talk about is the different types of colors, because there's actually

more than one. So first of all, we've all used and while you've at least seen me use

the colors have given by name so for example, red, green, blue, and purple. But there's

actually more than that there's so much more to colors than just those names, because as

you know, they're actually quite limiting, you can't really change the color and choose

as you want. So what I'm here to teach you about is the three different types of colors

and how they work. So the first one is obviously the CSS color codes or names. And what they

do is is pretty much given a name, and they each have a designated color. So this is a

really easy way for testing colors. For example, if you want to test if a property works, as

we saw at the beginning of this course. And you can also use them for you know, maybe

quick fixes or trying to just try out different colors. But once you get into the really specific

detailed web design, and once you start producing your website properly, you're going to want

more than just the color CSS gives you. So I've actually attached to the lecture resources,

this website here, you have a bunch of different CSS color codes. And you can see that there's

actually a huge range of them, we only use the basic ones that are quite vibrant and

they really hit the eyes very hard. But you can see there's actually a lot more than what

we just use. The only problem is nobody wants to memorize all of these different names.

So what we're actually going to be doing is learning how to use these two, which are the

ones I'm going to be talking about in this video. So first of all, let's talk a little

bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate

how this whole thing works. We actually don't need this for now. So I'm going to discipline

full screen. So this is a color picker that I found on Google, you can go ahead and search

it anywhere. But I like using Google's provided one, because it provides you with both the

hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first

of all, you can slide up and down this thing and choose whichever color you want. And you

can see that these two codes change. So what do they actually mean? Well, first, let's

talk about the hex code. So we all know that when you're normally using numbers, you range

from zero to nine. So any given number in this new in that numeral system can be made

up of 012, and all the way up to nine. So in that case, there's 10 possible combinations.

But in hex code, there's actually 16 different possible combinations, you can go from zero

to nine, and then A to F. So for example, let's just take this right here, this could

actually be converted into a number if we wanted to, suppose B, actually stands for

12, because it goes zero to nine, and then a B, so 12. And you can actually convert this

into a number, which is very interesting. So I'm not really going to be talking about

the applications of hex code in this in this video, because that goes all the way down

into computer science. And we're not really looking at that now. But one thing we can

do is actually create colors based on this. So first of all, you'll notice that our code

here starts off with a hashtag. And then you have six digits. So each one can have 16 possible

combinations. But as we know, color any color is made up of either red, green, or blue,

at least on the computer for the standard color palette. So it's made up of red, green,

and blue. Now basically, this hex code is split up into three two digit pairs. So the

first pair of numbers is meant to represent the amount of red in the color, the second,

the amount of green, and the third, the amount of blue, RGB. And these parents can range

from 00, which means none of that color to F F, which is the highest value. Remember,

hexadecimal goes from zero to f. So I'm just going to choose something very basic here,

like a standard blue. You can see here that this is the purest blue that you can get.

Pretty much what this is saying is the first two is 00, which means there's no red, the

second pair, or Yeah, the second pair is also 00, which means no green. But then the third

is F F, which means all blue. So this is pretty easy. So if we go to something like white,

for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which

actually creates white. And if we chose black, you can see that that's zero. So this is a

pretty hard thing to understand. Once you get into some of these more complicated colors.

Again, we don't really use hexadecimal in normal in normal use, when we're creating

colors or writing code, we don't really use these numbers. So it's actually much easier

to work with RGB codes. So RGB is a little bit different in the style that it's written.

But it all represents the same concept. Pretty much there are three numbers here. And these

aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the

first for red, the second for green, and the third for blue, just like this one, except

in this case, the numbers can go from zero to 255, zero being the minimum and 255 being

the maximum. So this is actually much easier to read. Let's go back to our blue here. And

I'm actually just going to write the code here. So you can see that there's zero red,

zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum.

And obviously, you can see that once we go back to those complicated colors. When you

look here, it's quite complicated to understand. But when we look at the RGB code, we can see

that there's a moderate amount of red, a large amount of green and large amounts of blue,

and therefore it should theoretically be a cold color. Now again, you don't really need

to know how to construct these QR codes from your head, they're quite hard to understand.

So what I would recommend is when you're designing these colors, or designing these, these websites,

I would recommend you just go and use a color picker, too much easy too much, much easier

to decide. And you can also get a lot more experience hands on experience with these

colors rather than memorizing all the theory behind them. So both of these will work fine

and in the next video I'm going to show you how to actually use these codes in our in

our website and actually use them to style and color text. Alright, let's move on.

So in this video, I am going to be starting to color and style our website. So we're going

to go through and use the selector skills that we've learned in the previous section

to actually go through and start adding some color. On top of that, we're going to be using

the skills we learned about hex code and RGB color codes to vary up our style or method

of coloring things. Because in the past, like I've said, we've just used some basic techniques

with CSS color codes. And now we're going to be working with our own custom colors.

So first of all, let's go ahead and start adding some classes to this website to get

it set up for our styling. So first thing I did is actually started from a clean slate

because it was getting quite messy before and I thought that it would be better if we

started from scratch. So the first thing I'm going to do is go ahead and add a class or

an ID actually, I think would be better to our title, since there's only one of them.

So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from

the skills you learned in the last section. Let's also go ahead and add some classes for

our paragraph text. And because of course, we have more than one paragraph, we're actually

going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph.

Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class

on to our other paragraphs, instead of writing it down. There we go. So the next thing I

want to do is go ahead and add some classes to this list here just for convenience. So

I'm going to go ahead and add a class for a list item. Now, obviously, we're not going

to use all of these in one go. But I was just considering to add them so that when we get

into it, we can actually go ahead and use them without having to go ahead and add these

classes every single time. So there we go, we did that. Let's also go ahead and add a

class to our link, link. And now we have our table items. We're going to leave this for

now because it might take a long time. Oh, we'll we'll style this when we get later into

our section. So there we go, we did that. Now the last thing I want to do is just go

ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some

classes. So class is form input. And this is actually quite commonplace to add, or write

class names and Id names with these. So with dashes, instead of you know snake case, which

is using capital letters in like that. It's just a convention in CSS. So let's go ahead

and add the same class here. Just like that. There we go. And we'll also we're also going

to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that.

There we go. Just copy that. And over to our other subtitles. And once we're done with

that, we'll move on and start coloring our text. Right, there we go. So everything's

looking good. That means nothing has gone wrong. Let's go ahead and start styling our

text. So first thing I want to do is style our header here. So obviously, you don't really

want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment

a little bit for this video with some of our colors. So first of all, I'm going to need

to select it. This is the first part of our general rule. So because it's an ID, I'm going

to go hash, and then title, open up our block with our curly braces. And now we're going

to start writing our property. So if you don't know this already, the property is going to

be color. This is the text of the the color of the text. And I know it doesn't look like

it since it doesn't say tech stash color, similar to a bunch of other properties. But

this is the way to color your text. So here, we can go ahead and type a property or sorry,

our value. Now before we've used colors, like steel blue, which is a CSS color code. But

now let's go ahead and challenge ourselves and start actually messing with these colors

using our own color picker. So first of all, I want to choose a color that I really like.

And I'm going to go for a sort of deep orange. So we don't want to go for something too dark.

But we also don't want to go for something too light so that it's hard on the eyes. Now

I think a color like this is good. Now how would we actually implement this? Well, we

just copy and paste it. And if you're thinking that that's the right way, well, then you're

right, it's actually very easy. All you have to do is copy your hex or RGB code and paste

it into

So in this video, I am going to be starting to color and style our website. So we're going

to go through and use the selector skills that we've learned in the previous section

to actually go through and start adding some color. On top of that, we're going to be using

the skills we learned about hex code and RGB color codes to vary up our style or method

of coloring things. Because in the past, like I've said, we've just used some basic techniques

with CSS color codes. And now we're going to be working with our own custom colors.

So first of all, let's go ahead and start adding some classes to this website to get

it set up for our styling. So first thing I did is actually started from a clean slate

because it was getting quite messy before and I thought that it would be better if we

started from scratch. So the first thing I'm going to do is go ahead and add a class or

an ID actually, I think would be better to our title, since there's only one of them.

So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from

the skills you learned in the last section. Let's also go ahead and add some classes for

our paragraph text. And because of course, we have more than one paragraph, we're actually

going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph.

Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class

on to our other paragraphs, instead of writing it down. There we go. So the next thing I

want to do is go ahead and add some classes to this list here just for convenience. So

I'm going to go ahead and add a class for a list item. Now, obviously, we're not going

to use all of these in one go. But I was just considering to add them so that when we get

into it, we can actually go ahead and use them without having to go ahead and add these

classes every single time. So there we go, we did that. Let's also go ahead and add a

class to our link, link. And now we have our table items. We're going to leave this for

now because it might take a long time. Oh, we'll we'll style this when we get later into

our section. So there we go, we did that. Now the last thing I want to do is just go

ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some

classes. So class is form input. And this is actually quite commonplace to add, or write

class names and Id names with these. So with dashes, instead of you know snake case, which

is using capital letters in like that. It's just a convention in CSS. So let's go ahead

and add the same class here. Just like that. There we go. And we'll also we're also going

to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that.

There we go. Just copy that. And over to our other subtitles. And once we're done with

that, we'll move on and start coloring our text. Right, there we go. So everything's

looking good. That means nothing has gone wrong. Let's go ahead and start styling our

text. So first thing I want to do is style our header here. So obviously, you don't really

want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment

a little bit for this video with some of our colors. So first of all, I'm going to need

to select it. This is the first part of our general rule. So because it's an ID, I'm going

to go hash, and then title, open up our block with our curly braces. And now we're going

to start writing our property. So if you don't know this already, the property is going to

be color. This is the text of the the color of the text. And I know it doesn't look like

it since it doesn't say tech stash color, similar to a bunch of other properties. But

this is the way to color your text. So here, we can go ahead and type a property or sorry,

our value. Now before we've used colors, like steel blue, which is a CSS color code. But

now let's go ahead and challenge ourselves and start actually messing with these colors

using our own color picker. So first of all, I want to choose a color that I really like.

And I'm going to go for a sort of deep orange. So we don't want to go for something too dark.

But we also don't want to go for something too light so that it's hard on the eyes. Now

I think a color like this is good. Now how would we actually implement this? Well, we

just copy and paste it. And if you're thinking that that's the right way, well, then you're

right, it's actually very easy. All you have to do is copy your hex or RGB code and paste

it into

into here just like that. Now if I go ahead and refresh the page, you can see that that

color is being reflected on our title. Now I would recommend instead of using your hex

code, go ahead and add an RGB code. And I'll tell you why later in this section, but for

now, just think that this is better because it's a little bit more flexible, and you can

change it easily. So on top of that, use an RGB color code really allows you to mess around

with the colors in a way that if you didn't know hex code you wouldn't be able to. So

for example, let's say I wanted to increase the amount of blue in this, all they would

have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you

can see that that color has completely changed by adding more blue. By doing it, we've kind

of mixed around the colors and created this pinkish color. Imagine you're working with

a color palette, instead of a digital kind of weird color mixer. Think of you have a

giant pile of red, green and blue. And what you're doing here is changing all of the proportions

to get just the color you want. So let's go ahead and change this color back to nine.

There we go. Now we have our orange color there. So let's go ahead and also style up

our, our subtitles here. And one common thing that you do with hierarchies of text. So for

example, titles and then sub titles and paragraph is usually your titles or your high up on

the hierarchy are going to have very dark colors. And then your sub titles are things

that are lower on the hierarchy are going to have around the same color scheme, but

they're going to be a little lighter. So what I'm going to do is just go ahead to my color

picker and drag this up a little bit. Of course, you could do this by just increasing all of

the values. But I actually prefer to use the color picker because I could really see what's

going on. So I'm going to choose something a little bit lighter, maybe something around

here. Again, we don't want it to be too light, because then it's going to be too hard on

the eyes. So I think I'm going to go something around here. So we're going to go ahead and

copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle,

because remember, it's a class, then I'm going to use my property color and paste in our

RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles

have been colored down. So there we know everything is working really well for now. And we're

starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again,

the whole point is to be styling a website as you go along. So I recommend you go ahead

and mess around with your own colors. Again, you can just find this color picker by going

to Google, if you don't really like it, you could always go to another color picker on

search for one. But you can go ahead choose your own colors. If you don't like orange,

you can go with blue, maybe something a little colder. It's totally up to you just get some

practice with using colors on different types of texts, and get some more practice using

CSS on your own. Alright, let's move on.

into here just like that. Now if I go ahead and refresh the page, you can see that that

color is being reflected on our title. Now I would recommend instead of using your hex

code, go ahead and add an RGB code. And I'll tell you why later in this section, but for

now, just think that this is better because it's a little bit more flexible, and you can

change it easily. So on top of that, use an RGB color code really allows you to mess around

with the colors in a way that if you didn't know hex code you wouldn't be able to. So

for example, let's say I wanted to increase the amount of blue in this, all they would

have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you

can see that that color has completely changed by adding more blue. By doing it, we've kind

of mixed around the colors and created this pinkish color. Imagine you're working with

a color palette, instead of a digital kind of weird color mixer. Think of you have a

giant pile of red, green and blue. And what you're doing here is changing all of the proportions

to get just the color you want. So let's go ahead and change this color back to nine.

There we go. Now we have our orange color there. So let's go ahead and also style up

our, our subtitles here. And one common thing that you do with hierarchies of text. So for

example, titles and then sub titles and paragraph is usually your titles or your high up on

the hierarchy are going to have very dark colors. And then your sub titles are things

that are lower on the hierarchy are going to have around the same color scheme, but

they're going to be a little lighter. So what I'm going to do is just go ahead to my color

picker and drag this up a little bit. Of course, you could do this by just increasing all of

the values. But I actually prefer to use the color picker because I could really see what's

going on. So I'm going to choose something a little bit lighter, maybe something around

here. Again, we don't want it to be too light, because then it's going to be too hard on

the eyes. So I think I'm going to go something around here. So we're going to go ahead and

copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle,

because remember, it's a class, then I'm going to use my property color and paste in our

RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles

have been colored down. So there we know everything is working really well for now. And we're

starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again,

the whole point is to be styling a website as you go along. So I recommend you go ahead

and mess around with your own colors. Again, you can just find this color picker by going

to Google, if you don't really like it, you could always go to another color picker on

search for one. But you can go ahead choose your own colors. If you don't like orange,

you can go with blue, maybe something a little colder. It's totally up to you just get some

practice with using colors on different types of texts, and get some more practice using

CSS on your own. Alright, let's move on.

So in this video, we are going to be covering background colors. Now, I know it's a little

bit intimidating considering we've never actually done backgrounds before. But it's very similar

to colors in the values that he uses. The only difference is is what it's actually styling.

So I'm going to be teaching you how to create backgrounds on your website. Now, obviously,

we're not going to go all crazy and start creating backgrounds for everything. Because

we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds

aren't really usable. Because sometimes, especially with colors, it just doesn't really look that

good. So what we're actually going to do is go through and just practice with our background

for now. So the first thing I need to do is actually look for something to create a background

on. And we all know what a background on text looked like. Now, we don't actually know why

the background goes all the way to the edge yet. We haven't gotten we haven't gotten into

layout yet. Once we do, you'll know how to change that. For now though, I think it's

really fitting to go through and style this whole page. So firstly, what selector Do we

need to use? Considering that we're trying to select everything? How are we supposed

to create a background on every single item? Do we go through and select everything and

add that background? Well, we actually look at a look at our HTML page, you can see that

all of our text here is contained inside of our body tag. So the easiest way to select

this, because again, there's only one of our body, we can just use an element selector.

So I'm going to go ahead and select it with body. So usually, you would actually put tags,

elements selectors at the top. So I'm going to go ahead and do that now. Open up our block

using those curly braces. And now we can add our background. So first of all, the property

used to Select and Color background is called background color. But we're not actually going

to use that because background is much easier considering that you can actually go and also

select images and URLs instead of colors. It's much more flexible, and I prefer using

it over background color. So I'm going to go ahead and select that as my property. So

from now, you can just go ahead and add your value. Similarly to color. You can use an

RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set

it as red And just worn your eyes because it's quite puffing. So you can see that now

our entire site has been styled red. Now, obviously, I don't want this, this doesn't

really look very good. So I'm going to go ahead and erase this property for now. And

we're going to go through and choose a color. So I would recommend choosing something a

little bit light. So I'm going to go for about a light turquoise or light blue, something

like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go

ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh

the page, you can see we have this really nice light blue, which kind of fits in with

our oranges. Now, because it's a little bit, it doesn't really look that good on this light

orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with

RGB is to just go ahead and drop all of the values this way, you stay in the same proportions,

but you're just darkening everything. So I'm going to go ahead and darken our subtitles.

So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And

this becomes 148. And obviously, these don't have to be exact, and this can become 30.

So these don't have to be exact, like I said, we're just darkening the titles, you can see,

you can see that they got a little bit darker, and it looks better on this color. Alright,

there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and

apply this to pretty much anything you want. So if I actually go ahead and style our subtitles

with our blue background, obviously, it won't look that good, but it works perfectly fine.

So there we go. That's pretty much how to add color to backgrounds. And in the next

video, I'm going to be teaching you how to actually change the type of background that

you're using. Because obviously, sometimes you want to actually change the background

and use maybe a custom image, or you want to link to an image online. So I'm going to

be teaching you how to do that in the next video. So let's just go and refresh the page.

Keep that normal. Alright, let's move on.

So in this video, we are going to be covering background colors. Now, I know it's a little

bit intimidating considering we've never actually done backgrounds before. But it's very similar

to colors in the values that he uses. The only difference is is what it's actually styling.

So I'm going to be teaching you how to create backgrounds on your website. Now, obviously,

we're not going to go all crazy and start creating backgrounds for everything. Because

we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds

aren't really usable. Because sometimes, especially with colors, it just doesn't really look that

good. So what we're actually going to do is go through and just practice with our background

for now. So the first thing I need to do is actually look for something to create a background

on. And we all know what a background on text looked like. Now, we don't actually know why

the background goes all the way to the edge yet. We haven't gotten we haven't gotten into

layout yet. Once we do, you'll know how to change that. For now though, I think it's

really fitting to go through and style this whole page. So firstly, what selector Do we

need to use? Considering that we're trying to select everything? How are we supposed

to create a background on every single item? Do we go through and select everything and

add that background? Well, we actually look at a look at our HTML page, you can see that

all of our text here is contained inside of our body tag. So the easiest way to select

this, because again, there's only one of our body, we can just use an element selector.

So I'm going to go ahead and select it with body. So usually, you would actually put tags,

elements selectors at the top. So I'm going to go ahead and do that now. Open up our block

using those curly braces. And now we can add our background. So first of all, the property

used to Select and Color background is called background color. But we're not actually going

to use that because background is much easier considering that you can actually go and also

select images and URLs instead of colors. It's much more flexible, and I prefer using

it over background color. So I'm going to go ahead and select that as my property. So

from now, you can just go ahead and add your value. Similarly to color. You can use an

RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set

it as red And just worn your eyes because it's quite puffing. So you can see that now

our entire site has been styled red. Now, obviously, I don't want this, this doesn't

really look very good. So I'm going to go ahead and erase this property for now. And

we're going to go through and choose a color. So I would recommend choosing something a

little bit light. So I'm going to go for about a light turquoise or light blue, something

like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go

ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh

the page, you can see we have this really nice light blue, which kind of fits in with

our oranges. Now, because it's a little bit, it doesn't really look that good on this light

orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with

RGB is to just go ahead and drop all of the values this way, you stay in the same proportions,

but you're just darkening everything. So I'm going to go ahead and darken our subtitles.

So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And

this becomes 148. And obviously, these don't have to be exact, and this can become 30.

So these don't have to be exact, like I said, we're just darkening the titles, you can see,

you can see that they got a little bit darker, and it looks better on this color. Alright,

there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and

apply this to pretty much anything you want. So if I actually go ahead and style our subtitles

with our blue background, obviously, it won't look that good, but it works perfectly fine.

So there we go. That's pretty much how to add color to backgrounds. And in the next

video, I'm going to be teaching you how to actually change the type of background that

you're using. Because obviously, sometimes you want to actually change the background

and use maybe a custom image, or you want to link to an image online. So I'm going to

be teaching you how to do that in the next video. So let's just go and refresh the page.

Keep that normal. Alright, let's move on.

So in this video, we're going to be looking at a different type of background in CSS.

So now that we've covered basic color types, and we've also covered a little bit of background,

and using background tracks, we're going to move on to an alternate way of creating backgrounds.

And that's through background images. So right now we know the basics of coloring, so we

were able to call it a text. Now with our own custom colors using a color picker, we

can also go ahead and use our own, you know, backgrounds and things like that with our

own colors. But now what I want to cover is looking at different types of backgrounds

themselves. So in this case, we're going to be looking at images. So first of all, when

we want to set the background to an image, we can just go ahead and add an RGB color

code, we're going to need to go and actually link to an image. So I'm going to show you

a really easy way of doing this, the first thing we're going to need is an image. And

for this method, you can actually use images with from the internet without having to download

them using URLs. So show you how to do that now. So if I go ahead and search for a landscape

image, just like this. And now we want to look for a sort of low resolution one, we

don't want to do too big, I think this will be pretty good, it's going to look a little

bit weird, but just for this purpose, we're going to use it. So now what we need to do

is get the URL link to this image. So you can do this by right clicking on it. And then

you're going to go ahead and click on copy image address. Okay, so what this is going

to do is get the actual link to the image itself. Right now this link is going to Google

Images. But what we actually need is the link to the image itself. So there we go, we have

that set up. Now we need to go ahead and add the image to the page. So under here, I'm

going to just erase this color code for now. And I'm going to show you how to add our image.

So there's this thing in CSS, they're called functions. Now, we're not really going to

go very in depth about them. But pretty much what they do is they take a few inputs, they

process them, and they give an output. So the first example of a function that we've

already used is this right here, it takes three inputs A red, a green, and a blue, does

some magic behind the scenes, and then gives us a color back. So what we're going to do

here is use another function called URL. So what this is going to do is take in the link

or to the URL, and then it's going to find that image and set it. So in quotations, it

doesn't have to be in quotations, just remember that you're going to paste in your image.

So remember, I just copied this from the image address. And now we have it here. So we have

the image. Let's go ahead and check it out on our website. So there we go. You can see

that whoops, you can see that our image is set here. Now there's a few issues, obviously

with the repetition and everything, but we're not going to be covering those until maybe

in a few videos. Where we talk about some other background properties. But there we

go for now, we've actually set our image and now it is set on our website. So when you

think of a URL, you're most likely thinking of linking to google images or some sort of

web URL. But that's not the only type of URL that we can use a URL is just a link to an

endpoint. This right here is a URL, it's just not linking to a website, it's instead linking

to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually

going to show you is that we can use these local URLs in here. So I'm going to erase

this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh

the page. And now you can see that it still works perfectly. Because again, it's linking

to an endpoint, it's just not on our website, it's instead stored on our local machine.

So there we go, we have that set up now. But there's actually another way that you can

set background images. And this goes the same for background colors. So why I like to use

the background property is because you can set anything you want in one go. You can set

it as a color as an image, and he do many other things. But instead, you can actually

use very specific properties that work for specific value. So for example, in this case,

we can use background image. And from here, we can go ahead and copy paste the URL, like

that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show

you that it still works perfectly fine. So you see I refresh the page, and it's still

working. And this goes the same for for background colors, you can go ahead and add a background

color, and then add some random RGB value just going to go for a full black for now.

And you can see that it still works. The only problem is if I go ahead and paste in that

URL here. Oh, what if I go ahead and paste in that URL here,

So in this video, we're going to be looking at a different type of background in CSS.

So now that we've covered basic color types, and we've also covered a little bit of background,

and using background tracks, we're going to move on to an alternate way of creating backgrounds.

And that's through background images. So right now we know the basics of coloring, so we

were able to call it a text. Now with our own custom colors using a color picker, we

can also go ahead and use our own, you know, backgrounds and things like that with our

own colors. But now what I want to cover is looking at different types of backgrounds

themselves. So in this case, we're going to be looking at images. So first of all, when

we want to set the background to an image, we can just go ahead and add an RGB color

code, we're going to need to go and actually link to an image. So I'm going to show you

a really easy way of doing this, the first thing we're going to need is an image. And

for this method, you can actually use images with from the internet without having to download

them using URLs. So show you how to do that now. So if I go ahead and search for a landscape

image, just like this. And now we want to look for a sort of low resolution one, we

don't want to do too big, I think this will be pretty good, it's going to look a little

bit weird, but just for this purpose, we're going to use it. So now what we need to do

is get the URL link to this image. So you can do this by right clicking on it. And then

you're going to go ahead and click on copy image address. Okay, so what this is going

to do is get the actual link to the image itself. Right now this link is going to Google

Images. But what we actually need is the link to the image itself. So there we go, we have

that set up. Now we need to go ahead and add the image to the page. So under here, I'm

going to just erase this color code for now. And I'm going to show you how to add our image.

So there's this thing in CSS, they're called functions. Now, we're not really going to

go very in depth about them. But pretty much what they do is they take a few inputs, they

process them, and they give an output. So the first example of a function that we've

already used is this right here, it takes three inputs A red, a green, and a blue, does

some magic behind the scenes, and then gives us a color back. So what we're going to do

here is use another function called URL. So what this is going to do is take in the link

or to the URL, and then it's going to find that image and set it. So in quotations, it

doesn't have to be in quotations, just remember that you're going to paste in your image.

So remember, I just copied this from the image address. And now we have it here. So we have

the image. Let's go ahead and check it out on our website. So there we go. You can see

that whoops, you can see that our image is set here. Now there's a few issues, obviously

with the repetition and everything, but we're not going to be covering those until maybe

in a few videos. Where we talk about some other background properties. But there we

go for now, we've actually set our image and now it is set on our website. So when you

think of a URL, you're most likely thinking of linking to google images or some sort of

web URL. But that's not the only type of URL that we can use a URL is just a link to an

endpoint. This right here is a URL, it's just not linking to a website, it's instead linking

to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually

going to show you is that we can use these local URLs in here. So I'm going to erase

this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh

the page. And now you can see that it still works perfectly. Because again, it's linking

to an endpoint, it's just not on our website, it's instead stored on our local machine.

So there we go, we have that set up now. But there's actually another way that you can

set background images. And this goes the same for background colors. So why I like to use

the background property is because you can set anything you want in one go. You can set

it as a color as an image, and he do many other things. But instead, you can actually

use very specific properties that work for specific value. So for example, in this case,

we can use background image. And from here, we can go ahead and copy paste the URL, like

that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show

you that it still works perfectly fine. So you see I refresh the page, and it's still

working. And this goes the same for for background colors, you can go ahead and add a background

color, and then add some random RGB value just going to go for a full black for now.

And you can see that it still works. The only problem is if I go ahead and paste in that

URL here. Oh, what if I go ahead and paste in that URL here,

just gonna link to it straight. So if I go ahead and add the URL to the color, it's not

going to work, because this is specifically for colors. Alright, so there we go. That's

pretty much it. For background images, it's quite easy to use, all you have to do is make

sure that you have a working URL, you can just test it by putting it in and seeing the

backroads loading properly. And from there, just use your URL function and a suitable

property, such as background or background image, and you should be good to go. Alright,

let's move on. So in this video, we're going to be looking at some more background properties.

Now we're not going to be looking at all of them. Because most of these aren't really

useful. And they're not really used in everyday life. But what I'm going to be doing is showing

you the main properties that you can use with backgrounds that can really change how your

backgrounds look. So we're actually going to be covering covering only two in this video.

So that's background size, and background repeat. So the first thing I want to cover

is background repeat, because I think it's the most important. So you can see we have

our background there, I already set the height and width, don't worry about these values

or the properties or anything. Again, we'll talk about those later in this in this course.

But for now, you can see that we have our background here, which is actually inside

of a div. So I set the div height and width. And now there's a background here. So I want

to mess around with this background and see what I can do. So first of all, you'll notice

that we can see here that we have so for example, two or three or four of the same image. And

pretty much what's happening is the image is being repeated, so that it can fill up

all of the content space. Now this is done by default, because again, all of the values

and pixels and the dimensions are absolute. They're not like other programs where you

can just throw a picture on there, and it'll automatically resize. When you're working

with web development. It takes those raw dimensions, it just plugs them straight into the website.

So that's why we need to do a little bit of styling. So you can see that this image is

big enough. And remember, because this is a direct image, what's happening here is we

have an image tag, and then the image is just being plugged straight in there. Whereas with

here, we don't actually have an image tag, what we have is an empty div, which is just

think of it if you don't know what that is think of it as a container. It has a width

and height of this much. But then this is an empty box. All we're doing is filling it

with this image. So instead of plugging the image straight in, we're just filling an empty

box with these images. And of course, the image isn't big enough to fill it. So what

we have to do is or what HTML actually does by default is repeat this. So if you don't

want that there is an easy way to fix it. Now it's probably not going to give you the

result that you expected. But what you're going to do is go ahead and say background

background, dash repeat Pretty much you can either set this to no repeat, which is the

default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the

default value. But if you want to set it to no repeat, this is pretty much going to remove

that repeating property. Now, although it might look like now this image is going to

cover the whole thing, watch what happens, you can see that it only takes up that small

box. And this might look like it just resized everything. But if I go ahead and add a background

color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page,

you can see what's actually happening here is that we have the image, and it's not taking

up the full image if I go ahead and set this to repeat.

just gonna link to it straight. So if I go ahead and add the URL to the color, it's not

going to work, because this is specifically for colors. Alright, so there we go. That's

pretty much it. For background images, it's quite easy to use, all you have to do is make

sure that you have a working URL, you can just test it by putting it in and seeing the

backroads loading properly. And from there, just use your URL function and a suitable

property, such as background or background image, and you should be good to go. Alright,

let's move on. So in this video, we're going to be looking at some more background properties.

Now we're not going to be looking at all of them. Because most of these aren't really

useful. And they're not really used in everyday life. But what I'm going to be doing is showing

you the main properties that you can use with backgrounds that can really change how your

backgrounds look. So we're actually going to be covering covering only two in this video.

So that's background size, and background repeat. So the first thing I want to cover

is background repeat, because I think it's the most important. So you can see we have

our background there, I already set the height and width, don't worry about these values

or the properties or anything. Again, we'll talk about those later in this in this course.

But for now, you can see that we have our background here, which is actually inside

of a div. So I set the div height and width. And now there's a background here. So I want

to mess around with this background and see what I can do. So first of all, you'll notice

that we can see here that we have so for example, two or three or four of the same image. And

pretty much what's happening is the image is being repeated, so that it can fill up

all of the content space. Now this is done by default, because again, all of the values

and pixels and the dimensions are absolute. They're not like other programs where you

can just throw a picture on there, and it'll automatically resize. When you're working

with web development. It takes those raw dimensions, it just plugs them straight into the website.

So that's why we need to do a little bit of styling. So you can see that this image is

big enough. And remember, because this is a direct image, what's happening here is we

have an image tag, and then the image is just being plugged straight in there. Whereas with

here, we don't actually have an image tag, what we have is an empty div, which is just

think of it if you don't know what that is think of it as a container. It has a width

and height of this much. But then this is an empty box. All we're doing is filling it

with this image. So instead of plugging the image straight in, we're just filling an empty

box with these images. And of course, the image isn't big enough to fill it. So what

we have to do is or what HTML actually does by default is repeat this. So if you don't

want that there is an easy way to fix it. Now it's probably not going to give you the

result that you expected. But what you're going to do is go ahead and say background

background, dash repeat Pretty much you can either set this to no repeat, which is the

default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the

default value. But if you want to set it to no repeat, this is pretty much going to remove

that repeating property. Now, although it might look like now this image is going to

cover the whole thing, watch what happens, you can see that it only takes up that small

box. And this might look like it just resized everything. But if I go ahead and add a background

color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page,

you can see what's actually happening here is that we have the image, and it's not taking

up the full image if I go ahead and set this to repeat.

Now the background is taking up the full image. So I'm actually just going to go ahead and

set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there

we go. Now that we know how to adjust the repet repetition of these backgrounds, why

don't we go ahead and actually talk about background size, because that's the important

one, that's going to allow us to fill this whole container. So first of all, now that

we know the background repeat just changes, if it repeats or not, we need to know how

to alter the size, we can do this using a property called background size. So I'm going

to go ahead and actually erase this, we don't need it for now, just like that. So you can

actually go ahead and set the size of the background. And remember, depending on whether

you set it to repeat or not, this is going to change your effect. So right now, it's

still on repeat since we removed that property. But pretty much the way to manipulate this

is the first value is going to be the height. So for example, let's say I wanted to take

up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter

the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can

see that because our repeat is actually off. Sorry, our repeat is on, we can see that it

just keeps repeating until this whole space is filled up. Now, obviously, it's going to

be pretty hard to get this exactly at the dimensions. If I actually go ahead and set

this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's

still repeating. So it's very hard to get this working in the way that you want it to

cover the whole thing exactly, even if you use the direct values. So there's actually

a keyword that you can use to fix this up. All you have to do is type cover here. So

if I go ahead and refresh, you can see now the image takes up the full width. And although

it sacrifices the quality, pretty much what's happening here is this cover value is going

to resize the image based on the dimensions just right to that it fits this whole thing.

There's also one more keyword that you can use, which is called contain. But the only

problem is with contain is it's going to resize it as much as possible. The only problem is

it trying to resize it without messing with the proportions. So let's say that this is

maybe a two to one ratio. So for every two widths, there's one height. So let's just

use that as an example. Basically, what's happening here is that no matter how much

you stretch this, you cannot go the full way without stretching it off the screen. So contain

doesn't do that. Instead, it just repeats the image. Now if we actually change this

back to cover, you can see that it does cut off part of that image because it just stretches

it out the full way until the image color or the background covers the full width. So

there you go. That's pretty much it for background size. Now I would recommend going instead

not with the sizing option pixels, but instead using the cover keyword or the contain keyword,

if you know that your proportions are right, or if you need it for some other purpose.

So yeah, pretty much those are the two main other background properties that you're going

to be using. Obviously, there's many more, but they're not as useful. And they don't

really make as much of a difference as these two. Alright, let's move on.

Now the background is taking up the full image. So I'm actually just going to go ahead and

set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there

we go. Now that we know how to adjust the repet repetition of these backgrounds, why

don't we go ahead and actually talk about background size, because that's the important

one, that's going to allow us to fill this whole container. So first of all, now that

we know the background repeat just changes, if it repeats or not, we need to know how

to alter the size, we can do this using a property called background size. So I'm going

to go ahead and actually erase this, we don't need it for now, just like that. So you can

actually go ahead and set the size of the background. And remember, depending on whether

you set it to repeat or not, this is going to change your effect. So right now, it's

still on repeat since we removed that property. But pretty much the way to manipulate this

is the first value is going to be the height. So for example, let's say I wanted to take

up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter

the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can

see that because our repeat is actually off. Sorry, our repeat is on, we can see that it

just keeps repeating until this whole space is filled up. Now, obviously, it's going to

be pretty hard to get this exactly at the dimensions. If I actually go ahead and set

this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's

still repeating. So it's very hard to get this working in the way that you want it to

cover the whole thing exactly, even if you use the direct values. So there's actually

a keyword that you can use to fix this up. All you have to do is type cover here. So

if I go ahead and refresh, you can see now the image takes up the full width. And although

it sacrifices the quality, pretty much what's happening here is this cover value is going

to resize the image based on the dimensions just right to that it fits this whole thing.

There's also one more keyword that you can use, which is called contain. But the only

problem is with contain is it's going to resize it as much as possible. The only problem is

it trying to resize it without messing with the proportions. So let's say that this is

maybe a two to one ratio. So for every two widths, there's one height. So let's just

use that as an example. Basically, what's happening here is that no matter how much

you stretch this, you cannot go the full way without stretching it off the screen. So contain

doesn't do that. Instead, it just repeats the image. Now if we actually change this

back to cover, you can see that it does cut off part of that image because it just stretches

it out the full way until the image color or the background covers the full width. So

there you go. That's pretty much it for background size. Now I would recommend going instead

not with the sizing option pixels, but instead using the cover keyword or the contain keyword,

if you know that your proportions are right, or if you need it for some other purpose.

So yeah, pretty much those are the two main other background properties that you're going

to be using. Obviously, there's many more, but they're not as useful. And they don't

really make as much of a difference as these two. Alright, let's move on.

So in this video, we're going to be talking a little bit more about RGB colors. But we're

actually going to be adding one more feature to this. So right now we've talked about RGB,

which is our basic color set. We have a red, a green and a blue. There's actually one more

that we're missing out on the can really improve the quality of our colors. And that's a or

alpha. So right now you can see we have an RGB color code. But what if we wanted to add

this mysterious alpha component? What will we do? So I'm actually going to go ahead and

use it as the background. Well, the first thing you need to do is change the RGB name

to RGB a. And in this way, we've completely changed the way the color looks. Now if we

go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha

value. So all we have to do is after green Sorry, blue, keep getting those two mixed

up. After the final value, you're gonna add another comma. And here is where you can put

any value between zero and one. So now that you know what you can do with it, alpha is

pretty much the transparency or opacity of a color zero, meaning it's completely transparent,

you can't see it at all. And one, meaning it's fully visible. Think of this in percentages.

For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way,

you can really think about opacity in a much easier way. So I'm going to go ahead and actually

set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you

can see that the color is still there, it's just a lot lighter. Now, you're probably asking

like, why don't you just go and maybe make the color lighter? Well, it's actually much

easier to control it this way. And on top of that, if you want things like maybe fading,

or you want to maybe change a color fade into a different one, you can't really just change

the color every time, because in animation, it's much easier to just change the opacity,

reduce it or increase it, then change the color every time. So it's also much easier

to use RGB a colors when you're trying to just control the overall look of a color.

So usually, when you're using just simply RGB colors, you can only get a certain look.

But once you add opacity into the mix, you can completely change the way that it looks.

So pretty much here's the takeaway they're supposed to take from this video, you can

have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now

this a value stands for alpha, or opacity or transparency, whatever you want to call

it, then this value isn't like just from zero to 255. Instead, you have to set a value between

zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero

being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent.

And then one being when it's completely visible. Alright, so that's pretty much it for this

RGBA color scheme, it's very easy to use, you don't really need to use a color picker.

For that, you can just think about how opaque you want it. And from there, you can set your

value. All right, let's move on.

So in this video, we're going to be talking a little bit more about RGB colors. But we're

actually going to be adding one more feature to this. So right now we've talked about RGB,

which is our basic color set. We have a red, a green and a blue. There's actually one more

that we're missing out on the can really improve the quality of our colors. And that's a or

alpha. So right now you can see we have an RGB color code. But what if we wanted to add

this mysterious alpha component? What will we do? So I'm actually going to go ahead and

use it as the background. Well, the first thing you need to do is change the RGB name

to RGB a. And in this way, we've completely changed the way the color looks. Now if we

go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha

value. So all we have to do is after green Sorry, blue, keep getting those two mixed

up. After the final value, you're gonna add another comma. And here is where you can put

any value between zero and one. So now that you know what you can do with it, alpha is

pretty much the transparency or opacity of a color zero, meaning it's completely transparent,

you can't see it at all. And one, meaning it's fully visible. Think of this in percentages.

For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way,

you can really think about opacity in a much easier way. So I'm going to go ahead and actually

set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you

can see that the color is still there, it's just a lot lighter. Now, you're probably asking

like, why don't you just go and maybe make the color lighter? Well, it's actually much

easier to control it this way. And on top of that, if you want things like maybe fading,

or you want to maybe change a color fade into a different one, you can't really just change

the color every time, because in animation, it's much easier to just change the opacity,

reduce it or increase it, then change the color every time. So it's also much easier

to use RGB a colors when you're trying to just control the overall look of a color.

So usually, when you're using just simply RGB colors, you can only get a certain look.

But once you add opacity into the mix, you can completely change the way that it looks.

So pretty much here's the takeaway they're supposed to take from this video, you can

have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now

this a value stands for alpha, or opacity or transparency, whatever you want to call

it, then this value isn't like just from zero to 255. Instead, you have to set a value between

zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero

being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent.

And then one being when it's completely visible. Alright, so that's pretty much it for this

RGBA color scheme, it's very easy to use, you don't really need to use a color picker.

For that, you can just think about how opaque you want it. And from there, you can set your

value. All right, let's move on.

So in this video, this is going to be talking about the last feature with using colors.

And it's a little bit hard to grasp at first. But once you start using it, you can really

get used to it. So we're going to be working with gradients in this video on for now, I'm

just going to go ahead and erase this background. And I'm just going to have a single color.

So I'm just going to say steel blue. And I'm going to also erase this color property. So

now we have a background of the steel blue color. There we go. So now it's working. So

pretty much if you don't know what a gradient is already, it's kind of a transition between

two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you

know, moves or diffuses from through the colors. So for example, you start just completely

red. And then you move up along and as as you go up, it gets more and more blue. So

you're sort of mixing between the two colors. So if you've ever done any painting before,

you're used, maybe coloring pencils, if you kind of use paint and draw between the two

colors, depending on the proportions between them, it's going to make sort of a purple

ish, and then it transitions like that. So pretty much that's what's going on here without

gradients is we're transitioning between two colors. Now of course, you can do more than

two, you can put three, four, you can put as many colors as you want. But pretty much

what you have to take away from this is that a gradient is just a transition between a

number of colors. Okay, so now that we know what a gradient is, let's go ahead and get

started adding them. So there are actually two types of gradients, radial and linear.

So radial gradients are circular, they kind of move outwards from a center. And depending

on the percentages or how much you want of each color, it's going to change the way the

gradient looks. A linear gradient on the other hand is the one that I described earlier,

a smooth red transition to blue, it could go from left to right, top to bottom and even

diagonally depending on how we define the direction later in this video when we start

creating our gradients, alright, let's get started. So the first thing I want to work

with is linear gradients. So the way to do this just with our RGBA or a URL, all we have

to do is type linear dash gradient. Just like that. And from here, we can start defining

our directions. So if you don't already know about directions already, pretty much there

are four different positions top, bottom, left and right. And you can also combine the

two to create corners. So for example, top right would be the top right corner. So first

of all, what you're going to want to do is type two. And then you're going to say the

name of the direction. So in this case, I'm just going to say two, right. So what this

is going to be saying is you want the grid to move to the right side. So it's going to

be going this way. Now, there's also another way to do this I'll talk about in just a second.

But for now, let's leave it like this. And then after your comma, you're going to add

as many colors as you want. So in this case, I'm going to add red, and blue. And remember

to separate them also by a comma. Let's go ahead and refresh and see what's happening,

you can see that we have a red slowly transitioning into a blue to the right side. So remember,

it starts with the first color and moves on. Let's go ahead and add a green in there, and

then a steel blue, and then a blue. Now we have four colors that are slowly transitioning,

we have a red, that slowly transition into a green, and then a steel blue, you can sort

of see it there and then a blue. And just saying we don't actually have to use these

name colors, I just wanted to use them because it looked it was quite easy to look at. So

what we can actually do and here's your first use for Opacity is you can go ahead and let's

just take a random color here. So to write Remember, this is starting here, we're going

to paste in that color. But then we're going to finish it with an RGB a color,

So in this video, this is going to be talking about the last feature with using colors.

And it's a little bit hard to grasp at first. But once you start using it, you can really

get used to it. So we're going to be working with gradients in this video on for now, I'm

just going to go ahead and erase this background. And I'm just going to have a single color.

So I'm just going to say steel blue. And I'm going to also erase this color property. So

now we have a background of the steel blue color. There we go. So now it's working. So

pretty much if you don't know what a gradient is already, it's kind of a transition between

two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you

know, moves or diffuses from through the colors. So for example, you start just completely

red. And then you move up along and as as you go up, it gets more and more blue. So

you're sort of mixing between the two colors. So if you've ever done any painting before,

you're used, maybe coloring pencils, if you kind of use paint and draw between the two

colors, depending on the proportions between them, it's going to make sort of a purple

ish, and then it transitions like that. So pretty much that's what's going on here without

gradients is we're transitioning between two colors. Now of course, you can do more than

two, you can put three, four, you can put as many colors as you want. But pretty much

what you have to take away from this is that a gradient is just a transition between a

number of colors. Okay, so now that we know what a gradient is, let's go ahead and get

started adding them. So there are actually two types of gradients, radial and linear.

So radial gradients are circular, they kind of move outwards from a center. And depending

on the percentages or how much you want of each color, it's going to change the way the

gradient looks. A linear gradient on the other hand is the one that I described earlier,

a smooth red transition to blue, it could go from left to right, top to bottom and even

diagonally depending on how we define the direction later in this video when we start

creating our gradients, alright, let's get started. So the first thing I want to work

with is linear gradients. So the way to do this just with our RGBA or a URL, all we have

to do is type linear dash gradient. Just like that. And from here, we can start defining

our directions. So if you don't already know about directions already, pretty much there

are four different positions top, bottom, left and right. And you can also combine the

two to create corners. So for example, top right would be the top right corner. So first

of all, what you're going to want to do is type two. And then you're going to say the

name of the direction. So in this case, I'm just going to say two, right. So what this

is going to be saying is you want the grid to move to the right side. So it's going to

be going this way. Now, there's also another way to do this I'll talk about in just a second.

But for now, let's leave it like this. And then after your comma, you're going to add

as many colors as you want. So in this case, I'm going to add red, and blue. And remember

to separate them also by a comma. Let's go ahead and refresh and see what's happening,

you can see that we have a red slowly transitioning into a blue to the right side. So remember,

it starts with the first color and moves on. Let's go ahead and add a green in there, and

then a steel blue, and then a blue. Now we have four colors that are slowly transitioning,

we have a red, that slowly transition into a green, and then a steel blue, you can sort

of see it there and then a blue. And just saying we don't actually have to use these

name colors, I just wanted to use them because it looked it was quite easy to look at. So

what we can actually do and here's your first use for Opacity is you can go ahead and let's

just take a random color here. So to write Remember, this is starting here, we're going

to paste in that color. But then we're going to finish it with an RGB a color,

like that. And pretty much what's what's going to happen is this is going to be a slowly

fading out color, just like this. So you can see what's happening is we start with a fully

functional color, which has a full track or a has no transparency at all. And we slowly

slowly make it fade more and more out until we can't see the picture at all, or the color

in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty

much it for linear gradients. Let's talk about actually making diagonal gradients now. So

we know that we can have to write, we can also have to top for example, if you wanted

to start from the start from the bottom, just like that. And you can see now it goes up.

But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom

right corner, what you would do is just type it out like this to bottom right. Now if we

refresh the page, you can see that it slowly goes down and fades out just at the bottom

right. So there we go. That's pretty much it for positioning. But there's actually another

way to do this, and it's through angles. So if you don't already know how to use angles,

then you can pretty much skip this step because it's quite hard to get the use of it. But

once you learn how to actually work with angles, and you know how to, you know, move them around

things like that, it becomes very easy to work with them. So let's say you wanted them

to go in a very specific direction. So for example, you wanted it to end somewhere here.

Now, obviously, you can't use words for positioning, because they only work at certain places such

as the corners. So if you wanted to do this, you're going to have to go ahead and use angles.

So first thing I'm going to do is go ahead and erase this part because we're not using

positioning, and then we're going to go ahead and type our angle. So the first thing I'm

going to do is define the place that I wanted to end. So let's say this time I wanted to

add on the left here. So what I'm going to do is go ahead and say minus 90, because remember

what's happening here is we want it to just flip completely around. So let's say this

is our starting angle is zero, and we go all the way down minus 90. So if you don't already

know 90 is kind of a quarter turn. And what's going to happen is from here, we can type

D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead

and refresh the page. You can see that now it goes from right to left. Now this is a

pretty bad example considering we can just do this normally, by typing to left. Well,

why don't we go ahead and choose something a little bit more specific. So I'm going to

go 146 degrees. So just remember that pointing upwards is kind of the starting position.

And then we turn 90 degrees, and then just a little bit over halfway. And I think that's

not a very good example. So I'm going to go with 160. Now you can see once I refresh the

page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead

and add something like maybe 215 or something like that, go ahead and refresh, you can see

that they are ending in different places, it's a lot more specific. Now, it's not very

obvious with this kind of fading color. But what's happening here is we can directly control

where we want our gradient to end. So that's one way of using linear gradients. Now let's

go ahead and talk about the next type of gradient, which are radial gradients. So first of all,

I'm just going to erase this whole thing here because I don't really need it. Now, radial

gradients don't work in the same way that linear ones do instead of having a specified

direction. So for example, you want to go from Right to left or from top to bottom,

instead, what happens is we can actually define the percentages or proportions of each color

that we want. The next thing I'm going to talk about is actually this background size.

So one thing you need to note is that you cannot specify the cover, background size

or anything like that for these radial gradients, because they just won't work. So what we're

gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our

radial gradient. So I'm going to go ahead and type radio dash gradient,

like that. And pretty much what's what's going to happen is this is going to be a slowly

fading out color, just like this. So you can see what's happening is we start with a fully

functional color, which has a full track or a has no transparency at all. And we slowly

slowly make it fade more and more out until we can't see the picture at all, or the color

in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty

much it for linear gradients. Let's talk about actually making diagonal gradients now. So

we know that we can have to write, we can also have to top for example, if you wanted

to start from the start from the bottom, just like that. And you can see now it goes up.

But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom

right corner, what you would do is just type it out like this to bottom right. Now if we

refresh the page, you can see that it slowly goes down and fades out just at the bottom

right. So there we go. That's pretty much it for positioning. But there's actually another

way to do this, and it's through angles. So if you don't already know how to use angles,

then you can pretty much skip this step because it's quite hard to get the use of it. But

once you learn how to actually work with angles, and you know how to, you know, move them around

things like that, it becomes very easy to work with them. So let's say you wanted them

to go in a very specific direction. So for example, you wanted it to end somewhere here.

Now, obviously, you can't use words for positioning, because they only work at certain places such

as the corners. So if you wanted to do this, you're going to have to go ahead and use angles.

So first thing I'm going to do is go ahead and erase this part because we're not using

positioning, and then we're going to go ahead and type our angle. So the first thing I'm

going to do is define the place that I wanted to end. So let's say this time I wanted to

add on the left here. So what I'm going to do is go ahead and say minus 90, because remember

what's happening here is we want it to just flip completely around. So let's say this

is our starting angle is zero, and we go all the way down minus 90. So if you don't already

know 90 is kind of a quarter turn. And what's going to happen is from here, we can type

D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead

and refresh the page. You can see that now it goes from right to left. Now this is a

pretty bad example considering we can just do this normally, by typing to left. Well,

why don't we go ahead and choose something a little bit more specific. So I'm going to

go 146 degrees. So just remember that pointing upwards is kind of the starting position.

And then we turn 90 degrees, and then just a little bit over halfway. And I think that's

not a very good example. So I'm going to go with 160. Now you can see once I refresh the

page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead

and add something like maybe 215 or something like that, go ahead and refresh, you can see

that they are ending in different places, it's a lot more specific. Now, it's not very

obvious with this kind of fading color. But what's happening here is we can directly control

where we want our gradient to end. So that's one way of using linear gradients. Now let's

go ahead and talk about the next type of gradient, which are radial gradients. So first of all,

I'm just going to erase this whole thing here because I don't really need it. Now, radial

gradients don't work in the same way that linear ones do instead of having a specified

direction. So for example, you want to go from Right to left or from top to bottom,

instead, what happens is we can actually define the percentages or proportions of each color

that we want. The next thing I'm going to talk about is actually this background size.

So one thing you need to note is that you cannot specify the cover, background size

or anything like that for these radial gradients, because they just won't work. So what we're

gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our

radial gradient. So I'm going to go ahead and type radio dash gradient,

just like that. And now what we can do is specify a certain amount of colors. So for

example, I'm just going to start out with red and blue. Now if we refresh the page,

you can see it starts off red, and ends and blue. But we can actually add more than two

colors, just like with our, our linear gradient there, what we can actually do is go ahead

and type in let's For example, let's just say green as an example. Now if we refresh

the page, you can see that we've added a third color. Now, if we wanted to change the proportions,

so for example, let's pretend that this blue is taking up too much space, we don't want

that much, we can actually specify how much we want of each. So let's change the proportions,

what we can do is go ahead and add percentages. So what I'm going to do first is go and specify

what I want here. Now one thing to note is that these have to be in order, you have to

have the minimum percentage, or the smallest percentage at the start, and then the largest

at the finish. So I'm going to go ahead and start off with something small, like 20%,

then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead and refresh

the page, you can see that there is a lot more green and a lot less blue, and red. So

the final thing I want to cover for radial gradients is the shape. Now you can actually

specify the shape that you want. Now right now I have an ellipse or sort of oval shape,

we can actually change it, all we have to do is type the name of the shape. Now there

are two values, you can put here ellipse, which is the default, and circle, I'm going

to go ahead and type circle. Now if I go ahead and refresh, you can see that this is in a

much more circular shape, rather than the previous oval. And although it's not a perfect

circle, obviously, our proportions aren't going to change what it looks like. Alright,

so that's pretty much it for gradients. There's quite a lot to learn about these. And there's

a lot more features that you can cover. But for now, I think this is great. Now what I'm

going to do is go ahead and just create another gradient, another linear gradient right under

this one, just so you can see what it looks like. So for example, I'm going to go ahead,

and maybe let's just go for the body background for now, I'm going to go ahead and actually

add a linear gradient gradient here. And I'm going to say, let's just say to bottom, because

again, we wanted this kind of stretch from top to bottom. So now what we're going to

do is start off very strong. So we're going to have our main RGBA color, or RGB, whoops,

our main color here. So I'm going to copy this. So this is going to be a fully, fully

visible color, starting from the top, and then we're going to end with a much less visible

color. So there you go. Now let's go ahead and refresh the page. And you can see that

maybe there's a little bit of an error there. Oh, yeah, forgot to spell it. There we go.

Now we can go ahead and refresh. And you can see it's still not working so much errors,

you're probably Yep, forgot the got the parentheses there. Just make sure that you're doing this,

right, because sometimes you can make some silly errors. So for example, if you look

here, we were actually we were missing a bracket. So now if we go ahead and refresh, there we

go. It's a lot better now. So we start off with a nice, fully visible color, and we end

off with a less visible color. Alright, so there we go. That's pretty much it for gradients,

you can go ahead and download this file from the project, you can go ahead and look at

how everything works here, mess around with it, see what you can do, because there is

a lot to gradients and although they're not used everyday, they're still very useful tools,

and they can really help you out in your web development careers. Alright, let's move on.

just like that. And now what we can do is specify a certain amount of colors. So for

example, I'm just going to start out with red and blue. Now if we refresh the page,

you can see it starts off red, and ends and blue. But we can actually add more than two

colors, just like with our, our linear gradient there, what we can actually do is go ahead

and type in let's For example, let's just say green as an example. Now if we refresh

the page, you can see that we've added a third color. Now, if we wanted to change the proportions,

so for example, let's pretend that this blue is taking up too much space, we don't want

that much, we can actually specify how much we want of each. So let's change the proportions,

what we can do is go ahead and add percentages. So what I'm going to do first is go and specify

what I want here. Now one thing to note is that these have to be in order, you have to

have the minimum percentage, or the smallest percentage at the start, and then the largest

at the finish. So I'm going to go ahead and start off with something small,

like 20%, then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead

and refresh the page, you can see that there is a lot more green and a lot less blue, and

red. So the final thing I want to cover for radial gradients is the shape. Now you can

actually specify the shape that you want. Now right now I have an ellipse or sort of

oval shape, we can actually change it, all we have to do is type the name of the shape.

Now there are two values, you can put here ellipse, which is the default, and circle,

I'm going to go ahead and type circle. Now if I go ahead and refresh, you can see that

this is in a much more circular shape, rather than the previous oval. And although it's

not a perfect circle, obviously, our proportions aren't going to change what it looks like.

Alright, so that's pretty much it for gradients. There's quite a lot to learn about these.

And there's a lot more features that you can cover. But for now, I think this is great.

Now what I'm going to do is go ahead and just create another gradient, another linear gradient

right under this one, just so you can see what it looks like. So for example, I'm going

to go ahead, and maybe let's just go for the body background for now, I'm going to go ahead

and actually add a linear gradient gradient here. And I'm going to say, let's just say

to bottom, because again, we wanted this kind of stretch from top to bottom. So now what

we're going to do is start off very strong. So we're going to have our main RGBA color,

or RGB, whoops, our main color here. So I'm going to copy this. So this is going to be

a fully, fully visible color, starting from the top, and then we're going to end with

a much less visible color. So there you go. Now let's go ahead and refresh the page. And

you can see that maybe there's a little bit of an error there. Oh, yeah, forgot to spell

it. There we go. Now we can go ahead and refresh. And you can see it's still not working so

much errors, you're probably Yep, forgot the got the parentheses there. Just make sure

that you're doing this, right, because sometimes you can make some silly errors. So for example,

if you look here, we were actually we were missing a bracket. So now if we go ahead and

refresh, there we go. It's a lot better now. So we start off with a nice, fully visible

color, and we end off with a less visible color. Alright, so there we go. That's pretty

much it for gradients, you can go ahead and download this file from the project, you can

go ahead and look at how everything works here, mess around with it, see what you can

do, because there is a lot to gradients and although they're not used everyday, they're

still very useful tools, and they can really help you out in your web development careers.

Alright, let's move on.

So in this video, we're going to be talking about some of the different types of units

in CSS. So so far, we've been working with some basic coloring techniques, we've learned

about selectors, and then different properties. And then we've learned about some of these

different values, but we haven't actually learned what all of these different things

mean this this PX this percentage, and we don't actually know how they work. So what

I'm going to be doing today is talking about some of the different types of units and how

you can identify which one to use. So first thing I want to talk about is the difference

between the two types of units which are absolute units, and rarely have units. So firstly,

we have to talk about some of the units we've already been using, for example, pixels. Now

pixels is a little bit special, I'll explain you. I'll explain it to you in just a second.

But pretty much the commonly used absolute units are things like centimeters, millimeters

and inches, which are absolute, they it's not dependent on anything else. If you set

it as one inch, it's going to be one inch long, no matter if you're doing it on a phone,

or an ultra wide TV. So that's what absolute units are, they aren't affected by anything

around them. The second group are relative units. And these are a little bit different.

Relative units are usually dependent on something. So for example, our percentage unit here is

dependent on the parent elements while unit. So for example, if this service image here

or here, has a width of 70%, that means that the parent element of this service image or

this service image right here, which in this case is our body, take 70% of its width of

its total width. So the whole way through of the body is 100%. And 70% is going to be

somewhere around here, because that's what we set it as now notice that when I start

resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't

work because I haven't refreshed the page. But you can see, no matter how small I make

it, it's only going to take up 70% of the total body width. So this is really good for

something like a responsive design. Because what happens is when you're using absolute

units in a responsive design, let's say you set this width as 200 pixels on a phone, it's

going to appear very large, whereas on an ultra wide TV, it's going to appear too small.

So using something like percentages would be very useful, because then you could resize

your window here, however you like it and still have that look that you want. So that's

pretty much it for percentages. But there's also a lot of different relative values that

we can use. And I'm going to go through all of these in just a second. But the first thing

I want to talk about is this special unit, which is pixels. Now pixels is a little bit

different. Now, although it is considered an absolute unit, it is actually relatively

scale based on what device you're on. So if you don't already know your screen right now

that you're watching this video on is made up of a bunch of little tiny pixels. Now there's

this concept in computing, it's called DPI, it's pretty much used to calculate the resolution

of your screen. And depending on the number of pixels you have, the resolution is going

to change. So on low DPI, tablets or things like that, anything that has a very low resolution.

So for example, if you're on YouTube, and you've changed your resolution to four ADP,

what's going to happen is then the video is going to sort of adjust how many pixels are

in that video. Now, I'm not going to get too deep into how pixels are changed and things

like that. But pretty much what happens is on high resolution devices, these pixels aren't

going to appear the same as on low resolution devices, because obviously, this is taking

up only 400 pixels of height. And if you have an ultra high display a very high definition

TV 400 pixels is only going to be about half of what it is here. So what actually happens

in this is on these high DPI displays, each pixel in this unit is actually taking up multiple

pixels relative to the resolution of the display. So for example, on a TV, every pixel, according

to this height would actually take up something like four pixels. So this is to give it that

absolute illusion. Now although it is in theory, or at its core relative, when you're when

you're actually using it, it is an absolute value. So that's just one thing you need to

keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like

that. But we're not focusing on that. For now, we're just focusing on how we can use

different values for different things. So let's go ahead and cover some of the different

units that we can use for absolute unit. So the easiest way to do this is through changing

the size of the text. Now again, we're going to cover this much later in this section.

So don't worry about that too much. So the first one we can use is centimeters. So I

can see the font size is two centimeters. Now, if I refresh the page, you can see that

it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you

would get two centimeters. There's also many more such as millimeters and inches and pretty

much everything in between. So you can see that's also a lot smaller. So we have our

standard pixels here, but there's actually a few more that we can use. Now they're not

very they're not used that commonly so I'm not really going to go over them that much.

But there Is he there, there are some other units that you can use instead of pixels that

kind of follow that same formula. So there is something called PT, which are points,

and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can

see that that actually gets a little bit taller. Go ahead and change that back to pixels, you

can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar

to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger

it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it

is. So there we go. That's just a little bit of some of the other absolute values. Now

let's cover relative values. So the first one, the first one that we actually already

covered was percentage. So we already looked at, you know, our percent symbol over here,

which pretty much takes up, again, a certain size or whatever value of its parent element.

But there's actually many more that I want to cover. The first one I'm going to look

at is E M. So pretty much what if what I do here is it's going to represent the size relative

to the current standard font size. So let's just pretend that we know that this font size

is value, let's just call it F, what's going to happen is if we set the body font size

to two, em, you're going to double everything or double it based on F, which is our font

size. So if I set to em here, just like that, and go ahead and refresh the page, you can

see that all of the text is double the standard font size. So again, this is completely relative

to the standard font size. So I'm actually going to go ahead and erase this here and

start using style tags. Instead, I feel like it's just going to be a lot easier to you

know, move around and easy, easily move that around. So now we've covered percent an EM

so those are the two main types of relative units. But there's actually two more that

I want to cover, which is view width and view height. So in web design, and in development,

in general, there's this thing called the viewport, which is pretty much the dimensions

of whatever you're viewing it on. So in this case, our viewport would be the bodies width,

and then the bodies height. So VW and VH, view, view width and view height actually

allow you to work with

So in this video, we're going to be talking about some of the different types of units

in CSS. So so far, we've been working with some basic coloring techniques, we've learned

about selectors, and then different properties. And then we've learned about some of these

different values, but we haven't actually learned what all of these different things

mean this this PX this percentage, and we don't actually know how they work. So what

I'm going to be doing today is talking about some of the different types of units and how

you can identify which one to use. So first thing I want to talk about is the difference

between the two types of units which are absolute units, and rarely have units. So firstly,

we have to talk about some of the units we've already been using, for example, pixels. Now

pixels is a little bit special, I'll explain you. I'll explain it to you in just a second.

But pretty much the commonly used absolute units are things like centimeters, millimeters

and inches, which are absolute, they it's not dependent on anything else. If you set

it as one inch, it's going to be one inch long, no matter if you're doing it on a phone,

or an ultra wide TV. So that's what absolute units are, they aren't affected by anything

around them. The second group are relative units. And these are a little bit different.

Relative units are usually dependent on something. So for example, our percentage unit here is

dependent on the parent elements while unit. So for example, if this service image here

or here, has a width of 70%, that means that the parent element of this service image or

this service image right here, which in this case is our body, take 70% of its width of

its total width. So the whole way through of the body is 100%. And 70% is going to be

somewhere around here, because that's what we set it as now notice that when I start

resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't

work because I haven't refreshed the page. But you can see, no matter how small I make

it, it's only going to take up 70% of the total body width. So this is really good for

something like a responsive design. Because what happens is when you're using absolute

units in a responsive design, let's say you set this width as 200 pixels on a phone, it's

going to appear very large, whereas on an ultra wide TV, it's going to appear too small.

So using something like percentages would be very useful, because then you could resize

your window here, however you like it and still have that look that you want. So that's

pretty much it for percentages. But there's also a lot of different relative values that

we can use. And I'm going to go through all of these in just a second. But the first thing

I want to talk about is this special unit, which is pixels. Now pixels is a little bit

different. Now, although it is considered an absolute unit, it is actually relatively

scale based on what device you're on. So if you don't already know your screen right now

that you're watching this video on is made up of a bunch of little tiny pixels. Now there's

this concept in computing, it's called DPI, it's pretty much used to calculate the resolution

of your screen. And depending on the number of pixels you have, the resolution is going

to change. So on low DPI, tablets or things like that, anything that has a very low resolution.

So for example, if you're on YouTube, and you've changed your resolution to four ADP,

what's going to happen is then the video is going to sort of adjust how many pixels are

in that video. Now, I'm not going to get too deep into how pixels are changed and things

like that. But pretty much what happens is on high resolution devices, these pixels aren't

going to appear the same as on low resolution devices, because obviously, this is taking

up only 400 pixels of height. And if you have an ultra high display a very high definition

TV 400 pixels is only going to be about half of what it is here. So what actually happens

in this is on these high DPI displays, each pixel in this unit is actually taking up multiple

pixels relative to the resolution of the display. So for example, on a TV, every pixel, according

to this height would actually take up something like four pixels. So this is to give it that

absolute illusion. Now although it is in theory, or at its core relative, when you're when

you're actually using it, it is an absolute value. So that's just one thing you need to

keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like

that. But we're not focusing on that. For now, we're just focusing on how we can use

different values for different things. So let's go ahead and cover some of the different

units that we can use for absolute unit. So the easiest way to do this is through changing

the size of the text. Now again, we're going to cover this much later in this section.

So don't worry about that too much. So the first one we can use is centimeters. So I

can see the font size is two centimeters. Now, if I refresh the page, you can see that

it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you

would get two centimeters. There's also many more such as millimeters and inches and pretty

much everything in between. So you can see that's also a lot smaller. So we have our

standard pixels here, but there's actually a few more that we can use. Now they're not

very they're not used that commonly so I'm not really going to go over them that much.

But there Is he there, there are some other units that you can use instead of pixels that

kind of follow that same formula. So there is something called PT, which are points,

and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can

see that that actually gets a little bit taller. Go ahead and change that back to pixels, you

can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar

to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger

it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it

is. So there we go. That's just a little bit of some of the other absolute values. Now

let's cover relative values. So the first one, the first one that we actually already

covered was percentage. So we already looked at, you know, our percent symbol over here,

which pretty much takes up, again, a certain size or whatever value of its parent element.

But there's actually many more that I want to cover. The first one I'm going to look

at is E M. So pretty much what if what I do here is it's going to represent the size relative

to the current standard font size. So let's just pretend that we know that this font size

is value, let's just call it F, what's going to happen is if we set the body font size

to two, em, you're going to double everything or double it based on F, which is our font

size. So if I set to em here, just like that, and go ahead and refresh the page, you can

see that all of the text is double the standard font size. So again, this is completely relative

to the standard font size. So I'm actually going to go ahead and erase this here and

start using style tags. Instead, I feel like it's just going to be a lot easier to you

know, move around and easy, easily move that around. So now we've covered percent an EM

so those are the two main types of relative units. But there's actually two more that

I want to cover, which is view width and view height. So in web design, and in development,

in general, there's this thing called the viewport, which is pretty much the dimensions

of whatever you're viewing it on. So in this case, our viewport would be the bodies width,

and then the bodies height. So VW and VH, view, view width and view height actually

allow you to work with

work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total

body width or body height. So remember, this isn't based on the parent element, this is

based on the total viewport, this could be the HTML document the body tag, it depends

on what you're viewing it on. So for example, if I go ahead and change the width here to

70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously,

if I go ahead and refresh the page, you can see it gets just a little bit bigger because

there's actually a viewport itself is bigger than the body tag, which is the parent element.

Now we'll talk about that later in the course, because it's quite advanced. But what you

can see here is that right here, it doesn't actually affect it because the body is almost

completely equivalent to the viewport. But for example, if we wanted to set the font

size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would

actually look completely different from 70 v w, which is 70% of the total viewport. So

that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't

have to be completely set in stone. So if I actually wanted to say VH. So 400 times

1% of the view height, what would happen here is that this image would become four times

the total height of the viewport. So that's just also one thing to keep in mind. So I'm

going to go ahead and change this back to pixels. We'll just keep that with the same

because it doesn't really make that much of an impact. Okay, so there we go. Those are

some of the different units in CSS, I've actually attached a little reference sheet that you

can use, you can refer to, to this to this lecture, you can go ahead click on it. And

if you want to revise any of these you can, but just a fair warning, you're not really

going to be using a lot of these units, the main ones you're going to use, you're most

likely pixels and percent. But for some cases, you're going to want to use some other units.

So although absolute units are still useful in some cases, so for example, if you want

a very specific dimensions or viewport on your screen, so for example, if you only want

users to access something on the phone, then or a very specific phone, then you can go

ahead and use pixels because it's going to look the same no matter what phone people

use, because it's all going to be the same. The only problem is is when people start using

different devices using absolute values are going to look very different based on On what

device you're using. And that's why you should kind of stick to using these, these relative

units instead of using things like pixels, centimeters and millimeters. So things like

em percent view width and view height would be very, very useful, because then you can

scale it based on whatever device you want. So for example, it's going to look the same,

or at least this width, whether you're using it on a phone, or a desktop computer, because

again, it takes up 70% of the width no matter what it is. So that's just some of the basics

about some of these units. Now, like I said, you don't need to know these by heart, you

can just go ahead and keep them at the back of your head. And once we start using them

and start using them in our, you know, font layout, things like that, we'll actually start

using these units a lot more, and they will make a lot more sense. So this is just a quick

introduction to these units and why we should use them. And you're not supposed to be going

ahead and you know, completely mastering every single one by now. Alright, let's move on.

work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total

body width or body height. So remember, this isn't based on the parent element, this is

based on the total viewport, this could be the HTML document the body tag, it depends

on what you're viewing it on. So for example, if I go ahead and change the width here to

70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously,

if I go ahead and refresh the page, you can see it gets just a little bit bigger because

there's actually a viewport itself is bigger than the body tag, which is the parent element.

Now we'll talk about that later in the course, because it's quite advanced. But what you

can see here is that right here, it doesn't actually affect it because the body is almost

completely equivalent to the viewport. But for example, if we wanted to set the font

size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would

actually look completely different from 70 v w, which is 70% of the total viewport. So

that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't

have to be completely set in stone. So if I actually wanted to say VH. So 400 times

1% of the view height, what would happen here is that this image would become four times

the total height of the viewport. So that's just also one thing to keep in mind. So I'm

going to go ahead and change this back to pixels. We'll just keep that with the same

because it doesn't really make that much of an impact. Okay, so there we go. Those are

some of the different units in CSS, I've actually attached a little reference sheet that you

can use, you can refer to, to this to this lecture, you can go ahead click on it. And

if you want to revise any of these you can, but just a fair warning, you're not really

going to be using a lot of these units, the main ones you're going to use, you're most

likely pixels and percent. But for some cases, you're going to want to use some other units.

So although absolute units are still useful in some cases, so for example, if you want

a very specific dimensions or viewport on your screen, so for example, if you only want

users to access something on the phone, then or a very specific phone, then you can go

ahead and use pixels because it's going to look the same no matter what phone people

use, because it's all going to be the same. The only problem is is when people start using

different devices using absolute values are going to look very different based on On what

device you're using. And that's why you should kind of stick to using these, these relative

units instead of using things like pixels, centimeters and millimeters. So things like

em percent view width and view height would be very, very useful, because then you can

scale it based on whatever device you want. So for example, it's going to look the same,

or at least this width, whether you're using it on a phone, or a desktop computer, because

again, it takes up 70% of the width no matter what it is. So that's just some of the basics

about some of these units. Now, like I said, you don't need to know these by heart, you

can just go ahead and keep them at the back of your head. And once we start using them

and start using them in our, you know, font layout, things like that, we'll actually start

using these units a lot more, and they will make a lot more sense. So this is just a quick

introduction to these units and why we should use them. And you're not supposed to be going

ahead and you know, completely mastering every single one by now. Alright, let's move on.

So the next few videos are going to be focused on font and text manipulation. So we're going

to be working with actually changing how this text looks. First thing I want to talk about

is there's actually two parts to this section, text manipulation and font manipulation. And

although they sound like the same thing, they're actually very different. So the first part

in this video, we're going to be covering text manipulation. Now, there's not that much

to look at. But pretty much the difference between the two is that text manipulation

is looking at things that you can change no matter the font. So for example, something

like sizing would not apply, because the size is going to be based obviously on the font

itself. So basically, things like underlining or capitalization are going to be completely

regardless of the font, you can change them no matter what they do. But things like bolding

and things like size, bolding, things like that, they are completely dependent on the

font, because again, the font decides how it how the font itself is going to look. So

it decides the size, the bolding, and just the overall style. So the first part in this

video, we're going to be covering text manipulation. And in the next few videos, we're going to

be looking at actual font manipulation. So things like external fonts, which is probably

the most exciting part of this course, and things like weight and bolding. Alright, let's

get started. So the first two things I want to cover are text decoration and text transform.

So these are properties that are going to be relating to the style of the text. Now

I know I just said that fonts. And mostly styling is dependent on the font. But in this

case, these these properties don't actually rely on the font at all. So let's get started.

So the first thing I'm going to talk about is text decoration. So although it sounds

like you can do a bunch of cool things with this, the only real thing that you can do

is change the lining of the text. So we're going to go ahead and work with this anchor

tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually,

we can just go ahead and select it. So I'm going to go dot link, like that. And now what

I can actually do is change the lining of this right here. So by default, anchor tags

have a text decoration of underline, there's actually three more properties that we can

use. So that the property to use it, it's called text dash decoration, it's pretty obvious.

Now the first one I'm going to look at is none. So this completely removes the line

from our links, they're completely gone, you don't have them anymore. The next one, which

is the one by default is underlined, like that. So that's our normal link, then you

have line through which is line dash through. And it's pretty obvious what that does just

put the line straight through. And then of course, there's the overlying which is the

line on the top. So there we go. Now we have a line on the top. Now, although you won't

see the the two that we just showed line through and overlap very commonly, it is very common

to see underline and text decoration none applied. Because sometimes I'm sure you've

seen this in websites all over the place, you can hover over links, and they may be

changed color. Again, we'll be learning how to do that in this course. But you know, they

might change color and do all sorts of things, but you usually don't see them with an underline.

So that's where this property comes into play. So I'm just going to change this back to underline,

just to make things a little interesting. Next thing I'm going to do is go ahead and

cover the next property, which in this case is text transform. So you can see that we

have a bunch of text here. And let's say maybe we're working as a freelancer and our client

wants us to capitalize all of our text. How are we going to do that? Now obviously, we're

not going to go through and capitalize every single individual word that's going to basically

be suicide. Although it is possible, it could take a lot of time. So the easiest way to

do it is using the text transform property. So I'm just going to go ahead and do this

on the whole body. For now, the property to this is text dash transform, pretty easy to

memorize, or learn these because they don't really require any weird memorization tactics.

So now what you can do is go ahead and add our value. So there are three different values

that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize

everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every

single word is capitalized without us having having to actually change the text. You can

also go ahead and use the other two, which are lowercase and uppercase.

So the next few videos are going to be focused on font and text manipulation. So we're going

to be working with actually changing how this text looks. First thing I want to talk about

is there's actually two parts to this section, text manipulation and font manipulation. And

although they sound like the same thing, they're actually very different. So the first part

in this video, we're going to be covering text manipulation. Now, there's not that much

to look at. But pretty much the difference between the two is that text manipulation

is looking at things that you can change no matter the font. So for example, something

like sizing would not apply, because the size is going to be based obviously on the font

itself. So basically, things like underlining or capitalization are going to be completely

regardless of the font, you can change them no matter what they do. But things like bolding

and things like size, bolding, things like that, they are completely dependent on the

font, because again, the font decides how it how the font itself is going to look. So

it decides the size, the bolding, and just the overall style. So the first part in this

video, we're going to be covering text manipulation. And in the next few videos, we're going to

be looking at actual font manipulation. So things like external fonts, which is probably

the most exciting part of this course, and things like weight and bolding. Alright, let's

get started. So the first two things I want to cover are text decoration and text transform.

So these are properties that are going to be relating to the style of the text. Now

I know I just said that fonts. And mostly styling is dependent on the font. But in this

case, these these properties don't actually rely on the font at all. So let's get started.

So the first thing I'm going to talk about is text decoration. So although it sounds

like you can do a bunch of cool things with this, the only real thing that you can do

is change the lining of the text. So we're going to go ahead and work with this anchor

tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually,

we can just go ahead and select it. So I'm going to go dot link, like that. And now what

I can actually do is change the lining of this right here. So by default, anchor tags

have a text decoration of underline, there's actually three more properties that we can

use. So that the property to use it, it's called text dash decoration, it's pretty obvious.

Now the first one I'm going to look at is none. So this completely removes the line

from our links, they're completely gone, you don't have them anymore. The next one, which

is the one by default is underlined, like that. So that's our normal link, then you

have line through which is line dash through. And it's pretty obvious what that does just

put the line straight through. And then of course, there's the overlying which is the

line on the top. So there we go. Now we have a line on the top. Now, although you won't

see the the two that we just showed line through and overlap very commonly, it is very common

to see underline and text decoration none applied. Because sometimes I'm sure you've

seen this in websites all over the place, you can hover over links, and they may be

changed color. Again, we'll be learning how to do that in this course. But you know, they

might change color and do all sorts of things, but you usually don't see them with an underline.

So that's where this property comes into play. So I'm just going to change this back to underline,

just to make things a little interesting. Next thing I'm going to do is go ahead and

cover the next property, which in this case is text transform. So you can see that we

have a bunch of text here. And let's say maybe we're working as a freelancer and our client

wants us to capitalize all of our text. How are we going to do that? Now obviously, we're

not going to go through and capitalize every single individual word that's going to basically

be suicide. Although it is possible, it could take a lot of time. So the easiest way to

do it is using the text transform property. So I'm just going to go ahead and do this

on the whole body. For now, the property to this is text dash transform, pretty easy to

memorize, or learn these because they don't really require any weird memorization tactics.

So now what you can do is go ahead and add our value. So there are three different values

that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize

everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every

single word is capitalized without us having having to actually change the text. You can

also go ahead and use the other two, which are lowercase and uppercase.

And that will obviously put everything in uppercase for you. But now you're starting

to see a little bit about why these are text manipulation and not font manipulation. Again,

it doesn't matter what font you're using, whether you're using some weird symbol font,

or Times New Roman, you can always use these to capitalize it, no matter what the font

is. On top of that, you can also move around these lines, it's not dependent on the font

at all. So that's just a little bit about our text manipulation properties. So the next

feature I want to cover is text align. So this is a little bit different from the other

two that we've covered. Because it's not really focused on the styling or decoration of our

text. Instead, it's going to be focused on the justification or alignment of it. So if

you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like

that, you'll know that you can justify your text and align it to your site. So there are

four main ones that are included in CSS left, right, center and justify. So I'm going to

breeze through the quick the first three ones, because it's quite easy to use. But then the

last one I'm going to talk about a little bit in more detail. So in order to achieve

this, you can go ahead and add text align property. And here, I'm just going to go center

as an example. And you can see that now everything is aligned. So the list items are a little

bit weird, they don't actually move the decoration to the center, when you align it to the center,

but other than that all of the text is now aligned to the center. So now let's talk about

justify. Now we're not going to go through left and right, because we already know that

but what justify actually does, I'm just gonna show you here is pretty much it takes all

of the text, and it kind of matches it. So it's all fit in the same way, if you if it

makes sense. So although it might not fit everything, the same length, what happens

is all of this text is now stretched out as far as possible. So although you might not

be able to see a direct difference, let's just look at this paragraph here, we're going

to just end off this property without changing it, you can see that without the justify alignment,

all of these are different. So what actually what the justify actually does is it sets

all of the lines to the same length. So I'm going to go ahead and add that justify back.

So you can see this used a lot in research papers, and, you know, academic papers, essays,

things like that. This justification is used a lot. And although it's not very, it's not

really used very commonly, it's still a very good feature if you have big bodies of text,

if you're trying to you know, make everything look very streamlined. Alright, there we go.

So those are the four or sorry, three different types of text manipulation properties that

you can use, and along with their respective value. So I encourage you to go ahead and

try this out on your own, you can do a lot of things with these three values alone, you

can really change how the page looks. Alright, let's move on.

And that will obviously put everything in uppercase for you. But now you're starting

to see a little bit about why these are text manipulation and not font manipulation. Again,

it doesn't matter what font you're using, whether you're using some weird symbol font,

or Times New Roman, you can always use these to capitalize it, no matter what the font

is. On top of that, you can also move around these lines, it's not dependent on the font

at all. So that's just a little bit about our text manipulation properties. So the next

feature I want to cover is text align. So this is a little bit different from the other

two that we've covered. Because it's not really focused on the styling or decoration of our

text. Instead, it's going to be focused on the justification or alignment of it. So if

you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like

that, you'll know that you can justify your text and align it to your site. So there are

four main ones that are included in CSS left, right, center and justify. So I'm going to

breeze through the quick the first three ones, because it's quite easy to use. But then the

last one I'm going to talk about a little bit in more detail. So in order to achieve

this, you can go ahead and add text align property. And here, I'm just going to go center

as an example. And you can see that now everything is aligned. So the list items are a little

bit weird, they don't actually move the decoration to the center, when you align it to the center,

but other than that all of the text is now aligned to the center. So now let's talk about

justify. Now we're not going to go through left and right, because we already know that

but what justify actually does, I'm just gonna show you here is pretty much it takes all

of the text, and it kind of matches it. So it's all fit in the same way, if you if it

makes sense. So although it might not fit everything, the same length, what happens

is all of this text is now stretched out as far as possible. So although you might not

be able to see a direct difference, let's just look at this paragraph here, we're going

to just end off this property without changing it, you can see that without the justify alignment,

all of these are different. So what actually what the justify actually does is it sets

all of the lines to the same length. So I'm going to go ahead and add that justify back.

So you can see this used a lot in research papers, and, you know, academic papers, essays,

things like that. This justification is used a lot. And although it's not very, it's not

really used very commonly, it's still a very good feature if you have big bodies of text,

if you're trying to you know, make everything look very streamlined. Alright, there we go.

So those are the four or sorry, three different types of text manipulation properties that

you can use, and along with their respective value. So I encourage you to go ahead and

try this out on your own, you can do a lot of things with these three values alone, you

can really change how the page looks. Alright, let's move on.

So in this video, we're going to be talking about the other half of overall text manipulation.

And in this case, we're going to be looking at different font properties. So in this video,

we're going to be looking at three font size, font weight and font style. So first thing

I want to look at is font size. So right now we have our pretty standard text here, right.

So I'm just actually going to go ahead and erase our text transform from our previous

video. So now we have our text here. And what I want to do is change the size of this. The

only problem is I want to use a responsive design. So what I'm going to do is go ahead

and first use our font size property. And then I'm going to go ahead and say let's just

say 1.25 em. So what happens here is make this 25% more than the standard font size.

Now you can see it's a little bit bigger, but it's not as big as doing something like

two n. So there we go. Now that we've done that, we can also go ahead and actually use

pixel values, if we wanted to 40 pixels for example, the only problem is this is going

to set everything consistently. So you can see all of the sizes are the same, it doesn't

matter if they're a header, or while it does actually matter. But because in the CSS defined

code, all of these headers actually have to em but if we actually removed all of these,

they would be the same. So using something like two e n, would be great, because what

actually happens is now everything stays consistent. And it's also a relative unit. So that's always

good, because it stays responsive. So there we go. That's pretty much it for font size,

I'm going to go ahead and actually change this to one point 15 am, I think that's good.

So there we go. That's the first one. Now let's go ahead and talk about font weight.

So this is a little bit more complicated. So pretty much what font weight decides is

the bolding of a text or a font. So the values for this can range from zero, which is nothing

all the way to? Well, pretty much infinity. The only problem is, most fonts only support

up to 800, or 900. Because, again, for each value, there is a different bolding stage.

So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher.

But in theory, you can make these values as big as you want. The only problem is, it's

not really going to show any change if you make them very big. So there we go. That's

pretty much it for font weight, let's go ahead and start adding it to our website. So let's

say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font

dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start

with zero and see what happens, you can see that nothing actually happens. But pretty

much like I said before, most fonts only support certain values. So for example, 100 would

be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font

supports. Now usually, the convention for this is you're supposed to go up in hundreds

from 100. That's kind of like the minimum supported font size. So if I go ahead and

set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which

is usually the highest that you should go realistically, this is kind of the standard

for each one. So there you go, you can set it to something like 600, which isn't very

commonly seen, like I said, fonts only support certain bolded ness, if that makes sense.

But you can go ahead and play around with this. And like I said, depending on the font,

it's going to change what the text actually looks like. So there we go. That's pretty

much it for font weight, I'm going to go ahead and actually just set this to 400, which is

the standard font right there. So 400 is the normal, it's like normal bolding, no bolding

and don't make it very thin. So that's kind of what it's the normal range. So there we

go. That's it for font weight. Now let's go ahead and look at font style. So just like

font sizes for size and font weight is for bolding font style is for italic sizing. So

I'm going to go ahead and actually italicize a small piece of text here. So let's just

go ahead into this. And I'm going to take this first part, and actually just cut it

out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's

an inline day. It's an inline container tag, which allows you to contain a certain pieces

of text without you know disrupting the flow or moving them on to their own line. So I'm

going to give it a class, I'm just going to say italics, I guess that would work. So then

I'm going to go ahead and use the class selector italics. Open this up. Now we're going to

go ahead and start working on adding our italicizing. So what you can do for this is called font

style. And although most of the selectors these days are quite easy to remember, italics

and font style don't usually go hand in hand. So it might be a little hard to remember this

one. So there's three different values they can use for this normal, which is pretty much

the same as setting the font weight is 400 doesn't do anything, or it actually will change

it back to its normal state. Then you have italic, which is to italicize it, and then

you have oblique, which is a little bit more italic size. So let's go ahead and just add

the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can

see that where it is, there we go. It's right there

So in this video, we're going to be talking about the other half of overall text manipulation.

And in this case, we're going to be looking at different font properties. So in this video,

we're going to be looking at three font size, font weight and font style. So first thing

I want to look at is font size. So right now we have our pretty standard text here, right.

So I'm just actually going to go ahead and erase our text transform from our previous

video. So now we have our text here. And what I want to do is change the size of this. The

only problem is I want to use a responsive design. So what I'm going to do is go ahead

and first use our font size property. And then I'm going to go ahead and say let's just

say 1.25 em. So what happens here is make this 25% more than the standard font size.

Now you can see it's a little bit bigger, but it's not as big as doing something like

two n. So there we go. Now that we've done that, we can also go ahead and actually use

pixel values, if we wanted to 40 pixels for example, the only problem is this is going

to set everything consistently. So you can see all of the sizes are the same, it doesn't

matter if they're a header, or while it does actually matter. But because in the CSS defined

code, all of these headers actually have to em but if we actually removed all of these,

they would be the same. So using something like two e n, would be great, because what

actually happens is now everything stays consistent. And it's also a relative unit. So that's always

good, because it stays responsive. So there we go. That's pretty much it for font size,

I'm going to go ahead and actually change this to one point 15 am, I think that's good.

So there we go. That's the first one. Now let's go ahead and talk about font weight.

So this is a little bit more complicated. So pretty much what font weight decides is

the bolding of a text or a font. So the values for this can range from zero, which is nothing

all the way to? Well, pretty much infinity. The only problem is, most fonts only support

up to 800, or 900. Because, again, for each value, there is a different bolding stage.

So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher.

But in theory, you can make these values as big as you want. The only problem is, it's

not really going to show any change if you make them very big. So there we go. That's

pretty much it for font weight, let's go ahead and start adding it to our website. So let's

say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font

dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start

with zero and see what happens, you can see that nothing actually happens. But pretty

much like I said before, most fonts only support certain values. So for example, 100 would

be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font

supports. Now usually, the convention for this is you're supposed to go up in hundreds

from 100. That's kind of like the minimum supported font size. So if I go ahead and

set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which

is usually the highest that you should go realistically, this is kind of the standard

for each one. So there you go, you can set it to something like 600, which isn't very

commonly seen, like I said, fonts only support certain bolded ness, if that makes sense.

But you can go ahead and play around with this. And like I said, depending on the font,

it's going to change what the text actually looks like. So there we go. That's pretty

much it for font weight, I'm going to go ahead and actually just set this to 400, which is

the standard font right there. So 400 is the normal, it's like normal bolding, no bolding

and don't make it very thin. So that's kind of what it's the normal range. So there we

go. That's it for font weight. Now let's go ahead and look at font style. So just like

font sizes for size and font weight is for bolding font style is for italic sizing. So

I'm going to go ahead and actually italicize a small piece of text here. So let's just

go ahead into this. And I'm going to take this first part, and actually just cut it

out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's

an inline day. It's an inline container tag, which allows you to contain a certain pieces

of text without you know disrupting the flow or moving them on to their own line. So I'm

going to give it a class, I'm just going to say italics, I guess that would work. So then

I'm going to go ahead and use the class selector italics. Open this up. Now we're going to

go ahead and start working on adding our italicizing. So what you can do for this is called font

style. And although most of the selectors these days are quite easy to remember, italics

and font style don't usually go hand in hand. So it might be a little hard to remember this

one. So there's three different values they can use for this normal, which is pretty much

the same as setting the font weight is 400 doesn't do anything, or it actually will change

it back to its normal state. Then you have italic, which is to italicize it, and then

you have oblique, which is a little bit more italic size. So let's go ahead and just add

the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can

see that where it is, there we go. It's right there

is a little bit more. The font, the font is a little bit a little bit more italic size.

So there we go. Now let's go ahead and set it as the other value which is oblique. And

you might notice a little bit of a difference. So it's not immediately obvious, but it's

actually just a little bit more italicize. So like I said, it's not very good. noticeable.

But that's just one thing to keep in mind. So there we go, I'm just going to change this

back to italic. And that's pretty much it for the three different font manipulation

techniques. Now, although I didn't cover font family, which is what I'm going to cover in

the next video, these are the pretty much three basic ones that you can use to work

with text without changing the font itself. So you can go ahead and work with changing

the font weight, you know, make it bolded or italicized, you can also change the size.

So you can really do a lot with this. But font family is a little bit more complicated,

which is why I want to leave it for its own video. All right, let's move on.

is a little bit more. The font, the font is a little bit a little bit more italic size.

So there we go. Now let's go ahead and set it as the other value which is oblique. And

you might notice a little bit of a difference. So it's not immediately obvious, but it's

actually just a little bit more italicize. So like I said, it's not very good. noticeable.

But that's just one thing to keep in mind. So there we go, I'm just going to change this

back to italic. And that's pretty much it for the three different font manipulation

techniques. Now, although I didn't cover font family, which is what I'm going to cover in

the next video, these are the pretty much three basic ones that you can use to work

with text without changing the font itself. So you can go ahead and work with changing

the font weight, you know, make it bolded or italicized, you can also change the size.

So you can really do a lot with this. But font family is a little bit more complicated,

which is why I want to leave it for its own video. All right, let's move on.

So in this video, we're going to be talking about the last property related to text and

fonts. And that is font family. So I'm going to talk a little bit about that. But in the

next few videos, we're going to actually looking at how to include external fonts, which is

going to be a very fun activity. And that's going to really change the way that we use

CSS. But before we do that, we need to learn about font families. So first of all, if you

don't already know, a font family is basically a collection of fonts that have similar features.

So there are three main font families that you can use serif, sans serif, and monospace.

So first of all, let's talk about serif fonts. So serif fonts have these small lines on the

end of some letters, and pretty much every or a lot of the academic papers. And well

printed documents use these serif fonts. So right now, for example, our font is a Sarah

because you can see these tiny lines at the end of some of the letters. So these are used

very commonly on like I said, papers, essays, you know, journals, anything that's pretty

much printed out or given to you physically, is usually going to use a serif font. But

unfortunately, it makes it very hard to read on the computer. So there's actually a another

group of fonts, that which is the sans serif group. And if you don't know sans serif groups,

are basically the fonts that don't have those lines, if it's not obvious enough, from name.

So right now, this is a serif font. A sans serif font, on the other hand, would not have

those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites

that you use today, so for example, pretty much all the news websites, if you've used

WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise,

Google Facebook, pretty much every website that you see commonly today, the big ones,

usually always use Sans Serif fonts, because they're much easier to read. So those are

the two main groups. But like I said, there's also a third one, which is called mono space.

So mono space is pretty much where all of the characters have the same width. So they

all take up kind of the same space each character. Whereas something like this, you can see that

each letter kind of takes a different amount of space, depending on what the letter is.

So some pretty good examples of a sarafan are Times New Roman, which is probably the

most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and

Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then

a pretty good example of a monospace font is Korea new if you know what that is. Korea

news, one of the monospace fonts but like I said, there's many more out there that you

can use. Like I said, it all depends on what family you pick, and what what kind of result

you're trying to achieve out of your fonts or you're trying to make it readable Are you

making a paper or a journal, it all depends on what you want out of your while document.

So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif

fonts. So in order to specify a font family, or in specific a font, you're gonna have to

use the font family

So in this video, we're going to be talking about the last property related to text and

fonts. And that is font family. So I'm going to talk a little bit about that. But in the

next few videos, we're going to actually looking at how to include external fonts, which is

going to be a very fun activity. And that's going to really change the way that we use

CSS. But before we do that, we need to learn about font families. So first of all, if you

don't already know, a font family is basically a collection of fonts that have similar features.

So there are three main font families that you can use serif, sans serif, and monospace.

So first of all, let's talk about serif fonts. So serif fonts have these small lines on the

end of some letters, and pretty much every or a lot of the academic papers. And well

printed documents use these serif fonts. So right now, for example, our font is a Sarah

because you can see these tiny lines at the end of some of the letters. So these are used

very commonly on like I said, papers, essays, you know, journals, anything that's pretty

much printed out or given to you physically, is usually going to use a serif font. But

unfortunately, it makes it very hard to read on the computer. So there's actually a another

group of fonts, that which is the sans serif group. And if you don't know sans serif groups,

are basically the fonts that don't have those lines, if it's not obvious enough, from name.

So right now, this is a serif font. A sans serif font, on the other hand, would not have

those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites

that you use today, so for example, pretty much all the news websites, if you've used

WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise,

Google Facebook, pretty much every website that you see commonly today, the big ones,

usually always use Sans Serif fonts, because they're much easier to read. So those are

the two main groups. But like I said, there's also a third one, which is called mono space.

So mono space is pretty much where all of the characters have the same width. So they

all take up kind of the same space each character. Whereas something like this, you can see that

each letter kind of takes a different amount of space, depending on what the letter is.

So some pretty good examples of a sarafan are Times New Roman, which is probably the

most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and

Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then

a pretty good example of a monospace font is Korea new if you know what that is. Korea

news, one of the monospace fonts but like I said, there's many more out there that you

can use. Like I said, it all depends on what family you pick, and what what kind of result

you're trying to achieve out of your fonts or you're trying to make it readable Are you

making a paper or a journal, it all depends on what you want out of your while document.

So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif

fonts. So in order to specify a font family, or in specific a font, you're gonna have to

use the font family

property. So if you go ahead and set font family. Now, this isn't just for setting the

family. This is also for spreading the specific fonts. And I'll talk about that in just a

second. So I'm going to go ahead and say sans serif. So this is the font family that I want

and watch what happens to our page. Now, you can see that it looks completely different.

We can actually read everything and it looks a lot cleaner. So that's why I like san serif

fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts,

you can see that it just looks a lot easier on the eyes. It's just much easier to read

and use. But like I said, you can you don't just have to specify the family you can actually

specify the specific font. And you can actually do this using the comma separator. So first

of all, I'm basic set times new roman as the main font. And then I'm going to insert a

comma, and then serif. So I'll explain this right now, first of all, if a font has more

than one word or it's separated by spaces, you're going to need to use quotation marks

to contain it. Now, the second thing is this comma here, pretty much what's going to happen

is, if Times New Roman is available, use that as the font. But if it isn't available, then

fall back to the standard serif font. So you can actually include more than just Times

New Roman on here. So you can include three or even for layers sometimes. But for now,

we're just going to use two and we'll talk about including very specific fonts in the

next two videos, where we're going to be including these external fonts. So there we go. Pretty

much what this is saying is set the font family, in this case, the font, as Times New Roman,

but if Times New Roman isn't available, maybe you know, if you're using an external font,

maybe this server has crashed, or maybe it's just not available on the browser, then use

the serif family, there's the general serif font. So if I actually go ahead and remove

this, you're not going to see much of a difference between Times New Roman and Sarath. Like I

said, you can see there's not much of a change because it pretty much the same thing. But

it is there. And if you use a different Sarah font, such as Georgia, there will be some

sort of a difference between the two, you can see that now, although they aren't exactly,

they aren't exactly the same, you can see they both contain those lines, things like

that. So that's why you commonly use more than more than one fonts, just in case maybe,

if you're using a different browser, maybe someone's using a very old browser, like Internet

Explorer six or seven, then you can use some of the older fonts. So there you go. That's

pretty much it. For font families, it's really not that hard to grasp. And once you really

get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually

just change this. But like I was saying, it becomes a very useful tool, once you get into

the later parts of web development, because changing the font can completely change the

look of your site. So that's just one thing you want to keep in mind. Alright, let's move

on.

property. So if you go ahead and set font family. Now, this isn't just for setting the

family. This is also for spreading the specific fonts. And I'll talk about that in just a

second. So I'm going to go ahead and say sans serif. So this is the font family that I want

and watch what happens to our page. Now, you can see that it looks completely different.

We can actually read everything and it looks a lot cleaner. So that's why I like san serif

fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts,

you can see that it just looks a lot easier on the eyes. It's just much easier to read

and use. But like I said, you can you don't just have to specify the family you can actually

specify the specific font. And you can actually do this using the comma separator. So first

of all, I'm basic set times new roman as the main font. And then I'm going to insert a

comma, and then serif. So I'll explain this right now, first of all, if a font has more

than one word or it's separated by spaces, you're going to need to use quotation marks

to contain it. Now, the second thing is this comma here, pretty much what's going to happen

is, if Times New Roman is available, use that as the font. But if it isn't available, then

fall back to the standard serif font. So you can actually include more than just Times

New Roman on here. So you can include three or even for layers sometimes. But for now,

we're just going to use two and we'll talk about including very specific fonts in the

next two videos, where we're going to be including these external fonts. So there we go. Pretty

much what this is saying is set the font family, in this case, the font, as Times New Roman,

but if Times New Roman isn't available, maybe you know, if you're using an external font,

maybe this server has crashed, or maybe it's just not available on the browser, then use

the serif family, there's the general serif font. So if I actually go ahead and remove

this, you're not going to see much of a difference between Times New Roman and Sarath. Like I

said, you can see there's not much of a change because it pretty much the same thing. But

it is there. And if you use a different Sarah font, such as Georgia, there will be some

sort of a difference between the two, you can see that now, although they aren't exactly,

they aren't exactly the same, you can see they both contain those lines, things like

that. So that's why you commonly use more than more than one fonts, just in case maybe,

if you're using a different browser, maybe someone's using a very old browser, like Internet

Explorer six or seven, then you can use some of the older fonts. So there you go. That's

pretty much it. For font families, it's really not that hard to grasp. And once you really

get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually

just change this. But like I was saying, it becomes a very useful tool, once you get into

the later parts of web development, because changing the font can completely change the

look of your site. So that's just one thing you want to keep in mind. Alright, let's move

on.

So in this video, we are going to be looking at actually using some external fonts. We've

looked at fonts and text, and we know how to manipulate it now. But we don't actually

know the one crucial piece, which is using external fonts. So your computer will most

likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word,

or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts.

And although Google Docs technically isn't on your computer, we'll just leave it in there

for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how

do we actually know which fonts to use? And what if we don't have the font? I mean, you

know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first

thing that I would recommend doing is going and getting fonts from the internet. Now,

if you don't already know this, most people would think that you know, the fonts that

you have are set for life, you can't download anymore. Well, fonts are actually a huge growing

industry. And there are so many different fonts out there that you can use, and you

can even make your own. So there's obviously a lot more fonts to choose them than what's

provided on your computer. So in this video, I'm going to be teaching you how to go and

find your own fonts. And then in the next video, we're going to be including it into

our project. So the first source I'm going to recommend here, which is actually only

source, but it's called Google fonts, it was put together by Google. And it's a collection

of 915 font families. So you can see we have a bunch of different fonts here. And when

I say font families, just think fonts default, because

So in this video, we are going to be looking at actually using some external fonts. We've

looked at fonts and text, and we know how to manipulate it now. But we don't actually

know the one crucial piece, which is using external fonts. So your computer will most

likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word,

or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts.

And although Google Docs technically isn't on your computer, we'll just leave it in there

for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how

do we actually know which fonts to use? And what if we don't have the font? I mean, you

know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first

thing that I would recommend doing is going and getting fonts from the internet. Now,

if you don't already know this, most people would think that you know, the fonts that

you have are set for life, you can't download anymore. Well, fonts are actually a huge growing

industry. And there are so many different fonts out there that you can use, and you

can even make your own. So there's obviously a lot more fonts to choose them than what's

provided on your computer. So in this video, I'm going to be teaching you how to go and

find your own fonts. And then in the next video, we're going to be including it into

our project. So the first source I'm going to recommend here, which is actually only

source, but it's called Google fonts, it was put together by Google. And it's a collection

of 915 font families. So you can see we have a bunch of different fonts here. And when

I say font families, just think fonts default, because

you know, when you think of it as a family, you think there's multiple fonts, but there's

actually only one and then you can change the bolding and other settings, we'll go over

that a little bit later in this video. So you can head over to this, I've linked it

in the lecture resources, or you can just copy the link here from video. And it's going

to take you to this site. So there's actually 915 families on this site, which is a lot

to choose from. Now you can see that there are even you know things in different languages.

There's all sorts of different styles, maybe from different general families. So this could

be from, you know, a sensory family. This could be from a Sarah family. So you can see

that there are so many different choices that you can use. And depending on what type of

website you want to create, you can actually choose the fonts that you want. So I'm gonna

actually go through now and start picking some fonts. So what I would recommend is just

go through and look at the many different fonts you have here. So for example, I think

this is a very nice font. So what I'm going to do is just go ahead and click this plus

icon And what it's going to do here it says there's one family selected, right? If you

open it up, you can see that our font has been selected. Now we're going to work on

embedding this in the next video. But for now, I just want to leave it like this. So

you can see that we can actually go ahead and customize our font now. So for example,

if I wanted to choose some different bolding, so for example, you can see, this is a font

weight of 100. And this is a font weight of 900. So you can select as many as you want.

But you can see that we actually have a load type here. So the reason that this is given

is because we are including this from the internet, obviously. So if you try to pull

too many resources from an intranet or from, you know, outside of your local machine, it's

going to really slow down the load time of your website, because obviously, it's not

instantaneous, you need to send over requests, and there's a whole lot that goes behind.

So while I would recommend is not trying to select every single one of these weights,

only select the ones that you think you're going to need. So for example, for now, I'm

just going to select the regular and the bolt. Now, I don't want any italics. So I'm just

going to exclude this. And you can see that our load time is fast. So we're okay. So you

can see that apart from our buildings, we can actually select some of some of the stuff

from here. So instead of having to go into our selection, we can actually just go and

straight select it. From here, we can also change the size if we wanted to. And then

we can click the plus icon. So you can go ahead and play around with those when you

include your own fonts. But for now, I think I'm just going to go with the default size

and just add a bolded. So now I'm going to go ahead and actually include a second font,

because it's pretty common in web development and web design to include at least two fonts,

you know, maybe one for headings, and one for text. So I'm going to go ahead and find

something that kind of fits in with the later font that we have here, I'm going to just

select it back to the default size. So I'm going to try and find something that kind

of matches this. It doesn't have to be obviously exactly the same. It can just be something

that you know, kind of fits in the theme, or makes the website look kind of complements

the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going

to use it, you can see those lines there. I'm looking for a sans serif font. Let me

see. So I think this is a pretty good font. So what I'm going to do is go ahead and add

this as well just click on that plus icon. And now we can actually customize both fonts.

So I'm going to go ahead and add that bold 700 as well, you can see that the load time

is moderate now because of course, we're including more than one font, but we don't need to worry

about that too much. So there we go. We have that setup now. So there we go. That's pretty

much it for Google fonts. And you know, using all these different fonts, now you can go

ahead and customize it. Choose whatever makes your website look good, or maybe whatever

you want. But just make sure that you choose a font that really works with your website

well and make sure you don't include too many different weights. So you can keep the load

time within Bay. So in the next video, we're actually going to go through and start importing

this into our website. And I'm going to teach you some really good failsafe tricks in case

Google Fonts fails. Alright, let's move on.

you know, when you think of it as a family, you think there's multiple fonts, but there's

actually only one and then you can change the bolding and other settings, we'll go over

that a little bit later in this video. So you can head over to this, I've linked it

in the lecture resources, or you can just copy the link here from video. And it's going

to take you to this site. So there's actually 915 families on this site, which is a lot

to choose from. Now you can see that there are even you know things in different languages.

There's all sorts of different styles, maybe from different general families. So this could

be from, you know, a sensory family. This could be from a Sarah family. So you can see

that there are so many different choices that you can use. And depending on what type of

website you want to create, you can actually choose the fonts that you want. So I'm gonna

actually go through now and start picking some fonts. So what I would recommend is just

go through and look at the many different fonts you have here. So for example, I think

this is a very nice font. So what I'm going to do is just go ahead and click this plus

icon And what it's going to do here it says there's one family selected, right? If you

open it up, you can see that our font has been selected. Now we're going to work on

embedding this in the next video. But for now, I just want to leave it like this. So

you can see that we can actually go ahead and customize our font now. So for example,

if I wanted to choose some different bolding, so for example, you can see, this is a font

weight of 100. And this is a font weight of 900. So you can select as many as you want.

But you can see that we actually have a load type here. So the reason that this is given

is because we are including this from the internet, obviously. So if you try to pull

too many resources from an intranet or from, you know, outside of your local machine, it's

going to really slow down the load time of your website, because obviously, it's not

instantaneous, you need to send over requests, and there's a whole lot that goes behind.

So while I would recommend is not trying to select every single one of these weights,

only select the ones that you think you're going to need. So for example, for now, I'm

just going to select the regular and the bolt. Now, I don't want any italics. So I'm just

going to exclude this. And you can see that our load time is fast. So we're okay. So you

can see that apart from our buildings, we can actually select some of some of the stuff

from here. So instead of having to go into our selection, we can actually just go and

straight select it. From here, we can also change the size if we wanted to. And then

we can click the plus icon. So you can go ahead and play around with those when you

include your own fonts. But for now, I think I'm just going to go with the default size

and just add a bolded. So now I'm going to go ahead and actually include a second font,

because it's pretty common in web development and web design to include at least two fonts,

you know, maybe one for headings, and one for text. So I'm going to go ahead and find

something that kind of fits in with the later font that we have here, I'm going to just

select it back to the default size. So I'm going to try and find something that kind

of matches this. It doesn't have to be obviously exactly the same. It can just be something

that you know, kind of fits in the theme, or makes the website look kind of complements

the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going

to use it, you can see those lines there. I'm looking for a sans serif font. Let me

see. So I think this is a pretty good font. So what I'm going to do is go ahead and add

this as well just click on that plus icon. And now we can actually customize both fonts.

So I'm going to go ahead and add that bold 700 as well, you can see that the load time

is moderate now because of course, we're including more than one font, but we don't need to worry

about that too much. So there we go. We have that setup now. So there we go. That's pretty

much it for Google fonts. And you know, using all these different fonts, now you can go

ahead and customize it. Choose whatever makes your website look good, or maybe whatever

you want. But just make sure that you choose a font that really works with your website

well and make sure you don't include too many different weights. So you can keep the load

time within Bay. So in the next video, we're actually going to go through and start importing

this into our website. And I'm going to teach you some really good failsafe tricks in case

Google Fonts fails. Alright, let's move on.

So in the previous video, we started looking at what type of fonts we can use in our website.

Now we're going to go through and actually include them. So first of all, let's just

look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation,

ready to go and working on the website. But now what I'm going to do is actually go through

and start using these external fonts. So we're not going to use this Arial font anymore,

so I'm going to go ahead and erase that. And also for the font weight, I'm also going to

go ahead and erase that because there's some issues with it that I'll talk about in just

a second. So there we go. Now that we removed, all of the properties will be directly affected

by the font. Let's go ahead and work on setting up our website with these external fonts.

So the first thing you'll notice here is that when you go over to your Google fonts, it

gives you this link tag to include. So this link tag is pretty much going to link to Google

fonts and pull them from their servers. So this is what you're going to need to copy

right here. You're just going to copy this and up in your HTML document, you're going

to paste your link tag above your stylesheet. Now make sure you post it above this above

your stylesheet because you want to have the fonts ready so that when your stylesheet comes

along and the compiler is reading it, all of the fonts are already there and ready to

go. So there we go. Now that everything's linked and set up, why don't we go ahead and

see what happened on our website. Obviously, we removed the font You can see that nothing

actually happens. So, by doing this, we don't actually set up our website to use our fonts,

we're just bringing them into our website. Now what we need to do is go through in CSS

and start utilizing these fonts, so that we can see the changes on the website. So on

top of that, this, there's this little text here that allows you to do you know, you can

just copy the style straight, but I'm going to go ahead and do it manually. So first of

all, let's go ahead and add our body font. So I'm going to go ahead and say, font family.

And now we're going to go through and select our font. So we included two fonts, Leto and

sorrow boon we're going to go through is go ahead and see which one we want to use. So

I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead

and say, Leto, just like that. And now let's go ahead and refresh the page. And you can

see how much of a difference that makes. Now using this new font, everything has changed,

it makes the website look completely different from what it used to be. So there we go, we've

included that. But let's go ahead and include our second font here. So I'm going to go through

and actually add it on the title and the subtitle. And remember going back to specificity, the

class and Id selectors are going to be more specific than the body selectors. So our font

family is going to override the body font family. So let's go ahead and add that. Right

there. Just like that. And let's go ahead and add it to our subtitle as well. All right,

well, let's go ahead and see what happens. So you can see that, although the difference

is quite subtle, it's still changed the font of the titles and subtitles. And you can see

why using two fonts on your website makes it look a whole lot better. So there we go.

We've added all of our fonts. But the only problem is, we know that what what's happening

beside behind the scenes is that this link tag is going to Google servers, pulling these

fonts, and then including them in our website. But what if it fails? What if there's no internet

connection, or what if it's down, maybe the Google Fonts servers themselves are down.

This is where we need to use the trick we learned in the font families video, in which

we can actually add a backup font to this. And if we actually go on Google Fonts right

here, you can see they already do this. Now, because the sans serif family is included

by default, what's going to happen is, normally it's going to use the font specified. But

if there's some problem, and we can't get these fonts, maybe Google servers are down,

it's going to go over to the next font. And we know that sans serif is included on every

single machine, which means that it's going to work fine. So let's go ahead and do that.

Now. If you remember, all we have to do is go ahead and add a comma, and then put the

name of the family, which in this case is sans serif. We're going to do this for the

other two as well.

So in the previous video, we started looking at what type of fonts we can use in our website.

Now we're going to go through and actually include them. So first of all, let's just

look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation,

ready to go and working on the website. But now what I'm going to do is actually go through

and start using these external fonts. So we're not going to use this Arial font anymore,

so I'm going to go ahead and erase that. And also for the font weight, I'm also going to

go ahead and erase that because there's some issues with it that I'll talk about in just

a second. So there we go. Now that we removed, all of the properties will be directly affected

by the font. Let's go ahead and work on setting up our website with these external fonts.

So the first thing you'll notice here is that when you go over to your Google fonts, it

gives you this link tag to include. So this link tag is pretty much going to link to Google

fonts and pull them from their servers. So this is what you're going to need to copy

right here. You're just going to copy this and up in your HTML document, you're going

to paste your link tag above your stylesheet. Now make sure you post it above this above

your stylesheet because you want to have the fonts ready so that when your stylesheet comes

along and the compiler is reading it, all of the fonts are already there and ready to

go. So there we go. Now that everything's linked and set up, why don't we go ahead and

see what happened on our website. Obviously, we removed the font You can see that nothing

actually happens. So, by doing this, we don't actually set up our website to use our fonts,

we're just bringing them into our website. Now what we need to do is go through in CSS

and start utilizing these fonts, so that we can see the changes on the website. So on

top of that, this, there's this little text here that allows you to do you know, you can

just copy the style straight, but I'm going to go ahead and do it manually. So first of

all, let's go ahead and add our body font. So I'm going to go ahead and say, font family.

And now we're going to go through and select our font. So we included two fonts, Leto and

sorrow boon we're going to go through is go ahead and see which one we want to use. So

I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead

and say, Leto, just like that. And now let's go ahead and refresh the page. And you can

see how much of a difference that makes. Now using this new font, everything has changed,

it makes the website look completely different from what it used to be. So there we go, we've

included that. But let's go ahead and include our second font here. So I'm going to go through

and actually add it on the title and the subtitle. And remember going back to specificity, the

class and Id selectors are going to be more specific than the body selectors. So our font

family is going to override the body font family. So let's go ahead and add that. Right

there. Just like that. And let's go ahead and add it to our subtitle as well. All right,

well, let's go ahead and see what happens. So you can see that, although the difference

is quite subtle, it's still changed the font of the titles and subtitles. And you can see

why using two fonts on your website makes it look a whole lot better. So there we go.

We've added all of our fonts. But the only problem is, we know that what what's happening

beside behind the scenes is that this link tag is going to Google servers, pulling these

fonts, and then including them in our website. But what if it fails? What if there's no internet

connection, or what if it's down, maybe the Google Fonts servers themselves are down.

This is where we need to use the trick we learned in the font families video, in which

we can actually add a backup font to this. And if we actually go on Google Fonts right

here, you can see they already do this. Now, because the sans serif family is included

by default, what's going to happen is, normally it's going to use the font specified. But

if there's some problem, and we can't get these fonts, maybe Google servers are down,

it's going to go over to the next font. And we know that sans serif is included on every

single machine, which means that it's going to work fine. So let's go ahead and do that.

Now. If you remember, all we have to do is go ahead and add a comma, and then put the

name of the family, which in this case is sans serif. We're going to do this for the

other two as well.

And this one as well. Now, of course, this is going to change based on the font that

you use. And I'm actually going to show you this right here. Let's remove both of these

and add a serif font. So this would be considered a serif font. Let's go ahead and add that.

Now if we go ahead and look at the family, well, it's actually not not serif. It's a

different family called cursive. But you can see just to prove that point that the family

is going to depend on the font itself. So we explained a little bit about font families

in that video. And obviously, all of them have different characteristics. So of course,

like I said, it depends completely on the type of font. So if I go ahead and see the

family there, you can see that that sans serif. But if we use something like this font, it's

going to be a different font family. So that's just one thing you need to keep in mind is

that you want to make sure your fallback font is both included on every machine. And it's

kind of similar to our font here. Now, if I actually go ahead and erase this, now let's

go ahead and see, obviously, there is a visual difference, but it still has that same style.

There's no lines, it's clean to read. It's just straightforward. So that's one thing

you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going

to move on to layout, which is really gonna change the way that this website looks. Alright,

let's move on.

And this one as well. Now, of course, this is going to change based on the font that

you use. And I'm actually going to show you this right here. Let's remove both of these

and add a serif font. So this would be considered a serif font. Let's go ahead and add that.

Now if we go ahead and look at the family, well, it's actually not not serif. It's a

different family called cursive. But you can see just to prove that point that the family

is going to depend on the font itself. So we explained a little bit about font families

in that video. And obviously, all of them have different characteristics. So of course,

like I said, it depends completely on the type of font. So if I go ahead and see the

family there, you can see that that sans serif. But if we use something like this font, it's

going to be a different font family. So that's just one thing you need to keep in mind is

that you want to make sure your fallback font is both included on every machine. And it's

kind of similar to our font here. Now, if I actually go ahead and erase this, now let's

go ahead and see, obviously, there is a visual difference, but it still has that same style.

There's no lines, it's clean to read. It's just straightforward. So that's one thing

you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going

to move on to layout, which is really gonna change the way that this website looks. Alright,

let's move on.

So the next few videos are going to be focused on CSS layout. So we're pretty much done,

at least for now with coloring and text and all of the cool features we can do with them.

But now we're gonna actually go through and start using our skills with different well,

new skills that we can actually put together and create really, really nice, awesome websites.

So layout is probably one of the most powerful tools that you can use in CSS and completely

change the way your website looks. But before we move on, we need to learn a little bit

of theory behind how CSS works. So there's this concept in CSS called the box model,

and it's pretty much the the what happens is every Simple element is surrounded by an

invisible box. Now this box has different layers, which we're going to explain in the

next video. But all of these boxes are touching together, they're kind of connected, what

you can do is actually change the shapes of these boxes and change the shapes of the layers

in order to move things around, and position them on a page in a way that makes the website

look much better. Now, obviously, this isn't the only way of shaping your website, there

are so many different methods, Flexbox, and grid, and we're all going to cover them later

in this course. But for now, this is the basic kind of layout features that you need to use,

so that you can move on and start using some of the most complex features. So this is kind

of what that invisible box looks like. So at the center is where your content is. Now

I'm going to explain this in just a second, all of these little terms, padding, border

and margin. But you can see that the center contains the content. But then the other three

layers are something completely unknown. And we're going to be going through and explaining

what those do. But for now, just understand that you have the content on the center. But

then there's this invisible box around it, that is split up into three layers. So let's

go over the first one, which is the padding. Now the padding represents the space between

the content and the border of the content. Now you can see up in this model, we have

this padding section, and then we have a border. So pretty much what the border does is it

separates the content and the padding from the margin. But pretty much let's just assume

for now that the margin kind of move things around, and it doesn't actually move the content

around, what padding is supposed to do is it's basically supposed to give more room

around the content itself, it's not really meant to move the content around. So it'll

make some more sense when I go over margin if you don't understand it now, but let's

move on to the next layer. The border is pretty much the divide, or the separation line between

the content, the padding and the margin. So borders can be styled and changed. And by

default, they're invisible. But we can actually go through and change how they look which

we're going to be going through in a couple videos time. So the border doesn't actually

create any spacing or anything itself, unless you wanted to. But pretty much what the border

is supposed to be is kind of that division line. So the last layer that I want to talk

about is the margin. So just like how the padding is supposed to give spacing, or well

padding around the content, the margin is supposed to move the content around and give

it space between other elements. So while the padding is used for internal space, the

margin is used for external space and is made. So that to give room and spacing around external

elements. So for example, if you have an image and then some text under it, you can use the

margin of the text to kind of push it down from the image, whereas the padding will just

kind of make internal space. Now, although it's not the best example, as we go on and

start using it, you'll get this a lot more if you don't already. Alright, so that's pretty

much it for the box model. It's a very, very simple concept. But it can be really used

to a very high potential, and it does contain a lot of features that we're going to be going

over in the next few videos. Alright, let's move on.

So the next few videos are going to be focused on CSS layout. So we're pretty much done,

at least for now with coloring and text and all of the cool features we can do with them.

But now we're gonna actually go through and start using our skills with different well,

new skills that we can actually put together and create really, really nice, awesome websites.

So layout is probably one of the most powerful tools that you can use in CSS and completely

change the way your website looks. But before we move on, we need to learn a little bit

of theory behind how CSS works. So there's this concept in CSS called the box model,

and it's pretty much the the what happens is every Simple element is surrounded by an

invisible box. Now this box has different layers, which we're going to explain in the

next video. But all of these boxes are touching together, they're kind of connected, what

you can do is actually change the shapes of these boxes and change the shapes of the layers

in order to move things around, and position them on a page in a way that makes the website

look much better. Now, obviously, this isn't the only way of shaping your website, there

are so many different methods, Flexbox, and grid, and we're all going to cover them later

in this course. But for now, this is the basic kind of layout features that you need to use,

so that you can move on and start using some of the most complex features. So this is kind

of what that invisible box looks like. So at the center is where your content is. Now

I'm going to explain this in just a second, all of these little terms, padding, border

and margin. But you can see that the center contains the content. But then the other three

layers are something completely unknown. And we're going to be going through and explaining

what those do. But for now, just understand that you have the content on the center. But

then there's this invisible box around it, that is split up into three layers. So let's

go over the first one, which is the padding. Now the padding represents the space between

the content and the border of the content. Now you can see up in this model, we have

this padding section, and then we have a border. So pretty much what the border does is it

separates the content and the padding from the margin. But pretty much let's just assume

for now that the margin kind of move things around, and it doesn't actually move the content

around, what padding is supposed to do is it's basically supposed to give more room

around the content itself, it's not really meant to move the content around. So it'll

make some more sense when I go over margin if you don't understand it now, but let's

move on to the next layer. The border is pretty much the divide, or the separation line between

the content, the padding and the margin. So borders can be styled and changed. And by

default, they're invisible. But we can actually go through and change how they look which

we're going to be going through in a couple videos time. So the border doesn't actually

create any spacing or anything itself, unless you wanted to. But pretty much what the border

is supposed to be is kind of that division line. So the last layer that I want to talk

about is the margin. So just like how the padding is supposed to give spacing, or well

padding around the content, the margin is supposed to move the content around and give

it space between other elements. So while the padding is used for internal space, the

margin is used for external space and is made. So that to give room and spacing around external

elements. So for example, if you have an image and then some text under it, you can use the

margin of the text to kind of push it down from the image, whereas the padding will just

kind of make internal space. Now, although it's not the best example, as we go on and

start using it, you'll get this a lot more if you don't already. Alright, so that's pretty

much it for the box model. It's a very, very simple concept. But it can be really used

to a very high potential, and it does contain a lot of features that we're going to be going

over in the next few videos. Alright, let's move on.

So now what we're going to be doing is going through and starting to use the first layer

of the box model, which in this case is the content itself. So although not technically

a layer of this invisible box, it's still a big part of layout, and the shaping of things

on your document, because the way you shape and while style, your content is going to

completely change how the rest of the box models affected your padding and your margin.

So what we're going to be doing is going through and using some of these. And if you actually

remember, right here, we have already used the two main features of shaping content,

height and width. So we've already pretty much learned these properties. But I'm going

to go through and do a couple more examples just so you can get the shape of things and

how to use them. So first thing I want to talk about is the units that you should use.

So usually on a page, the best way to do this is using pixels or some absolute unit for

height. But then for width, use a relative units such as v w, or percentage. Now we do

this because although height is very, very hard to determine responsively at least, they

kind of stay the same as you move down so the height is going to kind of stay consistent.

The only problem is the width completely changes everything. So the width of devices is very

different from place to place. So a phone would be quite a small width whereas you know

full screen TV would be very wide width. So that's why you use relative units for width

is that you can keep it consistent. Or still, you can keep both of the values consistent

while still using different units. So let's go through and actually use it on this image

here. So the first thing I want to do is go ahead and give this a class, we're actually

I'm going to give it an ID. So I'm going to give it an ID of about us image, just like

that. All right, now, let's go ahead and select it here, I'm going to go hash about us image.

Remember the id selector. And now what we're going to do is go through and start adding

our, our properties. So the first thing I'm going to add is the height. So I'm just going

to make this a cool 300 pixels, just to see how it is. And most of this is very experimental,

you're not supposed to go through and change everything. And, you know, well, well you

are, but you're not supposed to go through and set everything to a constant value. So

you're supposed to, you know, play around, see what works. And then once you're familiar

with it, and once you know what you want, you can leave it as it is. So there we go,

we set the height. Now, obviously, this with the width of the image itself is always relative,

but I'm going to go ahead and change it anyways, I'm going to go ahead and say the width is

60 v w. Now, you could always say 60%, it would pretty much be the same thing. But I'm

going to go ahead and use v w here just to

So now what we're going to be doing is going through and starting to use the first layer

of the box model, which in this case is the content itself. So although not technically

a layer of this invisible box, it's still a big part of layout, and the shaping of things

on your document, because the way you shape and while style, your content is going to

completely change how the rest of the box models affected your padding and your margin.

So what we're going to be doing is going through and using some of these. And if you actually

remember, right here, we have already used the two main features of shaping content,

height and width. So we've already pretty much learned these properties. But I'm going

to go through and do a couple more examples just so you can get the shape of things and

how to use them. So first thing I want to talk about is the units that you should use.

So usually on a page, the best way to do this is using pixels or some absolute unit for

height. But then for width, use a relative units such as v w, or percentage. Now we do

this because although height is very, very hard to determine responsively at least, they

kind of stay the same as you move down so the height is going to kind of stay consistent.

The only problem is the width completely changes everything. So the width of devices is very

different from place to place. So a phone would be quite a small width whereas you know

full screen TV would be very wide width. So that's why you use relative units for width

is that you can keep it consistent. Or still, you can keep both of the values consistent

while still using different units. So let's go through and actually use it on this image

here. So the first thing I want to do is go ahead and give this a class, we're actually

I'm going to give it an ID. So I'm going to give it an ID of about us image, just like

that. All right, now, let's go ahead and select it here, I'm going to go hash about us image.

Remember the id selector. And now what we're going to do is go through and start adding

our, our properties. So the first thing I'm going to add is the height. So I'm just going

to make this a cool 300 pixels, just to see how it is. And most of this is very experimental,

you're not supposed to go through and change everything. And, you know, well, well you

are, but you're not supposed to go through and set everything to a constant value. So

you're supposed to, you know, play around, see what works. And then once you're familiar

with it, and once you know what you want, you can leave it as it is. So there we go,

we set the height. Now, obviously, this with the width of the image itself is always relative,

but I'm going to go ahead and change it anyways, I'm going to go ahead and say the width is

60 v w. Now, you could always say 60%, it would pretty much be the same thing. But I'm

going to go ahead and use v w here just to

actually, you know what, we have V w here already, so I'm going to go ahead and add

percentage, there we go. Now, of course, you could use whichever unit you want, they're

gonna mean pretty much the same thing. Obviously, apart from the different viewports, and things

like that, but they're pretty much the same for our purposes. So you can use whichever

one you want. So there we go, we've changed it. Now if we go ahead and resize of most,

you can actually go ahead and see that the width is going to be pretty much the same,

well, the height stays constant. So one thing I want to talk about is a really cool feature

that we can use in Chrome. And you can see that's a little bit weird there. But we'll

worry about it, we'll worry about that later, is a really cool feature that allows you to

actually change the viewport of your Chrome window without actually having to use different

devices. So if you go ahead and click on the icon, just right click anywhere on the page,

click on Inspect, and it's going to bring you here to this page. And you can actually

select any device you want from the drop down menu and see how it would look on that on

that device. So I can pretty much do whatever I want here. If I wanted to select an iPad,

even an iPad Pro, you can actually see what it would look like on the device. So this

is a really useful feature that you can use to make sure that your website works everywhere,

instead of having to go and upload it somewhere and then view it on all those different devices.

You can also set select this responsive design, which I really liked, because then you can

change the size however you want. Just like that you can see, and it will work perfectly.

So yeah, that's great. And you know, if maybe if you don't want to use these devices from

this drop down menu, you can actually go through and change the size here, which is really

useful. So I'm going to go ahead and close this off now. And you can see that our website

is looking good. Obviously, our image here, it looks quite weird. But like I said, it's

all about experimentation, you're supposed to go through and see what works. And obviously,

you don't have to use an absolute value. It's not set in stone, but you're supposed to go

through and see what works for you. And from there, you can set the value. So this is just

kind of a little experimental thing to teach you how to use these features. But like I

said, this website's all about what this course is all about practicing and getting experienced

with this. So you can go through, check out the project files and play around with these

values yourself, really get a feel for how this works. So that's pretty much it for content

resizing, it's very easy, there's only two properties you need to know. And pretty much

the rest of the box model is also quite easy. But it's good that we learn it step by step

so that we master every stage and by the end of it, we'll really know how to master the

layout and really manipulate our page in the best possible way. Alright, let's move on.

actually, you know what, we have V w here already, so I'm going to go ahead and add

percentage, there we go. Now, of course, you could use whichever unit you want, they're

gonna mean pretty much the same thing. Obviously, apart from the different viewports, and things

like that, but they're pretty much the same for our purposes. So you can use whichever

one you want. So there we go, we've changed it. Now if we go ahead and resize of most,

you can actually go ahead and see that the width is going to be pretty much the same,

well, the height stays constant. So one thing I want to talk about is a really cool feature

that we can use in Chrome. And you can see that's a little bit weird there. But we'll

worry about it, we'll worry about that later, is a really cool feature that allows you to

actually change the viewport of your Chrome window without actually having to use different

devices. So if you go ahead and click on the icon, just right click anywhere on the page,

click on Inspect, and it's going to bring you here to this page. And you can actually

select any device you want from the drop down menu and see how it would look on that on

that device. So I can pretty much do whatever I want here. If I wanted to select an iPad,

even an iPad Pro, you can actually see what it would look like on the device. So this

is a really useful feature that you can use to make sure that your website works everywhere,

instead of having to go and upload it somewhere and then view it on all those different devices.

You can also set select this responsive design, which I really liked, because then you can

change the size however you want. Just like that you can see, and it will work perfectly.

So yeah, that's great. And you know, if maybe if you don't want to use these devices from

this drop down menu, you can actually go through and change the size here, which is really

useful. So I'm going to go ahead and close this off now. And you can see that our website

is looking good. Obviously, our image here, it looks quite weird. But like I said, it's

all about experimentation, you're supposed to go through and see what works. And obviously,

you don't have to use an absolute value. It's not set in stone, but you're supposed to go

through and see what works for you. And from there, you can set the value. So this is just

kind of a little experimental thing to teach you how to use these features. But like I

said, this website's all about what this course is all about practicing and getting experienced

with this. So you can go through, check out the project files and play around with these

values yourself, really get a feel for how this works. So that's pretty much it for content

resizing, it's very easy, there's only two properties you need to know. And pretty much

the rest of the box model is also quite easy. But it's good that we learn it step by step

so that we master every stage and by the end of it, we'll really know how to master the

layout and really manipulate our page in the best possible way. Alright, let's move on.

So in this video, we're going to be focusing on one of the parts of the box model, which

are mortars. So in the previous video, I talked a little bit about some of the different layers

of the box model and how they work. But in this video, we're actually going to be focusing

on manipulating one of those layers, which is the border. And although it's not the really

the main part of the whole box model idea, it's still a pretty useful skill to know and

it really helps you understand how the box model comes together. Alright, let's get started.

So for the next few videos, we're mainly going to be working with the images simply because

they're just easier to manipulate and set the layout over something working with something

like that. text or titles, things like that. So we're going to be working with our circular

gray here that we created in a previous video, as well as this custom image. So let's get

started. So now there are many different styles that you can use to style the borders. But

we're going to be using the main shorthand that allows us to style everything all at

once. So the property is similar to our background property here, all you need to type is border,

whoops, you do on the image. So I'm going to go here on our radial gradients. And I'm

going to start adding our border. So let's go ahead and get started. So what I'm going

to do is just type border. And remember, every single element has a box around it has this

box model or invisible box. So it doesn't matter what you choose, you can always style

these elements, it might look weird on some elements like this text here, but you can

do it with everything. So there are three main parts to this element here. First is

going to be the size. So we'll talk about that in a second, then you're going to have

the style, which is probably the main part. And then finally, you're going to have the

color. So now that we have this, we can go ahead and start talking about this. So size

is pretty similar to you know, changing the size of an image, for example, yeah, it can

be in pixels percent or em, it doesn't matter, I'm going to go with pixels for now. Now,

the usual range for a border is somewhere between, you know, one and three or four pixels,

we can go much thicker than that, depending on what you need. So I'm going to go ahead

and show you want to pixels looked like. So remember separated by a space. Now we're going

to go over the style. So there are many different styles you can use on your borders. But there's

three main ones that we're going to talk about, or sorry, four main ones, we're going to talk

about dotted, dashed, solid and double. Now normally, you're going to see solid, that's

pretty much the most common one, I'll show you the other versions of this in just a second.

So I'm going to go ahead and type solid, and now come to the color. So as we learned refer

before this can be a named color, this can be an RGB code, or even a hex code, I'm going

to go ahead and just choose a darkish blue, I think that will fit in really well with

the page. And in fact, you know what, let's not, let's not use the color picker, let's

just use our RGB color skills. And take the color of the background, which is here. So

we're going to take those four. And I'm going to go back to our image here and paste it

in. And now what I'm going to do is just darken everything. And if you remember, the darker

it gets the higher oak sorry, the lower all of these values get. So I'm just going to

lower them all by about 50. So here, I'm just going to go 154. Now, again, this doesn't

have to be exact, or anything you can, you can put really, whatever you want here, but

I'm just trying to darken everything, I'm just gonna make this 200. Let's go ahead and

refresh the page and see how our border looks. Now. Let's scroll down. So there's the problem,

we actually forgot a semicolon here on the end of the background. So that's one thing

you need to keep in mind. There we go. Now it's working. And you can see and I did actually

change the color there just to test it out. And you can see, there we go, we have our

background. So obviously, it's pretty obvious here with our bright red color there. But

what I'm actually going to do is go ahead and just play around with some of these and

see if we can change the features. So first thing I'm going to do is go ahead and change

the height. So I'm going to go ahead and set it as 10 pixels. For example, you can see

that they open up the height sorry, the size, you can see that that gets a lot thicker,

so you can change it depending on how you want your border to look like. So now let's

go ahead and change the style. So let's go ahead and try out some of these other styles.

So first, I'm going to try dotted. So you can see now we have a dotted border. Now let's

go ahead and try dashed.

So in this video, we're going to be focusing on one of the parts of the box model, which

are mortars. So in the previous video, I talked a little bit about some of the different layers

of the box model and how they work. But in this video, we're actually going to be focusing

on manipulating one of those layers, which is the border. And although it's not the really

the main part of the whole box model idea, it's still a pretty useful skill to know and

it really helps you understand how the box model comes together. Alright, let's get started.

So for the next few videos, we're mainly going to be working with the images simply because

they're just easier to manipulate and set the layout over something working with something

like that. text or titles, things like that. So we're going to be working with our circular

gray here that we created in a previous video, as well as this custom image. So let's get

started. So now there are many different styles that you can use to style the borders. But

we're going to be using the main shorthand that allows us to style everything all at

once. So the property is similar to our background property here, all you need to type is border,

whoops, you do on the image. So I'm going to go here on our radial gradients. And I'm

going to start adding our border. So let's go ahead and get started. So what I'm going

to do is just type border. And remember, every single element has a box around it has this

box model or invisible box. So it doesn't matter what you choose, you can always style

these elements, it might look weird on some elements like this text here, but you can

do it with everything. So there are three main parts to this element here. First is

going to be the size. So we'll talk about that in a second, then you're going to have

the style, which is probably the main part. And then finally, you're going to have the

color. So now that we have this, we can go ahead and start talking about this. So size

is pretty similar to you know, changing the size of an image, for example, yeah, it can

be in pixels percent or em, it doesn't matter, I'm going to go with pixels for now. Now,

the usual range for a border is somewhere between, you know, one and three or four pixels,

we can go much thicker than that, depending on what you need. So I'm going to go ahead

and show you want to pixels looked like. So remember separated by a space. Now we're going

to go over the style. So there are many different styles you can use on your borders. But there's

three main ones that we're going to talk about, or sorry, four main ones, we're going to talk

about dotted, dashed, solid and double. Now normally, you're going to see solid, that's

pretty much the most common one, I'll show you the other versions of this in just a second.

So I'm going to go ahead and type solid, and now come to the color. So as we learned refer

before this can be a named color, this can be an RGB code, or even a hex code, I'm going

to go ahead and just choose a darkish blue, I think that will fit in really well with

the page. And in fact, you know what, let's not, let's not use the color picker, let's

just use our RGB color skills. And take the color of the background, which is here. So

we're going to take those four. And I'm going to go back to our image here and paste it

in. And now what I'm going to do is just darken everything. And if you remember, the darker

it gets the higher oak sorry, the lower all of these values get. So I'm just going to

lower them all by about 50. So here, I'm just going to go 154. Now, again, this doesn't

have to be exact, or anything you can, you can put really, whatever you want here, but

I'm just trying to darken everything, I'm just gonna make this 200. Let's go ahead and

refresh the page and see how our border looks. Now. Let's scroll down. So there's the problem,

we actually forgot a semicolon here on the end of the background. So that's one thing

you need to keep in mind. There we go. Now it's working. And you can see and I did actually

change the color there just to test it out. And you can see, there we go, we have our

background. So obviously, it's pretty obvious here with our bright red color there. But

what I'm actually going to do is go ahead and just play around with some of these and

see if we can change the features. So first thing I'm going to do is go ahead and change

the height. So I'm going to go ahead and set it as 10 pixels. For example, you can see

that they open up the height sorry, the size, you can see that that gets a lot thicker,

so you can change it depending on how you want your border to look like. So now let's

go ahead and change the style. So let's go ahead and try out some of these other styles.

So first, I'm going to try dotted. So you can see now we have a dotted border. Now let's

go ahead and try dashed.

And you're kind of getting the idea of how this works. Let's see doubled, I think or

double actually, I think that's probably the best other than solid. Yeah, you can see that

that looks pretty nice. Here, we have that double border. It's pretty useful in styling,

but it's not really used very commonly. So the last thing I want to go ahead and change

is the color. So I'm going to go ahead and just take a color from the color picker, I

don't really feel like going through the whole RGB process again, let's go ahead and just

take this color, it's quite dark. Let's go ahead and refresh our page and see what it

looks like. And now you can see the color has changed. So you can see the borders are

not only useful for just changing the style of this of an image or a box or any box in

that for that matter. They're also useful for showing how the box model works. So I'm

going to go ahead and change this back to solid so you can get a better view. So if

you remember in the last video we talked about the different layers of the wall model, and

we remembered that the padding was used to separate or create spacing between the content

and the border. In this case, you can see that the border and the content are directly

touching, which means there is pretty much no padding at all, because there's no space

in between them. On top of that, you can see that this border is also touching also elements

on the page or other elements on the page. So like, for example, this table, there's

a little bit of space between the header and the image. But that's due to other margins.

We'll talk about that when we get later in this section. And so you can see that this

doesn't have much margin either. So you can start to see here how this whole box model

comes together and how you can see what's going on. So yeah, that's a pretty useful

way to kind of look at the box model and see how everything comes together. In the next

few videos, we're going to be looking at the other layers of the box model. And then we're

going to bring it all together and start really changing up this the way this website looks.

Alright, let's move on.

And you're kind of getting the idea of how this works. Let's see doubled, I think or

double actually, I think that's probably the best other than solid. Yeah, you can see that

that looks pretty nice. Here, we have that double border. It's pretty useful in styling,

but it's not really used very commonly. So the last thing I want to go ahead and change

is the color. So I'm going to go ahead and just take a color from the color picker, I

don't really feel like going through the whole RGB process again, let's go ahead and just

take this color, it's quite dark. Let's go ahead and refresh our page and see what it

looks like. And now you can see the color has changed. So you can see the borders are

not only useful for just changing the style of this of an image or a box or any box in

that for that matter. They're also useful for showing how the box model works. So I'm

going to go ahead and change this back to solid so you can get a better view. So if

you remember in the last video we talked about the different layers of the wall model, and

we remembered that the padding was used to separate or create spacing between the content

and the border. In this case, you can see that the border and the content are directly

touching, which means there is pretty much no padding at all, because there's no space

in between them. On top of that, you can see that this border is also touching also elements

on the page or other elements on the page. So like, for example, this table, there's

a little bit of space between the header and the image. But that's due to other margins.

We'll talk about that when we get later in this section. And so you can see that this

doesn't have much margin either. So you can start to see here how this whole box model

comes together and how you can see what's going on. So yeah, that's a pretty useful

way to kind of look at the box model and see how everything comes together. In the next

few videos, we're going to be looking at the other layers of the box model. And then we're

going to bring it all together and start really changing up this the way this website looks.

Alright, let's move on.

So in this video, we're going to be moving on to the next two main layers of our box

model. And in this video, we're going to be talking about margin and padding. So you kind

of already have an idea of what these two are, we've talked about them. In the first

video, we've talked about what they do, we haven't actually talked about how to manipulate

them. So in this video, what I'm going to be doing, what I'm going to be doing is going

through and working with these two properties to actually manipulate our layout. And that's

when the real power of the box model shows. So let's go ahead and get started. The first

thing I want to do is go ahead and choose the right thing to manipulate. And in this

case, the best thing to work with is an image right here, because it's very easy to see

and see the changes when you when you do these margin padding changes. And it's also very

useful to have a border here, which I added, you can really see the difference between

margin and padding and see which one is responsible for what. So let's get started. Now similar

to the rest of the properties, the naming is pretty straightforward. In this case, we're

going to go ahead and use the shorthand margin property. But I'm also going to be showing

you a few other ways, which I didn't show you with the border. Because these are a little

bit easier. And they're kind of hard to understand if you just use the shorthand property, so

I'm going to be just building it from the ground up. So the first property I'm going

to look at is, of course, the shorthand margin property, and how to add margin and padding

to all sides at the same time. So in case you didn't know, this is called top, this

is called bottom, this is left and this is right. But I'm sure you know that especially

with working with multiple backgrounds, things like that. And pretty much the same throughout

all of CSS. So let's get started. So the first thing I'm going to do is go ahead and find

my image. And then I'm going to choose which box model layer I want to manipulate. I'm

going to go ahead and work with padding first, because it's a little bit easier to understand.

And we're going to go and work with margin. So we're just going to type out cutting here.

And now what we're going to do is go and start adding whatever we want. So remember, if you

add just one value, it's going to add it the same value to all sides. So I'm going to say

for example, right now 20 pixels. Now if I go ahead and refresh the page, you can see

that there is 20 pixels of space in between all sides of our image. So you can see 20

pixels on the left on the right on the top and on the bottom. So you can see what's going

on here with our padding free increase this value, for example, it's going to it's going

to almost double and now we have 40 pixels on each side. So that's just a little bit

of information about padding, you can see the spacing between the content, and the border

is getting a lot bigger. Now let's go ahead and change this to margin and see what happens.

So I'm actually just going to completely remove this and refresh the page. So now let's go

ahead and add our 40 pixel margin, we'll just say for now, so you can really see the difference.

So now you can see that the content or the space between the content and the border is

still the same. There's no spacing at all. But you can see that everything around it

has kind of been pushed down. And remember, it's adding margin to all sides, there's 40

pixels between the border and the left side of the page, the border and the top side,

the border on the right and the border and the bottom. So you can see that margin is

moving the image itself around the page, whereas the padding is just adding space inside the

image. So now let's go ahead and talk about some of the more specific properties in case

you wanted to maybe style specific sides. So I'm going to go ahead and change this back

to padding, just like this. And now we can go ahead and see our differences a lot more

clear. So what you can actually do is add a dash and then the name of the side to it.

To actually specify which side you want the padding to be added to. So let's just say

I wanted to add it to the right side. Now if I refresh the page, you can see that all

of this still stays the same. But on the right side, there is 40 pixels of padding. You can

do this with as many as you want. So you can go padding top, for example. And I want 100

pixels on the top, and let's just say on the bottom. And remember, always with the dash,

I just want only five pixels. Now if we go ahead and refresh the page, you can see it

looks quite unbalanced, but you have 100 pixels on the top, we have 40 pixels on the right

and five on the bottom. Now obviously, this gets a little bit tedious after a while, after

you keep you know doing padding right top bottom left, top right, top right, bottom

left, and it gets quite irritating after a while. So what I'm going to do is show you

a really cool shorthand that you can use to style them all at the same time. So we're

going to go back to using our shorthand property.

So in this video, we're going to be moving on to the next two main layers of our box

model. And in this video, we're going to be talking about margin and padding. So you kind

of already have an idea of what these two are, we've talked about them. In the first

video, we've talked about what they do, we haven't actually talked about how to manipulate

them. So in this video, what I'm going to be doing, what I'm going to be doing is going

through and working with these two properties to actually manipulate our layout. And that's

when the real power of the box model shows. So let's go ahead and get started. The first

thing I want to do is go ahead and choose the right thing to manipulate. And in this

case, the best thing to work with is an image right here, because it's very easy to see

and see the changes when you when you do these margin padding changes. And it's also very

useful to have a border here, which I added, you can really see the difference between

margin and padding and see which one is responsible for what. So let's get started. Now similar

to the rest of the properties, the naming is pretty straightforward. In this case, we're

going to go ahead and use the shorthand margin property. But I'm also going to be showing

you a few other ways, which I didn't show you with the border. Because these are a little

bit easier. And they're kind of hard to understand if you just use the shorthand property, so

I'm going to be just building it from the ground up. So the first property I'm going

to look at is, of course, the shorthand margin property, and how to add margin and padding

to all sides at the same time. So in case you didn't know, this is called top, this

is called bottom, this is left and this is right. But I'm sure you know that especially

with working with multiple backgrounds, things like that. And pretty much the same throughout

all of CSS. So let's get started. So the first thing I'm going to do is go ahead and find

my image. And then I'm going to choose which box model layer I want to manipulate. I'm

going to go ahead and work with padding first, because it's a little bit easier to understand.

And we're going to go and work with margin. So we're just going to type out cutting here.

And now what we're going to do is go and start adding whatever we want. So remember, if you

add just one value, it's going to add it the same value to all sides. So I'm going to say

for example, right now 20 pixels. Now if I go ahead and refresh the page, you can see

that there is 20 pixels of space in between all sides of our image. So you can see 20

pixels on the left on the right on the top and on the bottom. So you can see what's going

on here with our padding free increase this value, for example, it's going to it's going

to almost double and now we have 40 pixels on each side. So that's just a little bit

of information about padding, you can see the spacing between the content, and the border

is getting a lot bigger. Now let's go ahead and change this to margin and see what happens.

So I'm actually just going to completely remove this and refresh the page. So now let's go

ahead and add our 40 pixel margin, we'll just say for now, so you can really see the difference.

So now you can see that the content or the space between the content and the border is

still the same. There's no spacing at all. But you can see that everything around it

has kind of been pushed down. And remember, it's adding margin to all sides, there's 40

pixels between the border and the left side of the page, the border and the top side,

the border on the right and the border and the bottom. So you can see that margin is

moving the image itself around the page, whereas the padding is just adding space inside the

image. So now let's go ahead and talk about some of the more specific properties in case

you wanted to maybe style specific sides. So I'm going to go ahead and change this back

to padding, just like this. And now we can go ahead and see our differences a lot more

clear. So what you can actually do is add a dash and then the name of the side to it.

To actually specify which side you want the padding to be added to. So let's just say

I wanted to add it to the right side. Now if I refresh the page, you can see that all

of this still stays the same. But on the right side, there is 40 pixels of padding. You can

do this with as many as you want. So you can go padding top, for example. And I want 100

pixels on the top, and let's just say on the bottom. And remember, always with the dash,

I just want only five pixels. Now if we go ahead and refresh the page, you can see it

looks quite unbalanced, but you have 100 pixels on the top, we have 40 pixels on the right

and five on the bottom. Now obviously, this gets a little bit tedious after a while, after

you keep you know doing padding right top bottom left, top right, top right, bottom

left, and it gets quite irritating after a while. So what I'm going to do is show you

a really cool shorthand that you can use to style them all at the same time. So we're

going to go back to using our shorthand property.

And now we're going to go ahead and add four values separated by spaces, but it's a little

bit confusing at first, okay, so just bear with me. Now, what I'm going to do is for

the left, I don't want anything. So let's just start from the start from the top. So

on the top, I want 100 pixels, like that. On the right, I want 40 pixels. On the left,

I don't want anything, so I'm just going to say zero. Now, you could say zero pixels.

But in this case, we don't want anything at all. So it doesn't really matter which one

you choose, I just prefer to put a zero there. And then of course, on the right, or sorry,

on the bottom, we want five pixels. Now let's go ahead and refresh and see what happens.

It stays pretty much it looks must have confused, confused, something over there. So 100. On

the top, we have 40 on the right, and on the bottom of the so there's the problem. On the

bottom, we want five pixels, and on the left, we want zero. So you can see it gets quite

confusing after some time. So you can see that now it's exactly the same. So here's

what you have to kind of remember, the first one is the top, the second is the right, then

the bottom and left. So an easy way to remember this is by looking at the pieces of the border,

if you draw a diagonal line straight in half, you style the top on the right first, and

then the bottom on the left. So just keep that in mind and you'll be fine. So if you

if you ever forget, you can always go and check online, there's a lot of references

talking about these different values here. And I'm actually just going to go ahead and

change it to margin for a second. So you can see what's going on. Now you can see if I

change the margin, actually, it stays in the same position. But instead of adding internal

space, it's adding external space. So that's just one thing to keep in mind. But like I

said, if you want to go ahead and review this, you can always find some resources online,

there's a lot going on there. Now let's talk about shortening this into actually only two

sections, because let's just say on the top and bottom, you want a certain margin, but

then on the left hand, right you want another this is a pretty common thing that you you're

going to want to do in CSS. So I'm going to show you how to do that, all you have to do

is go ahead and shorten it to two values, I'm actually going to go ahead Yeah, I'll

go with margin. The first two values are going to be for the top and bottom at the same time.

So I'm going to go ahead and add 80 pixels of padding, Oh, whoops, 80 pixels. There we

go. And now for ourselves whoops, now for our second value, it's going to be our left

and right values at the same time. So I'm going to go ahead and add 40 pixels doesn't

matter the order, because this is always going to be for the top and bottom, this is always

going to be 40, left and right. So just make sure that they are equal. So let's go ahead

and refresh. And now you can see the left and right have kind of stayed a little bit

shorter. Whereas the top and bottom are very the margin is very big. As you can see here,

the top and bottom is double the left and right. So that's a nice shorthand that you

can use to style to different or Well, two different sides. So for example, now, if you

split, if you can just take this part and this part style, the style and at the same

time, and then you take the left and right and do the same thing with them. So I know

that's a lot to take in. And there's a lot of different ways. But just remember, if you

ever get confused, you can either use the internet, or just use margin dash and then

the position. But other than that, all you need to know for now is the concept. You just

need to know how margin and padding work and how you can actually manipulate them what

they do. I mean, what do you do when you say the margin left is 10 pixels. So just make

sure that you know that, you know when you add a certain space to a position, you're

basically changing the spacing between something and another thing based on what whichever

layer you chose. So for example, if you chose padding, you're going to be changing the spacing

between the content and the border. So that's pretty much it for margin and padding. Now

we're going to get a lot more experience with this as we go through the course and style

more things. But for now, just make sure you know how to use the shorthand properties,

you know how to use all these different shortcuts. Now you don't need to memorize them, you just

need to know kind of how they work. Obviously, memorizing them is good. But if you, if you

forget them, don't worry too much about that. Just make sure you know how to use these properly.

And that's pretty much it. Let's move on.

And now we're going to go ahead and add four values separated by spaces, but it's a little

bit confusing at first, okay, so just bear with me. Now, what I'm going to do is for

the left, I don't want anything. So let's just start from the start from the top. So

on the top, I want 100 pixels, like that. On the right, I want 40 pixels. On the left,

I don't want anything, so I'm just going to say zero. Now, you could say zero pixels.

But in this case, we don't want anything at all. So it doesn't really matter which one

you choose, I just prefer to put a zero there. And then of course, on the right, or sorry,

on the bottom, we want five pixels. Now let's go ahead and refresh and see what happens.

It stays pretty much it looks must have confused, confused, something over there. So 100. On

the top, we have 40 on the right, and on the bottom of the so there's the problem. On the

bottom, we want five pixels, and on the left, we want zero. So you can see it gets quite

confusing after some time. So you can see that now it's exactly the same. So here's

what you have to kind of remember, the first one is the top, the second is the right, then

the bottom and left. So an easy way to remember this is by looking at the pieces of the border,

if you draw a diagonal line straight in half, you style the top on the right first, and

then the bottom on the left. So just keep that in mind and you'll be fine. So if you

if you ever forget, you can always go and check online, there's a lot of references

talking about these different values here. And I'm actually just going to go ahead and

change it to margin for a second. So you can see what's going on. Now you can see if I

change the margin, actually, it stays in the same position. But instead of adding internal

space, it's adding external space. So that's just one thing to keep in mind. But like I

said, if you want to go ahead and review this, you can always find some resources online,

there's a lot going on there. Now let's talk about shortening this into actually only two

sections, because let's just say on the top and bottom, you want a certain margin, but

then on the left hand, right you want another this is a pretty common thing that you you're

going to want to do in CSS. So I'm going to show you how to do that, all you have to do

is go ahead and shorten it to two values, I'm actually going to go ahead Yeah, I'll

go with margin. The first two values are going to be for the top and bottom at the same time.

So I'm going to go ahead and add 80 pixels of padding, Oh, whoops, 80 pixels. There we

go. And now for ourselves whoops, now for our second value, it's going to be our left

and right values at the same time. So I'm going to go ahead and add 40 pixels doesn't

matter the order, because this is always going to be for the top and bottom, this is always

going to be 40, left and right. So just make sure that they are equal. So let's go ahead

and refresh. And now you can see the left and right have kind of stayed a little bit

shorter. Whereas the top and bottom are very the margin is very big. As you can see here,

the top and bottom is double the left and right. So that's a nice shorthand that you

can use to style to different or Well, two different sides. So for example, now, if you

split, if you can just take this part and this part style, the style and at the same

time, and then you take the left and right and do the same thing with them. So I know

that's a lot to take in. And there's a lot of different ways. But just remember, if you

ever get confused, you can either use the internet, or just use margin dash and then

the position. But other than that, all you need to know for now is the concept. You just

need to know how margin and padding work and how you can actually manipulate them what

they do. I mean, what do you do when you say the margin left is 10 pixels. So just make

sure that you know that, you know when you add a certain space to a position, you're

basically changing the spacing between something and another thing based on what whichever

layer you chose. So for example, if you chose padding, you're going to be changing the spacing

between the content and the border. So that's pretty much it for margin and padding. Now

we're going to get a lot more experience with this as we go through the course and style

more things. But for now, just make sure you know how to use the shorthand properties,

you know how to use all these different shortcuts. Now you don't need to memorize them, you just

need to know kind of how they work. Obviously, memorizing them is good. But if you, if you

forget them, don't worry too much about that. Just make sure you know how to use these properly.

And that's pretty much it. Let's move on.

So this is a pretty important video, because we're talking about a concept that is going

to be used constantly in the next few sections. And it's a very, very important part of CSS,

and kind of defines the way that you look at documents. So the two properties that we're

going to be looking at are float, which is the less important one and display, which

is the very important properties that we need to learn. So let's cover float first, because

it's an easier thing to approach. But before we start for both of these elements, you need

to understand the concept of inline and block level elements. So first of all elements have

a certain display type, which we're going to be manipulating in the next property. This

display type pretty much defines the behavior of the elements. So there are two main display

types block and inline. So pretty much if we look at our HTML document, here we go through

and you can see all of these tags, creating these tags create a sort of a sort of display

behavior for the content inside them. So the block level element, what it basically does

is move moves everything onto its own section, its own while block. So an example of one

of these elements would be a p tag, you can see that if this was an inline element would

be flowing with the rest of the things. But you can see here, despite the margin, this

is moved on to its own section, it's not playing or moving after the image, it's moved on to

its own section, and everything after it comes after Well, the block. On the other hand,

an inline element is something that won't really move anything onto its own section,

it's going to keep it keep it intact, it's not going to move it or change it in any way,

it's just going to leave it how it naturally occurs on the page. So an example, a very

good example of one of these would be a span tag, because what a span tag pretty much does

is it's used to contain some piece of content in an inline style. So for example, this italics

class would be a perfect representation of an inline tag, what we're trying to do is

I telesign, some text. And if the span was a block level element, this text here, this

italic size, text would be moved on to its own section, so everything preceding it would

come before it. And then there would be a new line with the text. And then after it

would come the rest of the text. So you can see there that the inline and block level

tags really make a difference depending on what you want to use it for. So what we're

going to be doing in this video is going through and learning how to change the display type

of these different elements. But first, let's talk about float. So again, these tags come

with a natural display type and how they are placed on the page is how they naturally occur.

But there's actually a way to change the way that they look. And this is done using float.

So if you just listen to the name there, what element pretty much does is change how the

element will float on the page. So I'll go ahead and do do some examples here. For example,

let's just take this gradient here, this div. So I'm going to go and look for it the service

image, I'm going to say set the float and I'm going to say it float to the right and

watch what happens. You can see that now what happens is pretty much this just flows over

to the right side of the page. And it also changes all the content after it. So you can

see that this content here has now been pushed up. So this kind of shows how a little bit

of how flow works. And this doesn't just have to be with images, we can do it with text

as well. So if I go through and choose something like this element over here, this some link

here, so I'm going to go ahead on this link. And I'm going to say it float to the right.

Now let's go ahead and refresh the page. And you can see that that kind of flows over to

the right and everything before it is now kind of pushed up where it was. So you can

think of this as kind of a kind of a Tetris puzzle block. When you're moving something

over, everything is going to be pushed up or moved around as well. So to fit the page

so you can kind of think of it in that way. Now obviously, once you start getting some

really a lot of experience with float, you can kind of predict where everything is going

to move on the page. But floats are really useful for laying out documents. Especially

if you want to kind of Have position images next to text or move things around in a way

that looks more like a proper document. So I'm going to remove that float. And I'm just

going to do it with our image over here, which with our image, our about us image. So I'm

going to go ahead and say it floats over to the right.

So this is a pretty important video, because we're talking about a concept that is going

to be used constantly in the next few sections. And it's a very, very important part of CSS,

and kind of defines the way that you look at documents. So the two properties that we're

going to be looking at are float, which is the less important one and display, which

is the very important properties that we need to learn. So let's cover float first, because

it's an easier thing to approach. But before we start for both of these elements, you need

to understand the concept of inline and block level elements. So first of all elements have

a certain display type, which we're going to be manipulating in the next property. This

display type pretty much defines the behavior of the elements. So there are two main display

types block and inline. So pretty much if we look at our HTML document, here we go through

and you can see all of these tags, creating these tags create a sort of a sort of display

behavior for the content inside them. So the block level element, what it basically does

is move moves everything onto its own section, its own while block. So an example of one

of these elements would be a p tag, you can see that if this was an inline element would

be flowing with the rest of the things. But you can see here, despite the margin, this

is moved on to its own section, it's not playing or moving after the image, it's moved on to

its own section, and everything after it comes after Well, the block. On the other hand,

an inline element is something that won't really move anything onto its own section,

it's going to keep it keep it intact, it's not going to move it or change it in any way,

it's just going to leave it how it naturally occurs on the page. So an example, a very

good example of one of these would be a span tag, because what a span tag pretty much does

is it's used to contain some piece of content in an inline style. So for example, this italics

class would be a perfect representation of an inline tag, what we're trying to do is

I telesign, some text. And if the span was a block level element, this text here, this

italic size, text would be moved on to its own section, so everything preceding it would

come before it. And then there would be a new line with the text. And then after it

would come the rest of the text. So you can see there that the inline and block level

tags really make a difference depending on what you want to use it for. So what we're

going to be doing in this video is going through and learning how to change the display type

of these different elements. But first, let's talk about float. So again, these tags come

with a natural display type and how they are placed on the page is how they naturally occur.

But there's actually a way to change the way that they look. And this is done using float.

So if you just listen to the name there, what element pretty much does is change how the

element will float on the page. So I'll go ahead and do do some examples here. For example,

let's just take this gradient here, this div. So I'm going to go and look for it the service

image, I'm going to say set the float and I'm going to say it float to the right and

watch what happens. You can see that now what happens is pretty much this just flows over

to the right side of the page. And it also changes all the content after it. So you can

see that this content here has now been pushed up. So this kind of shows how a little bit

of how flow works. And this doesn't just have to be with images, we can do it with text

as well. So if I go through and choose something like this element over here, this some link

here, so I'm going to go ahead on this link. And I'm going to say it float to the right.

Now let's go ahead and refresh the page. And you can see that that kind of flows over to

the right and everything before it is now kind of pushed up where it was. So you can

think of this as kind of a kind of a Tetris puzzle block. When you're moving something

over, everything is going to be pushed up or moved around as well. So to fit the page

so you can kind of think of it in that way. Now obviously, once you start getting some

really a lot of experience with float, you can kind of predict where everything is going

to move on the page. But floats are really useful for laying out documents. Especially

if you want to kind of Have position images next to text or move things around in a way

that looks more like a proper document. So I'm going to remove that float. And I'm just

going to do it with our image over here, which with our image, our about us image. So I'm

going to go ahead and say it floats over to the right.

See that. So now you can see that it floats over to the right. And now everything before

it has kind of been pushed up onto this section here. So there we go. Now it's working, and

everything is looking great. Now let's look at the next property, which is display. So

display is pretty much a way of changing the display property of an element that it naturally

comes with. So of course, we know things like a div or a paragraph tag come as a block level

element, whereas something like a span or a bolding tag would come as an inline element.

So what we're going to be doing is going through and changing these properties. Now, I didn't

actually cover the properties of float, which I'm going to go over in just a second. But

what I'm going to talk about is the different properties of display. So of course, you have

the standard inline and block, which is pretty obvious, but then you have a few others. So

the one that I'm going to be covering here is none now. So what the display none property

does is pretty much just completely, almost remove the element from the page. Now it doesn't

actually remove it. But what happens is the entire that invisible box that contains everything

just suddenly disappears, you can't see it anymore, it doesn't take up any space. It's

just completely gone from the page. So I'm going to show you what that looks like right

now. Let's go ahead. And for example, let's just say that this table is kind of annoying,

we don't really want it here. So what I'm going to do over here in my table is given

a class of site table. Now I'm going to go ahead and select it here, dot site dash table,

and I'm going to say display is none. Now watch what happens, you can see that that

table completely disappears. And it doesn't even take up the space anymore. It's not like

the table. It's just invisible or not, not what not visible, but it's completely gone.

Now, this is very, very commonly used once you start using JavaScript. And would you

start making your site's interactive to maybe create web games or hide something, maybe

create some sort of hidden token, it can be used for all sorts of things. So this is a

very useful display property. So I'm going to go ahead and remove that. Now the next

one I want to talk about, I'm actually going to, I'll just keep it there, if we decide

to use it later. The next one I'm going to talk about is inline block. So we know that

we have two different display types, inline, and block. But there's actually a combination

of the two, which is a little bit hard to understand. But once we start using it, you

can see how useful it is. So inline block is a little bit Well, like I said, it's a

little bit hard to understand. But pretty much what it does is take features from both

inline and block level elements and combines them together. So we know that inline elements

do not move anything onto their own line, we know that they stay in their place, they

don't touch anything or move anything around. Whereas block level elements, move them onto

the new line. Now, what happens is that in light, or this inline block element takes

that new sticks that sort of new line feature and removes it completely, it does not move

anything onto its own new line. But what the block level elements do is they actually create

some spacing around the element once it's moved on to its new block. So the inline block

element then takes this and puts it into itself. So the inline block element pretty much keeps

everything in the same line, but creates that block level spacing that can be found in other

block level elements. So let's go through and actually demonstrate how this works. I'm

going to go back to my table and add our inline block display property here, inline block.

See that. So now you can see that it floats over to the right. And now everything before

it has kind of been pushed up onto this section here. So there we go. Now it's working, and

everything is looking great. Now let's look at the next property, which is display. So

display is pretty much a way of changing the display property of an element that it naturally

comes with. So of course, we know things like a div or a paragraph tag come as a block level

element, whereas something like a span or a bolding tag would come as an inline element.

So what we're going to be doing is going through and changing these properties. Now, I didn't

actually cover the properties of float, which I'm going to go over in just a second. But

what I'm going to talk about is the different properties of display. So of course, you have

the standard inline and block, which is pretty obvious, but then you have a few others. So

the one that I'm going to be covering here is none now. So what the display none property

does is pretty much just completely, almost remove the element from the page. Now it doesn't

actually remove it. But what happens is the entire that invisible box that contains everything

just suddenly disappears, you can't see it anymore, it doesn't take up any space. It's

just completely gone from the page. So I'm going to show you what that looks like right

now. Let's go ahead. And for example, let's just say that this table is kind of annoying,

we don't really want it here. So what I'm going to do over here in my table is given

a class of site table. Now I'm going to go ahead and select it here, dot site dash table,

and I'm going to say display is none. Now watch what happens, you can see that that

table completely disappears. And it doesn't even take up the space anymore. It's not like

the table. It's just invisible or not, not what not visible, but it's completely gone.

Now, this is very, very commonly used once you start using JavaScript. And would you

start making your site's interactive to maybe create web games or hide something, maybe

create some sort of hidden token, it can be used for all sorts of things. So this is a

very useful display property. So I'm going to go ahead and remove that. Now the next

one I want to talk about, I'm actually going to, I'll just keep it there, if we decide

to use it later. The next one I'm going to talk about is inline block. So we know that

we have two different display types, inline, and block. But there's actually a combination

of the two, which is a little bit hard to understand. But once we start using it, you

can see how useful it is. So inline block is a little bit Well, like I said, it's a

little bit hard to understand. But pretty much what it does is take features from both

inline and block level elements and combines them together. So we know that inline elements

do not move anything onto their own line, we know that they stay in their place, they

don't touch anything or move anything around. Whereas block level elements, move them onto

the new line. Now, what happens is that in light, or this inline block element takes

that new sticks that sort of new line feature and removes it completely, it does not move

anything onto its own new line. But what the block level elements do is they actually create

some spacing around the element once it's moved on to its new block. So the inline block

element then takes this and puts it into itself. So the inline block element pretty much keeps

everything in the same line, but creates that block level spacing that can be found in other

block level elements. So let's go through and actually demonstrate how this works. I'm

going to go back to my table and add our inline block display property here, inline block.

Now I'm going to go ahead and refresh the page and see what happens. So you can see

that it's kind of kept on the same line. But it's given that sort of spacing or well block

level spacing that you can't really find with a normal inline element. If I actually go

ahead and change this to inline here, you'll see this very apparent, you can see that that

click here to Google text has now moved around. It's a little bit of a weird box here. So

you can see the difference between an inline element and an inline block element. So there

you go. inline block is a very useful display property. You can use it a lot in your website

to maybe layout grids, and all sorts of things like that. And we're actually going to be

using some very special display properties later in this course called flex and grid,

which are really going to help us create these beautiful grids and layouts that can transform

our website. Everywhere. So that's pretty much it for display. Now let's go on to talk

about some of the other float properties, because I kind of wanted to save it for last.

So we already know that there are two main float properties, which are left and right.

But there's actually a few more that we can use that are sort of different. And they're

not very conventional, but they're still apparent. And they can well change the way that while

a palette, an element floats on the page. So the first one is the most interesting one

is the one that is, well, the only real floating element, which is called inherit. So you can

see here that we have Child Elements and parent elements. Now, what's really interesting is,

what can happen is if we have, let's say, a div with an h2 and an image in it, what

we can do is pretty much set the divs float as right. And we can set the one of the child

elements such as the h2, we can set its float as inherit, what's going to happen is it's

going to take the float property of the parent element. Now, you're probably asking why this

would be useful at hoc at all? Well, pretty much, what you can do is you can actually

lay out multiple elements without having to specify their float as long as their children

and parents. So for example, if you have an element that's maybe four or five levels deep,

and you don't want to specify the float every time, you can just use an inherit element

to move everything to the right side, with only specifying the float once to the last

value I want to talk about is the is the non value. So this is kind of the default value

that you're going to see if you don't specify anything. And it's pretty much just going

to keep the item in its place. It's not going to change its float or display, and it's pretty

much not going to move it around at all. It's not the same as display none, though, it doesn't

really remove anything, what float none pretty much does, it's just leaves it where it naturally

occurs in the text. So for example, if you have a block level, div tag, and you've set

its float to none, then it's just going to appear as a block level elements is not going

to move around or do anything similar. So there you go. That's pretty much it for floats,

and displays. We're going to be working with these a lot throughout the rest of this course.

And they're very important property. So I recommend you get some practice with them,

and start using them. So you can see all of the different ways that you can use the display

and flow properties in your website. Now, apart from the box model, and a few other

ways displays and floats are a very common way or at least a word of manipulating your

website and making it look really good. So without it, the website is just kind of everywhere,

all the elements are scattered around. But if you want to really make the website, look

how you want it to look, you need to use this in combination with a few other features that

we are going to learn in the future in order to make your website look great. Alright,

let's move on.

Now I'm going to go ahead and refresh the page and see what happens. So you can see

that it's kind of kept on the same line. But it's given that sort of spacing or well block

level spacing that you can't really find with a normal inline element. If I actually go

ahead and change this to inline here, you'll see this very apparent, you can see that that

click here to Google text has now moved around. It's a little bit of a weird box here. So

you can see the difference between an inline element and an inline block element. So there

you go. inline block is a very useful display property. You can use it a lot in your website

to maybe layout grids, and all sorts of things like that. And we're actually going to be

using some very special display properties later in this course called flex and grid,

which are really going to help us create these beautiful grids and layouts that can transform

our website. Everywhere. So that's pretty much it for display. Now let's go on to talk

about some of the other float properties, because I kind of wanted to save it for last.

So we already know that there are two main float properties, which are left and right.

But there's actually a few more that we can use that are sort of different. And they're

not very conventional, but they're still apparent. And they can well change the way that while

a palette, an element floats on the page. So the first one is the most interesting one

is the one that is, well, the only real floating element, which is called inherit. So you can

see here that we have Child Elements and parent elements. Now, what's really interesting is,

what can happen is if we have, let's say, a div with an h2 and an image in it, what

we can do is pretty much set the divs float as right. And we can set the one of the child

elements such as the h2, we can set its float as inherit, what's going to happen is it's

going to take the float property of the parent element. Now, you're probably asking why this

would be useful at hoc at all? Well, pretty much, what you can do is you can actually

lay out multiple elements without having to specify their float as long as their children

and parents. So for example, if you have an element that's maybe four or five levels deep,

and you don't want to specify the float every time, you can just use an inherit element

to move everything to the right side, with only specifying the float once to the last

value I want to talk about is the is the non value. So this is kind of the default value

that you're going to see if you don't specify anything. And it's pretty much just going

to keep the item in its place. It's not going to change its float or display, and it's pretty

much not going to move it around at all. It's not the same as display none, though, it doesn't

really remove anything, what float none pretty much does, it's just leaves it where it naturally

occurs in the text. So for example, if you have a block level, div tag, and you've set

its float to none, then it's just going to appear as a block level elements is not going

to move around or do anything similar. So there you go. That's pretty much it for floats,

and displays. We're going to be working with these a lot throughout the rest of this course.

And they're very important property. So I recommend you get some practice with them,

and start using them. So you can see all of the different ways that you can use the display

and flow properties in your website. Now, apart from the box model, and a few other

ways displays and floats are a very common way or at least a word of manipulating your

website and making it look really good. So without it, the website is just kind of everywhere,

all the elements are scattered around. But if you want to really make the website, look

how you want it to look, you need to use this in combination with a few other features that

we are going to learn in the future in order to make your website look great. Alright,

let's move on.

So today we're going to get started with a new topic in CSS. And this is a very exciting

one, because we're going to start learning more about very advanced layout techniques.

So in the past, we've learned about two pretty basic layout to learn about floats and displays

and the box model, but they're not really enough to create the best websites possible.

To do that, we're going to need some extra advanced techniques, which is what we're going

to be covering in the next three sections. In this first section, we're going to be looking

at CSS Flexbox. Now we're going to give a quick or I'm going to give a quick introduction

to it. In this video, we'll be talking a little bit about what it is, how it works, and how

you can apply it and what you can do with it. But for now, we're just going to go ahead

and get started with it. So first of all, what actually is Flexbox. So if you don't

know already, Flexbox stands for flexible box. And similar to the box model. It's a

concept in CSS, or a feature that allows you to create and arrange items or elements very

easily. So it's a great alternative to using something like the box model or floats or

displays if you want to create very responsive websites or lay out your items in a way that

makes it look great. So this is an alternative to using those traditional techniques that

were using earlier versions of CSS. So the Flexbox or the main Flexbox is split into

two different components. You have the container and the flex items. So the container is the

parent element, it's what is going to become the container for all of the items now. Usually

what you would do is use this on a div or some other form of container element. And

then use some special properties which we're going to be covering in the next video to

create the flex container. But then the next part is the flex items. So this can be pretty

much anything you want images, links, spans whatever you want, you can add them as flex

items and this is what makes up the flex box. Now What you can do with these two components

is actually use different properties to manipulate them and create really nice layout like this

one that we have here. And that's what we're actually going to be covering in the next

few videos is learning how to manipulate the container as well as the items inside. So

what can you actually do with Flexbox? Well, you know that you can create these nice responsive

grids, but what would you actually use them for? Well, although it might not be apparent,

pretty much all pages these days use some form of CSS layout, whether it be the box

model, or Flexbox, or CSS Grid, which we're going to be covering in the next section,

there are so many ways that it can be used. Flexbox is mainly used to layout a website

or create different components. So for example, the top of the page is going to contain your

sidebar, that's one flex item. And then you have the right side of your page, which takes

up maybe 30% of the page. And that's your or Yeah, so the top is your menu, for example.

And then the side on the right is your sidebar, and you have the rest is content and you have

little widgets everywhere. And you can start to see how this all connects together, you

can create really good looking websites by creating one huge flex container, and then

creating a bunch of separate items, putting all of your different things in those items.

So it's pretty much just a way to layout your website. Now in the past, we've used floats

to move images around. And we've used also margin and padding to push things up and down.

But that's not a really efficient way, it's more of a kind of hack to move things around.

And using something like Flexbox pretty much lets you do all of this naturally. Alright,

so there we go. That's a little introduction to Flexbox. And how it works. Now what we're

going to do is go ahead and go onto our machine and start creating some flex containers. Alright,

let's move on.

So today we're going to get started with a new topic in CSS. And this is a very exciting

one, because we're going to start learning more about very advanced layout techniques.

So in the past, we've learned about two pretty basic layout to learn about floats and displays

and the box model, but they're not really enough to create the best websites possible.

To do that, we're going to need some extra advanced techniques, which is what we're going

to be covering in the next three sections. In this first section, we're going to be looking

at CSS Flexbox. Now we're going to give a quick or I'm going to give a quick introduction

to it. In this video, we'll be talking a little bit about what it is, how it works, and how

you can apply it and what you can do with it. But for now, we're just going to go ahead

and get started with it. So first of all, what actually is Flexbox. So if you don't

know already, Flexbox stands for flexible box. And similar to the box model. It's a

concept in CSS, or a feature that allows you to create and arrange items or elements very

easily. So it's a great alternative to using something like the box model or floats or

displays if you want to create very responsive websites or lay out your items in a way that

makes it look great. So this is an alternative to using those traditional techniques that

were using earlier versions of CSS. So the Flexbox or the main Flexbox is split into

two different components. You have the container and the flex items. So the container is the

parent element, it's what is going to become the container for all of the items now. Usually

what you would do is use this on a div or some other form of container element. And

then use some special properties which we're going to be covering in the next video to

create the flex container. But then the next part is the flex items. So this can be pretty

much anything you want images, links, spans whatever you want, you can add them as flex

items and this is what makes up the flex box. Now What you can do with these two components

is actually use different properties to manipulate them and create really nice layout like this

one that we have here. And that's what we're actually going to be covering in the next

few videos is learning how to manipulate the container as well as the items inside. So

what can you actually do with Flexbox? Well, you know that you can create these nice responsive

grids, but what would you actually use them for? Well, although it might not be apparent,

pretty much all pages these days use some form of CSS layout, whether it be the box

model, or Flexbox, or CSS Grid, which we're going to be covering in the next section,

there are so many ways that it can be used. Flexbox is mainly used to layout a website

or create different components. So for example, the top of the page is going to contain your

sidebar, that's one flex item. And then you have the right side of your page, which takes

up maybe 30% of the page. And that's your or Yeah, so the top is your menu, for example.

And then the side on the right is your sidebar, and you have the rest is content and you have

little widgets everywhere. And you can start to see how this all connects together, you

can create really good looking websites by creating one huge flex container, and then

creating a bunch of separate items, putting all of your different things in those items.

So it's pretty much just a way to layout your website. Now in the past, we've used floats

to move images around. And we've used also margin and padding to push things up and down.

But that's not a really efficient way, it's more of a kind of hack to move things around.

And using something like Flexbox pretty much lets you do all of this naturally. Alright,

so there we go. That's a little introduction to Flexbox. And how it works. Now what we're

going to do is go ahead and go onto our machine and start creating some flex containers. Alright,

let's move on.

So in this video, we're going to be going ahead and creating our first flex container

or Flexbox. Now, I already have some apparatus set up here so that we can get started straight

away without having to go and do anything with any of the styling. And this is the best

way to really see how Flexbox works. Because without it, you know, it's just kind of look,

it's gonna look kind of weird, all the invisible backgrounds and things. So I think this is

the best way to really see demonstrate how Flexbox works. Alright, let's get started.

So well, it's actually quite easy to set up a flex container, the hard part is creating

how you want, but it uses the display property just like any other item on this page. So

when we set the display to block or inline, block or inline, we do all of that. But we

can actually set it to flex. And what that's going to do is create our flex container.

So all we have to do is go ahead and find our parent element, the container that we

want, and I already have the class set up here. If you want to go ahead and do this

on your own, you can, like I said, if maybe if you want to copy these styles, for example,

you can go ahead and check out the project files. But like I said, you can just go ahead

and create your own setup so that you can start working with it. So first of all, we're

going to go ahead and find our parent element. So in this case, these are going to be our

items in the future. And then this div is our main element. So I'm going to go over

here. And I will go into go ahead and give it the display property of flex. Now, instead

of doing something like block or inline block, instead, we set it to flex. And what this

is going to do is create our flex container. Now watch what happens. You can see now that

instead of having it just in a row, all of these items have been spaced out accordingly.

Now all of the default values of all of the flex properties have now been set up now that

our display mode has been activated. Now in the next few videos, we're actually going

to be going through and manipulating these properties. For example, changing the order,

we're going to change the size and width of these. And we're going to go ahead and justify

and align the content. But that's for a future video. For now, all you need to know is that

by setting the display property to flex on a parent container, it's going to set up all

the default values of the flex properties and create the flex container that we want

to work with in the next few videos. Alright, let's move on.

So in this video, we're going to be going ahead and creating our first flex container

or Flexbox. Now, I already have some apparatus set up here so that we can get started straight

away without having to go and do anything with any of the styling. And this is the best

way to really see how Flexbox works. Because without it, you know, it's just kind of look,

it's gonna look kind of weird, all the invisible backgrounds and things. So I think this is

the best way to really see demonstrate how Flexbox works. Alright, let's get started.

So well, it's actually quite easy to set up a flex container, the hard part is creating

how you want, but it uses the display property just like any other item on this page. So

when we set the display to block or inline, block or inline, we do all of that. But we

can actually set it to flex. And what that's going to do is create our flex container.

So all we have to do is go ahead and find our parent element, the container that we

want, and I already have the class set up here. If you want to go ahead and do this

on your own, you can, like I said, if maybe if you want to copy these styles, for example,

you can go ahead and check out the project files. But like I said, you can just go ahead

and create your own setup so that you can start working with it. So first of all, we're

going to go ahead and find our parent element. So in this case, these are going to be our

items in the future. And then this div is our main element. So I'm going to go over

here. And I will go into go ahead and give it the display property of flex. Now, instead

of doing something like block or inline block, instead, we set it to flex. And what this

is going to do is create our flex container. Now watch what happens. You can see now that

instead of having it just in a row, all of these items have been spaced out accordingly.

Now all of the default values of all of the flex properties have now been set up now that

our display mode has been activated. Now in the next few videos, we're actually going

to be going through and manipulating these properties. For example, changing the order,

we're going to change the size and width of these. And we're going to go ahead and justify

and align the content. But that's for a future video. For now, all you need to know is that

by setting the display property to flex on a parent container, it's going to set up all

the default values of the flex properties and create the flex container that we want

to work with in the next few videos. Alright, let's move on.

So in this video, we're going to be covering two of the properties of our flex container,

direction and wrap. So right now we have everything set up. We have five flex items here labeled

A to E, and then we also have our container. But now we're going to go through and start

manipulating it. So the first thing I want to talk about is flex direction. So pretty

much right now it's laid out in a row here, but what we can actually do is specify the

direction that we want our items to go in. We can also reverse the order using a special

suffix. Let's get started. So the property that we're going to use is flex direction,

flex dash direction. And you add this to the container to the flex container. So here we're

going to specify either row or column row is the default value, and it's going to be

going in a direction to the right side of the container. We also have column, which

is what we kind of saw before. And you can see it's a little bit better spaced out. And

you can see it goes A to E, except it goes in a column. Now, that's pretty easy to understand.

But we can also go reverse. So instead of A to E, it goes eat a, all we have to do is

add dash reverse to column a row, and it's going to flip the direction that our item

is going in. Let's refresh. And now you can see it's going in reverse. We can also do

the same thing with row or pretty much any other value for this property here. You can

see now it goes E to a, and it also goes in the opposite way to the left side of the page

instead of to the right side. So that's it for flex direction, it's very easy to understand,

I'm just going to go ahead and set it back to wrote the default. The next item I want

to talk about is flex wrap. So this is a little bit more complicated to understand. But once

we start using it, it gets quite easy. Pretty much when you wrap an item, it's going to

move it to a new row or column to avoid the exceeding the maximum length. So for example,

if we had more than the specified amount of items here, so if we had a, b, c, d, e, and

then F, G, H, I and all the ways to K or L, we don't want it to keep going on forever.

So what we want to do is once it gets to a certain length, rump length, wrap it around

and move it to a new line. So I'm actually going to go ahead and do that here. I'm going

to go ahead and copy all of these items, pretty much double it. And then I'm going to say

f, g, h, i and j. And now let's go ahead and refresh the page and see how this looks. You

can see we have now abcdefg H I J. And of course it's not going past the page yet, but

we can actually wrap this around and see how it looks. So all we have to do is add the

flex dash wrap property. And now we can either specify we can specify one of two values,

wrap and no rap. So I'm going to go ahead and say rap. Now if we go ahead and refresh

the page, you can see that instead of kind of squeezing in the space or changing the

spacing, it just moves this to a new row, we can also go ahead and use rock reverse,

which pretty much revolves, it does the exact same thing, but it reverses the order. So

now if we go ahead and refresh, you can see that this whole thing is kind of flipped.

Now normally, you won't see rapper verse used. So I would just go ahead and learn how to

use rap and no rap. Now, of course, if you're going to go ahead and use no rap, it's usually

because of some inherited value, because again, no rap is the default value that's used, so

you won't really see it commonly in CSS. Let's go ahead and set the property back to wrap.

So those are the two main properties that we're going to cover in this video is wrap

and flex direction. Now, of course, these are two very basic properties, but they're

still very useful. And you can really see how this can be used commonly inside our website

and inside web development as a whole. Alright, so that's pretty much it for these two properties.

Let's move on to some of the other properties that we can use on our flex container in CSS.

So in this video, we're going to be covering two of the properties of our flex container,

direction and wrap. So right now we have everything set up. We have five flex items here labeled

A to E, and then we also have our container. But now we're going to go through and start

manipulating it. So the first thing I want to talk about is flex direction. So pretty

much right now it's laid out in a row here, but what we can actually do is specify the

direction that we want our items to go in. We can also reverse the order using a special

suffix. Let's get started. So the property that we're going to use is flex direction,

flex dash direction. And you add this to the container to the flex container. So here we're

going to specify either row or column row is the default value, and it's going to be

going in a direction to the right side of the container. We also have column, which

is what we kind of saw before. And you can see it's a little bit better spaced out. And

you can see it goes A to E, except it goes in a column. Now, that's pretty easy to understand.

But we can also go reverse. So instead of A to E, it goes eat a, all we have to do is

add dash reverse to column a row, and it's going to flip the direction that our item

is going in. Let's refresh. And now you can see it's going in reverse. We can also do

the same thing with row or pretty much any other value for this property here. You can

see now it goes E to a, and it also goes in the opposite way to the left side of the page

instead of to the right side. So that's it for flex direction, it's very easy to understand,

I'm just going to go ahead and set it back to wrote the default. The next item I want

to talk about is flex wrap. So this is a little bit more complicated to understand. But once

we start using it, it gets quite easy. Pretty much when you wrap an item, it's going to

move it to a new row or column to avoid the exceeding the maximum length. So for example,

if we had more than the specified amount of items here, so if we had a, b, c, d, e, and

then F, G, H, I and all the ways to K or L, we don't want it to keep going on forever.

So what we want to do is once it gets to a certain length, rump length, wrap it around

and move it to a new line. So I'm actually going to go ahead and do that here. I'm going

to go ahead and copy all of these items, pretty much double it. And then I'm going to say

f, g, h, i and j. And now let's go ahead and refresh the page and see how this looks. You

can see we have now abcdefg H I J. And of course it's not going past the page yet, but

we can actually wrap this around and see how it looks. So all we have to do is add the

flex dash wrap property. And now we can either specify we can specify one of two values,

wrap and no rap. So I'm going to go ahead and say rap. Now if we go ahead and refresh

the page, you can see that instead of kind of squeezing in the space or changing the

spacing, it just moves this to a new row, we can also go ahead and use rock reverse,

which pretty much revolves, it does the exact same thing, but it reverses the order. So

now if we go ahead and refresh, you can see that this whole thing is kind of flipped.

Now normally, you won't see rapper verse used. So I would just go ahead and learn how to

use rap and no rap. Now, of course, if you're going to go ahead and use no rap, it's usually

because of some inherited value, because again, no rap is the default value that's used, so

you won't really see it commonly in CSS. Let's go ahead and set the property back to wrap.

So those are the two main properties that we're going to cover in this video is wrap

and flex direction. Now, of course, these are two very basic properties, but they're

still very useful. And you can really see how this can be used commonly inside our website

and inside web development as a whole. Alright, so that's pretty much it for these two properties.

Let's move on to some of the other properties that we can use on our flex container in CSS.

So in this video, we're going to be talking about two very important elements or what

properties that can be used to justify and align flex items inside of container. So we're

going to be talking about two main properties, one of them is going to be responsible for

the horizontal alignment, and the other for the vertical alignment. So let's talk about

them. The first one which is for horizontal alignment is called justify content. Now,

both of these ello, both of these properties actually contained three main values which

are shared between the two of them. And then each of them can take two special values,

which actually align them in a pretty different way than you would expect. So let's talk about

justify content. Now first of all, you'll notice that these are a little bit stretched

out, don't worry about that for now, that's just because of the added height to the container

will talk about that in just a second. But let's get started. So the first three properties

that are pretty common are flex start, flex end, and center. So flex start is going to

be where the container starts, which in this case is on the left. On the other hand, the

end is going to be the opposite. So on in this container, it's on the right and then

center positions in the middle. So what I'm going to do here is just set it as center

for now. And you can see that now all of our eyes limbs have been centered in the middle

here. If I said something like flex end, and remember, it does contain a dash in there,

it's going to move everything to the end of the container here. So those are the three

main values. Let's talk about the two special ones now. Now, pretty much these ones are

going to be messing a little bit with the spacing between these, but they are still

related to alignment, because it's changing the spacing in a way that does actually align

our elements here. So the two main values are space around and space between. So let's

talk about space between first, what happens is that space, the spacing between the flex

items is created so that it's all equal. And it creates equal divisions to move everything

on well, equally divided from each other on the same row. On the other hand, space around

actually creates spacing on all sides of the item. So instead of just creating them between,

it's going to create them between some of the flex items and the edges. So though, that's

the main difference between the two, and it depends on what you really want. So for example,

if you want a centered kind of item or a centered Flexbox, what you would do is use the space

around property. Whereas if you wanted something to be stretched out, you would use the space

between property.

So in this video, we're going to be talking about two very important elements or what

properties that can be used to justify and align flex items inside of container. So we're

going to be talking about two main properties, one of them is going to be responsible for

the horizontal alignment, and the other for the vertical alignment. So let's talk about

them. The first one which is for horizontal alignment is called justify content. Now,

both of these ello, both of these properties actually contained three main values which

are shared between the two of them. And then each of them can take two special values,

which actually align them in a pretty different way than you would expect. So let's talk about

justify content. Now first of all, you'll notice that these are a little bit stretched

out, don't worry about that for now, that's just because of the added height to the container

will talk about that in just a second. But let's get started. So the first three properties

that are pretty common are flex start, flex end, and center. So flex start is going to

be where the container starts, which in this case is on the left. On the other hand, the

end is going to be the opposite. So on in this container, it's on the right and then

center positions in the middle. So what I'm going to do here is just set it as center

for now. And you can see that now all of our eyes limbs have been centered in the middle

here. If I said something like flex end, and remember, it does contain a dash in there,

it's going to move everything to the end of the container here. So those are the three

main values. Let's talk about the two special ones now. Now, pretty much these ones are

going to be messing a little bit with the spacing between these, but they are still

related to alignment, because it's changing the spacing in a way that does actually align

our elements here. So the two main values are space around and space between. So let's

talk about space between first, what happens is that space, the spacing between the flex

items is created so that it's all equal. And it creates equal divisions to move everything

on well, equally divided from each other on the same row. On the other hand, space around

actually creates spacing on all sides of the item. So instead of just creating them between,

it's going to create them between some of the flex items and the edges. So though, that's

the main difference between the two, and it depends on what you really want. So for example,

if you want a centered kind of item or a centered Flexbox, what you would do is use the space

around property. Whereas if you wanted something to be stretched out, you would use the space

between property.

So there we go. Those are some of the little items or values that you can use under justify

content property. Now let's move on to align items. So this is the property that aligns

it vertically. Now by default, it's set to stretch, which is what we can see here. So

it just stretches all the way across down to the bottom of the container, we can actually

change this. So let's go ahead and add this property align items. Now what we're going

to do is change it to center. So just like before, we have three main values, flex, start

flex, and and center, you can see that immediately. Now all of these items are still spaced in

between, but they have been moved to the center here. So you can see here that on the Align

items, this has been arranged vertically, it this is the start at the top and the and

the bottom and the flex end is well at the bottom of the container, justify content says

the flex start is on the left side, and the flex end is on the right. So there we go,

you can see what this is what this looks like right here is when we align the items, it

centers it in between the top and the bottom. So let's go ahead and just see what the other

values look like. So for example, flex start. So for, let's just say you want to keep the

height of these items the same, you don't want to stretch them, this is what you would

do, you could also set it to flex and if you wanted something to appear at the end of the

page. And yeah, that's pretty much it for those three main values. Now let's talk about

the two special values. So these are a little bit different because they don't follow some

general convention. But the two values are baseline and stretch. Now we've already covered

stretch a little bit in the beginning of this in which we could set stretch as our default

value. And all that does is just align it all the way through from top to bottom. But

baseline is a little bit different. Now unfortunately, we can't really see the effect, apparent right

here. But pretty much what happens is that all of these items, no matter their size,

are aligned to a baseline. Now if I actually go and add some inline styles to override

some of these, so for example B, I'm going to let's just say I'm going to make the line

height, which is a property we haven't actually learned yet, what we're going to do is just

set the line height to whoops, real problem there, I'm going to set this to 100 pixels,

like that. And now what I'm going to do is go ahead and refresh the page and see what

happens, you can see that this is a little bit higher, but they're all aligned on the

same line, you can see that the fonts here have been changed a little bit not really

not really apparent here. But you can see the heights are different, but they're still

all in the same line. So that's what baseline actually does it just no matter the size,

or the font text or anything, it's all going to keep them or it's going to keep them all

on the same baseline. And that's what it does. Alright, so I'm going to go ahead and remove

this inline style, since we don't need it. And those are pretty much the two main alignment

properties. Now if you wanted to align something to the center of a Flexbox, what you would

do is just set justify content and jaw and align items, both of them to the center. And

what that's gonna do is just align everything to the center of the flex box. So that's what

I've just done here is I've set both of them to center so that way on top, it's centered

between the top and the bottom as well as the left and the right. Alright, let's move

on.

So there we go. Those are some of the little items or values that you can use under justify

content property. Now let's move on to align items. So this is the property that aligns

it vertically. Now by default, it's set to stretch, which is what we can see here. So

it just stretches all the way across down to the bottom of the container, we can actually

change this. So let's go ahead and add this property align items. Now what we're going

to do is change it to center. So just like before, we have three main values, flex, start

flex, and and center, you can see that immediately. Now all of these items are still spaced in

between, but they have been moved to the center here. So you can see here that on the Align

items, this has been arranged vertically, it this is the start at the top and the and

the bottom and the flex end is well at the bottom of the container, justify content says

the flex start is on the left side, and the flex end is on the right. So there we go,

you can see what this is what this looks like right here is when we align the items, it

centers it in between the top and the bottom. So let's go ahead and just see what the other

values look like. So for example, flex start. So for, let's just say you want to keep the

height of these items the same, you don't want to stretch them, this is what you would

do, you could also set it to flex and if you wanted something to appear at the end of the

page. And yeah, that's pretty much it for those three main values. Now let's talk about

the two special values. So these are a little bit different because they don't follow some

general convention. But the two values are baseline and stretch. Now we've already covered

stretch a little bit in the beginning of this in which we could set stretch as our default

value. And all that does is just align it all the way through from top to bottom. But

baseline is a little bit different. Now unfortunately, we can't really see the effect, apparent right

here. But pretty much what happens is that all of these items, no matter their size,

are aligned to a baseline. Now if I actually go and add some inline styles to override

some of these, so for example B, I'm going to let's just say I'm going to make the line

height, which is a property we haven't actually learned yet, what we're going to do is just

set the line height to whoops, real problem there, I'm going to set this to 100 pixels,

like that. And now what I'm going to do is go ahead and refresh the page and see what

happens, you can see that this is a little bit higher, but they're all aligned on the

same line, you can see that the fonts here have been changed a little bit not really

not really apparent here. But you can see the heights are different, but they're still

all in the same line. So that's what baseline actually does it just no matter the size,

or the font text or anything, it's all going to keep them or it's going to keep them all

on the same baseline. And that's what it does. Alright, so I'm going to go ahead and remove

this inline style, since we don't need it. And those are pretty much the two main alignment

properties. Now if you wanted to align something to the center of a Flexbox, what you would

do is just set justify content and jaw and align items, both of them to the center. And

what that's gonna do is just align everything to the center of the flex box. So that's what

I've just done here is I've set both of them to center so that way on top, it's centered

between the top and the bottom as well as the left and the right. Alright, let's move

on.

So for the first part of this section, we've been talking about a lot of the properties

that we can use for the actual flex container. So you can see that we've covered five here,

the display type, which is to create the container, the direction wrap, and our content alignment

properties. But we haven't actually talked anything about the items themselves, because

we've just been looking at the container. So that's what we're going to be doing over

the next few videos is looking at some of the properties that we can use on our items

themselves to change how they look. And that's when the real power of Flexbox comes in, and

really shows how it can be used. So the first item that we're going to be covering or property

in this case is flex item order. Now, instead of adding this directly to the container,

we can actually go through and add this to the flex items themselves. So I'm going to

hold Ctrl or Command if you're on Mac, and go ahead and add our style property to all

five of these flex items, because what we're going to actually have to do is add this property

to all of our items, seems like a new line was created there. Let's get started. So pretty

much what we're going to be doing is using a property to change the positioning or order

in this case of our flex items. So I'm going to go ahead and create that multiple cursor

feature again. And the property we're going to use is order. Now what we can do is go

ahead and start specifying our order. So pretty much what we're going to do is go through

and change what this looks like and how this looks like in our place here. So what we're

going to do is go and specify our values. And then we're instead of having it from A

to E, we're actually going to go through and add something to make these properties look

in a different way instead of having to actually move all of these around. So instead of moving

the divs around, and you know changing all of them, we're actually going to go through

and specify some numbers. So let's get started. So what we're going to use for this is numbers.

Now, this ranges from one all the way up to as many numbers or as many items as you have,

and the default value is zero. And this is just going to keep it in its position. But

we can actually specify the number to see where it lands. So let's just say that I want

D first, what I'm going to do is go ahead and under my order property, add a one, just

like that. Now I'm going to go ahead and add E, so I'm going to set my order to two. Now

if you've worked with computers before, you might think that it starts with zero, but

in this case, zero is our default value. So we're not actually going to be using that.

So I have D then E. Now let's say I would be next. So I'm going to put it under the

third position. Now for C or actually a, I'm going to put as the fourth position, and C

is the last. So let's see if this holds up here, we refresh the page d V AC. So you can

see that we can actually change the order of these flex items directly from our CSS

instead of having to go through and move them around. Now you might know you might be wondering

why this could be useful at all. Now, although might not be apparent here because we haven't

actually gotten, we're using the JavaScript. Once you start making your website interactive,

this becomes a very useful features. Because you can't just go through and program something

to move the divs around in your HTML document without using some sort of file reading. Instead,

it's much easier to just add a style to it, where you can change the order, maybe even

randomly. So you can see how this would work. And although like I said, although it's may

not be useful in this case, it will definitely be useful once you start learning about JavaScript

and start making your websites interactive. So that's a little bit about flex order. Now

just one thing, you don't actually have to use it with an inline style tag. But it would

be much easier considering that if without it, you'd have to go and add an individual

class to every single item. Now, of course, it's much easier to just go ahead and add

a style tag to each of these. But if you want to use it with a class method, maybe you already

have an existing class, you can go ahead and do that. There's nothing wrong with that.

I'm just using this because it's a lot more convenient and easy to use. Alright, so that's

pretty much it about flex order. It's quite easy to learn once you know how to find the

positions of items and how you know how to order them in the right way. As long as you

know the number of items you have, it's very easy to position them just the way you like

it. Alright, let's move on.

So for the first part of this section, we've been talking about a lot of the properties

that we can use for the actual flex container. So you can see that we've covered five here,

the display type, which is to create the container, the direction wrap, and our content alignment

properties. But we haven't actually talked anything about the items themselves, because

we've just been looking at the container. So that's what we're going to be doing over

the next few videos is looking at some of the properties that we can use on our items

themselves to change how they look. And that's when the real power of Flexbox comes in, and

really shows how it can be used. So the first item that we're going to be covering or property

in this case is flex item order. Now, instead of adding this directly to the container,

we can actually go through and add this to the flex items themselves. So I'm going to

hold Ctrl or Command if you're on Mac, and go ahead and add our style property to all

five of these flex items, because what we're going to actually have to do is add this property

to all of our items, seems like a new line was created there. Let's get started. So pretty

much what we're going to be doing is using a property to change the positioning or order

in this case of our flex items. So I'm going to go ahead and create that multiple cursor

feature again. And the property we're going to use is order. Now what we can do is go

ahead and start specifying our order. So pretty much what we're going to do is go through

and change what this looks like and how this looks like in our place here. So what we're

going to do is go and specify our values. And then we're instead of having it from A

to E, we're actually going to go through and add something to make these properties look

in a different way instead of having to actually move all of these around. So instead of moving

the divs around, and you know changing all of them, we're actually going to go through

and specify some numbers. So let's get started. So what we're going to use for this is numbers.

Now, this ranges from one all the way up to as many numbers or as many items as you have,

and the default value is zero. And this is just going to keep it in its position. But

we can actually specify the number to see where it lands. So let's just say that I want

D first, what I'm going to do is go ahead and under my order property, add a one, just

like that. Now I'm going to go ahead and add E, so I'm going to set my order to two. Now

if you've worked with computers before, you might think that it starts with zero, but

in this case, zero is our default value. So we're not actually going to be using that.

So I have D then E. Now let's say I would be next. So I'm going to put it under the

third position. Now for C or actually a, I'm going to put as the fourth position, and C

is the last. So let's see if this holds up here, we refresh the page d V AC. So you can

see that we can actually change the order of these flex items directly from our CSS

instead of having to go through and move them around. Now you might know you might be wondering

why this could be useful at all. Now, although might not be apparent here because we haven't

actually gotten, we're using the JavaScript. Once you start making your website interactive,

this becomes a very useful features. Because you can't just go through and program something

to move the divs around in your HTML document without using some sort of file reading. Instead,

it's much easier to just add a style to it, where you can change the order, maybe even

randomly. So you can see how this would work. And although like I said, although it's may

not be useful in this case, it will definitely be useful once you start learning about JavaScript

and start making your websites interactive. So that's a little bit about flex order. Now

just one thing, you don't actually have to use it with an inline style tag. But it would

be much easier considering that if without it, you'd have to go and add an individual

class to every single item. Now, of course, it's much easier to just go ahead and add

a style tag to each of these. But if you want to use it with a class method, maybe you already

have an existing class, you can go ahead and do that. There's nothing wrong with that.

I'm just using this because it's a lot more convenient and easy to use. Alright, so that's

pretty much it about flex order. It's quite easy to learn once you know how to find the

positions of items and how you know how to order them in the right way. As long as you

know the number of items you have, it's very easy to position them just the way you like

it. Alright, let's move on.

So in this video, we're going to be talking about three very important properties that

come with Flexbox which are flex grow, flex, shrink and flex basis. Now, although it might

not seem like it, these actually are completely responsible for the responsive power of Flexbox.

And it's what really makes it what it is today and why it's used so commonly over things

like floats and display types. So first of all, if we look at it, now, it might seem

that flex grow and shrink, just specify the width and height. And although they sort of

do, they are very different when it comes to the core concept and how it's decided.

So the first thing we need to do is talk about the flex basis property, because from there,

we're going to define everything else. Now, we all know that we have five items here,

and they take up a certain amount of space each. But you can see that there's all of

this extra room here on the side. So what actually happens is these properties work

to define how the extra space or this remaining excess space is divided up between them. And

from there, we can actually specify the width based on the you know, browser width, and

it's all responsive. So it's all decided completely based on the browser and on the properties

that you define. So the first thing I'm going to do is go ahead and actually add this property

to all of them. And I'm gonna explain why in just a second. And why we need to do that.

So what I'm going to do is first download, I'm going to go ahead and add the flex grow

property, and the flex shrink property. Now we're not going to use all these in one go,

we're just going to do this gradually, and then our flex basis. Okay, so let's talk about

flex basis. First, what this does is it pretty much defines the minimum width of an item

or a flex item. So this can be any value doesn't just have to it doesn't have to be a specific

number or unit. So for example, I'm going to go ahead and set this as maybe 100 pixels

for each one as its minimum width, we go ahead and refresh the page. And now you can see

it's a lot wider. But you can see that there's still this extra space. So this is where our

flex grow property comes in. Now what happens is, if I actually go ahead and go to all of

them, and set them all as one, what this is pretty much going to say is every flex item

is going to get the same amount of extra space. So you can see that this gets if all of them

are one, they all get the same amount. Let's go ahead and see that when we refresh the

page, you can see now there's only a little bit of margin, which is normal. But all of

them are divided up equally. Now that we've set them as one. But what happens if we go

ahead and actually change this value? Let's go ahead and for example, set our fifth item

as to maybe. So now you can see that, although it's not much bigger, it is a little bit bigger.

So what this is pretty, I'm gonna go ahead and set it to actually something a little

bit bigger, so it's more obvious. So you can see now this is a lot bigger than the other

items. So pretty much what this is saying is our fifth item, this container item is

going to get five times as much excess space as the rest of the items here. So one thing

you need to know about flex grow is that you need to add this property to every single

one of them and make sure that they have a defined value. If they don't, if you want

them just to give them a default space, give them a value of one. And this is because what

happens is when you don't give them any value. If you give this flex grow property to anything,

it's going to eat up all that extra space. Let's go ahead and demonstrate this. Now,

I'm going to go ahead and erase all of this, all of these flex grow properties just temporarily.

And then I'm going to leave it on this one. Now I'm going to set it to one. Now you might

expect this is to be just a little bit bigger. But let's see what actually happens. If we

go ahead and refresh the page, you can see that this is actually bigger than when we

set this to flex this flex grow property to five. So what's going on here, pretty much

what's happening is the default value for our flex grow property is actually zero, which

means it's going to remain the same width, and it's not going to take up any excess space.

So pretty much what's happening is when we set this to one, everything else is not taking

any excess space, leaving it all to that one value. So all of that extra space is taken

up by this block here. And you can see that and it's proved proven because there is still

no excess space here, since it's all taken up out by this property. So what I would recommend

is before we learn the flex

So in this video, we're going to be talking about three very important properties that

come with Flexbox which are flex grow, flex, shrink and flex basis. Now, although it might

not seem like it, these actually are completely responsible for the responsive power of Flexbox.

And it's what really makes it what it is today and why it's used so commonly over things

like floats and display types. So first of all, if we look at it, now, it might seem

that flex grow and shrink, just specify the width and height. And although they sort of

do, they are very different when it comes to the core concept and how it's decided.

So the first thing we need to do is talk about the flex basis property, because from there,

we're going to define everything else. Now, we all know that we have five items here,

and they take up a certain amount of space each. But you can see that there's all of

this extra room here on the side. So what actually happens is these properties work

to define how the extra space or this remaining excess space is divided up between them. And

from there, we can actually specify the width based on the you know, browser width, and

it's all responsive. So it's all decided completely based on the browser and on the properties

that you define. So the first thing I'm going to do is go ahead and actually add this property

to all of them. And I'm gonna explain why in just a second. And why we need to do that.

So what I'm going to do is first download, I'm going to go ahead and add the flex grow

property, and the flex shrink property. Now we're not going to use all these in one go,

we're just going to do this gradually, and then our flex basis. Okay, so let's talk about

flex basis. First, what this does is it pretty much defines the minimum width of an item

or a flex item. So this can be any value doesn't just have to it doesn't have to be a specific

number or unit. So for example, I'm going to go ahead and set this as maybe 100 pixels

for each one as its minimum width, we go ahead and refresh the page. And now you can see

it's a lot wider. But you can see that there's still this extra space. So this is where our

flex grow property comes in. Now what happens is, if I actually go ahead and go to all of

them, and set them all as one, what this is pretty much going to say is every flex item

is going to get the same amount of extra space. So you can see that this gets if all of them

are one, they all get the same amount. Let's go ahead and see that when we refresh the

page, you can see now there's only a little bit of margin, which is normal. But all of

them are divided up equally. Now that we've set them as one. But what happens if we go

ahead and actually change this value? Let's go ahead and for example, set our fifth item

as to maybe. So now you can see that, although it's not much bigger, it is a little bit bigger.

So what this is pretty, I'm gonna go ahead and set it to actually something a little

bit bigger, so it's more obvious. So you can see now this is a lot bigger than the other

items. So pretty much what this is saying is our fifth item, this container item is

going to get five times as much excess space as the rest of the items here. So one thing

you need to know about flex grow is that you need to add this property to every single

one of them and make sure that they have a defined value. If they don't, if you want

them just to give them a default space, give them a value of one. And this is because what

happens is when you don't give them any value. If you give this flex grow property to anything,

it's going to eat up all that extra space. Let's go ahead and demonstrate this. Now,

I'm going to go ahead and erase all of this, all of these flex grow properties just temporarily.

And then I'm going to leave it on this one. Now I'm going to set it to one. Now you might

expect this is to be just a little bit bigger. But let's see what actually happens. If we

go ahead and refresh the page, you can see that this is actually bigger than when we

set this to flex this flex grow property to five. So what's going on here, pretty much

what's happening is the default value for our flex grow property is actually zero, which

means it's going to remain the same width, and it's not going to take up any excess space.

So pretty much what's happening is when we set this to one, everything else is not taking

any excess space, leaving it all to that one value. So all of that extra space is taken

up by this block here. And you can see that and it's proved proven because there is still

no excess space here, since it's all taken up out by this property. So what I would recommend

is before we learn the flex

property in the next video, just go ahead and add this flex grow property to every single

item or container if you plan to use it. So now if we go ahead and refresh the page, you

can see that that's working great now what's the advantage of

property in the next video, just go ahead and add this flex grow property to every single

item or container if you plan to use it. So now if we go ahead and refresh the page, you

can see that that's working great now what's the advantage of

Using this, before we move on to our next property, if I actually resize this window,

right here, I'm just gonna resize it, you can see that when it grows, it still takes

up the same proportions of excess space. Now we'll talk about getting smaller in just a

little bit. But you can see here that it does actually take up the same proportion. And

that's where the really responsive power of Flexbox comes in, is when you're resizing

your windows and browsers and there's all of the different devices, this actually stays

the same. So let's move on to our next property. Now flex shrink. So we know that the basis

for the minimum width is 100 pixels, that's the minimum it can go. But when we actually

shrink this down, and all of these get smaller, I'm actually going to go ahead and move the

flex wrap property from here because it's, it's some little intrusive here. And although

it's not good for this, it's not good for this example, we'll go ahead and use it later.

So when we go ahead and actually shrink this window, you can see that that proportion is

actually lost. So what's going on here, pretty much when you go below the minimum width,

whether it's defined on our flex basis, or the minimum width of the of the, of the container

item itself, what's happening is that proportion is completely removed, and you go to the default

value of flex shrink. So flex shrink is similar to flex grow, except what happens is it defines

the rate of shrinkage of each container item again, relative to the rest of the items.

So in this case, what we have to do is go ahead and look at how this trig property works.

The default value for this, unlike flex grow is one, not zero. So what this is saying is

shrink each item at the same rate as all the other items. And that's why we can see that

once we go under the minimum height, or sorry, minimum width, you can see that all of those

items begin to look the

same.

So what I'm going to do here is actually go ahead and show you how to manipulate this.

And this is where the real responsive power comes in. And where you can really change

how everything looks on different devices, all we have to do is go ahead and specify

the value that we want here. And one thing to note is that if you don't want something

to shrink, you can just set the value to zero. So for example, if I wanted to remove the

shrinkage of our fourth item here, well let me go with our first item. Right here, all

I have to do is go ahead and shet set, sorry, our shrink value to zero. And what this is

going to say is don't shrink the item, even if it goes below, do not shrink the item at

all, let everything else shrink. Let's go ahead and see how this looks on our site.

So we're going ahead, we're removing that space. But you can see that our first value

does not shrink at all. So there we go. Now let's go ahead and start adding our shrinkage

values to the rest of our items here. So what I'm going to do is first add a value of one

to all of them, just like this, just to keep everything the same. And now what we're going

to do is go ahead and start manipulating them. So first of all, let's go ahead and say that

we want our middle value to shrink three times as fast. So we're gonna go over to our middle

value and change the flex shrink to three times. So now we go ahead and refresh the

page. And when we shrink it, you can see that that value shrinks three times as fast as

everything else. So you can see that and it's pretty apparent there. So there we go. That's

pretty much it for our three values. Now one thing I forgot to mention is if your flex

shrink is one and it's not there on purpose, you can actually go ahead and remove it since

the default value is one forgot to mention that in the when I started changing them.

But there we go. Now what I'm going to say is, why would you use something like this

flex grow and flex shrink, when you're laying out entire pages based on Flexbox, you want

to make it as responsive as possible, you don't want to go and you know, have it looked

completely different on one device to the other. What you can actually do is use this

to change the look of a website, depending on what device you're on. So for example,

you can use this property to change the look of a website on a mobile phone versus on a

widescreen TV, it's going to be completely different. And you can do this using only

a few properties instead of having to go and define entire styles for separate devices.

So from here, we can actually really see the true cloud power of Flexbox. From here, we

can go ahead and actually model our website with just a few styles that are very streamlined

and efficient to change the look of a website completely on different devices. So I hope

that was a little bit easy. To understand now, I know it's quite hard to wrap your head

around. But this is the core concept of Flexbox. And it's what really makes Flexbox what it

is. So if you understand this, the rest of Flexbox, and using it is going to be a breeze.

Alright, let's move on. So in this video, we're going to be moving on from flex grocery

in basis and actually talking about a really useful shorthand property that can summarize

all three of these into an even more streamline method. So in the past video, I talked just

briefly about the flex property. And pretty much what it is, is a shorthand to use the

flex grow shrink and basis property in one go. So we can use this to our great advantage,

because instead of adding all of these properties to every single one of these items, we can

actually just summarize it down into one simple property. So let's go ahead and talk about

it. Pretty much the flex property, which is the property that we're going to be using

follows or takes in three values, the grow the shrink, and the basis. So what we're going

to do is first add our growth. In this case, it's one, and then we're going to add our

shrink, which is the default value of

one.

And that's just a little tip, if you don't actually have that defined, just go ahead

and set it as the default value. So just a quick summary grow the default is zero, which

means it's not growable. The default string value is one, which means shrink it at the

rate of everyone else. And then the there is no default for the basis property, unless

you use something like auto. So what you can do is go ahead and define that as 100 pixels.

Now, what we're going to do is go ahead and do it for the rest of these items, flex, flex

just the property. Here, we're going to go one, which is the grow three, which is the

shrink, and again, 100 pixels for the basis. And you can start to see kind of the rhythm

that I'm getting into here, five for the grow one for the shrink, which is the default,

and 100 pixels for our basis.

Let's go ahead and do it for this one.

And like I said, you can see the rhythm here, and you can just go ahead and do this very

quickly, without having to manually go through and add all three of these properties. One,

one, and 100 fixes.

All right, now let's go ahead and erase all of these other unnecessary properties. Now

that we have our flex property and restart. So if we did this, right, pretty much what's

going to happen is everything is going to look the same, since all of our values are

still working, we just threw them into a shorthand. Let's go ahead and first before we refresh,

check out the behavior. Whoops, something's going wrong there. Yeah, there we go. So let's

just check out the behavior, we shrink B get smaller D doesn't shrink at all. And we when

we size up, our last value gets bigger. Let's go ahead and refresh the page and see if this

worked. So when we shrink, D is supposed to stay the same, and B gets smaller. There we

go. So D stays the same, and B gets smaller. And if we enlarge it, you can see that C gets

larger. So there we go, you can see how all of this works. Instead of adding three properties,

we can actually just go ahead and do this in one straight swoop, just go through and

add all of all three values using one property, the flex property. Alright, let's move on.

So this is going to be the last video on Flexbox. And I'm sure that we've summarized all of

the different things that you can do with Flexbox in this section, and then you can

go off and start using it and creating all sorts of really cool responsive websites and

layouts with it. But for now, what we're going to be doing is going through and learning

the final property. Now we've learned how to align all of the elements at the same time

in our flex container, we learned how to align it both vertically and horizontally, but we're

actually going to be doing is learning how to align each item. And remember, because

each item is laid out with width wise in a certain way, we can only align it vertically.

So just keep that in mind for now. So let's get started. Now in order to align it vertically,

we use the Align items property to work with and align all of these. So in this case, what

we did with our container is aligned all of them to center. But what we're going to be

doing now is going through and aligning each individual item using a special property called

align itself. Now one thing to note is that this property will override the Align items

property if you have it enabled. So for example, if I wanted to align this to the top, it would

override our center and what The line this only only and only this item to the top. So

let's get started. First thing I want to do is go ahead and add the property. And remember,

we have to go and add it just like everything else. So I'm going to go through and add it

now. So first thing I'm going to do is go and let's just take our first item, for example.

Where is it? There we go. So now I'm going to go ahead and add a line self. And now we

can go ahead and add our different values. So let's go ahead and get started, I'm going

to go ahead and try something just like with the normal values, let's go ahead and save

flex start. So just like our other values with our default container, what we can actually

do is align them with the same values. So center flex start and flex end. So let's go

ahead and refresh the page. And you can see now that that specific item, which is D, or

the first item is aligned to the start of the flex container, whereas the rest of the

items are aligned to the middle, which is based on the Align items property that we

had on our container. So now let's go ahead and create a sort of V shape out of all of

our items here. So what I'm going to do is first go and add our flex, sorry, aligned

self property to all of our values, here are all of our container items. And now what I'm

going to do is start styling them. So we know that the first one is at the start, we want

the second one here to be in the center. So although it's already defined, I'm just going

to say center to make everything a little easier to read. Now we're going to go ahead

and look for the third one, which needs to be at the bottom. So what I'm going to say

here is flex

end.

And let's go ahead and refresh working so far. Our fourth one has to be on the same

level as he so we're going to keep that in the center here, wherever it is, let's see.

Yep, it's the fourth one centered. And now we want our final one to be at the top as

well. So it is a little confusing to read with the orders. But after a little bit of

looking, you can see how this whole thing works. Now obviously, it's a little bit out

of proportion because of our sizes here. But you can see that our thing is still responsive.

It's still resizing in the same way, we just aligned the items differently. Alright, so

there you go. That's pretty much how this works. And one thing to note that before we

move on is you can't actually use stretch and baseline on a line self, they just don't

work because they are kind of container specific properties and they won't, they work off of

values of the container. So aligning it on an item just wouldn't really work in the same

way. So that is one thing you need to keep in mind is that you can only use these three

values. Alright, so like I said, we were moving on and learning about all of the different

alignments. And now that we've learned how to align each item, we can really use this

along with our flex property and some other Flexbox properties on the container to create

a really nice responsive layout. So I encourage you to go ahead and try this on your own,

create your own flex layouts, and don't even just use these blocks, you can go through

and use images and forums and all sorts of things. And just style them in a way that

makes the website look good. Because now that you've learned the tools to create a responsive

container, you can go through and actually start practically applying it to the real

world. Alright, let's move on. So in this video, we're going to be looking at grid versus

Flexbox. Now in the previous section, we looked at Flexbox as a whole, we looked at all the

different container properties, we also looked at some of the other properties that we can

use on our items. But today, we're going to be looking at a different type of well layout

property, and that is grid. So before we get started, I'm going to give a little introduction

to grid and what it actually is. So similar to Flexbox grid is a display type that's going

to allow us to work with our layout and our CSS in a different way. So again, they are

both completely all complete alternatives to some of the other layout features that

were used in the older times and in other versions of CSS. So what we're going to be

doing is again, in this section, going through looking at the different types, and what we

do with grid, and how it actually all fits together.

So now that we know some of the similarities, let's look at the differences. So although

they are both alternatives to our, to our different layouts, what we can actually do

is look at how they work at a core level. And although they are completely the same

in what they achieve and their core goals, they are completely different in how they

work. So first of all, the grid system is a lot more manual it requires well it doesn't

require but you can control your container in a much easier way. So you can really customize

your layout and see how everything fits together with a lot more tools. So one of the the main

difference is how the grid system focuses on both the width and height. So although

Flexbox does have some height features, it's mainly focused on the width of flex items

in the container. Whereas grid is focused, very focused on providing both tools for width

and height to create Well, a grid. And that's really the reason for the name is because

it is more focused on creating a grid, providing tools for columns and rows, and all sorts

of things that we're going to cover in the next few videos looking at, you know, some

of the tools that we can use in grid and the inherent differences between grid and Flexbox.

So I hope that was a really in depth view at the differences between grid and Flexbox.

And we will go through and talk more about them as we go through the section, you know,

learning more tools and properties that we can use on our grid. Alright, so I hope that

you took a lot from this video. And although you're not really supposed to know anything

about how they work, it's good to keep in mind about some of the differences between

them, and draw your own conclusions about whether you should use grid or Flexbox depending

on what type of website or application you are creating. Alright, let's move on.

So in this video, we're going to be starting creating our different grid items and working

with our grids. So I've already created and set up a little playground or sandbox for

our grid here, we've pretty much adopted the same style as the Flexbox here using all of

our different, you know, widths and heights and all these different blocks. But I encourage

you, when you're doing this on your own to go ahead and experiment around, maybe use

some different items. I'm just doing this because it's easy for demonstrations. Alright,

so let's get started. Pretty much grid. And while Flexbox have very similar ways of activation,

they both use a display type or the display property to set or activate the container.

Now the only difference is is is the property that it or sorry, the value that needs to

be used to activate these, which is pretty fair, which is fairly obvious. So let's get

started. First of all, we need to put it on the container. Remember, we're not working

with the items, we're working with the container as a whole. So all I need to do similar to

how we created our flex container is that of saying Flexbox, or grid box or whatever,

all we have to do is type in grid. And what this will do is set up our grid container.

Let's go and refresh. And you can see that although you know may not appear that nothing

has changed, we have activated a whole range of properties that we can now use on our grid

here to set up everything and start creating our grid. Now you'll notice that when we set

up our Flexbox, so many things different so many different things change. But without

grid, we actually need to go through and set up the grid by ourselves, which is what the

whole manual element about it, which is where the whole manual element comes in is we have

to go and create a grid and sort of shape it in a way that suits our needs. Alright,

so that's pretty much it for creating the grid. Now I know this wasn't a very heavy

video, but there are going to be a lot more concepts that we're going to need to learn

in the future. So this is quite an easy video, just setting up the grid. And now that we've

done the easy part, we're going to go through and start learning some of the more difficult

parts of CSS Grid.

Alright,

let's move on. So in this video, we're going to be moving on with grid and start creating

and setting up this grid to really just define the style that we want to use for our website.

So what we're going to do is go ahead and get started with some of the two basic properties

that we're going to be using, which are template rows and columns. So unlike Flexbox, we can

actually specify the number of grids are well the number of rows and columns that we want

manually and create the exact style that we want to divide up all our elements. So what

we're going to be doing is using two special properties that we can go ahead and use. And

what this is going to do is allow us to split up our grid into a specified number of rows

and columns, which we can then divide the items up into, and then start specifying the

sizes and other parts of these items. So like I said, we're going to be going through and

you know, doing all of this and as we go through. In this section, we're going to be getting

more experienced with rows and columns and some of the other core concepts in grid that

will allow us to really shape up this grid box that we have right here and start applying

it in different places. So Let's get started. So like I said, the two properties that we're

going to be learning today are about template columns and rows. So pretty much what this

does is sets up the grid to start off with a certain number of rows or columns depending

on what property that you're using. And then from there, you can actually specify the sizes

of each column and row. Now, we're not to changing individual item sizes yet, but we

can actually go ahead and change the size of each individual row or column to create

alternating sizes and alternating boxes, which have alternating sizes. So let's get started.

Now the two properties that we need to use, which are pretty easy to learn our grid, template

columns, and rows, don't forget about areas for now we don't need to know them. Now, what

we're going to do is set up our grid template columns first. So instead of doing something

where we might be taken a function or something, this is actually set up in a really nice and

elegant way. And all we have to do is type out the sizes that we want. And based on the

number of sizes or values that we input, it will decide the number of rows that we want.

So I'll give you an example here, let's just say I'm going to the first row to be 10 pixels

wide, which is pretty small. And then I wanted the second one to be 50 pixels, and the third

one to be 10

pixels again.

So what we're pretty much doing here is setting up setting it up so that we have three columns.

Because we've passed in three values, the first is going to be about 10 pixels, which

is very, very small, the next one is going to be 50 pixels. And then the last is going

to be 10 pixels. Now let's see how this looks. Now if you don't already know this already,

columns are going downwards, not this way. So just keep that in mind, we refresh the

page. And you can see what kind of an effect that has here,

we have

a lot of empty space open here. Again, because we're using absolute values and not relative

values. Or at least relative to the box that we have here, you can see that our boxes here

are really divided up in a weird way. So our first column is 10 pixels very small. And

then the second one is it's getting really mixed up you can see here with our wrapping

and all of this different stuff. And of course, we don't have those lines to show us how our

grid is set up. But you can see that doing something like this would obviously really

mess up the grid. Now, obviously, you're not going to go and set all of this to 10 pixels

at 50 pixels. But you can just see what kind of an effect this has already. We haven't

even created any rows yet. And we've already completely customized the way our grid looks

without touching or doing anything. Unlike Flexbox, we had to actually really go in and

specify it in a way that changed everything. So let's get started on some of the next one,

the next one, which is our grid template. What's it called rows. So what's going to

happen here is instead of specifying the columns, we're going to go ahead and specify the rows

and it works in exactly the same way, all we need to do is pass in a set number of values,

and it'll decide what we need for us. And just one thing to note, these don't need to

be the same imagine it imagine it as sort of a table here, we have three columns going

downwards, and three rows going from left to right. So let's go ahead and specify this

year, I'm going to go ahead and say I only want two rows. So I'm gonna say the first

one is 50 pixels. The second one is 250 pixels. Now let's see how this looks. So you can see

again, this whole thing has expanded. And now our first row is much smaller, and our

second row is a lot bigger. So you can see already what you can do with this. And that

you have power as of using these template columns and rows, as I've explained before,

but this isn't a really convenient, or efficient way to create a nice looking grid. Because

how are we supposed to know the elements or the amounts of each device, especially with,

you know, all these different viewports and sizes, we need to keep this consistent across

all devices. So there's actually a really easy value that we can use, which is called

auto. Now if we actually go ahead and set all of our rows to auto, what's going to happen

is it's actually going to divide the space evenly between the three no matter the size.

And I can also even go ahead and do this with my rows. And now if I refresh the page, you

can see this looks a lot better. Now you can kind of see how the spacing is working here,

we have three columns. And obviously there's nothing in our third column for the bottom

row. But then we also have two rows, so it's kind of split down the middle. And now we

have our three elements up here and our fourth and fifth element down here. So you can see

here that what's happening is it's dividing the space evenly between our elements or our

grid. And if we did actually go ahead and remove on the values and change it to an absolute

value, use something like 100 pixels, what's going to happen is the remaining space is

going to be kind of divvied up between the two columns. And obviously, it doesn't look

like it here, because we don't have spacings enabled. There's a bunch of things going on

behind the scenes. But what happens is the remaining space is kind of divided up between

the two columns. So you can see already that with these values, we can create some really

nice looking grids without even having to do much work. Now, what I would recommend

is, instead of going and specifying all of our absolute values, go ahead and just create

the number of columns and rows that you want, while also using auto values. Because later

in the future, what we're going to do is learn some techniques to split up our items and

make them look a lot larger without having to change the size of the columns and rows.

Because it is a much easier, it's much easier to work with our items rather than the grid

itself. Alright, so that's pretty much it for template columns and rows. Now, like I

said, just for any other exercise, I recommend you to go ahead and play with this on your

own. Try and create your own custom grids and throwing images and all sorts of things

in there, play around with it, and try and see what you can create. And just try and

come up with this many cool crazy ideas as possible. Because there is a lot you can do

with just these two. Properties, which are grid template columns, and grid template rows.

Alright, let's move on. So in this video, we're going to be looking at some more properties

relating to the grid container. Now, these properties are very similar to the ones we

learned in Flexbox, which is actually somewhere up here, where we've learned how to justify

and align items in different ways. But there are very similar concepts. The only problem

is some of the values and the properties themselves are actually kind of different. So we need

to go ahead and look over those differences. So that we can get used to interchanging these

properties between the two without kind of affecting our understanding of the properties.

So what I'm going to be doing in this video is going and teaching you in this video how

to align and justify our items both horizontally and vertically. So let's start with the first

one, which is very similar to Flexbox. And it is the justify content property. So just

like we've learned before, this is going to justify it on kind of the horizontal axis

instead of on the vertical axis. So for example, if we were to center these items, what we

would do is we'll push them all to the center, instead of moving them up and down. So there

we go. Let's go ahead and get started with this, I'm going to go ahead and create a new

property here justify content. Now, just like with our previous property, there are three

main values that are used both in our justify content property, and the aligned content

property, which we're going to learn in just a second. The only problem is in our Flexbox

section, we looked at them and they did have a prefix, which are flex start and flex end.

So basically, like I said, these are sort of do signify the start and end of the flex

box depending on what axes you're aligning your items on. But instead of adding that

prefix here, we're just going to say start and and center, instead of something like

grid start or granddad, they don't use any of that prefixes. All that's included are

the three main keywords. So it's a lot simpler to understand. And but it is a little bit

harder when you start using both Flexbox and grid, and you get the two very mixed up or

confused. So let's go ahead and do that. Now. I'm just going to go ahead and justified the

content to the center. Why don't I go ahead and do it or justify it to the end this time

just to spice

things up a little bit.

If I refresh the page, you can see that our template columns, and that's the key word

there template are ignored, and everything is completely aligned to the right side of

our grid. So we can also do it just like with our previous properties in our Flexbox, we

can also align it to the start and do pretty much whatever we want with these. So the next

value, or the next two values that we're going to use for this property are space around

and space evenly, which is a little bit different from space between. So they both work in the

same way, in that they create spacing between the items to give them to you all even them

out in the grid. But the only difference is on our Flexbox we actually used space between

whereas on our grid, we're using the value space evenly. So I'm going to go ahead and

show you that here. I'm going to just go ahead and say space evenly. Like that. Now if I

refresh the page, you can see that although it doesn't actually show up here, maybe because

of a developer error or something like that, we now have our it Here spaced evenly, just

like we can see here in this grid box. Now there are remember spaces between or before

and after our first items, and that's the key word there. You can see instead of saying

between it says evenly. And pretty much, what this is saying is, we're actually going to

space them evenly, not just put space in between them. So like I said, I talked about a lot

of uses of these in the previous section, but we're not going to go over those now.

So let's go ahead and try out the next value, which is space around. And when we refresh

the page, you can see that this looks pretty much exactly the same. Now, of course, we

don't have lots of space or room to work with here. So you're not going to see the direct

impact or differences between these. So for now, let's just consider them the same purpose.

Like I said, we've used both of these in the past, and you know exactly what they do. So

now let's go ahead and get started with our next value or sorry, property, which is our

align content property. Now, instead of using align items, we're using aligned content.

So that's just one thing to keep in mind. But I'm going to go ahead and say is aligned

content. And before that, let's actually go ahead and give it a little bit more height,

I'm going to say maybe 500 pixels, refresh the page. And obviously, these stretch out,

we don't have any defined heights for them. But we don't have to worry about that for

now, I'll go ahead and change that in just a second. So what I'm going to do is go ahead

and start playing around with some of these properties. Now, what's actually really interesting

is for our align items, we can actually use both space evenly and space around. But we

also we also have our space between property from our Flexbox section. So if I go ahead

and try that out now,

space in between,

and refresh the page, you can see what happens is that we have our space between right there

just as we've signified and it's not spaced evenly. Remember if there's no space, before

or after our top and bottom items. So that's a really cool feature to keep in mind with

our aligned content, property. And of course, along with space evenly and space around,

we also have our three standard values, just go ahead and show you that here are three

standard values, which are center start and end. So I can go ahead and show you that

now. Start

out or sorry, line content to the end. And that will push everything down to the bottom

of bottom of the page. So there we go. There's a lot to digest. In this video, there's a

lot of different properties to cover and memorize. But don't worry about all that for now just

understand which property does which. And everything will just fall naturally into place.

And remember, if you ever forget how to do something, you can always go and both review

the lectures or just Google it. It's really that simple. There are tons of articles and

helpful resources out there to help you decide or figure out some of the properties you may

have lost or forgotten in your time using CSS. So there we go. That's pretty much it

for aligning content, it's quite easy in terms of properties. Although there are a lot of

values once you start using them and getting used to some of the subtle differences, everything

will just fall naturally into place. As I said before, alright, let's move on. So in

this video, we're going to be looking at another feature of our grids here, and that is going

to be column, column gaps column and row gaps. So we've looked at aligning content, we've

looked at creating columns and rows. Now we're going to look at the final piece that kind

of connects everything together for our containers, which are gaps. So we've talked about how

our grid is kind of set up, we have our boxes, we have our columns and our rows. And then

we can actually change these or override them using our justification here, I'm actually

going to go ahead and erase these or comment them out just for this lecture. So we can

create some good demonstrations here. So what I'm going to be doing is going through and

talking about these gaps. And they're actually pretty important when it comes to the whole

thing because you can completely change the way a grid looks by creating spacing. And

obviously, if you've seen any websites, and really look closely at it, you'll understand

the importance of spacing in websites, they really bring everything together and create

sort of a hierarchy that's easy on the eyes if you've taken any UX or design. So let's

get started. Now what I'm going to be doing is going ahead and creating these column and

row gaps. So the first the first one I want to talk about is column gaps. And just as

we were working with our call template columns and template rows, the the properties that

we need to use are pretty similar. So first, I'm going to go ahead and start with our columns.

Now the property that we're going to be using is grid column gap. And you can obviously

kind of associate these together to memorize them or maybe learn them easier. But besides

that, we're going to go ahead and get this started. Now, of course, this only takes one

value, we don't need to specify any more, because what we're going to be doing is giving

each while each column A gap between them. So let's go ahead and give it a value, I'm

just going to go ahead and say 150 pixels. To make it a little bit evident, go ahead

and refresh the page. And although it may not be obvious, immediately, you can kind

of see that these columns are a little bit more spaced out now. Now, of course, there's

no lines to kind of show you the visualization. But you can kind of deduce from this, that

there is definitely a bigger gap between the columns. Now that we've specified it. So now

what I'm going to do is go ahead and actually change this and give it a row gap. So very

similar to our previous previous property, we're going to use grid row gap. And this

is pretty much the exact same thing, except it specifies the gap between rows. So this

is probably going to be a lot more obvious here, what I'm going to do is just going ahead

and saying 300 pixels, and notice how the gap of this place kind of gets bigger. You

can see now that there is a much bigger gap between our top row and our bottom row. So

that's pretty easy. But obviously, you don't want to go through and specify these every

single time. So there's actually a really nice shorthand property that we can use to

bring this all together, I'm going to go ahead and actually, I'll keep these for now, and

then I'll erase them

when we're done.

So instead of specifying which axes you want to do it on, or which axis sorry, you can

just say grid gap. And what this is going to do is just create the gap instantly, where

you can pass in two values and specify it or do it all in one go. So this takes the

column first. And then the row, kind of just how template columns goes first. And template

rows go first in a shorthand, which we haven't actually talked about. But we'll get to that

later. For here, what we're going to do is specify our column first, which is 150 pixels,

and our row gap next 300 pixels. Now, I'm going to go ahead and erase these other values

that we don't need and refresh the page. So I actually made a little mistake there, and

I put the column before the rows or if I cause any confusion there. So what I'm going to

do is actually just go ahead and change this really quickly. So that this will work. Now

if I go ahead and refresh, you can see that they look exactly the same. Again, sorry for

that mix up. Just remember that the row or the row size comes before the column size,

just keep that in mind. So there we go. Now we have our grid gap setup. Now this is pretty

much it for our well, column gap or row gap are all of these gaps for our grid layout.

Now, there's really not that much to it, it's very easy to set up. But once you do that,

it becomes very easy to sort of work with your grid along with the other properties

to create some really nice looking layouts. And once we start learning some more of the

properties in the next few videos, you can really maximize the use of the grid layout

in CSS. Alright, let's move on. So now we're going to be moving on to a little bit more

complex, the more complicated parts grid, and in this video, we're going to be covering

quite a big topic, it's going to be a lot to chew. And don't worry, if you don't get

it on the first try. We're going to go through this slowly, and we're going to go through

it step by step so that we can learn everything about this. So in this video, we're gonna

be learning about the real true power of grid and more we're going to be learning is how

to rearrange and resize items based on starting at starting and ending points. So that's what

we're going to be doing today. The first thing we need to do is obviously go and go to our

grid container on our HTML file, since we need to specify the start and end points of

each item individually. So let's get started. Now the first thing I'm going to do is actually

go ahead and remove all of these values because it'll be much easier to see and understand

what's going on. When we just have these fives here, what I'm actually going to do is go

ahead and add a sixth item just to break even here and make everything look great. So I'm

going to go ahead and choose another color. something random here, maybe a purple. Do

we have that? Yeah, we do have that will be a green something. Actually, let's just go

for a nice dark orange something here. And we're going to go ahead and copy that. And

now we have a sixth values to break even here. So what we're going to be learning in this

video is how to, like I just said resize items, and there are actually a few. There we go,

we have our colors have now, we do have a few different shorthands and properties that

we can use to set this up. So the first thing we need to learn is the lines and the concept

of lines. So we do know that we have our columns and our rows. Well, what's happening here

is that each column starts and ends or well, each column is designated a certain line.

So for example, this would be line one beginning here, this would be line two, and then this

would be line three. And then for our rows, we have our line one and our line two. So

what we can actually do is say set, set this item to go from line one to line three, and

from row line one to row, line two. And we can do this using a few properties and some

shorthand, and some other keywords and other other things that we can do to set this whole

thing up. So one thing you need to keep in mind that is that lines are the basically

the core concept, the most important part of grid, it's what makes grid what it is,

all of the properties that we've learned, are all kind of revolving around lines, and

the model is created by those lines. So that's just one thing to keep in mind. Alright, let's

get started. So the first thing I'm going to do is talk about how to start an end at

certain item at a designated area. So we're going to go through and specify the start

and end points. Now there are many different ways to do this. But we're going to start

with the basic sort of syntax that we should use to set this up. And then we'll move in

some into some of the more advanced syntax to set this thing up and start creating shorthands

and other shorts of properties. So let's go ahead and get started. What I'm going to do

is select what item I want, let's just go ahead and say the first item. And now what

we need to do is go ahead and set read column like this.

So what I need to do from here is up whoops, what I need to do from here is to specify

a start and an end point. And they are separated by a slash. So the start point is going to

be the starting column line. So I'm going to say one, and the end point is going to

be well, the ending, and I'm just going to say two, or Yeah, I'm gonna say two or three.

For now, I'm just going to go ahead with three. Now if I go ahead and refresh the page, you

can see what's going on here. Now, obviously, it looks really weird with all of these different

items here, and they're being rearranged in a different way. What's happening is we're

starting at line one, and then we're going to end at line three. And you can see that

although it's not resizing properly, it still does take up that space in an invisible way.

So we have our item two at the start of line three, and everything is pushed right past

it overriding those template rows and columns that we created. Now let's go ahead and specify

our next value, which is the grid row value. So what we're going to do here is just with

our first one, we're going to set a start and an end point and separate them by a slash.

So what I'm going to do is go ahead and say, start at row one. And we're going to whoops,

and we're going to end again, let's just go ahead and say line two, just like this. Now

I'm going to refresh the page. And you can see nothing's happened because it does start

at one and end at two. Let's go ahead and set three right there. So now you can see

what's going on here. Although it didn't, it didn't show anything before when we had

one to two, because it already took up that space. When we set it to 123, you can see

that everything has now been pushed again, and the space has been separated accordingly.

So you can kind of see the power of this already, you can create all sorts of layout menus and

sidebars, just by using this syntax alone. And it is very powerful. But there's also

many different ways to do it, which we're going to be covering over the next few videos.

Now instead of specifying an endpoint or an end line. Because these can get quite confusing,

you don't know where line start and where lines end. And it does get quite confusing,

especially when you have very big grids with lots of different columns and rows. So instead

of this, you can actually specify the distance that you want it to take up. So the keyword

that you can use for this is span. What this is going to say is start at some line, whichever

one you choose, and span or take up a certain amount of well spaces depending on what value

you're using. So for now, I'm going to say span two, and here. I'm also going to change

this to span two. Now let's refresh and see what happened. You can see that nothing has

changed. Of course because They are exactly the same thing, you start at column one. And

you take up two more spaces, you go up two more lines, you start at row one, and then

you go down two more lines. So you start at line 112, just like that. And this is a much

easier way to work with grid columns and rows, because you can kind of see what you're doing,

instead of just specifying start and end points like this, you can actually kind of visualize

the what you're doing with your grids, and how big you want to make your items. So that's

pretty much it for these different items. Now, there are, like I said, many different

shorthands that you can use, which we're going to be learning in just a few videos time.

But this is kind of the basic idea of specifying these items, you can go through and you can

set start and end point, add points based on the different lines and the sort of model

created by the grid. And then you can set how big you want each item to be. Alright,

let's move on. So today we are going to be covering or looking at the last feature of

our grid section. And it's pretty much just a summary of what we did here, but using a

shorthand. So you can see that we have our grid column and our grid row. So we identify

our starting and ending points for both axes. But there's actually a way that you can do

this whole thing in one go. And usually when you're developing what websites, you're going

to want to do this, you don't want to go and do each of these properties individually.

For all of them, you're going to want to do it quick and fast for both axes. And that's

how you get the maximum out of grid. So what we're going to be using is something called

the grid area property. And just like before, pretty much what happens is this is a shorthand

that summarizes these two in one property. So it is a little bit confusing to get your

head around the

starting and ending points. So I'm just going to go through it with you. So right now I

have changed this part a little bit of kind of messed around with the column starts and

ends so that you can differentiate between the values. So pretty much what the first

value we're going to input just like here is going to be your row starting point. So

you're going to go ahead and input two in this case, because we want to match this exactly.

And the next instead of your row end is actually your column starting point. So then we're

going to put one. Now from here, this is where a lot of people get mixed up and confused.

Pretty much what's happening is just how like with margin, you go top right, bottom left,

or with any other kind of property that deals with those kind of multiple value scenarios,

what's going to happen here is you have the row column start, and then you have the row

column. And so just keep that in mind. And everything will work out for you. So all you

have to do is go ahead and say two, one. And now we're going to put our row end. Remember,

we have row start column, start row end, and then column end. So here we're gonna put span

to Now remember, this can be a span value, or an end value, it doesn't actually matter.

So you can do whatever you want here. And then of course, the column ending value, which

in this case is span three. Should now what we're going to do is go ahead and and just

comment these out for now and see if anything has changed. And you can see, of course, it

hasn't. Since we pretty much summarize this into our shorthand, we don't actually have

a use for these anymore, so I'm going to go ahead and get rid of them. So now that you

know how to do it, let's talk about some of the benefits of this. Now, when you're creating

a grid, you're creating a huge practical system, most likely, you're going to be organizing

pages into headers, and sidebars, and all sorts of things. And you don't want to go

and input those two for each one, it gets a little bit confusing after a while. So it's

much easier if you just have one property that can summarize both the column and the

row in one clean swoop. And then you can apply them to all of your different pieces. So your

sidebar would go and start and end here, then your header would go here and you get the

idea. So that's pretty much it for grids and grid area, there's a lot to cover. And of

course, practice makes perfect with these kinds of things. But the more you use it,

the more you will understand how to sort of work with it and play around with some of

the tricks that really get grid to work properly. Now these tricks can't really be taught, because,

of course, they're personal to the user, the developer and what kind of work they're doing.

So there's always shortcuts and all sorts of little tricks you can use with these properties

to really lay out your website related to your special field of development or work.

Alright, let's move on. So this is going to be starting a brand new section. And we're

actually going to be looking at a very cool and useful feature in CSS. Now, of course,

this isn't a very old or considered a essential feature, but it's still very useful. And it

can help you make your website look a lot better. So in this section, we're going to

be covering everything to do with movement on your page. So things like animations, transitions,

and some other features that you can use to sort of change the way your website looks

without actually changing it, in a sense. Now, of course, this will make a lot more

sense once we go forward and start working with some of the properties. But the first

one I want to talk about in this video is our transition property. So there is a lot

to cover in this video. And transition is actually a shorthand for four different properties.

So there's going to be a lot to work with and talk about, so I'm going to go through

it a little bit slow. But once you get to the end of this video, you'll understand everything

about transitions and how to work with them. Now you can see I've touched up this website

a little bit using any all of the skills that we've learned in this section selectors, displays,

margins, all sorts of things like that, including styling the button just with a little creativity.

And now we have our page kind of a little bit better laid out for our animation. So

the main part that we're going to be focusing on is our contact us section, and notably

our Submit button. So this is the main kind of focus piece of this section. So pretty

much right now we have a static page, there's nothing moving nothing changing positions

or properties or anything like that. And right now, what I want to do is focus on the submit

button to create some transitions. Now pretty much what's going to happen is we're going

to use pseudo selectors to change the state of this button.

Or change some of the properties in it. So for example, the background or the text color,

or anything like that, and then we're going to use the transition property to make it

appear smooth. So that's one thing to keep in mind, the transition property itself isn't

that big of a deal. But the real work goes behind the pseudo selectors and how you use

them. So let's get started. The first thing I want to do is use a pseudo selector to change.

Let's just go with the background for now. So what I'm going to do is use my class that

I added, you can go ahead and add this on your own if you're following along. And then

I'm going to use a pseudo selector. And I'm just going to say for now, let's go with hover,

which is a pretty common pseudo selector. Now, just to test this, that this works, I'm

going to change the color to black, because again, there could always be issues. Let's

refresh hover, it's black, you can see that it's already working, it's just not smooth.

So let's go through and start changing some of these properties. What I'm going to do

is change the background to a lighter shade, I'm actually going to just use the color picker

here, I'm going to go ahead and use a lighter shade of blue, something that would indicate

that you're hovering over. So I'm going to go ahead and do that. And for now, we're just

going to stick with one property. Well, once we go forward, we're actually going to add

more and more properties to make it look a lot cleaner. Let's go ahead and refresh. See

if that works, you can see that it is a much lighter shade. And it looks like a proper

hover on a website. So let's get started. Now we have our Submit button or our base

class, the one that's always active, and our special pseudo class, which kind of uses specificity

to override our base class in certain conditions, in this case, the hover. Now what we're going

to do is add our transition property. So what we do is go to our base class. And we're going

to set our transition property here. And now we have a bunch of different values to input.

The first is going to be the property that you want to well transition because remember,

the property is basically going to smooth it out and move the property on one hand and

from the base class slowly to the other in a nice, clean, automated way. So if you want

to select all of your properties, you can just hit all, but I wouldn't recommend that

unless you unless you want to shorten things or smooth over time, because sometimes your

classes can change. And it can cause errors in the long run. So what I would do is for

now I'm just going to select the specific property that I want. Next thing I want to

talk about is the duration. So this is pretty much the time it's going to take to move from

one property or one value to the other. Now this can be anything. Now you would specify

this in seconds or milliseconds depending on what you want to choose. I'm going to go

ahead and use seconds. So I'm going to say two seconds. And s by the way is the unit

for seconds in case you didn't know. The next we want to go is talk about the sort of transition

style So this is probably the most complicated thing to work with, because there's a lot

of different styles and haven't really used them in daily life. But it's pretty easy.

Pretty much what you're going to do is decide what kind of a change do you want? Do you

want it to go straight from A to B? Do you want it to be smooth or speedy. And what I'm

going to do is just run through some of the main ones you have here. So the first one,

and the most common one is going to be ease typing is, and pretty much what this does

is it's kind of the standard transition, it goes is it goes straight from A to B, then

you have linear, which is not very commonly used, especially in transitions. But it just

goes straight from A to B without any, you know, speed changes or anything like

that.

And you also have a couple more, there is one called ease in out like this. And you

can pretty much just read this a name, it goes it eases using the previous one that

I just talked about. But of course in that

order.

So those are pretty much the three, or the sorry, the four common ones that you would

use. And of course, there's a bunch more, but these are really the main ones that you

would work with here. So pretty much let's start working with our transition property

here. So I'm actually going to go with ease and out just to spice it up a little bit,

not use the basic ones. And then the last property that we're going to select is the

delay. So pretty much what's going to happen is when you hover over it right now there's

no delay, it's zero seconds, the animation plays instantly. Or what you can actually

do is set a delay that you can use to let's just say after you hover, wait two seconds,

and then play the animation. So let's just go ahead and set a delay of one second. And

that offer the semicolon a lot to digest there, I know. But um, don't worry about it just

leave, it's just keep it there for now. And if you don't understand it, we'll break it

down and do some more examples. Let's go ahead and refresh the page. So what I'm going to

do is hover over my button here, you can see that it's going to wait whoops. So I'm going

to hover over. Now we're going to wait. And you can see after one second, it turns into

that kind of shade that we want it. Now I feel like we're going to remove that one second

delay, because we don't need it. And I'm actually going to shorten this down 2.5 seconds. Now

what I want to do is refresh the page. And now you can see it's a lot faster. Now once

you get into this range of one, you want to start using milliseconds. So we're going to

go 300 ms, which is milliseconds.

Let's refresh the

page. And like I said, just play around with this tinker with it and see how it works.

So you can see when we do this, that it changes the color. And when we hover over it changes

back. So now you can see the difference between not having a transition and having it. Let's

comment this out for a second. And you can see how that works. Without the transition,

it looks kind of jarring and quick and sharp. It doesn't really look appealing. But when

you add that transition, it just completely changes everything. Now why don't we go ahead

and try out some of the other styles because it's much easier to show you how these styles

works, rather than just explaining them. So let's go ahead and see linear.

So

pretty much what's going to happen, it just goes straight from A to B, no speech changes

or anything. Of course, with something this small, it's not very noticeable. But when

you have translations and all these different changes, then it will definitely be noticeable.

So there you go, you have a linear transition there. Now let's go ahead and try our ease

transition, refresh it. And you can see that it is a lot faster. And like I said, not very

noticeable. But we can see a clear difference in the speed and agility or what not agility

but the kind of curves of the transition, it starts out very fast in towards the middle

and gets a little bit slower. And then towards the end, it's much faster. Now of course,

it would be easier to demonstrate if it wasn't 300 milliseconds. Let's go ahead and see this

when it is on a higher time, so you can see kind of how that works there. So there we

go. Those are the different types of transition types. That's probably the hardest property

to or sorry value to work with. And then after that, everything becomes a lot

simpler.

So now let's go ahead and start adding some more properties here to make this a little

bit more interesting. I'm going to go ahead and add some padding. So I'm going to say

when it's hovered over pretty much double the padding, so 20 pixels, 30 pixels. Now

here, what we're going to do is either use a comma to separate the different property

That we want to use. Or we can just erase all of this and say all. Now we refresh it.

And you can see that that gets a lot bigger, let's change that back to about 500 milliseconds.

Make that a lot shorter. And now you can see it gets bigger. On top of that, the sorry,

the background changes. Now, of course, you can do so many different changes with this,

you can maybe change the color, the font size, even the weight. And once we learn some of

the translation, or sorry, transformation functions, we can do a lot more with it. But

for now, we need to stick with the basics of the transition concept. So before we move

on, there's one thing I need to talk about. And those are the prefixes that we need to

use for browser support. So I think is with much newer CSS versions is that not all browsers

support them, they all compile in a different way. And some of them don't support these

newer properties, especially in the older version. So for example, Internet Explorer

seven, Internet Explorer eight, all of those very old browsers, which people still use,

won't be able to see this property. Now you have two solutions to this, either use a fallback,

which is you know, if the transition doesn't work, just maybe have a fallback image or

don't play it at all. Or you can use a browser support prefix. So each one or each type of

browser has a different prefix, but the main ones are for Chrome and Safari, we need to

use WebKit, like this. And remember, you need to start it with a dash and end it with a

dash like this. Then you one for Mozilla Firefox is going to be dash m o z. And then of course,

for some of the other browsers like opera, you would use Oh, whoops, online, would you

Oh, for that. And those are pretty much the three main ones. Now. WebKit is pretty much

an essential, it covers two browsers at once. Now, of course, and result is also still important.

opera is important, but not as important as these other two. Now one thing you need to

note is you can't just string these together, you can't go dash WebKit dash smalls dash

O, you have to use separate property. So you have to go and copy each one, and it is a

pain. But if you want the maximum browser support, you need to do this. So of course,

if we refresh the page, nothing's gonna happen here. But anybody who's using an older browser,

if I was testing this on maybe Internet Explorer seven, would see a clear difference between

before and after we added these browser support prefixes. So that's pretty much it for transitions.

Now, there is a lot to cover, and we will work with them throughout the future. But

all you need to do is go ahead, select pretty much any element you want, and start playing

around with it, add some different properties, maybe go and change the pseudo selector. So

for example, if you want it to be active or something like that, or if you click it, you

want to change some of these properties. There's a bunch of pseudo selectors out there. And

combining that with the transition property and the skills you've learned in CSS, you

can really make this website or whatever website you're working on interactive, without even

having to learn any animation, or proper transformation properties. Alright, let's move on. So in

this video, we're going to be covering different transform properties. And this is going to

be quite a long video. Just like the transition video, we do have a lot to cover. There's

many different values and functions that we need to use to complete this. But it is a

pretty essential step of this section. So let's just get straight into it. So firstly,

what we're going to be using in this video are actually not values, their functions.

Now, just like this RGB thing is a function that takes a bunch of inputs and gets a value

out. Or maybe something else. Well, it seems like this is the only one on the page. But

what we're going to be doing is using a bunch of functions that take in inputs, and actually

physically change what this is on the page. Now obviously, all of these do physically

change what they are on the page. But instead of inputting absolute or direct values, this

kind of processes in a different way behind the scenes. So let's just jump straight into

it. First thing we need to learn is the property. Now we're going to use our button again, and

I'm going to be using a value called transform. So what we're going to do is plug in a bunch

of different values in here and see how it affects this. So pretty much we have two different

sections of this video, we have our physical change properties or our movement, so our

translation and our scaling, and then we also have our different rotation properties, or

Well, I should say functions, but there we go. So we're going to have our Translation

in our scale, so our physical changes, and then our rotation. And at the end, I'm going

to throw in a nice shorthand function that summarizes all of it. So let's start with

our physical changes. So the first thing we need to learn about is translate. So we're

only going to be covering 2d translations for today, because 3d can get very complicated

very quick. And it's not really useful in day to day life or developer life, unless

you're making something that specifically needs it. So we're just going to cover 2d

translations, and other function transformation functions for

today.

So pretty much what this is going to do is taken two different values, one of them is

going to be the Y shift and the x shift. And it's going to actually shift physically shift

the elements to that position. So for example, if you said, I want to move this button or

this image a little bit to the left, and I wanted to move, or let's just say 10 pixels

to the left, and I wanted to move it 10 pixels up, it would do that. And of course, there

are many different ways to do it. But what we're going to do is use this translate method

to really change the way that this whole thing works. So what we're going to do is are we're

going to use an alternative method to you know, something like margin or grid or all

of those. So the first thing you want to do is specify the x axis value. Now, in case

you haven't, you know, learned about graphs, or you maybe forgot it, pretty much, what

happens is the x axis is going to be your left and your right shift, right is going

to be your positive value, so anything above zero, and if you want to shift it left, you

use negative values. And then of course, the second value is the y axis. So up as positive

and down is negative. So let's start with our x shift, I'm going to just go ahead and

say 50 pixels here. So I want to shift it pick 50 pixels to the right. And remember,

we don't need we need to, we don't need to say anything like to write or anything like

that, we just need to specify the value, then we throw in a comma. And here, what we're

going to do is add our Y axis shift. So here, I'm also going to say, let's just go with

30 pixels, refresh the page, see what happens. Now, we can see here that it's actually staying

exactly the same. It's not moving. It's not changing anything here. But you can see that

when we hover over it, it does actually move. So what's going on here. Now, here's where

you have to be careful about where you add your properties, you can see that I added

it to our pseudo selector instead of our base class. And that's one thing or one point I

just wanted to make about these pseudo selectors is that if you add them on, maybe here, it's

not just going to inherit it magically and put it on the base class, you do need to be

specific. Remember, these two are completely different classes, it's just that some of

them are being overridden. So for example, our background and our padding already exist.

So what happens is that all of these styles are already applied. And then the new styles

here are overridden. But this is a completely new property, it doesn't actually

exist on our base class. So just make sure that you don't make that mistake. Let's go

ahead and paste that on the base class. I'll do it just above the transitions. Now refresh

the page, and it's translated perfectly. So now that we've done that, I want to talk about

browser support for a second. Now all of these are very new features to CSS, you do need

to make sure that you add your browser prefixes. So WebKit, mas, and O. Now, I'm not going

to go through and add it for all of them. I'm just going to leave it blank for now.

But you need to keep in mind that if you want the maximum support on your on your page on

your site, you want to make sure you include those prefixes. So there we go, we've covered

it translates. Now let's work with our next value, which is going to be scale. So scale

works in a similar way to how maybe increasing the padding would work. What's gonna happen

is you're going to go and you're going to type in scale, which is the name of the function,

and then you're going to pass in a decimal value, it doesn't have to be a decimal, but

pretty much what you're going to do is just say, let's say I want to scale this up by

two and a half times, what's gonna happen is this is going to size up by two and a half,

we refresh, you can see that it's gotten a lot bigger, and padding and all of that it

doesn't really apply or change anything here. It just scales everything up by two and a

half. So you can obviously see some of the issues here with margin and padding and all

sorts of things like this. So be pretty careful when you do this. You don't want to mess up

your page or change your style, or anything like that. You just want to make sure that

you can scale without having to to mess with the layout of your page. So that's for scale,

and all of the physical properties. Now let's move on to some of the rotation properties.

So the first two, we're going to cover or sorry, the first one I'm going to cover is

pretty simple. It's just a standard rotate. But then after that, I'm going to cover two

really special ones, which are actually skewing on different axes. So we'll get to that in

just a second. Let's refresh the page. So the first one I'm going to use is rotate,

and this takes one value, obviously, it's going to be our degree value. So if you don't

remember from our gradient section, what happens pretty much here is we rotated kind of circularly.

Well, not for this one. But we can use degrees to actually change the angle or direction

of our gradient. So for example, 90 degrees B, a 90 degree shift, so would go to the right,

and then negative 90 degrees would go the other way. So it would go to the left. So

if you just remember that you'd be doing great here. So let's just say I wanted to use minus

45 degrees, and remember the symbol for it. So what's gonna happen pretty much this is

going to shift slightly, or will not shift, but it's going to rotate. And you can see

what happens there. Now, if this was minus 90, it will pretty much flip. So it was facing

up vertically. And I'll actually show you that now. But pretty much what you're doing

here is just rotating it around it center, and changing the rotation of it. Pretty simple,

pretty easy to use. So now let's talk about the two special ones. So pretty much what's

going to happen here is they're going to skew them along certain axes. Now, this is really

hard to explain. And most likely, nobody will get it if it explained. So the only real way

to show it or the only real way to teach it is by showing it. So what I'm going to do

is use skew. And you can see we have our shorthand and we also have skew x and skew y. So what

I'm going to select this skew x first, and pretty much this is going to shift it or rotate

it along the x axis instead of its center. So remember, the X is kind of

a horizontal rod. So just kind of imagine a stick or a paper attached to a rod and you're

rotating it around that rod. So now let's go ahead and input our value just like before,

we're going to use degree values. So I'm going to go 45 degrees positive, we refresh the

page. And obviously, it looks quite weird, because it's pretty hard to simulate these

kinds of things. But you can see that pretty much what this has happened is rotated along

that axis. So if I go negative 45, it's going to go the other way, just like that. And you

can kind of see how that works. Now if we change this to skew y, it's going to go it's

going to do this exact same thing. But it's going to be on the opposite axis. So it's

going to be on a vertical rod. So just imagine that, refresh the page, and you can see how

that is working. Now obviously, it is very hard to see and visualize. So I wouldn't encourage

you to use skew X or Y. If you want to rotate something you should most likely stick or

you should try and stick to the three I just covered. So the last value we're going to

be talking about or the last function is going to be our matrix function. So this is going

to be a shorthand to summarize everything into one go. And pretty much from here, what

we're going to do is pretty much just summarize everything in one clean swoop. So pretty much

this takes six arguments. And one thing you do have to note is it doesn't take rotation

into account, it only works with skews, so you just have to keep that in mind. If you're

planning to rotate it, you should probably add that as a as another function. So let's

get started. What we're going to do is go ahead and work with our matrix function. So

we're going to erase this. And we're going to go ahead and add our matrix. Now these

six arguments do follow a very, very specific pattern or a order. So we're going to have

to go through it slowly so that you can understand it. And it is a little bit out of order, logically,

so we're just going to take our time this. Now the first value is going to be your x

scale. Now one thing I forgot to mention is that we were actually using shorthand. shorthand

functions to avoid all the mess with scale x and scale y and just shorten things up.

So one thing you do need to keep in mind is that every scale component or function like

this will have an x and a y value. And what we pretty much did is summarize them down

into one or into those shorthand functions. So we can just do it really easily. But here

it's actually split up into different functions. So let's To start with our scale x. Now one

thing to note is that if you want to keep it the same, all you have to do is input one,

pretty much this is not typing pretty much what this is going to happen. Or what this

is going to do is say set this button or object or element one times as big as itself, which

is, of course, just going to result in the same. So the next is your skew y and your

skew x. Now if you don't want to do anything, you set it to zero. But if you do want to

skew it along the axes, you do have to use decimal

decimal values here. And one thing also to note is that you don't have to include the

unit's like we did before. So no PX or mm or dagger do anything like that, you just

include the numbers. So you do include decimal points here. So I'm just going to go quick

45 on both of these. And remember, this is actually 45 degrees, so keep that in mind.

Next thing we're going to do is input our scale y. So again, you do have scale x and

scale y, if you want to keep it the same, set it to one, and then you have your translate

x and translate y. So I'm going to say 100 pixels. Whoops, 150. Remember, pixels pixels.

So this is a little bit confusing, but it's don't try not to use it that much only use

it if you really have to, or if you want to shorten code down. But I would recommend not

using this function very often. It's quite clunky and ordered, and it doesn't really

allow for freedom. So just keep that in mind when you're using it. Let's refresh. And you

can see our new item here scaling is, of course, the same it shifted on the x and y axes. So

you can see that here, it doesn't create that rotation that you may be expecting, because

remember, it is a skew on individual axes. Just remember that. And of course, our scale

on the x and y is one, our translation of x is 100. So it's about this much. And then

our translation of y is 50. So there we go, we have everything set up. And now it's pretty

much just all working, we have our shifts our movements here, and we also have our scaling.

So go ahead and try these out on different elements, it doesn't just have to be with

a button, you can use this on Grid Elements, although some of them may not work. You can

use this on images, text, all sorts of things, these work on any element, and they can really

help you to style your website without having to use some of the traditional methods that

we've learned. Alright, let's move on. So in this video, we're going to be looking at

CSS animations. So we've looked at transitions and some of the different transformation functions

that we can use to sort of work with our elements in a different way. But now we're going to

be learning another essential component, which are animations. So we're going to be covering

this over the next few videos. And for the first one, we're going to be creating the

animation. So first of all, what are the advantages of using an animation? Well, firstly, when

you're using a transition, you have to apply those specific styles to everything you want

to perform a transition with. But with an animation, you can define the changes once

and then apply them to anything. So for example, let's just say I wanted to create an animation

that turns something from red to black, or sorry, turns the background from red to black,

then you can apply it to any item. Whereas if you use transitions, you'd have to go through

and go through every single element, change the suit of selectors, and do all sorts of

things. On top of that, when you're using animations, you can play something at the

start, instead of having or with a delay instead of having to wait for some event to happen

with a pseudo selector. So pretty much what happens here is you can say, we can pretty

much just remove this image completely from the page or translate it at the

start

when the page is first refreshed. We can also use this to really make our website interactive

and change the way this website looks completely. So let's get started. Now, first thing you

need to realize is that these animations are completely custom, custom. You can name them

whatever you want and do whatever you want inside them. There are a few keywords that

we need to use to get this set up. Now an animation is split up into something called

keyframes. Now pretty much each animation has at least one at least two keyframes. So

you have the starting and the ending. And then you can add keyframes in between to decide

the different stages of the animation. So to define an animation, all you have to do

is go at keyframes. So in this case Is the prefix and keyframes is going to be our keyword.

And then you name the animation. I'm just going to say, translate elements just like

that. Now you can name this whatever you want. Remember, it's completely up to you, then

you're going to open it up with brackets. So now it's a little bit different to how

we've been using CSS, we can just define styles and expect it to work perfectly. There are

two different ways or two different main ways that we can define our keyframes. So pretty

much the kind of standard way of writing one of these keyframes is typing out the the keyword.

So for example, I'm just going to type example here. Now, of course, if in a real world scenario

wouldn't be like this, it would be a number or a percentage, or an actual keyword, but

it wouldn't just say example, then you're going to create these curly braces, again

inside of our keyframes. And here, you would type the styles at this stage. So for example,

if I wanted a red background, you would type it here. So what I'm going to do is talk about

the first two keywords, which are to and from. So first of all, let's start with from, so

this is pretty much going to be your initial starting point. And then two, which is going

to be your ending starting or ending point sorry, here, what you're going to do is type

in whatever you want. So for example, let's just say our, I'm actually going to change

this black to red, since that's what the or sorry, red to black, red to black. Now here,

I would say start from when the background is red. Now there doesn't have to be anything

here. But it would be recommended that you do start with something unless you're going

for something specific after that. And then here to, I'm going to say at the end of it,

make sure the background is black. Now, of course we don't have to work with timings

or anything here, because that's all decided when we add and work with the animation on

our element. So there we go, we have a define. Now these are the first this is the first

way to do something. But what if you wanted more than one background, you can't just add

two background properties in one go. So instead of this, what we use is percentages. So you

can say at 0%, you want to have some special properties. So I'm going to say background

is red. And then you can say at 100%. So at the end of the animation, this is when it's

100% complete the background to be black. Now, the direct advantage to using this, you

can actually add more than more than two stops. So for example, I can go at 50%, I want the

background to be yellow.

Now realistically, you can add as many properties here as you want, it doesn't really change

anything. But of course, you want to try and limit the amount of properties you add or

sorry, stops or keyframes to maybe six or seven at the max. Now unless you're doing

something very specific. Maybe you want strobe lights or something like that, you're going

to want to keep it limited. So there we go, we have these steps here. But the last thing

I want to cover is that you don't just have to work with one property. What if we wanted

to translate something. So what I can do is actually set the Transform, remember, it is

a property. And then I can say translate this. So by zero pixels and zero pixels. So of course,

we don't actually have to type out this property. What I'm going to do is now copy this over.

And so 50% of the way we want it to translate by 10 pixels, and 10 pixels. And at the end

of it, we want to translate by 20 pixels and 20 pixels. So you can see how this works.

So for example, let's just say we wanted to enlarge something and change the color from

red to black. We can do it just like this except maybe using scale or padding or any

other way that you choose whichever one whichever one you think is best for the specific website

you're developing. Now one thing I'm going to mention is that the kind of convention

is to keep these curly brackets on the same line. But if it is getting a little bit long

like this one, you can definitely open and close them just like I'm doing here. Don't

be limited by the whitespace. It's not really a defining factor. You can space these however

you want. But usually you're not going to use more than one property on a keyframe like

this. If you do have a giant animation, something with, you know backgrounds, transforms and

margins you're going to want to, you know, space it out make it easy for people to read.

So this doesn't just have to be multiples of 10. This could be 30% 37% way 37% of the

way through, it could be 25 you could split it into quarters, you could do pretty much

anything you want with this But the key thing you have to remember is you're designing your

own animation, you're going to want to fit it to how you want. So for example, if you

just wanted to enlarge something, you didn't really you don't really have to use these

percentages you can just use to and from or from and to, since you only have two stops,

but if you want to do something like multiple color change, then you most likely want to

switch to percentages. So you want to go from 0% to 33% 66%, you know, work with it, just

kind of see how everything works together and design the animation based on what you

need. So this is the video based on designing the animation. Now in the next video, we're

actually going to be adding our animation and start working with it, to change it based

on what we need for each element. Alright, let's move on. So in this video, we are going

to be adding the animation that we created in the previous video to one of our elements.

And then we're actually going to be going through and working with it in the next video.

So first of all, let's just recap what we've done. So far. In the previous video, we created

some keyframes for animation, I talked about all the different units, and how you can actually

set these values. And we covered all of that. But now that we've actually created our animation,

it's time to go through and add them to some of our elements. So this is going to be quite

a short video because it is quite easy to just go ahead and add the animation. But there

is a lot to cover about the different properties of animations, which we're going to be talking

about in the next video. So let's get started. The first thing is to find a suitable item

that we can apply this to. So obviously, this is used with translation and background colors.

So we can pretty much apply it to anything on this page. For now I'm just going to go

with our about me text right there. So the first thing I'm going to do is go ahead and

select it by adding a class, it looks like where is it hold on, let's see seems to be

have lost and all this. It's got to be somewhere there we go about me. So he already has a

class subtitles. So what we're going to do is, well, actually, there's already stuff

applied there. So it would be much better if we actually added an ID to it using specificity.

And we're just going to say about

me

just like that. Now what I would recommend you keep your animations and keyframes at

the bottom so that if you ever need to reference them, you can just scroll down and see all

of them there. So what I'm going to do is go ahead and select this. So I'm going to

go hash, and then about me, open up the curly braces. And now what we're going to do is

go and start adding our animation. So this is pretty easy to do, all you have to do is

use one property animation name. And you can see a little shorthand there. But we're going

to be covering that a little bit later. Let's go ahead and add that. And here we're going

to put the name of our animation. So this would be red to black. And remember, it's

going to be the exact name of the animation that we specified here. So let's go ahead

and refresh the page, see how this works. And you can see that nothing's happening.

So this is something that I want to cover in the next video because we're actually going

to be working with some of the properties. But for now, all you need to know is that

we do need to apply some special properties for the animation to start running. So for

now, all we've done is taken the keyframes just slot them on to the about me title. And

in the next video, we're going to go and actually set this up so that we can start seeing it

moving, changing the times and actually making the animation come to life. Alright, let's

move on. So now we're actually going to be going ahead and covering the different properties

that we can do in our little CSS stylesheet. Here, we're going to go through, we're going

to add some of these different animation properties. And we're actually going to start working

with it so that we can really get into how the animation works and how we can work with

it. So let's get started. Now, I'm only going to be covering some of the basic properties

here. But there are many more out there. There are so many different ways that you can work

with these animations and change their properties or how they work. Well, what we're going to

do is go ahead and use some of these basic functions, so we can get this up and running

and working. So let's get started. The first one, I want to talk about an animation duration.

And this is probably the best or well not really the best, but it's the most important

one, because pretty much what happens is the animation duration is going to actually allow

your animation to run. So what I'm going to do here is first of all set up this function

here. And pretty much the default value of this property here it's actually zero. And

that's why in the last video, this wasn't running at all, we added the animation, but

because the default value is zero, pretty much the animation style starts and finishes

at the exact same time. Well, not really. But we can't see it at all the time is zero.

So we're going to do here is specify a second value here. So I'm going to go ahead and say

two seconds, which is quite fast. So I'm actually going to go ahead with four seconds. Now if

we refresh the page, you can see that that animation does play. And you can see it kind

of works like that, it goes from red to yellow to black. So that's the first thing about

the animation that you'll notice it goes, it stops, and then it finishes. And we're

going to be using some of the other properties to actually change how this work and maybe,

you know, repeat it over and over again and do all sorts of things with them. So the next

property I'm going to be covering is the sort of style of how the property works. So we've

already covered the name of the property, which is obviously applying the property or

the animation itself. We've also talked about the duration. But now we're going to be talking

about the style. So pretty much the style is probably the hardest property to learn

about kind of how, you know, we looked at transition properties or styles. And those

were the hardest, this is pretty much the exact same. So pretty much what happens here

is that this style is going to define the speeds, or how the animation works out. So

all we have to do is go ahead and type out animation. Animation, dash, sorry, timing

function. There we go. And now from here, we can apply the different speeds or

styles.

So I'm going to be talking about the main ones. And you can probably recognize these

from the transitions video. So we have ease, which is the normal one you can see there.

And then we also have a few more. So let's go ahead and check it out. We have linear,

of course, which is just straight, there's no speed changes, or weird anything like that,

you can see just go straight down. So you can see a very clear difference there, especially

here, unlike the transition. Whereas with ease, it would stop in the middle and then

speed back up. Whereas linear, it just goes straight. Of course, we also have ease in

and ease out and ease in out just like we covered before. So there we go, I'm going

to leave it at linear, because I think it looks the best. There we go. And you can see

we've set that speed curve there. So now let's talk about the next property, which is going

to be the animation delay. So the delay is a little bit of a weird case here, because

you can use positive values. But you can also use negative values, which is a little bit

confusing, but let's talk about it here. So I'm going to go ahead and add an animation

delay, just like that. And here, I'm going to specify a delay time. So for example, two

seconds. Now, of course, this works perfectly. we refresh waits two seconds, and then the

animation plays just like you would normally. But what if we added a negative to here, what

do you think would happen? If we refresh, you can see it's already at yellow. So what's

pretty much happening here is that it starts when the animation is zero, which is the default,

it starts right as the page loads. But if you go negative two, it's pretty much acting

as if you're already two seconds into the animation. That's kind of how negative values

work here. Now, obviously, there's no real application for this unless you're looking

for something really, really niche that you need it. But this isn't really widespread

or used. very commonly, it's just a really cool thing to know about animation delays.

So the next thing we're going to cover is the iteration count. And I talked about this

a little bit when we started the duration. And it's pretty much going to say how many

times this thing is going to loop over. So we can use the property animation iteration

count. And here, what we're going to do is apply our the number of times we wanted to

iterate. So for example, if I wanted to, to iterate or loop over two times, I could refresh,

of course, it starts a little bit early, and it goes another time. And there we go after

that is finished, so it went over two times. Now there's also a really special value you

can use here, which is infinite. And then this means that this is just going to keep

going over and over pretty much forever until you terminate the page or close it or even

change something. But when this is set, it's gonna keep looping over and over again pretty

much forever. So there we go. Now let's go ahead and talk about the shorthand property.

And pretty much what we're gonna do here, whoops, actually, we need to cover one more

value before we use that shorthand. And that's going to be our animation direction. So this

is the final value just like you're seeing here before we started, but it's actually

pretty useful unlike something like the negative animation delay value here. Pretty much what

this is going to say is the starting and ending points of the animation. So for example, let's

go ahead and add that property their animation direction. And now we're going to talk about

the four main values for this function. Of course, the default value is going to be normal,

which is just like that. And that, of course, plays from 0% to 100%, just like normal. And

I'm actually going to set this iteration to two times and remove the delay. Just like

that, so that we can get the full picture here. So if we refresh the page, you can see

that it's just normal, it goes from start to finish. And then you have your opposite

way, which is reverse. So pretty much what happens here is it goes from 100% to 0%. And

the properties aren't flipped, they stay exactly the same. So if you look at this, it goes

back in time, all the way to its starting position. So the other two, which are a little

bit more complicated to understand, are alternate. So just like this, so alternate pretty much

means it's going to go forward and then go backward. So it kind of bounced back, you

can see there, so it goes from zero to 100. And then in the same animation, well not the

same. It goes from 100 to zero. And then of course, just like with our first two, you

have alternate reverse, which does still the alternation, but it starts at 100, instead

of at zero, so it's kind of going to start here and then go back to it starting and bounce

back to 100.

Let's look at that here. You can see it goes up, and then it bounces all the way back to

its starting position. So there we go. That's pretty much how this whole thing works.

And those are the four are actually here, it's five main main functions and or sorry,

properties. What we're going to have to do here is summarize all of them because there

is a lot to cover. And you're not going to add five animations every time, especially

when you have to use all of the different browser support tools and prefixes. And it

gets really complicated after some time. So what I'm going to do is use a very cool shorthand

that just summarizes everything for us. So we don't even have to use our animation name

here, we can just cover it all once in our animation shorthand, so I'm going to do it

here, animation. So the first, this takes, of course, five values, your first value is

going to be your animation name, which is red to black. Your next value is going to

be the duration, which is a pretty important one. So we're going to set it the same at

four seconds, your next value is going to be your timing function or your speed. So

we're going to set it linear here. And then next is going to be your delay. Now we removed

that there, but we do have to put that delay. So I'm just going to say zero. Next, I'm going

to put the iteration count, which is two. And finally the direction which is alternate.

Whoops, alternate reverse. Now you can see that does get a little bit long there. So

I'm going to leave both of these versions on in the project file for you to decide for

yourself. Now let's refresh the page, see what happens. Oh, whoops, forgot the pixels.

Sorry, forgot the second value there. Let's refresh. And now you can see that it goes

from the back to the start, just like we had here. So like I said that shorthand is a little

bit hectic to memorize and you know, learn all of the different values. But there is

always Google if you forget the order or anything like that. And what makes this really useful.

If you want to add any browser freebet for prefixes like this, you can easily do that.

And then just copy this over for the different prefixes. So you can go here, here, here and

put your different prefixes. So I have from Mozilla, we have from Microsoft, so Internet

Explorer. And then of course, we have our opera. So we have four different prefixes

here and five values for one element, you'd have to put 20 properties just to get this

all covered. Now, you can probably see the advantage of using something like this, with

that shorthand over all of the really clunky properties. Alright, so that's pretty much

it for animation properties, or the different types of animations or ways you can manipulate

these animations. Of course, there is once you learn this, there's a lot of power that

can go into it. You can create all sorts of different animations, grow styles, and then

you can really manipulate them just by using these five values. We didn't even we didn't

even have to touch the animation to make it look completely different. So that's pretty

much it. Now we've covered a lot of features in CSS. And in the next section, we're actually

going to be going through and styling the website from scratch as a challenge. So you're

going to have a challenge to style a website. And then the solution is the video I'm going

to show you and that's where you're really going to get challenged to use all of the

skills you've learned in this section. Maybe touch up on some things that you may not have

been comfortable with, or you may have been fuzzy on. Alright, let's move on.

So now that you've learned pretty much all of the basic skills, or some of the more advanced

skills as well, in CSS, it's time to move on and start working on a challenge. So pretty

much in this challenge, you are given an unstyled website, which by the way, a zip, or a packaged

file of all of the files that you can use to get started is available for download on

this Udemy lecture. So what you can do is just go ahead and download that, and it's

going to prompt you and bring up this page. So you can see, we have a lot of stuff See

here, and I'm actually going to zoom out, just to get a better view of it. But there's

a lot of raw images, raw HTML, there's no, there's no styling on it at all. And what

your job is to do is to follow these objectives here, given here, just follow them and obviously,

don't follow them to the core to the bone, you can, you know, make any attendance upended,

you know, amendment sorry, to, to these lists of tasks as you like, but pretty much, you're

just gonna have to style this website from scratch using the techniques that we've learned

coloring the layout grid Flexbox animations, just completely revamped this website. Now

one note is I do have my own solution video posted in on the next lecture. But it is quite

long, so you don't have to watch that. But if you want to see how I did it, maybe you

want to, you know, review everything or get a little view on some of the topics, you can

always watch that but don't feel forced or don't feel like you have to watch that lecture.

If you don't want to watch it, all you have to do is click on it the bulleted list icon

and just tick off the lecture, just make sure that if you want it to mark as complete, just

tick off the lecture make sure that it is finished. And then you don't have to watch

it. But other than that, we have this website that is just completely unstyled. And we have

to go and style it. Now just to show you this is what our website here looks like I'm going

to actually refresh the page. So you can see that nice fade in, we have a sidebar, which

we styled and created borders for. And we also have a nice image grid. So you can see

there that is responsive. So if I go and actually resize the window, you can see there that

it is responsive, we have a little bit of image changing there. And it is just overall

a responsive website. So this is how it looks. And there you go, you can see we've changed

the backgrounds, we've imported our own custom fonts. And we use Flexbox and grid to set

up this website along with animations, you can see a nice transition in color there.

So we're going to be doing all of this in the solution video. Again, you don't have

to watch it, you can either copy what it looks like on this page. Or instead, you can just

go and do whatever you want. Pretty much just take the content I give you and style it however

way. And I would encourage you to either go on the video lab website, or the q&a section

of this course and post what you've got, you know, show off your skills and show off what

you can create out of this website, it's really encouraged to you know, share it with the

community, and everyone can learn from each other and the skills. So don't feel limited

by anything you've learned in this course, if you want to do something very specific

that you haven't learned or you forgot how to do just for you feel free to use Google,

this isn't a test, it's more of a fun activity to see how far you've gotten in CSS. So that's

just one thing to keep in mind. Alright, I will see you in the solution video. So in

this video, we're going to get started and start finishing up this website, we're going

to, you know, do all of the skills and use everything we've learned over the course to

get this all set up and running. Alright, let's get started. So the first thing I want

to do is just flip the page over here with my HTML. And then we're going to get started

straight away. So before we start anything, I think we need to link a CSS stylesheet,

I'm actually just going to go ahead and close off our previous site. Because what's happening

here is we have our actual site set up. But we need to start working on our CSS through

an external stylesheet as we've been doing for the last well for most of this course.

So we're going to get started with that. We're going to use Ctrl or Command n to create a

new file. And then I'm going to save it in my CSS folder here. And I'm going to call

it style dot CSS. All right, there we go. So the next thing I want to do is start laying

out what we need for the website. And what I like to do before I start is just kind of

get myself in the right mind frame by setting out the kind of phones I want to use, the

different colors, everything like that. So what I'm going to do is just create a comment

Up here using this notation. I've used it a couple times throughout the course. And

what we're going to do is in here, we're going to type out all of the stuff we need. So I'm

going to say primary font. Whoops. So we have our primary font, here, we have our secondary

font.

And now we have our different colors. So what I like to do for my colors is have my RGB

code, do whatever here, and then you have the name of the color. So this would be for

example, black, pretty much. So we're going to do that in just a second. But first of

all, let's just go and find the fonts that we want to use. We're not going to import

them yet. But we just want to look and see what kind of fonts we need. So what I'm going

to do is just choose two here, pretty randomly, again, usually most websites will use at maximum

three fonts, but you should use or maybe two fonts, one for headers, and one for normal

text. So I'm going to go ahead and use later, we used it previously to pretty nice font.

And we're also going to go ahead and for our headers, we're going to use Roboto condensed,

so we have normal Roboto here, but we're going to use the condensed version. So for the primary

font, it's going to be later. And for our secondary, which is for pretty much headers

and subtitles, things like that, it's going to be Roboto condensed. Alright, there we

go. Let's go ahead and check out the website. And the color scheme is blue, and orange.

So if you made your website using a different color scheme, don't worry about it, it doesn't

really matter. But what we're going to do is go ahead and try and find some blues and

oranges. So I'm going to find for each color, a main color, so pretty dark, bold color,

and then one that's a little bit lighter and easier on the eyes. So let's start off with

blue here, I'm going to go with quite a dark kind of blue something around here. And I'm

going to copy that in. And I'm going to say dark blue, although it's not really dark,

dark blue. But I'm going to say that and paste in the code. Now let's go with a lighter blue.

Now we can always use RGBA color codes. But again, doing this allows us more freedom in

the long run when we start working with everything. So let's go ahead and just copy that. And

this is going to be our light blue. Now let's move on to orange. So again, these are very

opposing colors. That's why I chose them. So we're going to go again with quite a striking,

you know, very bold orange. So something like this would be good. So I'm just going to say

the bold orange. And again, it doesn't really matter what you give these, your names, as

long as you kind of understand them, you can name them whatever you want. And then we're

going to go with a lighter orange. So something around here. Now what I like to do, if you're

trying to create a lighter color, is just look for something on the this side of the

spectrum closer towards the higher values of the RGB. So if it's low, it's most likely

going to be dark, you can see that in effect here. So I'm going to go ahead and say in

light orange, is just like that. Alright, so we've set up our color schemes now. So

we have everything written down and ready to go. But next thing we need to do is actually

link the stylesheet because we haven't linked it yet. So what I'm going to do in my head

here is create a link tag, hit tab. And now we're going to reference it just like before,

we need to go back one directory, we use dot dot. Now we're up here in our challenge directory.

So previously, we were here. Now we'll jump back up to challenge. Now we need to jump

back forward one into the CSS directory. And then from there, we need to reference the

file, which is style dot CSS.

Just like that, refresh the page. And of course, nothing's gonna visibly change because we

haven't written anything down yet. But that's a pretty good first task. So again, none of

these have to be in order, as I said in the last video, so we're just going to go ahead

and fix up these images because they are quite big. So that's what I'm going to do. First,

I'm going to go ahead and reference all the images for now. Now we can go and change the

classes and do specificity later. But for now, I'm just going to specify them and group

them all at once. So I'm going to set their width to 400 pixels, and their height 200

pixels. Now, obviously, I've kind of created a, a, I really don't like absolute values.

But for something like this, it isn't, it's kind of necessary. And we can work with the

relative newness or the responsiveness of these images later. So let's go ahead and

refresh see how it looks. So now we know for sure that our images are working fine. And

of course, you can see how the absolute values are kind of stretching this out. They're not

kept in proportion. But for now we don't need to worry about that. So there we go. We've

resized our images, and now we can see everything a lot more clearly. So we have our images

set up. The next thing I want to do is actually set up our page. To have two sections, we

want to have our content section. And we want to have our sidebar. So we have our sidebar

section, I'm actually going to create a divider there, our sidebar section and our main section.

So that's what we're going to do. So I'm sorry, our content section. So we have a main div

here, which clot groups everything together. So in my eyes, the best way to do this would

be using a grid. So what I'm going to do is select the class main. Although now that I'm

looking at it, we could probably just use an ID instead. So I'm going to go ahead and

change the ID to main, remember, there's only one main on the whole page. So it's not like

we need to use a class. And from here, we'll get started. So the first thing I want to

do is set the display type to grid. Right. So this is going to obviously set up a grid.

Now, we won't be able to see anything here pretty obviously. But now we're going to start

working with it. So pretty much what I have vision for the change is we have our content

section, which is taking up the majority of the page, and then we have our posts section.

So our post section is going to be much smaller, it's going to be while a sidebar, that's kind

of the definition of it. And it's going to take up a small portion on this side of the

page. So that's what I'm going to do here, I'm going to create two columns. So one of

the grid template columns, just like that, and I'm going to set them to 70% and 30%.

Now, instead of using auto auto, which would just change them to the exact same height,

we're now giving the first column a preference. So it's going to be a little bit bigger than

the second one, we refresh. And it's working great. Now, what I recommend that you do while

you're doing this is always try and go and see how your page looks in different viewpoints.

So if you go ahead and you click on Inspect anywhere on your page, you can actually go

and use your Chrome responsiveness kind of thing here to check out how your page would

look on different devices. So I would recommend using this over resizing the browser, because

resizing, the browser actually shows some inaccuracy. So you can really see how it would

look like on your phone, or you know, maybe an iPad or a tablet or something like that

without having to actually go on those tablets. So there we go. Now what I'm going to do is

go ahead and manipulate this a little bit. So I'm going to go ahead and create a grid

gap. to separate the two, I'm going to say it's about 50 pixels. There we go. And, yeah,

let's you can see now that that gap has been created. And if we go ahead and inspect the

page, you can see let me go to a phone, actually, you can see that there's a gap there a clear

gap. And at least for now, it's not very evident. But once we start, you know, creating borders

and things like that, we can really see this in a much better way. So there we go. That's

great and working fine. So now that we've set up the set that up, I want to do something

that we actually should have done at the beginning, which is add classes here because you can

see that although I've added the main classes myself, we still want to be able to, you know,

group subtitles together or paragraph text, so that once we start doing all of the important

stuff, like importing images, and all sorts of things like that, we want to be able to

group all of them or style all of them together at the same time. So that's what I'm going

to do here. First thing I want to do is add a class of subtitle to all of the subtitles,

just pretty obvious. Now again, some of them are h1, some of them are h tos and all sorts

of things like that. So I'm going to go class

is subtitle. And here as well, class is subtitle. Now, we kind of want all of the subtitles

to be relatively the same size. But you can see here that there's actually a mini topic

which we want to be smaller. So what I'm going to do is change the class and change this

actually to topic,

subtitle.

So now we can specify this in a more specific way. So instead of having to use the subtitle

class, we can actually go and talk about this in a different way. So there we go. Now let's

go ahead and start looking at some of the other parts of the site. Oh, we actually still

have more, you can see we have a lot of stuff here. So what I'm going to do is actually

add classes to each of these posts, because they are going to be a little bit different

considering the grid situation that we have here. So I have six posts. So I'm going to

set their class to post title,

like that.

And what I want to do is also set some of the other stuff. So here, for example, our

paragraphs, or kind of our descriptions and our posts, I want to also create a class for

those. So I'm going to say class, I'm going to say post text, or post description, it

doesn't really matter, whichever one you are comfortable with. And we're going to leave

these blank for now. And actually also go ahead and add a class to these dips. Because

remember, the more we can specify The better our page is going to look. Now obviously,

we're just doing baseline kind of stuff here. If we ever need to specify something in the

future, you just go and add a class, a class to that. So there we go, we have everything

set up. Now we've added our classes. So the next thing I want to do is go ahead and import

my different fonts. So firstly, let's go ahead and check out our little documentation mini

documentation there. And we're going to start selecting some of these fonts. So first thing

I want to do is download or import in Leto. So I'm going to go and select Leto. And here,

I'm going to go ahead and just copy that link. Or actually, before that, let's go ahead and

add some more families so that we can import it all at the same time. So we have our Roboto

condensed, there we go. add that. Now what we're going to do is go ahead and whoops,

didn't mean to do that. Now, we're going to go ahead and select some other fonts here

or sorry, weights here. So I'm going to select bold 704. Later, I'm going to also select

bold 700. And we're also going to go with a light. So the load time is moderate, it's

not going to, you know be very easy on the site. But it is worth it. Because these are

all the fonts that we need. And without them, the site would look completely different.

So let's go ahead and import those. I'm going to go into my index and insert the link right

below here. So I'm going to do that oh, because actually, we need to put the stylesheet below

the below the fonts, remember, because we need the fonts to load in first. So there

we go, we have that important. Now what we're going to do is just go ahead and copy these

onto our onto here, just for reference. Now we are going to, you know, put these and specify

these different selectors, obviously, but for now, I just want to leave them in there.

So it just in case we forget some of these fallbacks or anything like that, we're just

going to keep that there. For reference, I'm going to actually put that in our little notepad

there. So now let's go ahead and refresh the page. And obviously, we won't see much of

a change since we just add added classes. But there we go, we have our kind of hierarchy

set up to start working with our website. So let's go ahead and start using these fonts.

Now, what I'm going to do first is select everything that has a class of

subtitle, right here.

And what I'm going to do is paste in this font family, or actually, before we do that,

why don't we use the CSS specificity chart, we're going to start by selecting everything

that has the class of key, so all paragraphs, so I'm going to do the lips, I'm going to

select all classes, all paragraph elements. And I'm going to give them that later font

family. So what this is going to do is style everything. And if we don't like that, what

we can do instead is just go and change the font family. So that for example, if maybe

we want to have a different font, maybe it's a subtitle or some special text, we can just

easily specify it without having to go through and you know, specify each one every single

time. So it's a much easier way. So now that we are starting to do this, we can actually

start to see flaws here. So for example, we also want the list items to be styled. So

I'm going to do select all allies,

allies.

And now I'm going to paste in that same font family, and refresh. And you can see that

that is now working we have everything set up here. And you can see there's also a little

bit of text here. So you can kind of start to notice bugs in you know, maybe HTML that

you've written or anything like that, you can easily start to notice bugs in it, once

you start styling it. So this is most likely an indentation error. Maybe this text ended

up outside the paragraph tag, so I'm going to look for it. It is next to our l eyes.

And you can see it is right there. So what I'm going to do is just erase that we started

out, we start up our p tag. And I'm going to create a new one under it just to make

things a little cleaner. Now I refresh and that is working. This is most likely an error

with indentation, things like

that.

So now we have our paragraph text, everything like that set up. What I'm going to do is

now work on our headers. So I'm going to start off with our h ones. And I'm going to give

it that header font family. So I'm going to Ctrl x which is cut or Command x if you're

on Mac. And I'm going to paste that in refresh. And you can see that that is worked on our

heading here. Now we're going to do it on all of our h twos, which remember if you've

kind of looked at the code, our our subtitles, do that and now those have also been styled.

So just by doing that our page has been completely transformed. We've you know, imported this

custom font and laid out our site in a way that just makes it look a lot better. So that

is working fine. So There we go, we have this set up, and it is working fine. Now what I

want to do is go ahead and start working on some of other layout features on this page.

Once we get into that, we can start tackling coloring and formatting and all the other

things after we've used the fonts. So let's get started. What I want to do first is working

on our little image grid here. So we don't actually have a proper grid setup, which is

what I'm looking to fix in this in this part of the video. So I'm going to go ahead and

do that. Now. I'm going to first of all, select it. So we're going to look for that class

that we use, which is image grid. So we're going to go into here and select that using

dot image dash grid. And there are many different ways to create a grid these days, but the

way I'm going to use to make it a lot easier is just use Flexbox. So we've already used

grid once Flexbox would be a great way to solve this. So let's go ahead and refresh

the page. And now you can see that we have created a little Flexbox here. So we have

that set up. And obviously you can see that it is pretty badly laid out right after creating

the Flexbox. So we're going to tackle that problem now. Now, there are actually only

two commands that we need to fix this, we can go and set up our flex grow and shrink

to make it just how we like it. But there is an easy workaround to it, the first thing

we want to do is turn wrapping on. So we're going to say flex wrap, wrap. And this is

just going to move everything on to a new line, which is pretty easy. You can see there

that that is working fine now. And when I resize the page or turn it into full width,

you can see that that creates a nice three by three image grid. But even if we go into

our inspector or change the responsiveness, it also resizes accordingly. The last thing

I want to do is change it so that it's not kind of you know, placed like this, I want

to kind of make it in the center of the page. So what I'm going to do is just use the simple

justify content property and set that to center. Now we refresh, and you can see that this

has been realigned to the center of the page. And remember, we do have a sidebar here, which

is kind of, you know, giving us the illusion that it's not taking up the space, it actually

should be. But it is centered. So it's centered to that 80% of the page, you do need to keep

that in mind when you're working with this. Once you start working with coloring, you'll

really start to see the page come together. So the last thing I want to do is kind of

create a gap between some of these images because they don't look that good when they're

just slammed together, you want to create some kind of contrast between colors. So we're

going to use a nice special selector. To do this, we're going to select every single image

inside of the grid instead of having to place new classes on them. So what I'm going to

do is go ahead and select dot image grid, and then this symbol, which is the greater

than symbol, and then image. So this is every image inside of our image grid, open that

up. And we're just going to give it a margin of 10 pixels very easy, we don't need to work

with anything else, refresh the page, and that margin has been added. So you can see

how that looks a lot better now that we've done it. And it's still responsive when we

you know, change the display, maybe to iPad or anything like that you can see it is still

responsive, it's not changing it at, it's not changing it at all. So that's really good.

So there we go, I'm going to set that up. So now that we have our image grid set up,

the last thing I want to work with is this right here. So it says in our objective list,

we want to move this image onto the side. So there you could use Flexbox, or grid, this

is a pretty simple scenario. So what I'm going to do, instead of doing that is just use a

simple float. So I'm going to give this an ID since we only need to do this as a one

time thing. So I'm going to go ahead and look for that image, give it an ID of image, one,

because it is the first image on the page. You can name this anything you want, depending

on the purpose of the

element. But I'm going to give it that class there. So I'm going to set it as image one,

just like this. So what I'm going to do is go ahead and give that a float of right, just

like that. And whoops, forgot the id selector there, we refresh the page. And now that is

working fine. Now obviously, you can see there is a little bit of an issue with the spacing.

So we're going to use a quick fix for this and give it a margin of about 15 pixels. So

this is going to kind of push everything to the side. And obviously you can see there

are still issues with positioning and everything. But that's kind of the you know, issue with

using floats and things like that you can't really control where the spacing is going

to go. So what I'm going to do to fix this is just increase the height a little bit.

So instead of setting a height of 200 pixels, I'm going to go ahead and set it to maybe

250. Now we're going to refresh and it's almost there. We're going to actually use 300 pixels.

Now, of course, in a normal scenario, you wouldn't have to use this, you know, maybe

you would want to use a grid or Flexbox, like I specified here. But like I said, you can

pretty much use whatever creative methods you deem necessary. And this is much easier

because again, there are only three items and using something like a grid, or a Flexbox

wouldn't really be practical in this situation. So there we go, we have this, this and this

laid out just perfectly. Now we're gonna go ahead and tackle some of the other parts of

this site. So we have our little image grid here, we have things like this, let's go ahead

and check out our item list here. So we do have animations, which we're going to leave

for last, we have our image grid. And there we go. So our next task is going to be creating

those borders. So we did create our post here. So remember, we have our post class. So let's

go ahead and select that. I'm going to go ahead and say dot post. So first thing I'm

going to do is go ahead and set a border. So this is going to be our first use of the

color scheme that we created. So I'm going to say to pixels, because monnit, that big,

solid.

And now we're going to go ahead and copy a color from up here. So I'm going to go ahead

and use a dark blue. Just like that, copy it in just like an RGB color code.

We've done it many times before, refresh, and we have our borders. Now, obviously, there

are some issues with margining. So what I'm going to do is give each of those a margin

of about 10 pixels, just like our images, refresh the page, and it's working. So there

we go, we have our posts, and they are separated. Now, pretty much we do have some internal

padding issues, which is normal, we'll go ahead and style those in just a second. But

first of all, if you can start to see our sidebar working here, we have that little

grid gap. And we have our the start of our second column there. So it's working great.

Let's go ahead and start working with our margins here. So first thing I'm going to

select is our post title. So I'm going to go ahead and say post title. Now you can do

this in two ways. Since there's only one h2 and every post, you could go and say it like

this. Or you can use this class that we created. So we're going to actually just go ahead and

use that. So what I'm going to say is give it a margin on the left of maybe five pixels.

And now what that's going to do is push that inside. And we're going to have to do the

same for our paragraph text. So I'm going to go ahead and add our post text class here,

I must have forgotten it. So we're going to go on dot post text and give that the same

margin. There we go. And now we have everything pushed in. So there are still margining issues

there. You can see that with some of these here. So I'm actually going to go ahead and

also give our text a right margin. And again, this is all about experimentation. So go ahead,

and you know, play around with this and see what really works for you. And you can see

that now that's really fixed that up. And we have our posts sorted. So there we go,

we have everything working. Now let's go ahead and try and work with more of our color scheme.

Because right now, it's pretty blank here. So what I'm going to do is go ahead and just,

you know, use this color scheme in a better way. So firstly, I'm going to give the page

a background. So what I'm going to do is give the whole page so I'm going to use the body

selector. I'm actually going to do that at the top. So I'm going to use the body selector

body. And I'm going to give it a color, or sorry, background, a background and I'm going

to give it our light blue color, just like that. Oh, let's copy the name as well, you

just want to copy the color code, remember. And there we go. Our whole page now has a

light blue color. Now, I'm actually going to go ahead and use an RGBA because this isn't

light enough. So that's what I meant about flexibility at the beginning of the video,

you can go ahead and change the colors based on your main four here. So I'm going to give

this about point five, just make it a little bit lighter on the eyes. You can see that

looks a lot better now. So now that we've done that, I'm actually considering changing

the border color here. So what I'm going to do is go ahead and find it. And instead of

using our blue, I'm going to use a bold orange so it's going to be quite striking on the

eyes there. So I'm going to go ahead and do that. And there we go. We have our dark orange

there. Now what I'm going to do is specify this and select our sidebar class. So I'm

going to go ahead and do that right below all of these. So I'm going to go dot sidebar.

And I'm going to give it a background of a light orange. So it's going to create a nice,

a nice contrast, in effect tabin. And again, I copied the name. So I'm going to go ahead

and give it that background that we need, which is our light orange. Now I refresh the

page. And oh, something must Oh is selected subtitle went on to the wrong one. So I'm

going to paste that in here. And there we go. Now refresh the page, and we have that

orange background color there. So we could you know, do some color changes and mess around

with these. But for now, I think this is fine. We don't really need to change these in any

way. For now. So we have our orange background, we've kind of incorporated this color scheme

very well. So we're going to do a little checkup of our sections here. So we've laid out our

content, we've created our margins, or spacing, things like that, we pretty much have everything

set up here, except for our links and our hovers and our transitions.

So this is going to be the final part of the video, we're going to go we're going to set

up our, you know, maybe our changes our resizes, things like that, and then we're going to

finish off the solution, it is getting quite long. And I want to keep this short. So let's

get started. So first thing I'm going to do is work with our links. Now, we haven't actually

added anything to the links. So that's what I'm going to do first of all, now I kind of

left it up to you what you want to add to the links, but what I'm going to do is just

go and check out each of these. So I'm going to go click on all of them. And I'm just going

Oh, whoops, I went into the href. And here, I'm just going to add lorem ipsum and some

dummy text, like that. So now we're going to use because I don't really feel like going

and adding a whole bunch of classes and selectors, I'm going to use our special advanced selector

there. So inside of our sidebar here, we're actually inside of our post, sorry, we're

going to go post and then our a or our anchor tag. Now we're going to go ahead and work

with these. So I'm going to refresh the page, make sure they're there. So first thing we

need to do is give it that left right margin that we need, remember, because to space it

out a little bit, then what I'm going to do is say text decoration none. So pretty much

what this is going to do. Oh whoops, didn't need to add that text, what I'm going to do

is give it a text decoration property of none. So pretty much what this is going to do is

change this. So that pretty much instead of having this underline, it's just going to

be blank text. So this looks a lot cleaner, especially when we go ahead and add our um,

our fonts, so I'm going to do that next. So remember, we have it added to our paragraphs

or allies. And I think it only makes sense if we added to our anchor tags, as well. So

I'm going to go ahead and add that whoops. So I'm going to add that there. And now we

have that font, so it's looking great again. So now let's go ahead and start adding some

pseudo selectors. So we have our basic colors. Now all of these are already clicked. But

pretty much we have our post color. So I'm going to say the post color is going to be

our that dark blue that we had. So this is before it's clicked remember. So dark blue.

Copy that in and set this as the main color. And now we're going to combine our special

selectors with a pseudo selector. Now, we haven't actually seen this before, but it's

pretty easy to do, you just add it onto the element. And the only thing that we're going

to change remember is going to be the color of the text there. So I'm going to go and

find our light blue. And I'm going to paste that in. So now when we hover over it, it

should change the color to a light blue. That's working great. Now let's add our transition.

So I'm going to use the transition property. Now I'm not going to use any of the prefixes.

But if you're using an older browser, you want to support it or you want browser support,

you should always use this. So now I'm going to specify specify what I want in the transition.

So I'm only going to use the basic properties. So I'm going to say maybe point five seconds,

hover out sorry, point five seconds color. And yeah, that's pretty much it. So let's

go ahead and fresh. Now we hover over it and it takes 0.5 seconds to change color. Now

we could of course go and you know add our special styles for our transition. But I'm

only going to use the two basic ones here, which is the time and the property. So we've

changed that. Now we have our link color change. The last thing we need, or the last two things

is the image grow. And the page animation sequence, which is going to be our sidebar,

and our, our main section here kind of fading in if if it makes sense. So that's what we're

going to do here. First thing I'm going to do is go and set the image grow. So what I'm

going to do is go somewhere, where's my image, I'm selecting my images. If there's none here,

I can just go and change that. Now, what I'm going to do is first create our image hover,

just like that. And I Oh, yeah, I forgot I put that up at the top here. So I'm going

to create my image hover. And here, I'm going to put in what I need. So I want to, you know,

increase the height. So I'm going to say, the height is going to be 250 pixels. And

the width is going to be 500 pixels, because we want that two to one aspect ratio. So now

we refresh hover over an image becomes bigger, we hover over an image becomes bigger. So

now what we want to do is add that transition property. So we're going to go again, point

five seconds,

and we're going to add two properties. So we're going to go height and width separated

by a comma, refresh. And of course, it seems to be a little problem there. Whoops, I forgot

to

add that

misspelling here. Now we do that and it changed it. Now you can see that there is a little

bit of a weird kind of transition effect there. So it increases the width fully, and then

it increases the height. So what I'm going to do to fix that is just use the all property.

So what this is going to do is transition the height and the width together. When I

refresh, you can see that that styles or moves everything together, because pretty much what's

happening is it's overriding our our width property, it's just setting it instantly,

and then it's changing the height, which we don't want. So I'm going to set that there,

you can see that's working great. So what we're going to do now is go ahead and create

that fade in effect that we needed for our content and sidebar. So first thing I want

to do is go ahead and select both of them. So I'm going to select our content. And I'm

going to select our sidebar. And now what I'm going to do is start creating our animation.

So the first thing we need to do is create keyframes. So I'm going to go add keyframes,

and then the name of our animation, let's just call it fade in for now. So the next

thing I need to do is select my, the different time stamps I want. So I'm going to use the

from and two keywords to do this from and to. Now we're going to use a property that

we haven't actually learned before. And hopefully you Google this and try to find it when doing

the challenge. And it's actually called opacity. So this allows us to go from opacity of zero,

no percents, no pixels, just straight number to opacity one, just like our RGB a color

code, now we're going to do is just refresh the page, obviously, we're not going to see

anything, just make sure that everything is still running the same. So I'm going to go

ahead and now add our animations to both of these sections or both of these block here.

Sorry, blocks. So I'm going to go ahead and say the animation name is going to be fade

in. We're also going to set the duration. Remember, we always need a duration to two

seconds, refresh the page. Hopefully this works. And you can see that it now fades in.

So there we go, we have our page set up and working, we refresh here, we can hover over

images and make them look better. And it just looks really cool over also, you know, we

pretty much set up this page from scratch. And now we have it all working, we have our

fonts, and everything seems to be looking great. Alright, let's move on. So you've reached

the end of the course now. So before we move on, I want to congratulate you it very few

people who ended up starting the course make it to the end. And it does take a lot of discipline

to learn everything and stick to it throughout the course. So I just like to say well done.

And it's great that you're here with me. But now that you've learned CSS what what is there

to do next? I mean, should I just stop and use my skills? Or are there other things that

I need to learn. So I'm going to give you this helpful guide to maybe get you off your

feet and start learning new skills progressing your careers. So I'm going to talk about it.

Now before we move on. Let's just take a second and recap what position we're in right now.

So by now you should have pretty good proficiency in both html5 and CSS three, which are just

the latest versions of the two. So you should know all of the concepts and inner workings

behind CSS and how it works so you can really see how a page is fit together using everything

so box models Flexbox responsive this things like that. By now, you should have the skills

to style your website in pretty much any way that you want. If you want to make it, you

know, a very rustic or vintage feel. Or if you want to lay it out in a nice modern design,

you should be able to layout your website with as much creative freedom as you want.

But here are some skills that you should learn, learn next. So there are three main front

end technologies that are called the Big Three. So you've already covered two of them, which

are HTML and CSS. The third one, and arguably the most important is JavaScript. Now, JavaScript

is the programming language, it's kind of what makes a website come to life, it gives

it that interactive feel. And you can also change things in a much easier way. And without

JavaScript, you can't really grab the essence of web development as a whole, you need it

to be able to bring your website together and really take it to the next level. So that's

one skill that you should definitely learn next, if you're planning on continuing. Now,

once you've learned JavaScript,

then you have to go on and choose what kind of career path you want to go down. If you're

planning to go down a front end route, so you're only developing things that you know,

you're only changing the look and feel of the website, on the main mainframe, then you

should start learning some more advanced skills on either of the big three. So I've let I've

left some examples there. So there are lots of libraries, frameworks, that things people

have created. So you can go and research some of these. Some of them I would recommend for

CSS, or some of the pre processors, which are sass and less. So I would recommend you

go and check those out. You can also look at some JavaScript frameworks. So things like

react ESX, and also some other libraries. So bootstrap, Font Awesome, and semantic UI.

So again, don't take all of those, as you know, you're trying to wrack your brain and

keep all those in your memory. Just go and do some research on what where you want to

go and what kind of skills you should learn next, those who are looking to go into server

architecture. So more back end development, people who are looking to fix up the processing

website, saving users or, you know, delivering specified content should look into some back

end architecture and programming languages. So for example, Django would be one for web

development or server development for the web. And it is made or powered by Python,

you also have PHP and a JavaScript, which is JavaScript web server, which is called

node j, s. And then you have some others like Ruby and dotnet. So there are so many out

there, you can always go and research and you'll find tons of options. So there you

go. So that's pretty much it. We've covered everything on CSS, we've talked about grids,

Flexbox. And pretty much everything there is to know about the basic concepts behind

CSS, when you can start specializing and going into very specific details. And obviously,

it's ever expansive, you're never going to have to stop learning. So by the time you're

watching this, there could be an entirely new version of CSS out with a ton of new features.

So never stop learning and always keep, you know, taking up new skills and trying to learn

more about the skills that you already have. So that's one thing I would recommend to keep

in mind and just continue down this path and you will eventually end up as a web developer

that can really create things to his or her creative freedom. Alright, thanks for taking

the course.