CSS Tutorial – Zero to Hero (Complete Course)

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’regoing to cover every single concept or every major concept in CSS, and really build upour knowledge of it. So before we move on, I just wanted to give you some motivationon what you’re going to be doing in this course. So you can, you know, really get excited aboutthe course and start jump, you just jump straight into learning. So first of all, let’s lookat 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’velearned. So you can see that we’ve created multiple grids, colors, we’ve changed thiscompletely and transformed the website in every single way. We’ve also created thingslike 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 thatyou don’t rush through and forget anything. At the end of the course, there’s also a littlechallenge here, where you try to bring all your skills together and style a website fromscratch. Now there is a solution video, if you need it, maybe you just want to see anotheropinion on it. But pretty much you’re going to bring all the skills you learned in thiscourse together and create this nice website. It’s responsive, it’s got all sorts of layoutfeatures. And it also has animations, you can see just like that. So that’s some ofthe actual website stuff we’re going to be doing in the course. But why don’t we lookat some of the code that we’ve written. So I created this file from the start, I didn’thave 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 explainevery single part of it, so that at the end, you can just read this straightaway and understandwhat’s going on in an instant.There’s also the styling for our solution video or forthe solution to the challenge here. So you can see we’ve got a bunch of stuff here. Andlike 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 littlebit motivated and excited to go forward and start learning about CSS is a pretty excitingtopic.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’regoing to cover every single concept or every major concept in CSS, and really build upour knowledge of it.So before we move on, I just wanted to give you some motivationon what you’re going to be doing in this course. So you can, you know, really get excited aboutthe course and start jump, you just jump straight into learning. So first of all, let’s lookat 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’velearned.So you can see that we’ve created multiple grids, colors, we’ve changed thiscompletely and transformed the website in every single way. We’ve also created thingslike 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 thatyou don’t rush through and forget anything. At the end of the course, there’s also a littlechallenge here, where you try to bring all your skills together and style a website fromscratch. Now there is a solution video, if you need it, maybe you just want to see anotheropinion on it. But pretty much you’re going to bring all the skills you learned in thiscourse together and create this nice website. It’s responsive, it’s got all sorts of layoutfeatures.And it also has animations, you can see just like that. So that’s some ofthe actual website stuff we’re going to be doing in the course. But why don’t we lookat some of the code that we’ve written. So I created this file from the start, I didn’thave 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 explainevery single part of it, so that at the end, you can just read this straightaway and understandwhat’s going on in an instant. There’s also the styling for our solution video or forthe solution to the challenge here. So you can see we’ve got a bunch of stuff here.Andlike 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 littlebit motivated and excited to go forward and start learning about CSS is a pretty excitingtopic. 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 aquick introduction to the syllabus of the course. Now it is quite a long video. So ifyou don’t want to watch it, or if you don’t really want to know an in depth analysis onwhat the course is going to be covering, then you can go ahead and skip this video. AllI say is that please make sure that you read the prerequisites lecture that came beforethis. Now, there are some very important details in there and some skills that you need toknow to move on with this course. And if you don’t know them, you’re going to have a verydifficult time picking up some of the language.Now there’s only one real prerequisite, whichis HTML. But you can go ahead and read that. And just make sure that you have all the skillsnecessary. Alright, so let’s get started. And the first thing I want to talk about isthe section structure. So the section is just a it’s a bunch of lectures. So these are videolectures. 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 lookslike. So at the end of each section is a 10, a 10 question multiple choice quiz that coversall of the skills learned in that section. So it’s really encouraged to go and just tryit out and see if you know everything. And then that way you can diagnose yourself andsee maybe there’s some skills that you’re fuzzy on or you need to revisit. And on topof that, I really encourage everyone who is following along in the course, to not justwatch and be a passive consumer, you know, really go out and try and use your skillsbecause otherwise you’re not going to learn it.Otherwise, you’re just gonna end up havingthe 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 beable to do it. So I encourage you to go off and follow the lectures and try and reallyuse the skills that you learn in your own time and that will make sure that you havethe highest retention possible. So let’s get straight into it. The first section, whichis the section we’re in right now is the introductory section.So setting up the course and we alsoinstall all the programs and software necessary to set up our working environment. So youcan follow along it’s not necessary but it is highly recommended. Because if you’re usingmaybe Something else that you’re not experienced with, you may have a hard time getting usedto the program and things like that. So I recommend you follow along and set up theenvironment just like I do. So the second question of sorry, the second section is theintroduction to CSS. Now, unlike the first section, this is going to be looking at introducingthe actual CSS language, we’re going to be looking at some theory behind it, where it’sused and what kind of a difference it makes, we’re also going to be looking at creatingand linking our own CSS document to our page. So the third section is going to be lookingat 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 ballkind of effect here, just trying to just skim over everything. So here we’re going to learnabout a very important concept, which are selectors and properties, and how they reallyplay into CSS, we’re also going to be learning about the different types of selectors andwhere to use each one, depending on the situation. So you’re going to learn that as well. nextsection 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 learningabout different color types, how kind of a little bit of how colors are set up on thecomputer.So things like RGB or other color codes, and then we’re going to use them andapply them using CSS to backgrounds and text and all sorts of other things. The next sectionis going to be looking at mainly at text. So we’re going to be looking at trying tochange 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 youcan do in the section. And we’re going to cover all of them then. So the next sectionis 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 talkabout those when we get to it, then we’re going to be applying them to actually changethe style or the layout of our page. So we’re going to be moving items around, we’re goingto resize them and do all sorts of things with them once we get to that point.The nextsection we’re going to look at is called Flexbox. Now I’m sure you’ve heard of this if you’velooked into any web development, but pretty much it’s an alternate way to mess aroundwith 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. Soit’s a pretty important concept there. So we’re going to focus on the theory behindFlexbox. First, talking about how it works, how it’s set up. And then we’re also goingto be applying it to real life talking about, you know, where it can be used some of thebenefits, and then actually using it in our own projects by creating our own Flexbox andmessing around with it. So we’re going to do that as well. So the next section is prettysimilar to Section seven, it’s going to be looking at a another alternative to usingnormal 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 comprehensiveoverview of kind of how grid works, we’re also going to be going over some of the similaritiesand differences kind of comparing it to Flexbox. And then we’re going to talk about, you knowwhich one you should use in each individual situation. So the next section is probablyone of my favorites because it really puts all of the older kind of websites from thenew sites and separates them the modern sites from the old sites, and we’re going to belooking at animations and transitions. So first, we’re going to look at transitionsand how to use pseudo selectors. Again, don’t worry about our means to create these nicesmooth transitions. And then we’re also going to be learning how to manipulate them. Sokind of change how a transition looks, we’re also going to learn how to create a flightand manipulate our own animation. So we create these animations from scratch using CSS. Andthen we can kind of change them and change how they look based on what we want.So thelast section is a really interesting section, which kind of summarizes everything and testyour skills. So it starts with a 30 question final exam, which is a bunch of questionsfrom every single section or topic that we’ve covered. And it is it is a final exam. Sothere is like a passing grade and everything like that. But again, if you fail, there’sno real consequences to it.It’s just kind of a diagnostic tool to test where you arein your CSS knowledge. And after that, it’s followed by a really nice challenge, whichcan help you know, really see where you’re at, not from a theoretical standpoint, butfrom an actual practical standpoint. So this challenge is going to be talked about laterand when to get to that point, but pretty much you’re going to Be styling a websitefrom scratch, you’re going to be given a blank HTML document or Well, it’s not blank, it’sgoing 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 aquick introduction to the syllabus of the course. Now it is quite a long video. So ifyou don’t want to watch it, or if you don’t really want to know an in depth analysis onwhat the course is going to be covering, then you can go ahead and skip this video.AllI say is that please make sure that you read the prerequisites lecture that came beforethis. Now, there are some very important details in there and some skills that you need toknow to move on with this course. And if you don’t know them, you’re going to have a verydifficult time picking up some of the language. Now there’s only one real prerequisite, whichis HTML. But you can go ahead and read that. And just make sure that you have all the skillsnecessary. Alright, so let’s get started. And the first thing I want to talk about isthe section structure.So the section is just a it’s a bunch of lectures. So these are videolectures. 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 lookslike. So at the end of each section is a 10, a 10 question multiple choice quiz that coversall of the skills learned in that section. So it’s really encouraged to go and just tryit out and see if you know everything. And then that way you can diagnose yourself andsee maybe there’s some skills that you’re fuzzy on or you need to revisit.And on topof that, I really encourage everyone who is following along in the course, to not justwatch and be a passive consumer, you know, really go out and try and use your skillsbecause otherwise you’re not going to learn it. Otherwise, you’re just gonna end up havingthe 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 beable to do it. So I encourage you to go off and follow the lectures and try and reallyuse the skills that you learn in your own time and that will make sure that you havethe highest retention possible. So let’s get straight into it. The first section, whichis the section we’re in right now is the introductory section. So setting up the course and we alsoinstall all the programs and software necessary to set up our working environment. So youcan follow along it’s not necessary but it is highly recommended.Because if you’re usingmaybe Something else that you’re not experienced with, you may have a hard time getting usedto the program and things like that. So I recommend you follow along and set up theenvironment just like I do. So the second question of sorry, the second section is theintroduction to CSS. Now, unlike the first section, this is going to be looking at introducingthe actual CSS language, we’re going to be looking at some theory behind it, where it’sused and what kind of a difference it makes, we’re also going to be looking at creatingand linking our own CSS document to our page.So the third section is going to be lookingat 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 ballkind of effect here, just trying to just skim over everything. So here we’re going to learnabout a very important concept, which are selectors and properties, and how they reallyplay into CSS, we’re also going to be learning about the different types of selectors andwhere to use each one, depending on the situation. So you’re going to learn that as well. nextsection 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 learningabout different color types, how kind of a little bit of how colors are set up on thecomputer. So things like RGB or other color codes, and then we’re going to use them andapply them using CSS to backgrounds and text and all sorts of other things. The next sectionis going to be looking at mainly at text. So we’re going to be looking at trying tochange 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 youcan do in the section. And we’re going to cover all of them then. So the next sectionis 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 talkabout those when we get to it, then we’re going to be applying them to actually changethe style or the layout of our page.So we’re going to be moving items around, we’re goingto resize them and do all sorts of things with them once we get to that point. The nextsection we’re going to look at is called Flexbox. Now I’m sure you’ve heard of this if you’velooked into any web development, but pretty much it’s an alternate way to mess aroundwith 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.Soit’s a pretty important concept there. So we’re going to focus on the theory behindFlexbox. First, talking about how it works, how it’s set up. And then we’re also goingto be applying it to real life talking about, you know, where it can be used some of thebenefits, and then actually using it in our own projects by creating our own Flexbox andmessing around with it. So we’re going to do that as well. So the next section is prettysimilar to Section seven, it’s going to be looking at a another alternative to usingnormal 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 comprehensiveoverview of kind of how grid works, we’re also going to be going over some of the similaritiesand differences kind of comparing it to Flexbox. And then we’re going to talk about, you knowwhich one you should use in each individual situation. So the next section is probablyone of my favorites because it really puts all of the older kind of websites from thenew sites and separates them the modern sites from the old sites, and we’re going to belooking at animations and transitions. So first, we’re going to look at transitionsand how to use pseudo selectors. Again, don’t worry about our means to create these nicesmooth transitions. And then we’re also going to be learning how to manipulate them. Sokind of change how a transition looks, we’re also going to learn how to create a flightand manipulate our own animation.So we create these animations from scratch using CSS. Andthen we can kind of change them and change how they look based on what we want. So thelast section is a really interesting section, which kind of summarizes everything and testyour skills. So it starts with a 30 question final exam, which is a bunch of questionsfrom every single section or topic that we’ve covered.And it is it is a final exam. Sothere is like a passing grade and everything like that. But again, if you fail, there’sno real consequences to it. It’s just kind of a diagnostic tool to test where you arein your CSS knowledge. And after that, it’s followed by a really nice challenge, whichcan help you know, really see where you’re at, not from a theoretical standpoint, butfrom an actual practical standpoint. So this challenge is going to be talked about laterand when to get to that point, but pretty much you’re going to Be styling a websitefrom scratch, you’re going to be given a blank HTML document or Well, it’s not blank, it’sgoing 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 thatI created to style it based on how I want the website to look. But again, it’s not kindof 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 tosomething, you can really unleash your creative freedom through CSS, once you learn all theskills necessary. So again, it will be talked about in a lot more detail once we get tothat 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 someof 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 kindof showing you what you’re going to be getting out of the course, so that you can reallyget 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 thatI created to style it based on how I want the website to look. But again, it’s not kindof 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 tosomething, you can really unleash your creative freedom through CSS, once you learn all theskills necessary. So again, it will be talked about in a lot more detail once we get tothat 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 someof 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 kindof showing you what you’re going to be getting out of the course, so that you can reallyget 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 talkingabout some of the software that we’re going to be using in this course. Now, there’s nota lot of actual software, since most of the stuff we’re going to be doing is built straightinto 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 whenyou’re developing things. So I recommend this text editor right here. It’s called SublimeText, and gives you all of the color coding and formatting that you need, it makes thingsreally easy for you. So you can go ahead to the website.Here, it’s attached to the lectureresources, 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, checkout this website. And depending whether you’re on Windows or Mac or Linux, you go ahead anddownload this. And then it should be pretty much it. So this is what its gonna look likewhen you’re inside, I was just typing a little bit of stuff here making things making surethings were working.So there you go, this is what it’s gonna look like, once you downloadit, 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 ofthose, or maybe have some sort of working reference of what’s going on, then I highlyrecommend that you go and check out the GitHub repository that I created for all the contentof this course. Now, if you don’t know what Git is, or how to use it, don’t worry, I’mgoing to show an alternative to that in just a second, using this platform.But prettymuch this is going to contain all the history of every single lecture. Now, if you knowhow 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’spretty much going to show every single lecture changes. So for example, I have seven to eightitem alignment, so I can click on it. And when I click on this, it shows all of thechanges I have made to both files or any files that I’ve changed.So for example, you cansee 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 andcheck 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 thecourse. So you can go review, maybe look at the code. And you can also download it, youcan download the actual file or the the repository from here. So you can just download that veryeasily. And other than that, you can find all of the project files on here, if you everneed 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 everwant 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 talkingabout some of the software that we’re going to be using in this course.Now, there’s nota lot of actual software, since most of the stuff we’re going to be doing is built straightinto 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 whenyou’re developing things. So I recommend this text editor right here.It’s called SublimeText, and gives you all of the color coding and formatting that you need, it makes thingsreally easy for you. So you can go ahead to the website. Here, it’s attached to the lectureresources, 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, checkout this website. And depending whether you’re on Windows or Mac or Linux, you go ahead anddownload this. And then it should be pretty much it. So this is what its gonna look likewhen you’re inside, I was just typing a little bit of stuff here making things making surethings were working. So there you go, this is what it’s gonna look like, once you downloadit, 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 ofthose, or maybe have some sort of working reference of what’s going on, then I highlyrecommend that you go and check out the GitHub repository that I created for all the contentof this course. Now, if you don’t know what Git is, or how to use it, don’t worry, I’mgoing to show an alternative to that in just a second, using this platform. But prettymuch this is going to contain all the history of every single lecture. Now, if you knowhow 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’spretty much going to show every single lecture changes. So for example, I have seven to eightitem alignment, so I can click on it. And when I click on this, it shows all of thechanges I have made to both files or any files that I’ve changed.So for example, you cansee 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 andcheck 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 thecourse. So you can go review, maybe look at the code. And you can also download it, youcan download the actual file or the the repository from here. So you can just download that veryeasily.And other than that, you can find all of the project files on here, if you everneed 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 everwant 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 introductionto CSS, we’re going to be going through what it actually is, why it’s used and what actuallydoes CSS do. So before we get started, if you’re just starting out this course and youdon’t really know the prerequisites, make sure that you do have a little bit of HTMLexperience.It’s not recommended. Sorry, it’s not needed. But it’s highly recommended becausewe’re going to be using a lot of HTML in this course. And although we’re not going to bewriting 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 runningin just one or two days. So if you don’t know any HTML, you can go and check that out. Andif you do know, HTML, continue watching along. So first of all, let’s get started, what actuallyis 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 unlikeHTML, which is used to create structure and actual website content, this is mainly usedto give it that visual flair to make the websites look good. So CSS is pretty much what makesa website standout from websites from the early days from the early 2000s, things likethat.So that’s what really makes a website stand out is the CSS or the styling. So thispretty much goes hand in hand with HTML. As it said, Here, they work almost consistentlytogether. And they’re always used all like all the time together. So let’s go ahead andcheck out some pages that look with CSS and without. So you can see here that this isthe page with CSS. So you can change all of the layout options. You can make fonts, fontchanges, text manipulation, all sorts of things, which we’re all going to be doing in thiscourse are learning to do. And this is the website without HTML, sorry, without CSS lookspretty standard, right? Obviously, this looks just like a normal website doesn’t have anyHTML, apart from some font changes. But you can see that the difference that somethinglike 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 morein 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 selectorsand things like that, like I said, you can just read through this, I’m not going to gothrough 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, sonow 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 introductionto CSS, we’re going to be going through what it actually is, why it’s used and what actuallydoes CSS do. So before we get started, if you’re just starting out this course and youdon’t really know the prerequisites, make sure that you do have a little bit of HTMLexperience. It’s not recommended.Sorry, it’s not needed. But it’s highly recommended becausewe’re going to be using a lot of HTML in this course. And although we’re not going to bewriting 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 runningin just one or two days. So if you don’t know any HTML, you can go and check that out. Andif you do know, HTML, continue watching along. So first of all, let’s get started, what actuallyis 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 unlikeHTML, which is used to create structure and actual website content, this is mainly usedto give it that visual flair to make the websites look good. So CSS is pretty much what makesa website standout from websites from the early days from the early 2000s, things likethat.So that’s what really makes a website stand out is the CSS or the styling. So thispretty much goes hand in hand with HTML. As it said, Here, they work almost consistentlytogether. And they’re always used all like all the time together. So let’s go ahead andcheck out some pages that look with CSS and without. So you can see here that this isthe page with CSS.So you can change all of the layout options. You can make fonts, fontchanges, text manipulation, all sorts of things, which we’re all going to be doing in thiscourse are learning to do. And this is the website without HTML, sorry, without CSS lookspretty standard, right? Obviously, this looks just like a normal website doesn’t have anyHTML, apart from some font changes. But you can see that the difference that somethinglike 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 morein 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 selectorsand things like that, like I said, you can just read through this, I’m not going to gothrough 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, sonow 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 creatingand linking a CSS stylesheet. So we’re not actually going to be doing with anything withit yet, we’re just going to be creating it and linking it so that we can get startedand actually learn some of the properties in CSS. Alright, let’s get started. So thefirst thing I want to do is go ahead and create my CSS file. So what I’m going to do is gointo my Sublime Text or my text editor. Now, if you’re not using this, and you know howto 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 Texton Sublime Text.To create a new file, you go Ctrl or Command n depending on what operatingsystem 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 directoryin my course content folder. Again, you can set this up however you like. But the wayI like doing it is creating a folder for every type of file. So that for example, when thewebsite gets very big, when you have multiple pages, multiple style sheets, everything staysorganized.So I’m going to go ahead and create that directory. Go ahead into my CSS folderhere. And I’m going to name this style dot CSS. So dot CSS, D is the file format usedto save CSS documents, and style, just kind of the standard name you use when you’re savingCSS documents. So once I go ahead, and I’m going to go ahead and save that. Now I havemy stylesheet created.But we don’t actually have anything yet, because right now our HTMLpage is blank and our CSS file is blank. So this is where knowing a little bit of HTMLcomes in handy. First of all, I’m going to go ahead and create my boilerplate. I justtyped in HTML and hit tab. Again, I talked all about this in my other courses talkingabout HTML. But there we go, we’re going to go ahead and do that. I’m just going to saymy website here. And once that’s done, I’m going to go ahead and link it. So how do weactually do this? Well, what you want to do pretty much is just go into here and intoyour head into the head portion of your website, you’re going to go ahead and create a linktag.So if you just take the link and hit tab in Sublime Text, it’s going to createthe tag for you. So let’s go ahead and break this down here. REL stylesheet is pretty muchsaying 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 knowhow 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 Ihit CSS slash, and then style dot CSS, which has our endpoints or final destination. Sothis is pretty much your basic link tag, this is how it works. You have all of your stuffhere and you created it. And from there, you can go ahead and pretty much do whatever youwant. So right here, I have my stylesheet linked and everything’s working. But we don’tactually know if it works yet. So in the next video, we’re actually going to be going throughand 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 aheadand test it because we don’t know if this is working or not. So obviously, we don’tknow anything about CSS yet. We don’t know about selectors or properties or how to doanything with them. But I just want you to keep this in mind so that when you know howto 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 easiestway we can test it is but just by writing a random, obvious property, that’s going tochange the way the website looks. If it’s not working, then we know that something’swrong with our link. So I’m going to go ahead and just create a property here. Now, youdon’t know how to do any of this. So don’t worry about it. We’re going to learn how todo 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. Soif I, for example, remove a letter, you can see that it’s still white, which means thatthis 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 completelynon 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 thatthis stylesheet is linked properly. Alright, let’s move on. So in this video, we’re going to be creatingand linking a CSS stylesheet. So we’re not actually going to be doing with anything withit yet, we’re just going to be creating it and linking it so that we can get startedand actually learn some of the properties in CSS. Alright, let’s get started. So thefirst thing I want to do is go ahead and create my CSS file. So what I’m going to do is gointo my Sublime Text or my text editor.Now, if you’re not using this, and you know howto 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 Texton Sublime Text. To create a new file, you go Ctrl or Command n depending on what operatingsystem 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 directoryin my course content folder. Again, you can set this up however you like. But the wayI like doing it is creating a folder for every type of file. So that for example, when thewebsite gets very big, when you have multiple pages, multiple style sheets, everything staysorganized. So I’m going to go ahead and create that directory. Go ahead into my CSS folderhere.And I’m going to name this style dot CSS. So dot CSS, D is the file format usedto save CSS documents, and style, just kind of the standard name you use when you’re savingCSS documents. So once I go ahead, and I’m going to go ahead and save that. Now I havemy stylesheet created. But we don’t actually have anything yet, because right now our HTMLpage is blank and our CSS file is blank. So this is where knowing a little bit of HTMLcomes in handy. First of all, I’m going to go ahead and create my boilerplate. I justtyped in HTML and hit tab. Again, I talked all about this in my other courses talkingabout HTML.But there we go, we’re going to go ahead and do that. I’m just going to saymy website here. And once that’s done, I’m going to go ahead and link it. So how do weactually do this? Well, what you want to do pretty much is just go into here and intoyour head into the head portion of your website, you’re going to go ahead and create a linktag.So if you just take the link and hit tab in Sublime Text, it’s going to createthe tag for you. So let’s go ahead and break this down here. REL stylesheet is pretty muchsaying 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 knowhow 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 Ihit CSS slash, and then style dot CSS, which has our endpoints or final destination. Sothis is pretty much your basic link tag, this is how it works.You have all of your stuffhere and you created it. And from there, you can go ahead and pretty much do whatever youwant. So right here, I have my stylesheet linked and everything’s working. But we don’tactually know if it works yet. So in the next video, we’re actually going to be going throughand 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 aheadand test it because we don’t know if this is working or not. So obviously, we don’tknow anything about CSS yet. We don’t know about selectors or properties or how to doanything with them. But I just want you to keep this in mind so that when you know howto 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 easiestway we can test it is but just by writing a random, obvious property, that’s going tochange the way the website looks. If it’s not working, then we know that something’swrong with our link. So I’m going to go ahead and just create a property here. Now, youdon’t know how to do any of this. So don’t worry about it. We’re going to learn how todo 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. Soif I, for example, remove a letter, you can see that it’s still white, which means thatthis 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 completelynon 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 thatthis stylesheet is linked properly. Alright, let’s move on. So in this video, I’m going to be talkingabout CSS selectors. I’m also going to be going through what they do and what typesof selectors there are. So you’re probably wondering what a selector actually is, becausewe haven’t actually talked about this at all. And it’s pretty much one half of everythingthat you do in CSS. So as you know, you have two different documents, you have your HTMLdocument, which is kind of your structure gives all of the different text and contentof 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 randomthings and have them appear where you want them, you need a way to actually assign thesestyles 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 thenstyling it.So it’s kind of like a target in a way. There are many different types ofselectors. 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 theelement 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 thiscase, 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 havecurly braces, and then you have your properties, we’ll go that will go with this in much moredepth towards the end of this section. So you go through and you select, you type outyour tag name. And pretty much what that’s going to do is select all of the elementson the document with that tag name. So there we go. That is the first one. The next isthe class selector. So the class selector is very similar to the element selector, exceptit goes by class name. So you can see here that we have some class attributes here, weassign the class, don’t worry, we’ll go through with this in the next video. But you can seewe assigned the class to these values. And pretty much all we have to do to referencesis type dot, which is the class prefix for CSS, and then the name of the class and thenagain, the properties.So you can actually use this cloud. The reason that we use classesover 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 asubtitle, and you only wanted to style that subtitle, you would go through and actuallyapply that class to your subtitle, your element, whether it’s a paragraph or a header. Andfrom there, you’re going to go through and add it.So there we go. The next What I wantto talk about is the id selector. So these two, the class and id selector are prettymuch identical, you have your attribute where you assign the class or ID. But the only differenceis the prefix here is a hash symbol or an octave Thorpe or hash tag. So then you typeup the name of the ID, and it puts it here. Now, I am going to go through and actuallytalk more about why when we should use classes and IDs. And I’m going to talk about someof the differences between them. And although they look very similar, we actually have differentvery different purposes for them, based on how you use them in your HTML document. Sothose are some of the basics of selectors, like I said, we’re gonna go through and prettymuch use this all the time during our course.So we’re gonna go through use them and addthe properties. So it’s pretty good that you get familiar with these now, so that whenwe move on, this becomes kind of like second nature. So in this video, I’m going to be talkingabout CSS selectors. I’m also going to be going through what they do and what typesof selectors there are. So you’re probably wondering what a selector actually is, becausewe haven’t actually talked about this at all. And it’s pretty much one half of everythingthat you do in CSS. So as you know, you have two different documents, you have your HTMLdocument, which is kind of your structure gives all of the different text and contentof 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 randomthings and have them appear where you want them, you need a way to actually assign thesestyles 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 thenstyling it.So it’s kind of like a target in a way. There are many different types ofselectors. 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 theelement 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 thiscase, 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 havecurly braces, and then you have your properties, we’ll go that will go with this in much moredepth towards the end of this section. So you go through and you select, you type outyour tag name. And pretty much what that’s going to do is select all of the elementson the document with that tag name.So there we go. That is the first one. The next isthe class selector. So the class selector is very similar to the element selector, exceptit goes by class name. So you can see here that we have some class attributes here, weassign the class, don’t worry, we’ll go through with this in the next video. But you can seewe assigned the class to these values. And pretty much all we have to do to referencesis type dot, which is the class prefix for CSS, and then the name of the class and thenagain, the properties. So you can actually use this cloud. The reason that we use classesover 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 asubtitle, and you only wanted to style that subtitle, you would go through and actuallyapply that class to your subtitle, your element, whether it’s a paragraph or a header.Andfrom there, you’re going to go through and add it. So there we go. The next What I wantto talk about is the id selector. So these two, the class and id selector are prettymuch identical, you have your attribute where you assign the class or ID. But the only differenceis the prefix here is a hash symbol or an octave Thorpe or hash tag. So then you typeup the name of the ID, and it puts it here. Now, I am going to go through and actuallytalk more about why when we should use classes and IDs.And I’m going to talk about someof the differences between them. And although they look very similar, we actually have differentvery different purposes for them, based on how you use them in your HTML document. Sothose are some of the basics of selectors, like I said, we’re gonna go through and prettymuch use this all the time during our course. So we’re gonna go through use them and addthe properties. So it’s pretty good that you get familiar with these now, so that whenwe move on, this becomes kind of like second nature. So in this video, I am going to be teachingyou how to how to add classes in IDs to our document here and actually start using someof these selectors. Now, I’m not going to teach you any of the properties yet, becausewe’re going to cover that in a little bit later in this section and in the next fewsections.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 veryuncommonly, you’d see some elements, selectors, and other types of selectors, which we’regoing to go over in the next few videos. But the two most common that you’re going to seeare our classes and IDs. So let’s go through and get started.Now I have a bunch of HTMLcontent here, we’re actually going to be using this and adding on to it for the rest of thecourse, we’re going to be styling this website fully. But let’s actually go through and startadding 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’mgoing to explain why in the next video. But for now, let’s just pretend that they arethe same. And we can use them interchangeably because they have almost the same methodsof application. So let’s go ahead now the first thing you want to do is identify theelement that you want to target. So first of all, let’s just say I wanted to maybe makethe color of this red. Okay, so the color of this title. Now that we know we’ve targetedit, we want to actually go through and edit it.So first thing, how do you think we wouldgo through and do this now if you’re thinking going through and adding an element selectoror 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 willstyle all of them as well. And because we only want to style this title, that wouldn’tbe really effective. So the best way to do this would be to use a class or an ID, I’mgoing to go ahead and use a class. So the way the way you would do this is go throughand type in class as your attribute. And you would again, put this into the opening tagof whatever target element you want to style.And in here, you’re putting, you’re gonnaput your class name. Now, if this isn’t where you put your CSS prefix, this isn’t whereyou put the dots. As I explained in the last video, here, you’re just going to type thename of the class. So I’m going to go through and type a title, just like that. And youcan name this whatever you want. But I’d recommend keeping it short and sweet. You don’t wantit to get too long, because then it’s going to be really hard to work with. So once you’veapplied that, and we go ahead and refresh the page, you can see that nothing’s actuallythere, it hasn’t started working yet. That’s because we haven’t applied any styles. Sowhen we go over here, we need to actually select our element.So I’m going to go aheadand 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 isnow apply on my properties. I’m going to be explaining you to you how to do all of thisin the next in future videos. of a for now, all you need to know is that the first thingyou need to do is select an element using some method. And then you’re going to addthe properties. So I’m going to go ahead and refresh the page. And you can see it worksjust like that. Now to prove to you that this works, I’m actually going to go through andstyle just this about me right here, blue.So you can see we have more than one h2 onthe page, but there’s only one h1. But let’s say we wanted to only style this the aboutme and we didn’t want to style every single h2, what I would do is go ahead and add aclass of subtitle to our target element. And then here I would select it So in this video, I am going to be teachingyou how to how to add classes in IDs to our document here and actually start using someof these selectors.Now, I’m not going to teach you any of the properties yet, becausewe’re going to cover that in a little bit later in this section and in the next fewsections. 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 veryuncommonly, you’d see some elements, selectors, and other types of selectors, which we’regoing to go over in the next few videos. But the two most common that you’re going to seeare our classes and IDs. So let’s go through and get started. Now I have a bunch of HTMLcontent here, we’re actually going to be using this and adding on to it for the rest of thecourse, we’re going to be styling this website fully.But let’s actually go through and startadding 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’mgoing to explain why in the next video. But for now, let’s just pretend that they arethe same. And we can use them interchangeably because they have almost the same methodsof application. So let’s go ahead now the first thing you want to do is identify theelement that you want to target. So first of all, let’s just say I wanted to maybe makethe color of this red. Okay, so the color of this title. Now that we know we’ve targetedit, we want to actually go through and edit it.So first thing, how do you think we wouldgo through and do this now if you’re thinking going through and adding an element selectoror 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 willstyle all of them as well. And because we only want to style this title, that wouldn’tbe really effective. So the best way to do this would be to use a class or an ID, I’mgoing to go ahead and use a class. So the way the way you would do this is go throughand type in class as your attribute. And you would again, put this into the opening tagof whatever target element you want to style. And in here, you’re putting, you’re gonnaput your class name. Now, if this isn’t where you put your CSS prefix, this isn’t whereyou put the dots.As I explained in the last video, here, you’re just going to type thename of the class. So I’m going to go through and type a title, just like that. And youcan name this whatever you want. But I’d recommend keeping it short and sweet. You don’t wantit to get too long, because then it’s going to be really hard to work with. So once you’veapplied that, and we go ahead and refresh the page, you can see that nothing’s actuallythere, it hasn’t started working yet. That’s because we haven’t applied any styles. Sowhen we go over here, we need to actually select our element. So I’m going to go aheadand 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 isnow apply on my properties. I’m going to be explaining you to you how to do all of thisin the next in future videos. of a for now, all you need to know is that the first thingyou need to do is select an element using some method.And then you’re going to addthe properties. So I’m going to go ahead and refresh the page. And you can see it worksjust like that. Now to prove to you that this works, I’m actually going to go through andstyle just this about me right here, blue. So you can see we have more than one h2 onthe page, but there’s only one h1. But let’s say we wanted to only style this the aboutme and we didn’t want to style every single h2, what I would do is go ahead and add aclass of subtitle to our target element. And then here I would select it just like that and give it its color. So youcan go ahead and try this if you want. Don’t try and do anything crazy.If you know whatGo ahead, but for now, let’s just go ahead and stick with that. And there you go. Youcan see we’ve styled that blue and it hasn’t changed. Anything else? So that’s workingperfectly seems to be going fine. And we’re selecting everything. But what if we wantedto use IDs. So let’s just say that this right here, this contact us, we wanted to use anID for it. Now, for now, we don’t actually know why we want to use an ID. But let’s justpretend that we do know why. So what I would do is go ahead and use the ID attribute. SoI’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 wedon’t have to style it, I can’t just go ahead and do this, this wouldn’t work.The reasonbeing the prefix here is a.so. css would interpret this as a class and not an ID, instead, we’regoing to have to use our author Thor or hash, then why don’t we go ahead and color thisone, green. Okay, let’s go ahead and refresh the page and check this out. And you can seethat it has this kind of olive green color, so it’s working great. So there we go, youcan 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 veryeasy. You can go back to any state and time, check it out and play, play around with thesetrying and replicate this and add your own classes and IDs and try and you know, figureout how things work here.So yeah, that’s pretty much the basics of adding classes andIDs. In the future, we’re going to use some more complicated selectors, which don’t actuallyinvolve having to directly reference some of these. So those are going to get prettycomplicated, 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 importantconcept, because it’s pretty much going to change the way that you use selectors. Rightnow, we’re just assuming that all of these selectors kind of work in the same in a similarway.We don’t actually know why. They’re why they exist. I mean, why is there a class andan id selector when they both do the same thing. So that’s what I’m going to be explainingin this video. And it all comes down to one concept called specificity. So specificityis pretty much talking about the overriding or rewriting of properties in CSS. And it’spretty 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 colorwas blue, and one of them said the color was green, the more powerful there the more specificselector 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 morehelp on this, or you don’t really understand it, you can go ahead and read this. There’sa lot of numbers involved like this.But you know, you can go ahead and read this, butI’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 andget started. Now, I think it’s really helpful if we start from the ground up. So I’ve removedall of the styling that we applied in the last video. So first of all, I’m going togo 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 isred. 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 mystyles, here, we’re going to use the class selector and say the color is blue. So thisis where we have a confliction. You can see that one selector says the color is red, butone selector says the color is blue.So what are we supposed to do about this? Which onedo you think is going to prevail, I mean, you can just have both red and blue at thesame time, you can see that blue is actually more specific. So you can see that elementsare or actually selectors have different powers. And the more powerful they are, the more specificthey are. The higher they are, the higher they’re going to be on the scale and the higherthe chance of having or applying the right just like that and give it its color. So youcan go ahead and try this if you want. Don’t try and do anything crazy. If you know whatGo ahead, but for now, let’s just go ahead and stick with that. And there you go. Youcan see we’ve styled that blue and it hasn’t changed.Anything else? So that’s workingperfectly seems to be going fine. And we’re selecting everything. But what if we wantedto use IDs. So let’s just say that this right here, this contact us, we wanted to use anID for it. Now, for now, we don’t actually know why we want to use an ID. But let’s justpretend that we do know why. So what I would do is go ahead and use the ID attribute. SoI’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 wedon’t have to style it, I can’t just go ahead and do this, this wouldn’t work. The reasonbeing the prefix here is a.so.Css would interpret this as a class and not an ID, instead, we’regoing to have to use our author Thor or hash, then why don’t we go ahead and color thisone, green. Okay, let’s go ahead and refresh the page and check this out. And you can seethat it has this kind of olive green color, so it’s working great. So there we go, youcan 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 veryeasy. You can go back to any state and time, check it out and play, play around with thesetrying and replicate this and add your own classes and IDs and try and you know, figureout how things work here.So yeah, that’s pretty much the basics of adding classes andIDs. In the future, we’re going to use some more complicated selectors, which don’t actuallyinvolve having to directly reference some of these. So those are going to get prettycomplicated, 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 importantconcept, because it’s pretty much going to change the way that you use selectors.Rightnow, we’re just assuming that all of these selectors kind of work in the same in a similarway. We don’t actually know why. They’re why they exist. I mean, why is there a class andan id selector when they both do the same thing. So that’s what I’m going to be explainingin this video. And it all comes down to one concept called specificity. So specificityis pretty much talking about the overriding or rewriting of properties in CSS.And it’spretty 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 colorwas blue, and one of them said the color was green, the more powerful there the more specificselector 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 morehelp on this, or you don’t really understand it, you can go ahead and read this. There’sa lot of numbers involved like this. But you know, you can go ahead and read this, butI’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 andget started. Now, I think it’s really helpful if we start from the ground up. So I’ve removedall of the styling that we applied in the last video. So first of all, I’m going togo 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 isred. 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 mystyles, here, we’re going to use the class selector and say the color is blue.So thisis where we have a confliction. You can see that one selector says the color is red, butone selector says the color is blue. So what are we supposed to do about this? Which onedo you think is going to prevail, I mean, you can just have both red and blue at thesame time, you can see that blue is actually more specific. So you can see that elementsare or actually selectors have different powers. And the more powerful they are, the more specificthey are. The higher they are, the higher they’re going to be on the scale and the higherthe chance of having or applying the right selector property. So what we’re going todo is actually go through and talk about the different powers or specificities, or specificsof each selector and we’re going to see which one is most powerful.So right now We knowthat the element selectors are less powerful than the class. But there is actually twomore that are more powerful than the class selectors. So I’m going to go ahead and applythis 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 andadd 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. Sonow we have two blue sub titles and one red. So you can see that the class will overwritethe header, or sorry, the element tag. But there are like I said, there are still twothat are more powerful. The next after the class is the ID. So I’m going to go over hereto services and add an ID of services, oops, services.All right. Now, what I’m going todo is go into my CSS file, and use the id selector. color green. So I’m going to goahead and refresh now. And you can see that it’s right here, it’s green. So now that weknow 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’tactually know what inline styling is. But pretty much we don’t need to use a CSS fileto do inline styling.All we need is the element and the HTML file. So why don’t I go aheadand 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 allof our CSS properties, no selector nothing. So I’m going to say here, that color is stillblue. And we don’t actually, still blue is part of the CSS color collection, we’ll explainall of those in future sections. So if I go ahead and refresh, now, you can see that itis blue, and it overrides the ID, the class and the header here.So pretty much thereare, there’s an order here that you need to take away from this video. headers are theleast specific, they kind of applied to everything, and they’re not that powerful. The class selectoris above that, and then the ID and then the inline styling, or the style attribute. Soif you follow this order, you will pretty much you can predict what is going to be theoutcome 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 otherpeople 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 specificitydifference, we actually use classes and IDs in different situations. And they’re prettysimple. Classes are meant to be used multiple times. So if you have done any programmingbefore, you’ll know that a class is kind of like a blueprint, it’s made so that you cancreate 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 forone single element. So for example, let’s take this file we have here we have threesub titles, and one for the about me section. In this structure, what we would do is createa sub title class for every sub title on the page, then we’d apply it to it. Now the reasonwe’re doing this is because we can have multiple h2 is on this page. So we only want to applyit to the subtitles. But then for our bio about me here, there’s only going to be oneof them on this whole document, which means we’re going to use the ID of about me.Andthen from there, we can go and apply our styles and do all of that. So that’s just the maindifference between classes and IDs. And now that you know how to use them, you can actuallygo through and apply them properly in real world scenarios. So that’s just a very importantthing to keep in mind. You’re only supposed to use IDs once and classes can be used multipletimes. Alright, let’s move on. selector property. So what we’re going todo is actually go through and talk about the different powers or specificities, or specificsof each selector and we’re going to see which one is most powerful. So right now We knowthat the element selectors are less powerful than the class. But there is actually twomore that are more powerful than the class selectors.So I’m going to go ahead and applythis 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 andadd 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. Sonow we have two blue sub titles and one red. So you can see that the class will overwritethe header, or sorry, the element tag. But there are like I said, there are still twothat are more powerful. The next after the class is the ID.So I’m going to go over hereto services and add an ID of services, oops, services. All right. Now, what I’m going todo is go into my CSS file, and use the id selector. color green. So I’m going to goahead and refresh now. And you can see that it’s right here, it’s green. So now that weknow 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’tactually know what inline styling is. But pretty much we don’t need to use a CSS fileto do inline styling. All we need is the element and the HTML file. So why don’t I go aheadand 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 allof our CSS properties, no selector nothing. So I’m going to say here, that color is stillblue. And we don’t actually, still blue is part of the CSS color collection, we’ll explainall of those in future sections. So if I go ahead and refresh, now, you can see that itis blue, and it overrides the ID, the class and the header here. So pretty much thereare, there’s an order here that you need to take away from this video. headers are theleast specific, they kind of applied to everything, and they’re not that powerful. The class selectoris above that, and then the ID and then the inline styling, or the style attribute. Soif you follow this order, you will pretty much you can predict what is going to be theoutcome 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 otherpeople 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 specificitydifference, we actually use classes and IDs in different situations. And they’re prettysimple. Classes are meant to be used multiple times. So if you have done any programmingbefore, you’ll know that a class is kind of like a blueprint, it’s made so that you cancreate 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 forone single element. So for example, let’s take this file we have here we have threesub titles, and one for the about me section.In this structure, what we would do is createa sub title class for every sub title on the page, then we’d apply it to it. Now the reasonwe’re doing this is because we can have multiple h2 is on this page. So we only want to applyit to the subtitles. But then for our bio about me here, there’s only going to be oneof them on this whole document, which means we’re going to use the ID of about me.Andthen from there, we can go and apply our styles and do all of that. So that’s just the maindifference between classes and IDs. And now that you know how to use them, you can actuallygo through and apply them properly in real world scenarios. So that’s just a very importantthing to keep in mind. You’re only supposed to use IDs once and classes can be used multipletimes. Alright, let’s move on. So in this video I am we are going to be lookingat pseudo selectors. So this is a special type of selector that is used commonly ininteractivity with your website. So this is usually visible only when something is doneon the website. So it’s a pretty it’s pretty cool feature. And it’s used very commonlythroughout CSS. And once we get to the animations and transitions part, we’re actually goingto be used soon as we be we’re going to be using pseudo selectors a lot. So let’s getinto it. Now, there’s a few pseudo selectors I want to cover here. There’s a lot of numberof only going to be covering the main ones that are we’re going to be using.So beforewe go on, I’m just going to show you what a pseudo selector actually is. So usuallywhat you would do is, after a selector, you would add a colon, and then the name of thepseudo selector. So this is just an example of one of them. And then the properties willapply normally. Now watch what happens when I hover over our h2 here, you can see thatit’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 areall separate classes. And obviously, with specificity and everything like that, theywon’t apply. So there we go. We have everything working here. And that’s one of the pseudoselectors, which is hover. So let’s move on to some of the next ones. Now, there’s alsotwo that I’d like to talk about, which is first child and last child.So the conceptbehind child and parent elements is that right here, if we look Actually, this is a littlebit complicated example, let’s look at this unordered list here, we have an A ul unorderedlist, and then we have three allies. Okay, so pretty much this is going to be the firstchild 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 therelationship between child and parent. And what we can actually do is specify which onewe want to select.So if I go over here and select all URLs, and then of course, the colonfor the pseudo selector, and select first child, now, I’m just going to say set thecolor to steel blue as well. Okay, so I’m gonna refresh the page, and you can see thatit’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 howyou’re supposed to write it.Instead, you’re supposed to write the element that you’retrying to select, which in this case is our list item, or our Li. So now if I go aheadand refresh the page, you can see that the first one here is going to be blue, it’s alittle bit of a confusing rule to get around. But once you get used to it, it becomes veryeasy. We also change this to last or last child like this. And then what’s going tohappen is it’s going to select the last one. Now, there’s also one more that I’d like totalk about quickly, which is nth child.So I’m just going to show you how this thingworks and child. And then in brackets, you put the number here. So when you’re goingto 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, everysecond 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 onemore selector that I want to talk about, at least for children, and that is the only childselector. So I think it makes perfect sense, pretty much what we’re trying to look foris something that there’s only one child inside of it. So for example, nothing on this pagehere 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 goahead and save, make sure it’s working. There we go. Now, what I’m going to do is go aheadand select this.So I’m going to say Li by car. And I’m going to say only child. So prettymuch what this is saying is for every Li that is the only child of its parent. And you cansee this, the UL does only has one child. So I’m going to go ahead and give it a colorof purple, for example. And you can see that it works perfectly. But what would happenif I tried this on, let’s just say for example, the TD is here. Okay, so I’m going to go aheadand 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 lookingat pseudo selectors. So this is a special type of selector that is used commonly ininteractivity with your website. So this is usually visible only when something is doneon the website. So it’s a pretty it’s pretty cool feature. And it’s used very commonlythroughout CSS. And once we get to the animations and transitions part, we’re actually goingto be used soon as we be we’re going to be using pseudo selectors a lot.So let’s getinto it. Now, there’s a few pseudo selectors I want to cover here. There’s a lot of numberof only going to be covering the main ones that are we’re going to be using. So beforewe go on, I’m just going to show you what a pseudo selector actually is. So usuallywhat you would do is, after a selector, you would add a colon, and then the name of thepseudo selector. So this is just an example of one of them. And then the properties willapply normally. Now watch what happens when I hover over our h2 here, you can see thatit’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 areall separate classes. And obviously, with specificity and everything like that, theywon’t apply. So there we go. We have everything working here.And that’s one of the pseudoselectors, which is hover. So let’s move on to some of the next ones. Now, there’s alsotwo that I’d like to talk about, which is first child and last child. So the conceptbehind child and parent elements is that right here, if we look Actually, this is a littlebit complicated example, let’s look at this unordered list here, we have an A ul unorderedlist, and then we have three allies. Okay, so pretty much this is going to be the firstchild 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 therelationship between child and parent. And what we can actually do is specify which onewe want to select. So if I go over here and select all URLs, and then of course, the colonfor the pseudo selector, and select first child, now, I’m just going to say set thecolor to steel blue as well.Okay, so I’m gonna refresh the page, and you can see thatit’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 howyou’re supposed to write it. Instead, you’re supposed to write the element that you’retrying to select, which in this case is our list item, or our Li. So now if I go aheadand refresh the page, you can see that the first one here is going to be blue, it’s alittle bit of a confusing rule to get around. But once you get used to it, it becomes veryeasy. We also change this to last or last child like this. And then what’s going tohappen is it’s going to select the last one. Now, there’s also one more that I’d like totalk about quickly, which is nth child. So I’m just going to show you how this thingworks and child. And then in brackets, you put the number here. So when you’re goingto 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, everysecond 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 onemore selector that I want to talk about, at least for children, and that is the only childselector. So I think it makes perfect sense, pretty much what we’re trying to look foris something that there’s only one child inside of it.So for example, nothing on this pagehere 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 goahead and save, make sure it’s working. There we go. Now, what I’m going to do is go aheadand select this. So I’m going to say Li by car. And I’m going to say only child.So prettymuch what this is saying is for every Li that is the only child of its parent. And you cansee this, the UL does only has one child. So I’m going to go ahead and give it a colorof purple, for example. And you can see that it works perfectly. But what would happenif I tried this on, let’s just say for example, the TD is here. Okay, so I’m going to go aheadand 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’sgoing 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 thispage 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 therewe go. That’s pretty much for the basic children kind of pseudo selectors. Let’s move on tosome other students, selectors. Now, there are selectors of this type that are actuallyspecific to certain elements, and one of them is the anchor tag or the a tag. So I’m justgoing to go ahead and create an anchor tag under this h2 here. Oh, whoops. Okay, andI’m just going to give it a link or an endpoint of Google. So just like that. Okay, therewe 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 clickon it takes me there, pretty standard stuff. Now, we can actually create pseudo selectorsfor this. So I’m going to be giving you two for now. Now, there are many, many more. Butthese 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 notlimited to single element names, actually, why don’t I go ahead and do that, I’m goingto give it an ID, because again, we only have one of these on the page, I’m going to giveit an ID of Google link, just like that. So now I’m gonna go ahead and reference thatin 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 thefirst pseudo selector. And then there’s also a second one. Don’t worry about what I’m typingfor. now. I’ll explain both of these in just a second. Alright, so let’s look at the firstone here, Google link, like, pretty much what this is saying is, if you’ve ever been ona 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 comeinto play. The website has of those has those defined properties. And they actually changethe way that the link looks before and after it is clicked. So I’m going to go ahead anddo it here. Link is the unvisited link, remember, so I’m going to go ahead and give it a colorof blue.And then when it’s clicked, I’m going to go ahead and give it a color of red tieblue there. Remember, usually, the default is that it is going to be purple like thiscolor here. Let’s go ahead and refresh the page, you can see that it’s actually readnow. Now, obviously, I can’t really go back in time, and change the link so that it doesn’tlook clicked.But you can see how powerful this the pseudo selectors are, because youcan do so many different things. And once we learn more properties, you can actuallychange different parts of the page. And it becomes very powerful to use these pseudoselectors. So that’s just one thing to keep in mind. All right. So there we go. We’vecovered most of the pseudo selectors, I’m actually going to go ahead and add that hoverproperty there back in case anyone wants to use the project files.So there we go. We’vecovered everything here. And we’ve added all of our pseudo selectors. So like I said, there’smany more, I’ve linked a couple articles that help you to look at all of the different pseudoselectors. And most of them, you’re not really going to use very often, they are useful inany way, because they’re usually you just use some basic pseudo selectors like hoverand active, which I haven’t actually covered. But things like that. So you’re not reallygoing 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 createthat effect that you’ve always wanted. Alright, let’s move on. Now let’s go ahead and refresh and see what’sgoing 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 thispage 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 therewe go. That’s pretty much for the basic children kind of pseudo selectors. Let’s move on tosome other students, selectors. Now, there are selectors of this type that are actuallyspecific to certain elements, and one of them is the anchor tag or the a tag.So I’m justgoing to go ahead and create an anchor tag under this h2 here. Oh, whoops. Okay, andI’m just going to give it a link or an endpoint of Google. So just like that. Okay, therewe 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 clickon it takes me there, pretty standard stuff. Now, we can actually create pseudo selectorsfor this. So I’m going to be giving you two for now. Now, there are many, many more. Butthese 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 notlimited to single element names, actually, why don’t I go ahead and do that, I’m goingto give it an ID, because again, we only have one of these on the page, I’m going to giveit an ID of Google link, just like that.So now I’m gonna go ahead and reference thatin 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 thefirst pseudo selector. And then there’s also a second one. Don’t worry about what I’m typingfor. now. I’ll explain both of these in just a second. Alright, so let’s look at the firstone here, Google link, like, pretty much what this is saying is, if you’ve ever been ona 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 comeinto play. The website has of those has those defined properties. And they actually changethe way that the link looks before and after it is clicked. So I’m going to go ahead anddo it here. Link is the unvisited link, remember, so I’m going to go ahead and give it a colorof blue. And then when it’s clicked, I’m going to go ahead and give it a color of red tieblue there. Remember, usually, the default is that it is going to be purple like thiscolor here. Let’s go ahead and refresh the page, you can see that it’s actually readnow. Now, obviously, I can’t really go back in time, and change the link so that it doesn’tlook clicked. But you can see how powerful this the pseudo selectors are, because youcan do so many different things. And once we learn more properties, you can actuallychange different parts of the page.And it becomes very powerful to use these pseudoselectors. So that’s just one thing to keep in mind. All right. So there we go. We’vecovered most of the pseudo selectors, I’m actually going to go ahead and add that hoverproperty there back in case anyone wants to use the project files. So there we go. We’vecovered everything here. And we’ve added all of our pseudo selectors. So like I said, there’smany more, I’ve linked a couple articles that help you to look at all of the different pseudoselectors. And most of them, you’re not really going to use very often, they are useful inany way, because they’re usually you just use some basic pseudo selectors like hoverand active, which I haven’t actually covered.But things like that. So you’re not reallygoing 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 createthat effect that you’ve always wanted. Alright, let’s move on. Today, we’re going to be looking at Advancedselectors. So right now, we’ve looked at our basic selectors, or class selectors, elementselectors, and Id selectors. And we’ve also looked at some pseudo selectors, which isvery 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 showswhat you can actually do with these selectors, because there is a lot. So there’s a bunchof 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 soundsa little bit contradictive. But we’ll get into that in just a second.And then afterthat, we’re going to be talking about attribute selectors, which are probably the hardesttype of selector to get used to. Alright, let’s get started. So the first thing I wantto 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 throughthese and talking about how they all work.So the first selector I’m going to be talkingabout is something called the adjacent sibling selector. So pretty much what this does isselects every single element that directly follows a different element. So I’ll showyou 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 firstthing I’m going to do is actually go ahead and get rid of these two, I’m going to actuallycomment them out.You can do this with Ctrl, slash, like that. So if you type control slashcomments here with which pretty much just renders it useless, it doesn’t run or anythinglike that. Let’s get started. So the first thing I want to do is go ahead and set thisup. So I want to be able to apply styles to every a tag or anchor tag that comes directlyafter an h2. So the way to set this up is all you have to do is go the element thatyou 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 h2plus a. So this is pretty much saying every anchor tag that follows an h2. So then wecan 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 youcould add it if you wanted to. Because this is still a selector. Remember, I’m not goingto 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 siblingcombinator, or selector. So this is a little bit more difficult to understand. But Allin good time, it’s once you get used to it, it becomes much easier to understand. So prettymuch what the general sibling selector does, is goes for the same kind of idea as thisselector here, it looks for elements that go directly after one another, except theyhave to be sharing the same parents, okay. So for example, let’s see our input here ourform, 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 textarea, except in this case, they have to share the same parent. So what we’re going to dois go and say, every button, which is going to be the next one, or the final one, whichis eight here.So sorry, it’s actually going to be text area. Right, because that’s thefirst element here, which is our text area. And then this symbol followed, and then it’sgoing to be a button, like that. So this is seeing every button that is followed, or thatis after a text area, but they’re in the same parent. So from here, we can go and styleit 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. Solike I said, the main difference between these two is that the first one is going to be stylingelements that follow each other no matter where they are on the scale. So if you actuallylook up here, they don’t share any parents, they’re completely separate elements. Whereashere, they have to follow each other. And I’ll actually demonstrate that quickly. Ifwe change this to a plus here. and refresh, the style is still going to work because theyare directly preceded. But the only thing is if they aren’t.So for example, I’m justgoing to actually move this button out of the form. Today, we’re going to be looking at Advancedselectors. So right now, we’ve looked at our basic selectors, or class selectors, elementselectors, and Id selectors. And we’ve also looked at some pseudo selectors, which isvery 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 showswhat you can actually do with these selectors, because there is a lot. So there’s a bunchof 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 soundsa little bit contradictive. But we’ll get into that in just a second.And then afterthat, we’re going to be talking about attribute selectors, which are probably the hardesttype of selector to get used to. Alright, let’s get started. So the first thing I wantto 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 throughthese and talking about how they all work. So the first selector I’m going to be talkingabout is something called the adjacent sibling selector. So pretty much what this does isselects every single element that directly follows a different element.So I’ll showyou 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 firstthing I’m going to do is actually go ahead and get rid of these two, I’m going to actuallycomment them out.You can do this with Ctrl, slash, like that. So if you type control slashcomments here with which pretty much just renders it useless, it doesn’t run or anythinglike that. Let’s get started. So the first thing I want to do is go ahead and set thisup. So I want to be able to apply styles to every a tag or anchor tag that comes directlyafter an h2. So the way to set this up is all you have to do is go the element thatyou 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 h2plus a. So this is pretty much saying every anchor tag that follows an h2. So then wecan 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 youcould add it if you wanted to. Because this is still a selector. Remember, I’m not goingto 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 siblingcombinator, or selector. So this is a little bit more difficult to understand. But Allin good time, it’s once you get used to it, it becomes much easier to understand. So prettymuch what the general sibling selector does, is goes for the same kind of idea as thisselector here, it looks for elements that go directly after one another, except theyhave to be sharing the same parents, okay. So for example, let’s see our input here ourform, 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 textarea, except in this case, they have to share the same parent.So what we’re going to dois go and say, every button, which is going to be the next one, or the final one, whichis eight here. So sorry, it’s actually going to be text area. Right, because that’s thefirst element here, which is our text area. And then this symbol followed, and then it’sgoing to be a button, like that. So this is seeing every button that is followed, or thatis after a text area, but they’re in the same parent.So from here, we can go and styleit 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. Solike I said, the main difference between these two is that the first one is going to be stylingelements that follow each other no matter where they are on the scale. So if you actuallylook up here, they don’t share any parents, they’re completely separate elements. Whereashere, they have to follow each other. And I’ll actually demonstrate that quickly. Ifwe change this to a plus here. and refresh, the style is still going to work because theyare directly preceded. But the only thing is if they aren’t. So for example, I’m justgoing to actually move this button out of the form. Just like that seems like the button disappearedthere. Let’s go ahead and redo that.Okay, so we have the button back. Now I’m goingto go ahead and change this back to our symbol there. And if we go ahead and refresh, youcan see that the button right there, it doesn’t actually have that styling anymore, becausealthough they directly follow each other, they’re not under the same parent. So that’sjust one minor difference. Alright, let’s move on to the next one. It’s called the childselector. So this is probably the most basic out of all of these advanced selectors. Andpretty much what is saying is every single child have a certain element. So I’ll giveyou an example. Here, we have an Li and a ul, this is pretty basic, all you have todo 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. Andlet’s start to color this time to blue. I’m just gonna say that. And remember, specificityis at play here. Now, like I said, the specificity rules, once you use these advanced selectorsget quite complicated. But for example, if we actually look at the Li here, the stylefor this, we can see that the Li with the pseudo selector is actually more specificthan the this general selector. So I’m going to go ahead and comment that out. Now if werefresh the page, you can see that it’s blue. So that’s just one thing to keep in mind withthese 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 andstart using these advanced selectors.Like I said, usually you won’t use these in yourgeneral use. So I’m not going to go over specificity especially because usually, you’ll group upall of these styles into one selector. Okay, so that’s the child selector. The next oneis very similar to the child selector, but instead of having direct children, there’sactually something called a descendant. So I’m just going to go ahead and edit this alittle bit. I’m going to have an Li okay, but then I’m going to create an ordered listinside 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 listinside of a list item that is inside of a ul.So a little bit complicated. But we’llget to that in just a second. So I’m going to create an Li inside of this. And I’m goingto say, my numbered list item, just like that. Alright, now I’m going to go ahead and refreshthe page. And you can see we have a list item here with our item. All right, so let’s getstarted on using this descendant selector. So I’m going to get started, first thing Iwant 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. Butthen 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 goingto be our child selector. So that’s just the main difference, it’s very easy to miss, justmake sure that you don’t mess that up. So now I’m going to select the color and setit to four.Now let’s just say green. All right, now let’s go ahead and refresh thepage. 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 aheadand comment this out. Remember, this is a very specific selector. Now, if I go aheadand 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 propagatesup if you have done any programming before, that goes up to N A ul, okay, so I’ll justshow you what that means.In this case, the Li is a direct child of the UL, right. Butthen we have another Li in here, which is a child of n o l, which is just child of anLi, which is a child of the UL, right. So as you move up and up, it eventually comesback to the UL as the parent element. So the main difference you need to take away fromthis is that the child selector is selecting any direct children.So anything here wouldnot apply, because we’re actually Just like that seems like the button disappearedthere. Let’s go ahead and redo that. Okay, so we have the button back. Now I’m goingto go ahead and change this back to our symbol there. And if we go ahead and refresh, youcan see that the button right there, it doesn’t actually have that styling anymore, becausealthough they directly follow each other, they’re not under the same parent.So that’sjust one minor difference. Alright, let’s move on to the next one. It’s called the childselector. So this is probably the most basic out of all of these advanced selectors. Andpretty much what is saying is every single child have a certain element. So I’ll giveyou an example. Here, we have an Li and a ul, this is pretty basic, all you have todo 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.Andlet’s start to color this time to blue. I’m just gonna say that. And remember, specificityis at play here. Now, like I said, the specificity rules, once you use these advanced selectorsget quite complicated. But for example, if we actually look at the Li here, the stylefor this, we can see that the Li with the pseudo selector is actually more specificthan the this general selector. So I’m going to go ahead and comment that out. Now if werefresh the page, you can see that it’s blue. So that’s just one thing to keep in mind withthese 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 andstart using these advanced selectors.Like I said, usually you won’t use these in yourgeneral use. So I’m not going to go over specificity especially because usually, you’ll group upall of these styles into one selector. Okay, so that’s the child selector. The next oneis very similar to the child selector, but instead of having direct children, there’sactually something called a descendant. So I’m just going to go ahead and edit this alittle bit. I’m going to have an Li okay, but then I’m going to create an ordered listinside 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 listinside of a list item that is inside of a ul.So a little bit complicated. But we’llget to that in just a second. So I’m going to create an Li inside of this. And I’m goingto say, my numbered list item, just like that. Alright, now I’m going to go ahead and refreshthe page. And you can see we have a list item here with our item. All right, so let’s getstarted on using this descendant selector. So I’m going to get started, first thing Iwant 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. Butthen 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 goingto be our child selector. So that’s just the main difference, it’s very easy to miss, justmake sure that you don’t mess that up. So now I’m going to select the color and setit to four. Now let’s just say green. All right, now let’s go ahead and refresh thepage. 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 aheadand comment this out. Remember, this is a very specific selector. Now, if I go aheadand 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 propagatesup if you have done any programming before, that goes up to N A ul, okay, so I’ll justshow you what that means.In this case, the Li is a direct child of the UL, right. Butthen we have another Li in here, which is a child of n o l, which is just child of anLi, which is a child of the UL, right. So as you move up and up, it eventually comesback to the UL as the parent element. So the main difference you need to take away fromthis is that the child selector is selecting any direct children. So anything here wouldnot apply, because we’re actually this one wouldn’t apply, because the orderedlist 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 thestyles. So I’m going to go ahead and demonstrate this. Now. Let’s go ahead and actually removethis 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 removethis and leave it just the ordered list. So right now, we have the ordered list as a childof the UL. Now I’m going to go ahead and refresh. And you can see it still stays the same, becausewe have this style applied. But why don’t we go ahead and remove this, what do you think’sgoing to happen? Well, you can see here that this stays blue, remember, because of ourdirect 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 completelyseparate from this one.So the styles aren’t going to be applied on this one. On the otherhand, if we did have our descendant selector enabled, it’s going to style both of thembecause remember, the Li is a child of the oil, and the oil is a child of the UL. Sojust keep that in mind, there’s a big difference between the two, you might be able to missit, 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’remainly going to use.Again, there’s many more, but they are quite difficult. And we’re notgoing to cover them because they’re not very useful. So there we go. Those are the fourselectors that you can use. Go ahead and practice them as much as you want. You know, try messingthem 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 orderedlist 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 thestyles.So I’m going to go ahead and demonstrate this. Now. Let’s go ahead and actually removethis 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 removethis and leave it just the ordered list. So right now, we have the ordered list as a childof the UL. Now I’m going to go ahead and refresh. And you can see it still stays the same, becausewe have this style applied. But why don’t we go ahead and remove this, what do you think’sgoing to happen? Well, you can see here that this stays blue, remember, because of ourdirect 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 completelyseparate from this one. So the styles aren’t going to be applied on this one.On the otherhand, if we did have our descendant selector enabled, it’s going to style both of thembecause remember, the Li is a child of the oil, and the oil is a child of the UL. Sojust keep that in mind, there’s a big difference between the two, you might be able to missit, 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’remainly going to use.Again, there’s many more, but they are quite difficult. And we’re notgoing to cover them because they’re not very useful. So there we go. Those are the fourselectors that you can use. Go ahead and practice them as much as you want. You know, try messingthem 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 goingto be talking about the last type of selector. These are called attribute selectors. They’rea little bit complicated once you get started, but once we actually start using them, theybecome very easy to use. So first of all, what is an attribute selector? Well, as weknow, in HTML, we can actually add attributes to all of our elements. So for example, thisimage here has an attribute of source which tells the image tag where the source of theimages. But what we can actually do in CSS is use these to our advantage, we can selectcertain elements that for certain attributes and their values.So for example, let’s goahead and try and rewrite this subtitle class here. So we know if we go over here that allof our, all of our subtitle classes are used in h2. So what I want to do is actually rewritethis in terms of our attribute selector. So what we do is first start off with our tagname, which is h2. But then inside of some square brackets, what we do is type attributeis equal to value. Okay, so obviously, we’re not going to do it like this, we’re goingto have to select some sort of attribute. What this allows us to do is actually selectcertain things or certain elements based on their attributes. So in this clip, in thiscase, we want to select everything that has the attribute of class, and we want to makesure 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, wedon’t actually need them.Alright, so there we go. We have rewritten our class here. Butwe’ve read we’ve but we’ve written it in a way that allows us to select it based on itsact on the attribute of it itself. So let’s go ahead and refresh the page and see whathappens, you can see that this state exactly the same. Now nothing has changed. If I goahead and change this back to dot subtitle, just like that, refresh the page, you cansee nothing’s changed. So that’s pretty basic. Now, it doesn’t just have to be class, wecan select it based on many different things. So for example, if I wanted to select thisimage over here, I’m going to go over to the bottom, I could say image, image, and thenevery and then the source has to be equal to something. All right. So there we go. Nowwe’ve done that. But there’s actually more than one type of selector. Now, usually, thisis the basic one where you just equate one side to the other.But there’s actually manymore types of selectors, which allow you to kind of modify the attribute selectors andmake them much more powerful than they are right now. So how do we do this? Well, I’mgoing to be covering just a few of them with you today, and showing you how you can usethem. So we have two images on this page. Now both of them are located in this imagefolder. Is there do you think that there’s any way that we can select both of them inone go using an attribute selector? Well, there actually is. So here’s what we haveto do. First of all, let’s find the common factor between these two images. They bothare 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 actuallygo back and look, you can see that both images actually do contain this link here, whereverthe other images, there it is.So there we go. Now we’ve done that. But remember thatthis is direct equating this has to be equal to this. And unfortunately, neither of themare equal to that. So how do you think we fix this? Well, all we have to do is put acarrot behind the attribute, just like this. So what this says is every single image wherethe 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 imageswhere the source attribute starts with this value right here. So this is you can alreadysee how powerful this is. Now, if we go ahead and refresh the page, obviously, we can’tsee anything because we didn’t add any styles.But I’m going to go ahead and add a quickstyle for you. Or you don’t need to know how to do this, Welcome back. So in this video, I am goingto be talking about the last type of selector. These are called attribute selectors. They’rea little bit complicated once you get started, but once we actually start using them, theybecome very easy to use. So first of all, what is an attribute selector? Well, as weknow, in HTML, we can actually add attributes to all of our elements. So for example, thisimage here has an attribute of source which tells the image tag where the source of theimages. But what we can actually do in CSS is use these to our advantage, we can selectcertain elements that for certain attributes and their values. So for example, let’s goahead and try and rewrite this subtitle class here. So we know if we go over here that allof our, all of our subtitle classes are used in h2.So what I want to do is actually rewritethis in terms of our attribute selector. So what we do is first start off with our tagname, which is h2. But then inside of some square brackets, what we do is type attributeis equal to value. Okay, so obviously, we’re not going to do it like this, we’re goingto have to select some sort of attribute. What this allows us to do is actually selectcertain things or certain elements based on their attributes. So in this clip, in thiscase, we want to select everything that has the attribute of class, and we want to makesure 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, wedon’t actually need them. Alright, so there we go. We have rewritten our class here. Butwe’ve read we’ve but we’ve written it in a way that allows us to select it based on itsact on the attribute of it itself. So let’s go ahead and refresh the page and see whathappens, you can see that this state exactly the same. Now nothing has changed. If I goahead and change this back to dot subtitle, just like that, refresh the page, you cansee nothing’s changed. So that’s pretty basic. Now, it doesn’t just have to be class, wecan select it based on many different things. So for example, if I wanted to select thisimage over here, I’m going to go over to the bottom, I could say image, image, and thenevery and then the source has to be equal to something.All right. So there we go. Nowwe’ve done that. But there’s actually more than one type of selector. Now, usually, thisis the basic one where you just equate one side to the other. But there’s actually manymore types of selectors, which allow you to kind of modify the attribute selectors andmake them much more powerful than they are right now. So how do we do this? Well, I’mgoing to be covering just a few of them with you today, and showing you how you can usethem. So we have two images on this page. Now both of them are located in this imagefolder. Is there do you think that there’s any way that we can select both of them inone go using an attribute selector? Well, there actually is. So here’s what we haveto do. First of all, let’s find the common factor between these two images. They bothare 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 actuallygo back and look, you can see that both images actually do contain this link here, whereverthe other images, there it is. So there we go. Now we’ve done that. But remember thatthis is direct equating this has to be equal to this. And unfortunately, neither of themare equal to that. So how do you think we fix this? Well, all we have to do is put acarrot behind the attribute, just like this. So what this says is every single image wherethe 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 imageswhere the source attribute starts with this value right here. So this is you can alreadysee how powerful this is. Now, if we go ahead and refresh the page, obviously, we can’tsee anything because we didn’t add any styles. But I’m going to go ahead and add a quickstyle for you. Or you don’t need to know how to do this, I’m actually going to make it a little bitmore 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 justone way, one of the selectors we can do, we can also change this to $1 sign, and in thiscase, 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, becausethis doesn’t apply. But there’s also another one that we can do, which is using a starthe 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 containsthis. It’s going to be there. So I’m going to go ahead and refresh and you can see nowthat works because both of them do contain this. So those are the three basic ones, butthere’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 attributeselector.So pretty much, if you don’t know this already, you can actually add multipleclasses to something in HTML. So I’m actually going to go ahead and add another class tothe 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 addmultiple classes or multiple arguments separated by white spaces or spaces, inside these insidethese attributes. Now, obviously, this is specific to some very small, a very smallnumber of attributes, where you can do this now just keep that in mind.For now, whatwe’re going to do is go forward and start using this. So I’m going to go ahead and selectanything that contains this, this class specifically. Now I couldn’t do you know, maybe the attributeselector where it ends in this or contains it, but there is another selector that wecan 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 valuein 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 andgive it a background. Now, again, you do not need to know what this is yet. I’m just tryingto vary up the properties a little bit here. So let’s go ahead and refresh the page andsee what happens, you can see that a green background has been added to this, I’m notgoing to try hovering over that it’s a little bit different compensate, but you can seethat a green background has been added to it. Now, this could be used for a using acontain attribute selector. But this is a little bit more specific. And it only worksfor things that are separated by whitespace. So if you want to isolate certain elementsthat 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 littlebit more complicated. And it’s very similar to the first step, the first one that we talkedabout, 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 isfine, every h2, where the class is equal either equal to directly article dash subtitle, orarticle dash subtitle with a dash. So, again, it does have to start with this. So it can’tjust be containing followed by a dash, it does have to start with this. So why wouldyou want to use something like this? Why can’t you just use the exact equality? Well, thisis a pretty basic site right here.Now, we’re not really doing anything complicated, orany multiple stylesheets or anything like that. But sometimes when you have want tohave multiple elements, or you want to build libraries, you can create multiple elementsthat are followed by an ID. So for example, just list them here. I’m gonna actually putthis 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 bitmore 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 justone way, one of the selectors we can do, we can also change this to $1 sign, and in thiscase, 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, becausethis doesn’t apply. But there’s also another one that we can do, which is using a starthe 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 containsthis. It’s going to be there. So I’m going to go ahead and refresh and you can see nowthat works because both of them do contain this. So those are the three basic ones, butthere’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 attributeselector. So pretty much, if you don’t know this already, you can actually add multipleclasses to something in HTML. So I’m actually going to go ahead and add another class tothe 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 addmultiple classes or multiple arguments separated by white spaces or spaces, inside these insidethese attributes.Now, obviously, this is specific to some very small, a very smallnumber of attributes, where you can do this now just keep that in mind. For now, whatwe’re going to do is go forward and start using this. So I’m going to go ahead and selectanything that contains this, this class specifically. Now I couldn’t do you know, maybe the attributeselector where it ends in this or contains it, but there is another selector that wecan 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 valuein 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 andgive it a background. Now, again, you do not need to know what this is yet. I’m just tryingto vary up the properties a little bit here. So let’s go ahead and refresh the page andsee what happens, you can see that a green background has been added to this, I’m notgoing to try hovering over that it’s a little bit different compensate, but you can seethat a green background has been added to it.Now, this could be used for a using acontain attribute selector. But this is a little bit more specific. And it only worksfor things that are separated by whitespace. So if you want to isolate certain elementsthat 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 littlebit more complicated. And it’s very similar to the first step, the first one that we talkedabout, 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 isfine, every h2, where the class is equal either equal to directly article dash subtitle, orarticle dash subtitle with a dash. So, again, it does have to start with this. So it can’tjust be containing followed by a dash, it does have to start with this. So why wouldyou want to use something like this? Why can’t you just use the exact equality? Well, thisis a pretty basic site right here. Now, we’re not really doing anything complicated, orany multiple stylesheets or anything like that. But sometimes when you have want tohave multiple elements, or you want to build libraries, you can create multiple elementsthat are followed by an ID. So for example, just list them here. I’m gonna actually putthis 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. Andyou’re probably also wondering, okay, why can’t you just use one or the other selectorslike something that starts with it? Well, sometimes this is contained in a chain, orsometimes 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’dwant to use something like this. And although it’s not used very commonly, it’s still veryimportant to know. Alright, so those are pretty much all of the advanced Arctic attributeselectors. Like I said, You aren’t going to use these very commonly. But again, it isgood 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 repositorywas posted at the beginning of the course. So you can go ahead and check that out ifyou want to download the files and work with them.But other than that, there we go. That’spretty much it for selectors now we can actually move on and start using CSS. Alright, let’smove on. has subtitle and then the dash in it. Andyou’re probably also wondering, okay, why can’t you just use one or the other selectorslike something that starts with it? Well, sometimes this is contained in a chain, orsometimes 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’dwant to use something like this. And although it’s not used very commonly, it’s still veryimportant to know. Alright, so those are pretty much all of the advanced Arctic attributeselectors. Like I said, You aren’t going to use these very commonly. But again, it isgood 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 repositorywas posted at the beginning of the course. So you can go ahead and check that out ifyou want to download the files and work with them. But other than that, there we go. That’spretty much it for selectors now we can actually move on and start using CSS. Alright, let’smove on. I’m not really going to talk a lot in thisvideo because there’s not really much to talk about, but this video and the next are veryimportant because right now you’re probably just piecing things together about the wholeway that we use CSS. And we’ve had to use a couple properties here and there, but youProbably don’t actually know what these brackets do, or how selectors work or how any of thisis actually put together.So that’s what I’m going to be doing in the next few videos isexplaining how all of this comes together. And once we learn that, we can actually moveon to the fun part, which is using CSS and styling this website. So first thing I wantto 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, itmight have been better if we use properties first. But in my opinion, it’s better thatyou learn selectors before you learn properties. Because if you learn selectors First, you’llbe able to understand the premise or the theory behind CSS, and how things work. Whereas ifyou just learn properties first, then most of your focus will be on how the propertieswork and not the selectors. And I feel that it’s much more important that you learn theselectors before the properties so that you can actually understand CSS and how it worksas a whole. So that aside, let’s move on to properties. Now, like I said, we’ve used thesea little bit in the past, we haven’t actually talked about them in detail. So this is aproperty. Now, they’re contained within selectors. And they pretty much define the way that CSSis used on what goes into the CSS. Now a selector is going to target the element. But the actualproperties are what give it its change.And what make it what it is, without the or withoutproperties than the selectors would be completely useless. So let’s go ahead and talk aboutthe parts of properties. Now first of all, a colon is always needed, you cannot use aproperty without a colon and a semi colon, the colon comes after the property. Now theproperty 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 differentways.And then next is the value. Now, most of the time, you can actually use multipletypes of values. But for something like color, there are very specific rules that you needto use for them. And we’re actually going to be learning those rules and how to usecolors 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 thevalue to the attribute that actually defines what’s changing. and the value actually givesit that change. So just keep that in mind. So that’s pretty much it for properties, it’svery 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, theactual property itself, which is kind of the guideline on what’s changing, followed bya colon, and then the value itself, which is going to be the change or the type of changethat happens in our our element.So what happens through our selector, and at the end of itall, you always put a semi colon, if we remove the semi colon, it’s not going to work. Soyeah, that’s pretty much it for properties. Let’s move on. So this is going to be thefinal video on or in this section, we’re not really going to be doing anything or stylingthe website. But for now, I just want to talk a little bit about a very important part ofCSS. Now, this is pretty much going to define the way that you look at CSS. And we’ve writtena lot of CSS code here.Well, we’re not really looking at properties yet. But we’ve covereda 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 knowhow these two work together. Now, I’ve talked a little bit about this in the past, but wehaven’t actually gone through it in detail. So that’s what I’m going to be doing in thisvideo. So first of all, if you look at all of the CSS code, we can see a pattern involvedhere. First of all, in every single one of these there are these curly braces. And ontop of that in every single one, there is some italicized text, which is due to thedevelopment tool that we’re using, but there’s some italicized text, and then some othertext here, and there’s always a colon and a semi colon. And on top of that before everyfirst 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 calledthe CSS a general rule.And it’s pretty much going to teach you how all CSS is supposedto look. So first of all, there’s always three parts to your I’m not really going to talk a lot in thisvideo because there’s not really much to talk about, but this video and the next are veryimportant because right now you’re probably just piecing things together about the wholeway that we use CSS. And we’ve had to use a couple properties here and there, but youProbably don’t actually know what these brackets do, or how selectors work or how any of thisis actually put together.So that’s what I’m going to be doing in the next few videos isexplaining how all of this comes together. And once we learn that, we can actually moveon to the fun part, which is using CSS and styling this website. So first thing I wantto 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, itmight have been better if we use properties first. But in my opinion, it’s better thatyou learn selectors before you learn properties. Because if you learn selectors First, you’llbe able to understand the premise or the theory behind CSS, and how things work. Whereas ifyou just learn properties first, then most of your focus will be on how the propertieswork and not the selectors.And I feel that it’s much more important that you learn theselectors before the properties so that you can actually understand CSS and how it worksas a whole. So that aside, let’s move on to properties. Now, like I said, we’ve used thesea little bit in the past, we haven’t actually talked about them in detail. So this is aproperty. Now, they’re contained within selectors. And they pretty much define the way that CSSis used on what goes into the CSS. Now a selector is going to target the element. But the actualproperties are what give it its change. And what make it what it is, without the or withoutproperties than the selectors would be completely useless.So let’s go ahead and talk aboutthe parts of properties. Now first of all, a colon is always needed, you cannot use aproperty without a colon and a semi colon, the colon comes after the property. Now theproperty 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 differentways. And then next is the value. Now, most of the time, you can actually use multipletypes of values. But for something like color, there are very specific rules that you needto use for them. And we’re actually going to be learning those rules and how to usecolors 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 thevalue to the attribute that actually defines what’s changing. and the value actually givesit that change.So just keep that in mind. So that’s pretty much it for properties, it’svery 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, theactual property itself, which is kind of the guideline on what’s changing, followed bya colon, and then the value itself, which is going to be the change or the type of changethat happens in our our element.So what happens through our selector, and at the end of itall, you always put a semi colon, if we remove the semi colon, it’s not going to work. Soyeah, that’s pretty much it for properties. Let’s move on. So this is going to be thefinal video on or in this section, we’re not really going to be doing anything or stylingthe website.But for now, I just want to talk a little bit about a very important part ofCSS. Now, this is pretty much going to define the way that you look at CSS. And we’ve writtena lot of CSS code here. Well, we’re not really looking at properties yet. But we’ve covereda 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 knowhow these two work together. Now, I’ve talked a little bit about this in the past, but wehaven’t actually gone through it in detail. So that’s what I’m going to be doing in thisvideo. So first of all, if you look at all of the CSS code, we can see a pattern involvedhere.First of all, in every single one of these there are these curly braces. And ontop of that in every single one, there is some italicized text, which is due to thedevelopment tool that we’re using, but there’s some italicized text, and then some othertext here, and there’s always a colon and a semi colon. And on top of that before everyfirst 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 calledthe CSS a general rule. And it’s pretty much going to teach you how all CSS is supposedto look. So first of all, there’s always three parts to your to your selector here, there is the selectoritself.There’s the curly braces, which actually represents something called a CSS block. Andthen there’s the properties. So first of all, let’s talk about the selector. Now, we allknow 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. Itcould have colons and pseudo selectors or it can just It looks something very plainlike this.But we all know that they do something different. And over the last few videos, we’vebeen 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 haveour selector over here, this could be anything, an element selectors, pseudo selector attributeselector like one of these. But for now, we have our selector. So this is going to targetsome 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. Andas we know, all of your styles have to go in between these two curly braces. So that’swhat 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 hereis this block is going to contain all of the styles that are then going to be targetedtowards our selector. And then of course, we have the properties. So all of these haveonly had one property where you can actually do more than one property. So a property lookslike this property, a colon, and then a value, and a semicolon. So the property is goingto be the name of the actual style, this can be color background, and we’re going to learna 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 differentways that you can use these different values. And they all depend on your property. So whatI didn’t show you is you can actually have more than one property.Now these can be inany 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 asyou want in here. So for example, if you wanted to style a subtitle, and you wanted to changethe font size, the color, and the background all at the same time, you don’t need to createthree separate CSS blocks, you can do it all in one. And that’s the real power of CSS isthat you don’t have you can keep your code concise and clean, without having to createall of these different blocks. So this is pretty much the general rule, you have tofollow this pretty much for all of the CSS you write using a selector and then differentproperties contained inside of a block. So like I said, we’re going to get much moreexperience with actually using CSS, as we delve more into CSS and learning all of thedifferent features it has to offer. Alright, let’s move on.To your selector here, there is the selectoritself. There’s the curly braces, which actually represents something called a CSS block. Andthen there’s the properties. So first of all, let’s talk about the selector. Now, we allknow 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. Itcould have colons and pseudo selectors or it can just It looks something very plainlike this. But we all know that they do something different. And over the last few videos, we’vebeen 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 haveour selector over here, this could be anything, an element selectors, pseudo selector attributeselector like one of these. But for now, we have our selector. So this is going to targetsome 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. Andas we know, all of your styles have to go in between these two curly braces. So that’swhat 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 hereis this block is going to contain all of the styles that are then going to be targetedtowards our selector.And then of course, we have the properties. So all of these haveonly had one property where you can actually do more than one property. So a property lookslike this property, a colon, and then a value, and a semicolon. So the property is goingto be the name of the actual style, this can be color background, and we’re going to learna 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 differentways that you can use these different values. And they all depend on your property.So whatI didn’t show you is you can actually have more than one property. Now these can be inany 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 asyou want in here. So for example, if you wanted to style a subtitle, and you wanted to changethe font size, the color, and the background all at the same time, you don’t need to createthree separate CSS blocks, you can do it all in one. And that’s the real power of CSS isthat you don’t have you can keep your code concise and clean, without having to createall of these different blocks. So this is pretty much the general rule, you have tofollow this pretty much for all of the CSS you write using a selector and then differentproperties contained inside of a block. So like I said, we’re going to get much moreexperience with actually using CSS, as we delve more into CSS and learning all of thedifferent features it has to offer.Alright, let’s move on. So this is the start of a new section. Andnow that we’ve learned all we need to know about selectors, we’re going to actually startstyling up our website and making it look good. So first of all, let’s just talk aboutcoloring. In general, I mean, what is coloring? And what are we supposed to do with it. Soas we know, we already have a bunch of colors here. And they all look fine. But what we’reactually trying to do here is color our website in a way that makes it look modern, and appealingto users.So we’re going to be learning a bunch of different techniques that you canuse to color your website. Now we’ve already used one in the past, and it’s a very commonone. And that is, of course, the color property. Now we’re going to be talking more about thisin the next video and using it in depth. But first thing I want to talk about is the differenttypes of colors, because there’s actually more than one. So first of all, we’ve allused 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 moreto 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 youabout is the three different types of colors and how they work. So the first one is obviouslythe CSS color codes or names. And what they do is is pretty much given a name, and theyeach 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. Andyou can also use them for you know, maybe quick fixes or trying to just try out differentcolors. But once you get into the really specific detailed web design, and once you start producingyour website properly, you’re going to want more than just the color CSS gives you. SoI’ve actually attached to the lecture resources, this website here, you have a bunch of differentCSS color codes. And you can see that there’s actually a huge range of them, we only usethe basic ones that are quite vibrant and they really hit the eyes very hard.But youcan see there’s actually a lot more than what we just use. The only problem is nobody wantsto memorize all of these different names. So what we’re actually going to be doing islearning how to use these two, which are the ones I’m going to be talking about in thisvideo. 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’tneed this for now. So I’m going to discipline full screen. So this is a color picker thatI found on Google, you can go ahead and search it anywhere. But I like using Google’s providedone, because it provides you with both the hex code and the RGB code. Don’t worry, we’lltalk about those in just a second. So first of all, you can slide up and down this thingand choose whichever color you want. And you can see that these two codes change.So whatdo they actually mean? Well, first, let’s talk about the hex code. So we all know thatwhen you’re normally using numbers, you range from zero to nine. So any given number inthis new in that numeral system can be made up of 012, and all the way up to nine. Soin that case, there’s 10 possible combinations. But in hex code, there’s actually 16 differentpossible 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 wewanted to, suppose B, actually stands for 12, because it goes zero to nine, and thena 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 thisvideo, because that goes all the way down into computer science. And we’re not reallylooking 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 youhave six digits. So each one can have 16 possible combinations. But as we know, color any coloris made up of either red, green, or blue, at least on the computer for the standardcolor palette.So it’s made up of red, green, and blue. Now basically, this hex code issplit up into three two digit pairs. So the first pair of numbers is meant to representthe amount of red in the color, the second, the amount of green, and the third, the amountof blue, RGB. And these parents can range from 00, which means none of that color toF F, which is the highest value. Remember, hexadecimal goes from zero to f. So I’m justgoing to choose something very basic here, like a standard blue.You can see here thatthis is the purest blue that you can get. Pretty much what this is saying is the firsttwo is 00, which means there’s no red, the second pair, or Yeah, the second pair is also00, which means no green. But then the third is F F, which means all blue. So this is prettyeasy. So if we go to something like white, for example, this would have f, f, f, f, ff, 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 youget into some of these more complicated colors.Again, we don’t really use hexadecimal innormal in normal use, when we’re creating colors or writing code, we don’t really usethese numbers. So it’s actually much easier to work with RGB codes. So RGB is a littlebit different in the style that it’s written. But it all represents the same concept. Prettymuch there are three numbers here. And these aren’t hexadecimal numbers, these are justnormal numbers, you have three numbers, the first for red, the second for green, and thethird for blue, just like this one, except in this case, the numbers can go from zeroto 255, zero being the minimum and 255 being the maximum. So this is actually much easierto read. Let’s go back to our blue here. And I’m actually just going to write the codehere. So you can see that there’s zero red, zero blue, and 255. Sorry, is your red zerogreen, and 255 blue, which is the maximum. And obviously, you can see that once we goback 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 largeamount of green and large amounts of blue, and therefore it should theoretically be acold color. Now again, you don’t really need to know how to construct these QR codes fromyour head, they’re quite hard to understand. So what I would recommend is when you’re designingthese colors, or designing these, these websites, I would recommend you just go and use a colorpicker, too much easy too much, much easier to decide. And you can also get a lot moreexperience hands on experience with these colors rather than memorizing all the theorybehind them.So both of these will work fine and in the next video I’m going to show youhow to actually use these codes in our in our website and actually use them to styleand color text. Alright, let’s move on. So this is the start of a new section. Andnow that we’ve learned all we need to know about selectors, we’re going to actually startstyling up our website and making it look good. So first of all, let’s just talk aboutcoloring. In general, I mean, what is coloring? And what are we supposed to do with it. Soas we know, we already have a bunch of colors here. And they all look fine.But what we’reactually trying to do here is color our website in a way that makes it look modern, and appealingto users. So we’re going to be learning a bunch of different techniques that you canuse to color your website. Now we’ve already used one in the past, and it’s a very commonone. And that is, of course, the color property. Now we’re going to be talking more about thisin the next video and using it in depth. But first thing I want to talk about is the differenttypes of colors, because there’s actually more than one. So first of all, we’ve allused 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 moreto 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 youabout is the three different types of colors and how they work. So the first one is obviouslythe CSS color codes or names. And what they do is is pretty much given a name, and theyeach 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. Andyou can also use them for you know, maybe quick fixes or trying to just try out differentcolors. But once you get into the really specific detailed web design, and once you start producingyour website properly, you’re going to want more than just the color CSS gives you. SoI’ve actually attached to the lecture resources, this website here, you have a bunch of differentCSS color codes.And you can see that there’s actually a huge range of them, we only usethe basic ones that are quite vibrant and they really hit the eyes very hard. But youcan see there’s actually a lot more than what we just use. The only problem is nobody wantsto memorize all of these different names. So what we’re actually going to be doing islearning how to use these two, which are the ones I’m going to be talking about in thisvideo. 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’tneed this for now. So I’m going to discipline full screen. So this is a color picker thatI found on Google, you can go ahead and search it anywhere. But I like using Google’s providedone, because it provides you with both the hex code and the RGB code. Don’t worry, we’lltalk about those in just a second.So first of all, you can slide up and down this thingand choose whichever color you want. And you can see that these two codes change. So whatdo they actually mean? Well, first, let’s talk about the hex code. So we all know thatwhen you’re normally using numbers, you range from zero to nine. So any given number inthis new in that numeral system can be made up of 012, and all the way up to nine.Soin that case, there’s 10 possible combinations. But in hex code, there’s actually 16 differentpossible 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 wewanted to, suppose B, actually stands for 12, because it goes zero to nine, and thena 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 thisvideo, because that goes all the way down into computer science. And we’re not reallylooking 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 youhave six digits. So each one can have 16 possible combinations. But as we know, color any coloris made up of either red, green, or blue, at least on the computer for the standardcolor palette.So it’s made up of red, green, and blue. Now basically, this hex code issplit up into three two digit pairs. So the first pair of numbers is meant to representthe amount of red in the color, the second, the amount of green, and the third, the amountof blue, RGB. And these parents can range from 00, which means none of that color toF F, which is the highest value. Remember, hexadecimal goes from zero to f. So I’m justgoing to choose something very basic here, like a standard blue. You can see here thatthis is the purest blue that you can get. Pretty much what this is saying is the firsttwo is 00, which means there’s no red, the second pair, or Yeah, the second pair is also00, which means no green. But then the third is F F, which means all blue. So this is prettyeasy. So if we go to something like white, for example, this would have f, f, f, f, ff, 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 youget into some of these more complicated colors. Again, we don’t really use hexadecimal innormal in normal use, when we’re creating colors or writing code, we don’t really usethese numbers. So it’s actually much easier to work with RGB codes. So RGB is a littlebit different in the style that it’s written.But it all represents the same concept. Prettymuch there are three numbers here. And these aren’t hexadecimal numbers, these are justnormal numbers, you have three numbers, the first for red, the second for green, and thethird for blue, just like this one, except in this case, the numbers can go from zeroto 255, zero being the minimum and 255 being the maximum. So this is actually much easierto read. Let’s go back to our blue here. And I’m actually just going to write the codehere. So you can see that there’s zero red, zero blue, and 255. Sorry, is your red zerogreen, and 255 blue, which is the maximum. And obviously, you can see that once we goback 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 largeamount of green and large amounts of blue, and therefore it should theoretically be acold color.Now again, you don’t really need to know how to construct these QR codes fromyour head, they’re quite hard to understand. So what I would recommend is when you’re designingthese colors, or designing these, these websites, I would recommend you just go and use a colorpicker, too much easy too much, much easier to decide. And you can also get a lot moreexperience hands on experience with these colors rather than memorizing all the theorybehind them. So both of these will work fine and in the next video I’m going to show youhow to actually use these codes in our in our website and actually use them to styleand color text. Alright, let’s move on. So in this video, I am going to be startingto color and style our website.So we’re going to go through and use the selector skillsthat we’ve learned in the previous section to actually go through and start adding somecolor. On top of that, we’re going to be using the skills we learned about hex code and RGBcolor codes to vary up our style or method of coloring things. Because in the past, likeI’ve said, we’ve just used some basic techniques with CSS color codes. And now we’re goingto be working with our own custom colors. So first of all, let’s go ahead and startadding some classes to this website to get it set up for our styling. So first thingI did is actually started from a clean slate because it was getting quite messy beforeand I thought that it would be better if we started from scratch.So the first thing I’mgoing to do is go ahead and add a class or an ID actually, I think would be better toour 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’mgoing 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 writingit down. There we go. So the next thing I want to do is go ahead and add some classesto this list here just for convenience. So I’m going to go ahead and add a class fora list item. Now, obviously, we’re not going to use all of these in one go. But I was justconsidering to add them so that when we get into it, we can actually go ahead and usethem 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 ourtable 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 inputshere. So I’m going to go ahead and add some classes. So class is form input. And thisis actually quite commonplace to add, or write class names and Id names with these. So withdashes, instead of you know snake case, which is using capital letters in like that. It’sjust 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 oursubtitles, I’m gonna go ahead and do that. There we go. Just copy that. And over to ourother subtitles. And once we’re done with that, we’ll move on and start coloring ourtext. Right, there we go. So everything’s looking good. That means nothing has gonewrong. Let’s go ahead and start styling our text.So first thing I want to do is styleour header here. So obviously, you don’t really want to go crazy with text colors. It’s morefor backgrounds. But I think we’ll just experiment a little bit for this video with some of ourcolors. So first of all, I’m going to need to select it. This is the first part of ourgeneral rule. So because it’s an ID, I’m going to go hash, and then title, open up our blockwith our curly braces. And now we’re going to start writing our property. So if you don’tknow this already, the property is going to be color. This is the text of the the colorof 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, likesteel blue, which is a CSS color code.But now let’s go ahead and challenge ourselvesand 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 somethingtoo light so that it’s hard on the eyes. Now I think a color like this is good. Now howwould we actually implement this? Well, we just copy and paste it. And if you’re thinkingthat that’s the right way, well, then you’re right, it’s actually very easy.All you haveto do is copy your hex or RGB code and paste it into So in this video, I am going to be startingto color and style our website. So we’re going to go through and use the selector skillsthat we’ve learned in the previous section to actually go through and start adding somecolor. On top of that, we’re going to be using the skills we learned about hex code and RGBcolor codes to vary up our style or method of coloring things. Because in the past, likeI’ve said, we’ve just used some basic techniques with CSS color codes. And now we’re goingto be working with our own custom colors. So first of all, let’s go ahead and startadding some classes to this website to get it set up for our styling. So first thingI did is actually started from a clean slate because it was getting quite messy beforeand I thought that it would be better if we started from scratch.So the first thing I’mgoing to do is go ahead and add a class or an ID actually, I think would be better toour 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’mgoing 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 writingit down.There we go. So the next thing I want to do is go ahead and add some classesto this list here just for convenience. So I’m going to go ahead and add a class fora list item. Now, obviously, we’re not going to use all of these in one go. But I was justconsidering to add them so that when we get into it, we can actually go ahead and usethem 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 ourtable 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 inputshere.So I’m going to go ahead and add some classes. So class is form input. And thisis actually quite commonplace to add, or write class names and Id names with these. So withdashes, instead of you know snake case, which is using capital letters in like that. It’sjust 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 oursubtitles, I’m gonna go ahead and do that. There we go. Just copy that. And over to ourother subtitles. And once we’re done with that, we’ll move on and start coloring ourtext. Right, there we go. So everything’s looking good. That means nothing has gonewrong. Let’s go ahead and start styling our text.So first thing I want to do is styleour header here. So obviously, you don’t really want to go crazy with text colors. It’s morefor backgrounds. But I think we’ll just experiment a little bit for this video with some of ourcolors. So first of all, I’m going to need to select it. This is the first part of ourgeneral rule. So because it’s an ID, I’m going to go hash, and then title, open up our blockwith our curly braces. And now we’re going to start writing our property. So if you don’tknow this already, the property is going to be color.This is the text of the the colorof 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, likesteel blue, which is a CSS color code. But now let’s go ahead and challenge ourselvesand 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 somethingtoo light so that it’s hard on the eyes. Now I think a color like this is good. Now howwould we actually implement this? Well, we just copy and paste it. And if you’re thinkingthat that’s the right way, well, then you’re right, it’s actually very easy. All you haveto do is copy your hex or RGB code and paste it into into here just like that.Now if I go aheadand refresh the page, you can see that that color is being reflected on our title. NowI would recommend instead of using your hex code, go ahead and add an RGB code. And I’lltell you why later in this section, but for now, just think that this is better becauseit’s a little bit more flexible, and you can change it easily. So on top of that, use anRGB color code really allows you to mess around with the colors in a way that if you didn’tknow hex code you wouldn’t be able to. So for example, let’s say I wanted to increasethe 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 changedby adding more blue. By doing it, we’ve kind of mixed around the colors and created thispinkish color. Imagine you’re working with a color palette, instead of a digital kindof weird color mixer. Think of you have a giant pile of red, green and blue.And whatyou’re doing here is changing all of the proportions to get just the color you want. So let’s goahead and change this color back to nine. There we go. Now we have our orange colorthere. So let’s go ahead and also style up our, our subtitles here. And one common thingthat you do with hierarchies of text. So for example, titles and then sub titles and paragraphis usually your titles or your high up on the hierarchy are going to have very darkcolors. And then your sub titles are things that are lower on the hierarchy are goingto have around the same color scheme, but they’re going to be a little lighter.So whatI’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 thecolor picker because I could really see what’s going on. So I’m going to choose somethinga 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 somethingaround here. So we’re going to go ahead and copy the code. Now let’s go ahead and addour selector. So I’m going to go dot subtitle, because remember, it’s a class, then I’m goingto use my property color and paste in our RGB color code. Let’s go ahead and refreshthe page. And you can see that our subtitles have been colored down. So there we know everythingis working really well for now.And we’re starting to get the hang of this. Now I recommendyou go ahead and try this on your own. Again, the whole point is to be styling a websiteas 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, youcould always go to another color picker on search for one. But you can go ahead chooseyour own colors. If you don’t like orange, you can go with blue, maybe something a littlecolder. It’s totally up to you just get some practice with using colors on different typesof 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 aheadand refresh the page, you can see that that color is being reflected on our title. NowI would recommend instead of using your hex code, go ahead and add an RGB code. And I’lltell you why later in this section, but for now, just think that this is better becauseit’s a little bit more flexible, and you can change it easily.So on top of that, use anRGB color code really allows you to mess around with the colors in a way that if you didn’tknow hex code you wouldn’t be able to. So for example, let’s say I wanted to increasethe 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 changedby adding more blue.By doing it, we’ve kind of mixed around the colors and created thispinkish color. Imagine you’re working with a color palette, instead of a digital kindof weird color mixer. Think of you have a giant pile of red, green and blue. And whatyou’re doing here is changing all of the proportions to get just the color you want. So let’s goahead and change this color back to nine. There we go. Now we have our orange colorthere. So let’s go ahead and also style up our, our subtitles here. And one common thingthat you do with hierarchies of text. So for example, titles and then sub titles and paragraphis usually your titles or your high up on the hierarchy are going to have very darkcolors.And then your sub titles are things that are lower on the hierarchy are goingto have around the same color scheme, but they’re going to be a little lighter. So whatI’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 thecolor picker because I could really see what’s going on. So I’m going to choose somethinga 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 somethingaround here. So we’re going to go ahead and copy the code. Now let’s go ahead and addour selector. So I’m going to go dot subtitle, because remember, it’s a class, then I’m goingto use my property color and paste in our RGB color code.Let’s go ahead and refreshthe page. And you can see that our subtitles have been colored down. So there we know everythingis working really well for now. And we’re starting to get the hang of this. Now I recommendyou go ahead and try this on your own. Again, the whole point is to be styling a websiteas 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, youcould always go to another color picker on search for one.But you can go ahead chooseyour own colors. If you don’t like orange, you can go with blue, maybe something a littlecolder. It’s totally up to you just get some practice with using colors on different typesof 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 coveringbackground colors. Now, I know it’s a little bit intimidating considering we’ve never actuallydone backgrounds before.But it’s very similar to colors in the values that he uses. Theonly difference is is what it’s actually styling. So I’m going to be teaching you how to createbackgrounds on your website. Now, obviously, we’re not going to go all crazy and startcreating backgrounds for everything. Because we haven’t gotten into we haven’t gotten intolayout yet. And without layout backgrounds aren’t really usable. Because sometimes, especiallywith colors, it just doesn’t really look that good. So what we’re actually going to do isgo through and just practice with our background for now. So the first thing I need to do isactually look for something to create a background on. And we all know what a background on textlooked like. Now, we don’t actually know why the background goes all the way to the edgeyet. We haven’t gotten we haven’t gotten into layout yet. Once we do, you’ll know how tochange that. For now though, I think it’s really fitting to go through and style thiswhole page. So firstly, what selector Do we need to use? Considering that we’re tryingto 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 lookat a look at our HTML page, you can see that all of our text here is contained inside ofour body tag.So the easiest way to select this, because again, there’s only one of ourbody, we can just use an element selector. So I’m going to go ahead and select it withbody. So usually, you would actually put tags, elements selectors at the top. So I’m goingto go ahead and do that now. Open up our block using those curly braces. And now we can addour background. So first of all, the property used to Select and Color background is calledbackground color. But we’re not actually going to use that because background is much easierconsidering 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 togo ahead and select that as my property. So from now, you can just go ahead and add yourvalue. Similarly to color. You can use an RGB code, hex code or a CSS color even ifyou want so I’m going to go ahead and set it as red And just worn your eyes becauseit’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 goahead 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 abouta light turquoise or light blue, something like this.So now I’m going to go ahead andcopy my RGB code. And here, I’m going to go ahead and add my background property and pastein my RGB code. Now if we go ahead and refresh the page, you can see we have this reallynice 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 ita little bit. So the easy way to do this with RGB is to just go ahead and drop all of thevalues this way, you stay in the same proportions, but you’re just darkening everything.So I’mgoing to go ahead and darken our subtitles. So I’m going to reduce everything by 20 orso. So this becomes let’s just say 200. And this becomes 148. And obviously, these don’thave 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 tostyle 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’tlook that good, but it works perfectly fine. So there we go. That’s pretty much how toadd color to backgrounds. And in the next video, I’m going to be teaching you how toactually change the type of background that you’re using.Because obviously, sometimesyou want to actually change the background and use maybe a custom image, or you wantto link to an image online. So I’m going to be teaching you how to do that in the nextvideo. 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 coveringbackground colors. Now, I know it’s a little bit intimidating considering we’ve never actuallydone backgrounds before.But it’s very similar to colors in the values that he uses. Theonly difference is is what it’s actually styling. So I’m going to be teaching you how to createbackgrounds on your website. Now, obviously, we’re not going to go all crazy and startcreating backgrounds for everything. Because we haven’t gotten into we haven’t gotten intolayout yet. And without layout backgrounds aren’t really usable. Because sometimes, especiallywith colors, it just doesn’t really look that good. So what we’re actually going to do isgo through and just practice with our background for now. So the first thing I need to do isactually look for something to create a background on. And we all know what a background on textlooked like. Now, we don’t actually know why the background goes all the way to the edgeyet. We haven’t gotten we haven’t gotten into layout yet. Once we do, you’ll know how tochange that.For now though, I think it’s really fitting to go through and style thiswhole page. So firstly, what selector Do we need to use? Considering that we’re tryingto 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 lookat a look at our HTML page, you can see that all of our text here is contained inside ofour body tag.So the easiest way to select this, because again, there’s only one of ourbody, we can just use an element selector. So I’m going to go ahead and select it withbody. So usually, you would actually put tags, elements selectors at the top. So I’m goingto go ahead and do that now. Open up our block using those curly braces. And now we can addour background. So first of all, the property used to Select and Color background is calledbackground color. But we’re not actually going to use that because background is much easierconsidering 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 togo ahead and select that as my property. So from now, you can just go ahead and add yourvalue. Similarly to color. You can use an RGB code, hex code or a CSS color even ifyou want so I’m going to go ahead and set it as red And just worn your eyes becauseit’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 goahead 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 abouta light turquoise or light blue, something like this. So now I’m going to go ahead andcopy my RGB code.And here, I’m going to go ahead and add my background property and pastein my RGB code. Now if we go ahead and refresh the page, you can see we have this reallynice 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 ita little bit. So the easy way to do this with RGB is to just go ahead and drop all of thevalues this way, you stay in the same proportions, but you’re just darkening everything.So I’mgoing to go ahead and darken our subtitles. So I’m going to reduce everything by 20 orso. So this becomes let’s just say 200. And this becomes 148. And obviously, these don’thave 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 tostyle 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’tlook that good, but it works perfectly fine.So there we go. That’s pretty much how toadd color to backgrounds. And in the next video, I’m going to be teaching you how toactually change the type of background that you’re using. Because obviously, sometimesyou want to actually change the background and use maybe a custom image, or you wantto link to an image online. So I’m going to be teaching you how to do that in the nextvideo. 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 lookingat 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 tomove on to an alternate way of creating backgrounds. And that’s through background images. So rightnow we know the basics of coloring, so we were able to call it a text. Now with ourown 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 islooking at different types of backgrounds themselves. So in this case, we’re going tobe 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 actuallylink to an image. So I’m going to show you a really easy way of doing this, the firstthing we’re going to need is an image. And for this method, you can actually use imageswith from the internet without having to download them using URLs. So show you how to do thatnow. So if I go ahead and search for a landscape image, just like this. And now we want tolook for a sort of low resolution one, we don’t want to do too big, I think this willbe pretty good, it’s going to look a little bit weird, but just for this purpose, we’regoing to use it.So now what we need to do is get the URL link to this image. So youcan do this by right clicking on it. And then you’re going to go ahead and click on copyimage address. Okay, so what this is going to do is get the actual link to the imageitself. Right now this link is going to Google Images. But what we actually need is the linkto the image itself. So there we go, we have that set up. Now we need to go ahead and addthe 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 calledfunctions. Now, we’re not really going to go very in depth about them. But pretty muchwhat they do is they take a few inputs, they process them, and they give an output. Sothe first example of a function that we’ve already used is this right here, it takesthree inputs A red, a green, and a blue, does some magic behind the scenes, and then givesus a color back.So what we’re going to do here is use another function called URL. Sowhat this is going to do is take in the link or to the URL, and then it’s going to findthat image and set it. So in quotations, it doesn’t have to be in quotations, just rememberthat you’re going to paste in your image. So remember, I just copied this from the imageaddress. And now we have it here. So we have the image. Let’s go ahead and check it outon our website. So there we go. You can see that whoops, you can see that our image isset here. Now there’s a few issues, obviously with the repetition and everything, but we’renot going to be covering those until maybe in a few videos.Where we talk about someother background properties. But there we go for now, we’ve actually set our image andnow it is set on our website. So when you think of a URL, you’re most likely thinkingof linking to google images or some sort of web URL. But that’s not the only type of URLthat we can use a URL is just a link to an endpoint. This right here is a URL, it’s justnot linking to a website, it’s instead linking to a local picture, or stylesheet, or whateveryou’re trying to link to. So what I’m actually going to show you is that we can use theselocal URLs in here. So I’m going to erase this a little bit longer. Now, I’m going topaste in our new URL here, go ahead and refresh the page. And now you can see that it stillworks 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. Butthere’s actually another way that you can set background images. And this goes the samefor background colors. So why I like to use the background property is because you canset anything you want in one go. You can set it as a color as an image, and he do manyother things. But instead, you can actually use very specific properties that work forspecific 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. NowI’m going to go ahead and erase this and show you that it still works perfectly fine. Soyou see I refresh the page, and it’s still working.And this goes the same for for backgroundcolors, you can go ahead and add a background color, and then add some random RGB valuejust going to go for a full black for now. And you can see that it still works. The onlyproblem is if I go ahead and paste in that URL here. Oh, what if I go ahead and pastein that URL here, So in this video, we’re going to be lookingat 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 tomove on to an alternate way of creating backgrounds.And that’s through background images. So rightnow we know the basics of coloring, so we were able to call it a text. Now with ourown 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 islooking at different types of backgrounds themselves. So in this case, we’re going tobe 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 actuallylink to an image. So I’m going to show you a really easy way of doing this, the firstthing we’re going to need is an image. And for this method, you can actually use imageswith from the internet without having to download them using URLs. So show you how to do thatnow. So if I go ahead and search for a landscape image, just like this.And now we want tolook for a sort of low resolution one, we don’t want to do too big, I think this willbe pretty good, it’s going to look a little bit weird, but just for this purpose, we’regoing to use it. So now what we need to do is get the URL link to this image. So youcan do this by right clicking on it. And then you’re going to go ahead and click on copyimage address. Okay, so what this is going to do is get the actual link to the imageitself.Right now this link is going to Google Images. But what we actually need is the linkto the image itself. So there we go, we have that set up. Now we need to go ahead and addthe 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 calledfunctions. Now, we’re not really going to go very in depth about them. But pretty muchwhat they do is they take a few inputs, they process them, and they give an output. Sothe first example of a function that we’ve already used is this right here, it takesthree inputs A red, a green, and a blue, does some magic behind the scenes, and then givesus a color back. So what we’re going to do here is use another function called URL. Sowhat this is going to do is take in the link or to the URL, and then it’s going to findthat image and set it. So in quotations, it doesn’t have to be in quotations, just rememberthat you’re going to paste in your image. So remember, I just copied this from the imageaddress.And now we have it here. So we have the image. Let’s go ahead and check it outon our website. So there we go. You can see that whoops, you can see that our image isset here. Now there’s a few issues, obviously with the repetition and everything, but we’renot going to be covering those until maybe in a few videos. Where we talk about someother background properties. But there we go for now, we’ve actually set our image andnow it is set on our website. So when you think of a URL, you’re most likely thinkingof linking to google images or some sort of web URL.But that’s not the only type of URLthat we can use a URL is just a link to an endpoint. This right here is a URL, it’s justnot linking to a website, it’s instead linking to a local picture, or stylesheet, or whateveryou’re trying to link to. So what I’m actually going to show you is that we can use theselocal URLs in here. So I’m going to erase this a little bit longer. Now, I’m going topaste in our new URL here, go ahead and refresh the page. And now you can see that it stillworks 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. Butthere’s actually another way that you can set background images. And this goes the samefor background colors. So why I like to use the background property is because you canset anything you want in one go.You can set it as a color as an image, and he do manyother things. But instead, you can actually use very specific properties that work forspecific 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. NowI’m going to go ahead and erase this and show you that it still works perfectly fine.Soyou see I refresh the page, and it’s still working. And this goes the same for for backgroundcolors, you can go ahead and add a background color, and then add some random RGB valuejust going to go for a full black for now. And you can see that it still works. The onlyproblem is if I go ahead and paste in that URL here. Oh, what if I go ahead and pastein that URL here, just gonna link to it straight. So if I goahead and add the URL to the color, it’s not going to work, because this is specificallyfor colors.Alright, so there we go. That’s pretty much it. For background images, it’squite easy to use, all you have to do is make sure that you have a working URL, you canjust 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 backgroundimage, and you should be good to go. Alright, let’s move on. So in this video, we’re goingto be looking at some more background properties. Now we’re not going to be looking at all ofthem. Because most of these aren’t really useful. And they’re not really used in everydaylife. But what I’m going to be doing is showing you the main properties that you can use withbackgrounds that can really change how your backgrounds look. So we’re actually goingto be covering covering only two in this video. So that’s background size, and backgroundrepeat. So the first thing I want to cover is background repeat, because I think it’sthe most important.So you can see we have our background there, I already set the heightand width, don’t worry about these values or the properties or anything. Again, we’lltalk about those later in this in this course. But for now, you can see that we have ourbackground 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 seewhat 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 imageis being repeated, so that it can fill up all of the content space. Now this is doneby 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’llautomatically 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 ofstyling.So you can see that this image is big enough. And remember, because this isa direct image, what’s happening here is we have an image tag, and then the image is justbeing 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 isthink of it as a container. It has a width and height of this much. But then this isan empty box. All we’re doing is filling it with this image. So instead of plugging theimage straight in, we’re just filling an empty box with these images. And of course, theimage isn’t big enough to fill it. So what we have to do is or what HTML actually doesby 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’regoing to do is go ahead and say background background, dash repeat Pretty much you caneither set this to no repeat, which is the default. Or you Oh, sorry, no repeat is thedefault. Yeah. So repeat is going to be the default value. But if you want to set it tono repeat, this is pretty much going to remove that repeating property. Now, although itmight 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 resizedeverything. But if I go ahead and add a background color to this, like that, and I’m just gonnasay red.And I go ahead and refresh the page, you can see what’s actually happening hereis that we have the image, and it’s not taking up the full image if I go ahead and set thisto repeat. just gonna link to it straight. So if I goahead and add the URL to the color, it’s not going to work, because this is specificallyfor colors. Alright, so there we go. That’s pretty much it. For background images, it’squite easy to use, all you have to do is make sure that you have a working URL, you canjust 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 backgroundimage, and you should be good to go. Alright, let’s move on. So in this video, we’re goingto be looking at some more background properties. Now we’re not going to be looking at all ofthem.Because most of these aren’t really useful. And they’re not really used in everydaylife. But what I’m going to be doing is showing you the main properties that you can use withbackgrounds that can really change how your backgrounds look. So we’re actually goingto be covering covering only two in this video. So that’s background size, and backgroundrepeat. So the first thing I want to cover is background repeat, because I think it’sthe most important. So you can see we have our background there, I already set the heightand width, don’t worry about these values or the properties or anything. Again, we’lltalk about those later in this in this course. But for now, you can see that we have ourbackground 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 seewhat 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 imageis being repeated, so that it can fill up all of the content space.Now this is doneby 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’llautomatically 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 ofstyling. So you can see that this image is big enough. And remember, because this isa direct image, what’s happening here is we have an image tag, and then the image is justbeing 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 isthink of it as a container. It has a width and height of this much. But then this isan empty box. All we’re doing is filling it with this image. So instead of plugging theimage straight in, we’re just filling an empty box with these images. And of course, theimage isn’t big enough to fill it.So what we have to do is or what HTML actually doesby 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’regoing to do is go ahead and say background background, dash repeat Pretty much you caneither set this to no repeat, which is the default. Or you Oh, sorry, no repeat is thedefault.Yeah. So repeat is going to be the default value. But if you want to set it tono repeat, this is pretty much going to remove that repeating property. Now, although itmight 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 resizedeverything. But if I go ahead and add a background color to this, like that, and I’m just gonnasay red. And I go ahead and refresh the page, you can see what’s actually happening hereis that we have the image, and it’s not taking up the full image if I go ahead and set thisto 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’sone of my favorite CSS named colors. So there we go. Now that we know how to adjust therepet repetition of these backgrounds, why don’t we go ahead and actually talk aboutbackground size, because that’s the important one, that’s going to allow us to fill thiswhole 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 aproperty called background size. So I’m going to go ahead and actually erase this, we don’tneed it for now, just like that. So you can actually go ahead and set the size of thebackground. And remember, depending on whether you set it to repeat or not, this is goingto 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 spaceis filled up. Now, obviously, it’s going to be pretty hard to get this exactly at thedimensions. If I actually go ahead and set this to 400 pixels. And 70%, we didn’t reallytalk about percentages much, you can see it’s still repeating. So it’s very hard to getthis working in the way that you want it to cover the whole thing exactly, even if youuse 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 nowthe image takes up the full width. And although it sacrifices the quality, pretty much what’shappening here is this cover value is going to resize the image based on the dimensionsjust right to that it fits this whole thing. There’s also one more keyword that you canuse, which is called contain. But the only problem is with contain is it’s going to resizeit as much as possible. The only problem is it trying to resize it without messing withthe proportions. So let’s say that this is maybe a two to one ratio.So for every twowidths, there’s one height. So let’s just use that as an example. Basically, what’shappening here is that no matter how much you stretch this, you cannot go the full waywithout stretching it off the screen. So contain doesn’t do that. Instead, it just repeatsthe image. Now if we actually change this back to cover, you can see that it does cutoff part of that image because it just stretches it out the full way until the image coloror the background covers the full width. So there you go. That’s pretty much it for backgroundsize. Now I would recommend going instead not with the sizing option pixels, but insteadusing 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 mainother 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 thesetwo. 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’sone of my favorite CSS named colors. So there we go. Now that we know how to adjust therepet repetition of these backgrounds, why don’t we go ahead and actually talk aboutbackground size, because that’s the important one, that’s going to allow us to fill thiswhole 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 aproperty called background size. So I’m going to go ahead and actually erase this, we don’tneed it for now, just like that. So you can actually go ahead and set the size of thebackground.And remember, depending on whether you set it to repeat or not, this is goingto 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 spaceis filled up.Now, obviously, it’s going to be pretty hard to get this exactly at thedimensions. If I actually go ahead and set this to 400 pixels. And 70%, we didn’t reallytalk about percentages much, you can see it’s still repeating. So it’s very hard to getthis working in the way that you want it to cover the whole thing exactly, even if youuse 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 nowthe image takes up the full width. And although it sacrifices the quality, pretty much what’shappening here is this cover value is going to resize the image based on the dimensionsjust right to that it fits this whole thing. There’s also one more keyword that you canuse, which is called contain. But the only problem is with contain is it’s going to resizeit as much as possible. The only problem is it trying to resize it without messing withthe proportions.So let’s say that this is maybe a two to one ratio. So for every twowidths, there’s one height. So let’s just use that as an example. Basically, what’shappening here is that no matter how much you stretch this, you cannot go the full waywithout stretching it off the screen. So contain doesn’t do that. Instead, it just repeatsthe image. Now if we actually change this back to cover, you can see that it does cutoff part of that image because it just stretches it out the full way until the image coloror the background covers the full width. So there you go. That’s pretty much it for backgroundsize.Now I would recommend going instead not with the sizing option pixels, but insteadusing 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 mainother 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 thesetwo. Alright, let’s move on. So in this video, we’re going to be talkinga little bit more about RGB colors. But we’re actually going to be adding one more featureto 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 improvethe quality of our colors.And that’s a or alpha. So right now you can see we have anRGB color code. But what if we wanted to add this mysterious alpha component? What willwe do? So I’m actually going to go ahead and use it as the background. Well, the firstthing you need to do is change the RGB name to RGB a. And in this way, we’ve completelychanged 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 greenSorry, blue, keep getting those two mixed up.After the final value, you’re gonna addanother comma. And here is where you can put any value between zero and one. So now thatyou know what you can do with it, alpha is pretty much the transparency or opacity ofa color zero, meaning it’s completely transparent, you can’t see it at all. And one, meaningit’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 mucheasier 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’sjust a lot lighter. Now, you’re probably asking like, why don’t you just go and maybe makethe color lighter? Well, it’s actually much easier to control it this way. And on topof that, if you want things like maybe fading, or you want to maybe change a color fade intoa 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 thecolor every time. So it’s also much easier to use RGB a colors when you’re trying tojust control the overall look of a color. So usually, when you’re using just simplyRGB colors, you can only get a certain look.But once you add opacity into the mix, youcan completely change the way that it looks. So pretty much here’s the takeaway they’resupposed to take from this video, you can have a fourth component to an RGB color, whichis a now this becomes an RGB a color. Now this a value stands for alpha, or opacityor transparency, whatever you want to call it, then this value isn’t like just from zeroto 255. Instead, you have to set a value between zero and one. If you think of it in termsof 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 opaqueyou 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 talkinga little bit more about RGB colors.But we’re actually going to be adding one more featureto 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 improvethe quality of our colors. And that’s a or alpha. So right now you can see we have anRGB color code. But what if we wanted to add this mysterious alpha component? What willwe do? So I’m actually going to go ahead and use it as the background.Well, the firstthing you need to do is change the RGB name to RGB a. And in this way, we’ve completelychanged 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 greenSorry, blue, keep getting those two mixed up. After the final value, you’re gonna addanother comma. And here is where you can put any value between zero and one. So now thatyou know what you can do with it, alpha is pretty much the transparency or opacity ofa color zero, meaning it’s completely transparent, you can’t see it at all.And one, meaningit’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 mucheasier 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’sjust a lot lighter. Now, you’re probably asking like, why don’t you just go and maybe makethe color lighter? Well, it’s actually much easier to control it this way. And on topof that, if you want things like maybe fading, or you want to maybe change a color fade intoa 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 thecolor every time. So it’s also much easier to use RGB a colors when you’re trying tojust control the overall look of a color. So usually, when you’re using just simplyRGB colors, you can only get a certain look.But once you add opacity into the mix, youcan completely change the way that it looks. So pretty much here’s the takeaway they’resupposed to take from this video, you can have a fourth component to an RGB color, whichis a now this becomes an RGB a color. Now this a value stands for alpha, or opacityor transparency, whatever you want to call it, then this value isn’t like just from zeroto 255. Instead, you have to set a value between zero and one. If you think of it in termsof 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 opaqueyou 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 talkingabout 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 workingwith 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’mgoing to also erase this color property. So now we have a background of the steel bluecolor. There we go. So now it’s working. So pretty much if you don’t know what a gradientis already, it’s kind of a transition between two colors. So it’s not just a sharp, redto 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 asyou 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 youkind of use paint and draw between the two colors, depending on the proportions betweenthem, it’s going to make sort of a purple ish, and then it transitions like that.Sopretty much that’s what’s going on here without gradients is we’re transitioning between twocolors. Now of course, you can do more than two, you can put three, four, you can putas many colors as you want. But pretty much what you have to take away from this is thata gradient is just a transition between a number of colors. Okay, so now that we knowwhat a gradient is, let’s go ahead and get started adding them. So there are actuallytwo types of gradients, radial and linear. So radial gradients are circular, they kindof move outwards from a center. And depending on the percentages or how much you want ofeach color, it’s going to change the way the gradient looks. A linear gradient on the otherhand is the one that I described earlier, a smooth red transition to blue, it couldgo from left to right, top to bottom and even diagonally depending on how we define thedirection later in this video when we start creating our gradients, alright, let’s getstarted.So the first thing I want to work with is linear gradients. So the way to dothis just with our RGBA or a URL, all we have to do is type linear dash gradient. Just likethat. And from here, we can start defining our directions. So if you don’t already knowabout 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, topright would be the top right corner. So first of all, what you’re going to want to do istype two. And then you’re going to say the name of the direction. So in this case, I’mjust going to say two, right. So what this is going to be saying is you want the gridto move to the right side. So it’s going to be going this way. Now, there’s also anotherway to do this I’ll talk about in just a second. But for now, let’s leave it like this.Andthen 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 goahead and refresh and see what’s happening, you can see that we have a red slowly transitioninginto 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 wehave four colors that are slowly transitioning, we have a red, that slowly transition intoa green, and then a steel blue, you can sort of see it there and then a blue. And justsaying we don’t actually have to use these name colors, I just wanted to use them becauseit looked it was quite easy to look at. So what we can actually do and here’s your firstuse for Opacity is you can go ahead and let’s just take a random color here.So to writeRemember, this is starting here, we’re going to paste in that color. But then we’re goingto finish it with an RGB a color, So in this video, this is going to be talkingabout 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 workingwith 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’mgoing to also erase this color property.So now we have a background of the steel bluecolor. There we go. So now it’s working. So pretty much if you don’t know what a gradientis already, it’s kind of a transition between two colors. So it’s not just a sharp, redto 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 asyou 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 youkind of use paint and draw between the two colors, depending on the proportions betweenthem, it’s going to make sort of a purple ish, and then it transitions like that.Sopretty much that’s what’s going on here without gradients is we’re transitioning between twocolors. Now of course, you can do more than two, you can put three, four, you can putas many colors as you want. But pretty much what you have to take away from this is thata gradient is just a transition between a number of colors. Okay, so now that we knowwhat a gradient is, let’s go ahead and get started adding them. So there are actuallytwo types of gradients, radial and linear. So radial gradients are circular, they kindof move outwards from a center. And depending on the percentages or how much you want ofeach color, it’s going to change the way the gradient looks. A linear gradient on the otherhand is the one that I described earlier, a smooth red transition to blue, it couldgo from left to right, top to bottom and even diagonally depending on how we define thedirection later in this video when we start creating our gradients, alright, let’s getstarted.So the first thing I want to work with is linear gradients. So the way to dothis just with our RGBA or a URL, all we have to do is type linear dash gradient. Just likethat. And from here, we can start defining our directions. So if you don’t already knowabout 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, topright would be the top right corner. So first of all, what you’re going to want to do istype two. And then you’re going to say the name of the direction. So in this case, I’mjust going to say two, right. So what this is going to be saying is you want the gridto move to the right side. So it’s going to be going this way. Now, there’s also anotherway to do this I’ll talk about in just a second. But for now, let’s leave it like this. Andthen 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 goahead and refresh and see what’s happening, you can see that we have a red slowly transitioninginto 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 wehave four colors that are slowly transitioning, we have a red, that slowly transition intoa green, and then a steel blue, you can sort of see it there and then a blue. And justsaying we don’t actually have to use these name colors, I just wanted to use them becauseit looked it was quite easy to look at. So what we can actually do and here’s your firstuse for Opacity is you can go ahead and let’s just take a random color here. So to writeRemember, this is starting here, we’re going to paste in that color.But then we’re goingto finish it with an RGB a color, like that. And pretty much what’s what’s goingto happen is this is going to be a slowly fading out color, just like this. So you cansee what’s happening is we start with a fully functional color, which has a full track ora has no transparency at all. And we slowly slowly make it fade more and more out untilwe can’t see the picture at all, or the color in this case. So yeah, that’s pretty mucha great way of looking at it. And that’s pretty much it for linear gradients. Let’s talk aboutactually making diagonal gradients now. So we know that we can have to write, we canalso have to top for example, if you wanted to start from the start from the bottom, justlike 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 typeit out like this to bottom right.Now if we refresh the page, you can see that it slowlygoes down and fades out just at the bottom right. So there we go. That’s pretty muchit for positioning. But there’s actually another way to do this, and it’s through angles. Soif you don’t already know how to use angles, then you can pretty much skip this step becauseit’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 towork with them. So let’s say you wanted them to go in a very specific direction. So forexample, 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 aheadand erase this part because we’re not using positioning, and then we’re going to go aheadand type our angle.So the first thing I’m going to do is define the place that I wantedto end. So let’s say this time I wanted to add on the left here. So what I’m going todo is go ahead and say minus 90, because remember what’s happening here is we want it to justflip completely around. So let’s say this is our starting angle is zero, and we go allthe way down minus 90. So if you don’t already know 90 is kind of a quarter turn. And what’sgoing to happen is from here, we can type D, G, or degrees. And this is going to setthe angle that we wanted. So let’s go ahead and refresh the page. You can see that nowit goes from right to left. Now this is a pretty bad example considering we can justdo this normally, by typing to left.Well, why don’t we go ahead and choose somethinga little bit more specific. So I’m going to go 146 degrees. So just remember that pointingupwards is kind of the starting position. And then we turn 90 degrees, and then justa little bit over halfway. And I think that’s not a very good example. So I’m going to gowith 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 somethinglike 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. Butwhat’s happening here is we can directly control where we want our gradient to end.So that’sone 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 herebecause I don’t really need it. Now, radial gradients don’t work in the same way thatlinear ones do instead of having a specified direction. So for example, you want to gofrom Right to left or from top to bottom, instead, what happens is we can actually definethe percentages or proportions of each color that we want. The next thing I’m going totalk about is actually this background size. So one thing you need to note is that youcannot 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 aheadand type radio dash gradient, like that. And pretty much what’s what’s goingto happen is this is going to be a slowly fading out color, just like this.So you cansee what’s happening is we start with a fully functional color, which has a full track ora has no transparency at all. And we slowly slowly make it fade more and more out untilwe can’t see the picture at all, or the color in this case. So yeah, that’s pretty mucha great way of looking at it. And that’s pretty much it for linear gradients. Let’s talk aboutactually making diagonal gradients now. So we know that we can have to write, we canalso have to top for example, if you wanted to start from the start from the bottom, justlike 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 typeit out like this to bottom right. Now if we refresh the page, you can see that it slowlygoes down and fades out just at the bottom right.So there we go. That’s pretty muchit for positioning. But there’s actually another way to do this, and it’s through angles. Soif you don’t already know how to use angles, then you can pretty much skip this step becauseit’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 towork with them. So let’s say you wanted them to go in a very specific direction. So forexample, 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 aheadand erase this part because we’re not using positioning, and then we’re going to go aheadand type our angle. So the first thing I’m going to do is define the place that I wantedto end. So let’s say this time I wanted to add on the left here. So what I’m going todo is go ahead and say minus 90, because remember what’s happening here is we want it to justflip completely around. So let’s say this is our starting angle is zero, and we go allthe way down minus 90.So if you don’t already know 90 is kind of a quarter turn. And what’sgoing to happen is from here, we can type D, G, or degrees. And this is going to setthe angle that we wanted. So let’s go ahead and refresh the page. You can see that nowit goes from right to left. Now this is a pretty bad example considering we can justdo this normally, by typing to left. Well, why don’t we go ahead and choose somethinga little bit more specific. So I’m going to go 146 degrees. So just remember that pointingupwards is kind of the starting position. And then we turn 90 degrees, and then justa little bit over halfway. And I think that’s not a very good example. So I’m going to gowith 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 somethinglike 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. Butwhat’s happening here is we can directly control where we want our gradient to end. So that’sone 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 herebecause I don’t really need it. Now, radial gradients don’t work in the same way thatlinear ones do instead of having a specified direction. So for example, you want to gofrom Right to left or from top to bottom, instead, what happens is we can actually definethe percentages or proportions of each color that we want.The next thing I’m going totalk about is actually this background size. So one thing you need to note is that youcannot 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 aheadand type radio dash gradient, just like that. And now what we can do isspecify a certain amount of colors. So for example, I’m just going to start out withred and blue. Now if we refresh the page, you can see it starts off red, and ends andblue. But we can actually add more than two colors, just like with our, our linear gradientthere, what we can actually do is go ahead and type in let’s For example, let’s justsay green as an example. Now if we refresh the page, you can see that we’ve added a thirdcolor. Now, if we wanted to change the proportions, so for example, let’s pretend that this blueis taking up too much space, we don’t want that much, we can actually specify how muchwe 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 isthat these have to be in order, you have to have the minimum percentage, or the smallestpercentage at the start, and then the largest at the finish. So I’m going to go ahead andstart 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 lotmore green and a lot less blue, and red. So the final thing I want to cover for radialgradients is the shape.Now you can actually specify the shape that you want. Now rightnow I have an ellipse or sort of oval shape, we can actually change it, all we have todo 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 aheadand refresh, you can see that this is in a much more circular shape, rather than theprevious oval. And although it’s not a perfect circle, obviously, our proportions aren’tgoing to change what it looks like. Alright, so that’s pretty much it for gradients. There’squite a lot to learn about these. And there’s a lot more features that you can cover. Butfor now, I think this is great. Now what I’m going to do is go ahead and just create anothergradient, another linear gradient right under this one, just so you can see what it lookslike.So for example, I’m going to go ahead, and maybe let’s just go for the body backgroundfor now, I’m going to go ahead and actually add a linear gradient gradient here. And I’mgoing to say, let’s just say to bottom, because again, we wanted this kind of stretch fromtop to bottom. So now what we’re going to do is start off very strong. So we’re goingto have our main RGBA color, or RGB, whoops, our main color here. So I’m going to copythis. So this is going to be a fully, fully visible color, starting from the top, andthen we’re going to end with a much less visible color.So there you go. Now let’s go aheadand 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 cansee it’s still not working so much errors, you’re probably Yep, forgot the got the parenthesesthere. Just make sure that you’re doing this, right, because sometimes you can make somesilly 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 offwith a nice, fully visible color, and we end off with a less visible color. Alright, sothere we go. That’s pretty much it for gradients, you can go ahead and download this file fromthe project, you can go ahead and look at how everything works here, mess around withit, see what you can do, because there is a lot to gradients and although they’re notused everyday, they’re still very useful tools, and they can really help you out in your webdevelopment careers.Alright, let’s move on. just like that. And now what we can do isspecify a certain amount of colors. So for example, I’m just going to start out withred and blue. Now if we refresh the page, you can see it starts off red, and ends andblue. But we can actually add more than two colors, just like with our, our linear gradientthere, what we can actually do is go ahead and type in let’s For example, let’s justsay green as an example. Now if we refresh the page, you can see that we’ve added a thirdcolor.Now, if we wanted to change the proportions, so for example, let’s pretend that this blueis taking up too much space, we don’t want that much, we can actually specify how muchwe 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 isthat these have to be in order, you have to have the minimum percentage, or the smallestpercentage 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 say40%, blue, and 55% green. So now if I go ahead and refresh the page, you can see that thereis a lot more green and a lot less blue, and red. So the final thing I want to cover forradial 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, allwe have to do is type the name of the shape. Now there are two values, you can put hereellipse, which is the default, and circle, I’m going to go ahead and type circle. Nowif I go ahead and refresh, you can see that this is in a much more circular shape, ratherthan the previous oval. And although it’s not a perfect circle, obviously, our proportionsaren’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 cancover. But for now, I think this is great. Now what I’m going to do is go ahead and justcreate another gradient, another linear gradient right under this one, just so you can seewhat it looks like. So for example, I’m going to go ahead, and maybe let’s just go for thebody background for now, I’m going to go ahead and actually add a linear gradient gradienthere. And I’m going to say, let’s just say to bottom, because again, we wanted this kindof 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’mgoing to copy this. So this is going to be a fully, fully visible color, starting fromthe 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 bitof 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 thegot the parentheses there. Just make sure that you’re doing this, right, because sometimesyou can make some silly errors. So for example, if you look here, we were actually we weremissing 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 visiblecolor. Alright, so there we go. That’s pretty much it for gradients, you can go ahead anddownload this file from the project, you can go ahead and look at how everything workshere, mess around with it, see what you can do, because there is a lot to gradients andalthough they’re not used everyday, they’re still very useful tools, and they can reallyhelp you out in your web development careers. Alright, let’s move on. So in this video, we’re going to be talkingabout some of the different types of units in CSS. So so far, we’ve been working withsome 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 actuallylearned what all of these different things mean this this PX this percentage, and wedon’t actually know how they work.So what I’m going to be doing today is talking aboutsome of the different types of units and how you can identify which one to use. So firstthing I want to talk about is the difference between the two types of units which are absoluteunits, and rarely have units. So firstly, we have to talk about some of the units we’vealready been using, for example, pixels. Now pixels is a little bit special, I’ll explainyou. I’ll explain it to you in just a second. But pretty much the commonly used absoluteunits are things like centimeters, millimeters and inches, which are absolute, they it’snot dependent on anything else.If you set it as one inch, it’s going to be one inchlong, no matter if you’re doing it on a phone, or an ultra wide TV. So that’s what absoluteunits are, they aren’t affected by anything around them. The second group are relativeunits. 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 thatthe parent element of this service image or this service image right here, which in thiscase is our body, take 70% of its width of its total width.So the whole way throughof the body is 100%. And 70% is going to be somewhere around here, because that’s whatwe set it as now notice that when I start resizing this, you can see that it still takesup 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 thetotal body width. So this is really good for something like a responsive design. Becausewhat happens is when you’re using absolute units in a responsive design, let’s say youset this width as 200 pixels on a phone, it’s going to appear very large, whereas on anultra wide TV, it’s going to appear too small. So using something like percentages wouldbe very useful, because then you could resize your window here, however you like it andstill have that look that you want.So that’s pretty much it for percentages. But there’salso a lot of different relative values that we can use. And I’m going to go through allof 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 consideredan absolute unit, it is actually relatively scale based on what device you’re on. So ifyou don’t already know your screen right now that you’re watching this video on is madeup 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 numberof pixels you have, the resolution is going to change. So on low DPI, tablets or thingslike that, anything that has a very low resolution. So for example, if you’re on YouTube, andyou’ve changed your resolution to four ADP, what’s going to happen is then the video isgoing to sort of adjust how many pixels are in that video.Now, I’m not going to get toodeep into how pixels are changed and things like that. But pretty much what happens ison high resolution devices, these pixels aren’t going to appear the same as on low resolutiondevices, because obviously, this is taking up only 400 pixels of height. And if you havean ultra high display a very high definition TV 400 pixels is only going to be about halfof what it is here. So what actually happens in this is on these high DPI displays, eachpixel 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 somethinglike 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 absolutevalue. So that’s just one thing you need to keep in mind. Now don’t worry too much aboutpixels, you know, redefinitions, things like that. But we’re not focusing on that. Fornow, we’re just focusing on how we can use different values for different things. Solet’s go ahead and cover some of the different units that we can use for absolute unit. Sothe easiest way to do this is through changing the size of the text. Now again, we’re goingto cover this much later in this section.So don’t worry about that too much. So thefirst 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 actuallytook a ruler and measured the font size, you would get two centimeters. There’s also manymore such as millimeters and inches and pretty much everything in between. So you can seethat’s also a lot smaller. So we have our standard pixels here, but there’s actuallya few more that we can use. Now they’re not very they’re not used that commonly so I’mnot really going to go over them that much. But there Is he there, there are some otherunits that you can use instead of pixels that kind of follow that same formula. So thereis 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 alot 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 bitof some of the other absolute values. Now let’s cover relative values. So the firstone, the first one that we actually already covered was percentage. So we already lookedat, you know, our percent symbol over here, which pretty much takes up, again, a certainsize or whatever value of its parent element.But there’s actually many more that I wantto cover. The first one I’m going to look at is E M. So pretty much what if what I dohere is it’s going to represent the size relative to the current standard font size. So let’sjust pretend that we know that this font size is value, let’s just call it F, what’s goingto happen is if we set the body font size to two, em, you’re going to double everythingor 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 standardfont size. So again, this is completely relative to the standard font size. So I’m actuallygoing to go ahead and erase this here and start using style tags.Instead, I feel likeit’s just going to be a lot easier to you know, move around and easy, easily move thataround. So now we’ve covered percent an EM so those are the two main types of relativeunits. But there’s actually two more that I want to cover, which is view width and viewheight. So in web design, and in development, in general, there’s this thing called theviewport, which is pretty much the dimensions of whatever you’re viewing it on.So in thiscase, 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 talkingabout some of the different types of units in CSS. So so far, we’ve been working withsome 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 actuallylearned what all of these different things mean this this PX this percentage, and wedon’t actually know how they work. So what I’m going to be doing today is talking aboutsome of the different types of units and how you can identify which one to use. So firstthing I want to talk about is the difference between the two types of units which are absoluteunits, and rarely have units.So firstly, we have to talk about some of the units we’vealready been using, for example, pixels. Now pixels is a little bit special, I’ll explainyou. I’ll explain it to you in just a second. But pretty much the commonly used absoluteunits are things like centimeters, millimeters and inches, which are absolute, they it’snot dependent on anything else. If you set it as one inch, it’s going to be one inchlong, no matter if you’re doing it on a phone, or an ultra wide TV. So that’s what absoluteunits are, they aren’t affected by anything around them. The second group are relativeunits. 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 thatthe parent element of this service image or this service image right here, which in thiscase is our body, take 70% of its width of its total width.So the whole way throughof the body is 100%. And 70% is going to be somewhere around here, because that’s whatwe set it as now notice that when I start resizing this, you can see that it still takesup 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 thetotal body width. So this is really good for something like a responsive design. Becausewhat happens is when you’re using absolute units in a responsive design, let’s say youset this width as 200 pixels on a phone, it’s going to appear very large, whereas on anultra wide TV, it’s going to appear too small. So using something like percentages wouldbe very useful, because then you could resize your window here, however you like it andstill have that look that you want. So that’s pretty much it for percentages. But there’salso a lot of different relative values that we can use. And I’m going to go through allof 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 consideredan absolute unit, it is actually relatively scale based on what device you’re on. So ifyou don’t already know your screen right now that you’re watching this video on is madeup 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 numberof pixels you have, the resolution is going to change. So on low DPI, tablets or thingslike that, anything that has a very low resolution. So for example, if you’re on YouTube, andyou’ve changed your resolution to four ADP, what’s going to happen is then the video isgoing to sort of adjust how many pixels are in that video. Now, I’m not going to get toodeep into how pixels are changed and things like that. But pretty much what happens ison high resolution devices, these pixels aren’t going to appear the same as on low resolutiondevices, because obviously, this is taking up only 400 pixels of height. And if you havean ultra high display a very high definition TV 400 pixels is only going to be about halfof what it is here.So what actually happens in this is on these high DPI displays, eachpixel 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 somethinglike 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 absolutevalue.So that’s just one thing you need to keep in mind. Now don’t worry too much aboutpixels, you know, redefinitions, things like that. But we’re not focusing on that. Fornow, we’re just focusing on how we can use different values for different things. Solet’s go ahead and cover some of the different units that we can use for absolute unit. Sothe easiest way to do this is through changing the size of the text. Now again, we’re goingto cover this much later in this section. So don’t worry about that too much.So thefirst 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 actuallytook a ruler and measured the font size, you would get two centimeters. There’s also manymore such as millimeters and inches and pretty much everything in between. So you can seethat’s also a lot smaller. So we have our standard pixels here, but there’s actuallya few more that we can use. Now they’re not very they’re not used that commonly so I’mnot really going to go over them that much. But there Is he there, there are some otherunits that you can use instead of pixels that kind of follow that same formula. So thereis 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 alot 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 bitof some of the other absolute values. Now let’s cover relative values. So the firstone, the first one that we actually already covered was percentage. So we already lookedat, you know, our percent symbol over here, which pretty much takes up, again, a certainsize or whatever value of its parent element. But there’s actually many more that I wantto cover. The first one I’m going to look at is E M. So pretty much what if what I dohere is it’s going to represent the size relative to the current standard font size. So let’sjust pretend that we know that this font size is value, let’s just call it F, what’s goingto happen is if we set the body font size to two, em, you’re going to double everythingor 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 standardfont size. So again, this is completely relative to the standard font size. So I’m actuallygoing to go ahead and erase this here and start using style tags. Instead, I feel likeit’s just going to be a lot easier to you know, move around and easy, easily move thataround. So now we’ve covered percent an EM so those are the two main types of relativeunits. But there’s actually two more that I want to cover, which is view width and viewheight.So in web design, and in development, in general, there’s this thing called theviewport, which is pretty much the dimensions of whatever you’re viewing it on. So in thiscase, 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, thisisn’t based on the parent element, this is based on the total viewport, this could bethe 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 to70 times 1% of the total viewport. And obviously, if I go ahead and refresh the page, you cansee it gets just a little bit bigger because there’s actually a viewport itself is biggerthan 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’tactually affect it because the body is almost completely equivalent to the viewport. Butfor example, if we wanted to set the font size of one of these TDs to 70% would be whichwe, which would be 70% of this T row, it would actually look completely different from 70v 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 ifI actually wanted to say VH. So 400 times 1% of the view height, what would happen hereis that this image would become four times the total height of the viewport. So that’sjust also one thing to keep in mind. So I’m going to go ahead and change this back topixels. We’ll just keep that with the same because it doesn’t really make that much ofan impact. Okay, so there we go. Those are some of the different units in CSS, I’ve actuallyattached a little reference sheet that you can use, you can refer to, to this to thislecture, 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, themain 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 usefulin some cases, so for example, if you want a very specific dimensions or viewport onyour screen, so for example, if you only want users to access something on the phone, thenor a very specific phone, then you can go ahead and use pixels because it’s going tolook 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 aregoing to look very different based on On what device you’re using.And that’s why you shouldkind 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 wouldbe 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 usingit on a phone, or a desktop computer, because again, it takes up 70% of the width no matterwhat 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 backof your head.And once we start using them and start using them in our, you know, fontlayout, things like that, we’ll actually start using these units a lot more, and they willmake a lot more sense. So this is just a quick introduction to these units and why we shoulduse them. And you’re not supposed to be going ahead and you know, completely mastering everysingle 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, thisisn’t based on the parent element, this is based on the total viewport, this could bethe 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 to70 times 1% of the total viewport. And obviously, if I go ahead and refresh the page, you cansee it gets just a little bit bigger because there’s actually a viewport itself is biggerthan 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’tactually affect it because the body is almost completely equivalent to the viewport. Butfor example, if we wanted to set the font size of one of these TDs to 70% would be whichwe, which would be 70% of this T row, it would actually look completely different from 70v 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 ifI actually wanted to say VH. So 400 times 1% of the view height, what would happen hereis that this image would become four times the total height of the viewport. So that’sjust also one thing to keep in mind. So I’m going to go ahead and change this back topixels. We’ll just keep that with the same because it doesn’t really make that much ofan impact. Okay, so there we go.Those are some of the different units in CSS, I’ve actuallyattached a little reference sheet that you can use, you can refer to, to this to thislecture, 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, themain 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 usefulin some cases, so for example, if you want a very specific dimensions or viewport onyour screen, so for example, if you only want users to access something on the phone, thenor a very specific phone, then you can go ahead and use pixels because it’s going tolook 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 aregoing to look very different based on On what device you’re using.And that’s why you shouldkind 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 wouldbe 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 usingit on a phone, or a desktop computer, because again, it takes up 70% of the width no matterwhat 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 backof your head. And once we start using them and start using them in our, you know, fontlayout, things like that, we’ll actually start using these units a lot more, and they willmake a lot more sense. So this is just a quick introduction to these units and why we shoulduse them.And you’re not supposed to be going ahead and you know, completely mastering everysingle one by now. Alright, let’s move on. So the next few videos are going to be focusedon font and text manipulation. So we’re going to be working with actually changing how thistext 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’reactually very different. So the first part in this video, we’re going to be coveringtext manipulation. Now, there’s not that much to look at. But pretty much the differencebetween the two is that text manipulation is looking at things that you can change nomatter the font. So for example, something like sizing would not apply, because the sizeis going to be based obviously on the font itself.So basically, things like underliningor capitalization are going to be completely regardless of the font, you can change themno matter what they do. But things like bolding and things like size, bolding, things likethat, they are completely dependent on the font, because again, the font decides howit how the font itself is going to look. So it decides the size, the bolding, and justthe 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.Sothings like external fonts, which is probably the most exciting part of this course, andthings like weight and bolding. Alright, let’s get started. So the first two things I wantto cover are text decoration and text transform. So these are properties that are going tobe relating to the style of the text. Now I know I just said that fonts. And mostlystyling is dependent on the font. But in this case, these these properties don’t actuallyrely on the font at all. So let’s get started. So the first thing I’m going to talk aboutis text decoration. So although it sounds like you can do a bunch of cool things withthis, the only real thing that you can do is change the lining of the text. So we’regoing to go ahead and work with this anchor tag here.So I’m going to go ahead and adda cloud, there’s already a class there, actually, we can just go ahead and select it. So I’mgoing to go dot link, like that. And now what I can actually do is change the lining ofthis right here. So by default, anchor tags have a text decoration of underline, there’sactually three more properties that we can use. So that the property to use it, it’scalled text dash decoration, it’s pretty obvious.Now the first one I’m going to look at isnone. So this completely removes the line from our links, they’re completely gone, youdon’t have them anymore. The next one, which is the one by default is underlined, likethat. 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 ofcourse, there’s the overlying which is the line on the top. So there we go. Now we havea line on the top. Now, although you won’t see the the two that we just showed line throughand overlap very commonly, it is very common to see underline and text decoration noneapplied. 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 howto 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 caseis text transform.So you can see that we have a bunch of text here. And let’s say maybewe’re working as a freelancer and our client wants us to capitalize all of our text. Howare we going to do that? Now obviously, we’re not going to go through and capitalize everysingle individual word that’s going to basically be suicide. Although it is possible, it couldtake 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 tothis is text dash transform, pretty easy to memorize, or learn these because they don’treally require any weird memorization tactics. So now what you can do is go ahead and addour value. So there are three different values that you can use for this uppercase, lowercaseand 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 havinghaving to actually change the text.You can also go ahead and use the other two, whichare lowercase and uppercase. So the next few videos are going to be focusedon font and text manipulation. So we’re going to be working with actually changing how thistext 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’reactually very different. So the first part in this video, we’re going to be coveringtext manipulation. Now, there’s not that much to look at. But pretty much the differencebetween the two is that text manipulation is looking at things that you can change nomatter the font. So for example, something like sizing would not apply, because the sizeis going to be based obviously on the font itself.So basically, things like underliningor capitalization are going to be completely regardless of the font, you can change themno matter what they do. But things like bolding and things like size, bolding, things likethat, they are completely dependent on the font, because again, the font decides howit how the font itself is going to look. So it decides the size, the bolding, and justthe 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. Sothings like external fonts, which is probably the most exciting part of this course, andthings like weight and bolding. Alright, let’s get started. So the first two things I wantto cover are text decoration and text transform. So these are properties that are going tobe relating to the style of the text. Now I know I just said that fonts. And mostlystyling is dependent on the font. But in this case, these these properties don’t actuallyrely on the font at all.So let’s get started. So the first thing I’m going to talk aboutis text decoration. So although it sounds like you can do a bunch of cool things withthis, the only real thing that you can do is change the lining of the text. So we’regoing to go ahead and work with this anchor tag here. So I’m going to go ahead and adda cloud, there’s already a class there, actually, we can just go ahead and select it. So I’mgoing to go dot link, like that. And now what I can actually do is change the lining ofthis right here. So by default, anchor tags have a text decoration of underline, there’sactually three more properties that we can use. So that the property to use it, it’scalled text dash decoration, it’s pretty obvious. Now the first one I’m going to look at isnone.So this completely removes the line from our links, they’re completely gone, youdon’t have them anymore. The next one, which is the one by default is underlined, likethat. 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 ofcourse, there’s the overlying which is the line on the top. So there we go. Now we havea line on the top. Now, although you won’t see the the two that we just showed line throughand overlap very commonly, it is very common to see underline and text decoration noneapplied.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 howto 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 caseis text transform. So you can see that we have a bunch of text here. And let’s say maybewe’re working as a freelancer and our client wants us to capitalize all of our text. Howare we going to do that? Now obviously, we’re not going to go through and capitalize everysingle individual word that’s going to basically be suicide. Although it is possible, it couldtake 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 tothis is text dash transform, pretty easy to memorize, or learn these because they don’treally require any weird memorization tactics. So now what you can do is go ahead and addour value. So there are three different values that you can use for this uppercase, lowercaseand 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 havinghaving to actually change the text. You can also go ahead and use the other two, whichare lowercase and uppercase. And that will obviously put everything inuppercase for you. But now you’re starting to see a little bit about why these are textmanipulation 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 theseto capitalize it, no matter what the font is. On top of that, you can also move aroundthese lines, it’s not dependent on the font at all. So that’s just a little bit aboutour text manipulation properties.So the next feature I want to cover is text align. Sothis is a little bit different from the other two that we’ve covered. Because it’s not reallyfocused on the styling or decoration of our text. Instead, it’s going to be focused onthe 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 yourtext 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 littlebit in more detail. So in order to achieve this, you can go ahead and add text alignproperty. And here, I’m just going to go center as an example. And you can see that now everythingis aligned. So the list items are a little bit weird, they don’t actually move the decorationto the center, when you align it to the center, but other than that all of the text is nowaligned to the center.So now let’s talk about justify. Now we’re not going to go throughleft and right, because we already know that but what justify actually does, I’m just gonnashow you here is pretty much it takes all of the text, and it kind of matches it. Soit’s all fit in the same way, if you if it makes sense. So although it might not fiteverything, the same length, what happens is all of this text is now stretched out asfar as possible. So although you might not be able to see a direct difference, let’sjust look at this paragraph here, we’re going to just end off this property without changingit, you can see that without the justify alignment, all of these are different.So what actuallywhat the justify actually does is it sets all of the lines to the same length. So I’mgoing to go ahead and add that justify back. So you can see this used a lot in researchpapers, and, you know, academic papers, essays, things like that. This justification is useda lot. And although it’s not very, it’s not really used very commonly, it’s still a verygood feature if you have big bodies of text, if you’re trying to you know, make everythinglook very streamlined. Alright, there we go. So those are the four or sorry, three differenttypes of text manipulation properties that you can use, and along with their respectivevalue. So I encourage you to go ahead and try this out on your own, you can do a lotof 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 inuppercase for you. But now you’re starting to see a little bit about why these are textmanipulation 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 theseto capitalize it, no matter what the font is.On top of that, you can also move aroundthese lines, it’s not dependent on the font at all. So that’s just a little bit aboutour text manipulation properties. So the next feature I want to cover is text align. Sothis is a little bit different from the other two that we’ve covered. Because it’s not reallyfocused on the styling or decoration of our text.Instead, it’s going to be focused onthe 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 yourtext 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 littlebit in more detail. So in order to achieve this, you can go ahead and add text alignproperty. And here, I’m just going to go center as an example. And you can see that now everythingis aligned.So the list items are a little bit weird, they don’t actually move the decorationto the center, when you align it to the center, but other than that all of the text is nowaligned to the center. So now let’s talk about justify. Now we’re not going to go throughleft and right, because we already know that but what justify actually does, I’m just gonnashow you here is pretty much it takes all of the text, and it kind of matches it.Soit’s all fit in the same way, if you if it makes sense. So although it might not fiteverything, the same length, what happens is all of this text is now stretched out asfar as possible. So although you might not be able to see a direct difference, let’sjust look at this paragraph here, we’re going to just end off this property without changingit, you can see that without the justify alignment, all of these are different. So what actuallywhat the justify actually does is it sets all of the lines to the same length. So I’mgoing to go ahead and add that justify back. So you can see this used a lot in researchpapers, and, you know, academic papers, essays, things like that. This justification is useda lot. And although it’s not very, it’s not really used very commonly, it’s still a verygood feature if you have big bodies of text, if you’re trying to you know, make everythinglook very streamlined.Alright, there we go. So those are the four or sorry, three differenttypes of text manipulation properties that you can use, and along with their respectivevalue. So I encourage you to go ahead and try this out on your own, you can do a lotof 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 talkingabout the other half of overall text manipulation. And in this case, we’re going to be lookingat 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 nowwe have our pretty standard text here, right.So I’m just actually going to go ahead anderase our text transform from our previous video. So now we have our text here. And whatI want to do is change the size of this. The only problem is I want to use a responsivedesign. So what I’m going to do is go ahead and first use our font size property. Andthen I’m going to go ahead and say let’s just say 1.25 em. So what happens here is makethis 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 donethat, we can also go ahead and actually use pixel values, if we wanted to 40 pixels forexample, the only problem is this is going to set everything consistently. So you cansee all of the sizes are the same, it doesn’t matter if they’re a header, or while it doesactually matter.But because in the CSS defined code, all of these headers actually have toem but if we actually removed all of these, they would be the same. So using somethinglike 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 therewe go. That’s pretty much it for font size, I’m going to go ahead and actually changethis to one point 15 am, I think that’s good.So there we go. That’s the first one. Nowlet’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 valuesfor 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 eachvalue, there is a different bolding stage. So most fonts are only going to go up to maybe100, or 900, some of them can go even higher. But in theory, you can make these values asbig as you want. The only problem is, it’s not really going to show any change if youmake them very big.So there we go. That’s pretty much it for font weight, let’s go aheadand start adding it to our website. So let’s say I wanted to make our title a little bitbolded. So I’m going to go ahead and say font dash weight. And now I’m going to go aheadand specify a value. Let’s go ahead and start with zero and see what happens, you can seethat nothing actually happens. But pretty much like I said before, most fonts only supportcertain values. So for example, 100 would be a very specific kind of bolding, 200 300400 and all the way up to as much as the font supports. Now usually, the convention forthis is you’re supposed to go up in hundreds from 100. That’s kind of like the minimumsupported 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 gorealistically, this is kind of the standard for each one.So there you go, you can setit to something like 600, which isn’t very commonly seen, like I said, fonts only supportcertain bolded ness, if that makes sense. But you can go ahead and play around withthis. And like I said, depending on the font, it’s going to change what the text actuallylooks like. So there we go. That’s pretty much it for font weight, I’m going to go aheadand actually just set this to 400, which is the standard font right there. So 400 is thenormal, it’s like normal bolding, no bolding and don’t make it very thin.So that’s kindof what it’s the normal range. So there we go. That’s it for font weight. Now let’s goahead and look at font style. So just like font sizes for size and font weight is forbolding font style is for italic sizing. So I’m going to go ahead and actually italicizea small piece of text here. So let’s just go ahead into this. And I’m going to takethis first part, and actually just cut it out. I’m going to create a span tag. So aspan 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 flowor moving them on to their own line.So I’m going to give it a class, I’m just going tosay italics, I guess that would work. So then I’m going to go ahead and use the class selectoritalics. 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 selectorsthese 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 theycan use for this normal, which is pretty much the same as setting the font weight is 400doesn’t do anything, or it actually will change it back to its normal state.Then you haveitalic, which is to italicize it, and then you have oblique, which is a little bit moreitalic size. So let’s go ahead and just add the basic one. I’m gonna go and type metalichere. Now if we refresh the page, you can see that where it is, there we go. It’s rightthere So in this video, we’re going to be talkingabout the other half of overall text manipulation. And in this case, we’re going to be lookingat 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 nowwe have our pretty standard text here, right. So I’m just actually going to go ahead anderase our text transform from our previous video. So now we have our text here. And whatI want to do is change the size of this. The only problem is I want to use a responsivedesign. So what I’m going to do is go ahead and first use our font size property.Andthen I’m going to go ahead and say let’s just say 1.25 em. So what happens here is makethis 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 donethat, we can also go ahead and actually use pixel values, if we wanted to 40 pixels forexample, the only problem is this is going to set everything consistently. So you cansee all of the sizes are the same, it doesn’t matter if they’re a header, or while it doesactually matter. But because in the CSS defined code, all of these headers actually have toem but if we actually removed all of these, they would be the same. So using somethinglike 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 therewe go. That’s pretty much it for font size, I’m going to go ahead and actually changethis to one point 15 am, I think that’s good. So there we go. That’s the first one. Nowlet’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 valuesfor 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 eachvalue, there is a different bolding stage. So most fonts are only going to go up to maybe100, or 900, some of them can go even higher. But in theory, you can make these values asbig as you want. The only problem is, it’s not really going to show any change if youmake them very big. So there we go.That’s pretty much it for font weight, let’s go aheadand start adding it to our website. So let’s say I wanted to make our title a little bitbolded. So I’m going to go ahead and say font dash weight. And now I’m going to go aheadand specify a value. Let’s go ahead and start with zero and see what happens, you can seethat nothing actually happens. But pretty much like I said before, most fonts only supportcertain values.So for example, 100 would be a very specific kind of bolding, 200 300400 and all the way up to as much as the font supports. Now usually, the convention forthis is you’re supposed to go up in hundreds from 100. That’s kind of like the minimumsupported 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 gorealistically, this is kind of the standard for each one.So there you go, you can setit to something like 600, which isn’t very commonly seen, like I said, fonts only supportcertain bolded ness, if that makes sense. But you can go ahead and play around withthis. And like I said, depending on the font, it’s going to change what the text actuallylooks like. So there we go. That’s pretty much it for font weight, I’m going to go aheadand actually just set this to 400, which is the standard font right there. So 400 is thenormal, it’s like normal bolding, no bolding and don’t make it very thin.So that’s kindof what it’s the normal range. So there we go. That’s it for font weight. Now let’s goahead and look at font style. So just like font sizes for size and font weight is forbolding font style is for italic sizing. So I’m going to go ahead and actually italicizea small piece of text here. So let’s just go ahead into this. And I’m going to takethis first part, and actually just cut it out. I’m going to create a span tag.So aspan 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 flowor moving them on to their own line. So I’m going to give it a class, I’m just going tosay italics, I guess that would work. So then I’m going to go ahead and use the class selectoritalics. 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 selectorsthese 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 theycan use for this normal, which is pretty much the same as setting the font weight is 400doesn’t do anything, or it actually will change it back to its normal state. Then you haveitalic, which is to italicize it, and then you have oblique, which is a little bit moreitalic size.So let’s go ahead and just add the basic one. I’m gonna go and type metalichere. Now if we refresh the page, you can see that where it is, there we go. It’s rightthere is a little bit more. The font, the font isa little bit a little bit more italic size. So there we go. Now let’s go ahead and setit 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 itfor the three different font manipulation techniques. Now, although I didn’t cover fontfamily, which is what I’m going to cover in the next video, these are the pretty muchthree 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 boldedor italicized, you can also change the size.So you can really do a lot with this. Butfont family is a little bit more complicated, which is why I want to leave it for its ownvideo. All right, let’s move on. is a little bit more. The font, the font isa little bit a little bit more italic size. So there we go. Now let’s go ahead and setit 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 itfor the three different font manipulation techniques. Now, although I didn’t cover fontfamily, which is what I’m going to cover in the next video, these are the pretty muchthree 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 boldedor italicized, you can also change the size.So you can really do a lot with this. Butfont family is a little bit more complicated, which is why I want to leave it for its ownvideo. All right, let’s move on. So in this video, we’re going to be talkingabout the last property related to text and fonts. And that is font family. So I’m goingto talk a little bit about that. But in the next few videos, we’re going to actually lookingat how to include external fonts, which is going to be a very fun activity. And that’sgoing to really change the way that we use CSS. But before we do that, we need to learnabout font families. So first of all, if you don’t already know, a font family is basicallya collection of fonts that have similar features. So there are three main font families thatyou 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 everyor a lot of the academic papers.And well printed documents use these serif fonts. Soright now, for example, our font is a Sarah because you can see these tiny lines at theend 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 readon the computer. So there’s actually a another group of fonts, that which is the sans serifgroup. And if you don’t know sans serif groups, are basically the fonts that don’t have thoselines, if it’s not obvious enough, from name. So right now, this is a serif font. A sansserif 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, prettymuch 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 websitethat you see commonly today, the big ones, usually always use Sans Serif fonts, becausethey’re much easier to read.So those are the two main groups. But like I said, there’salso a third one, which is called mono space. So mono space is pretty much where all ofthe 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 amountof space, depending on what the letter is. So some pretty good examples of a sarafanare Times New Roman, which is probably the most famous, and Georgia. Some pretty goodexamples 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 fontis Korea new if you know what that is. Korea news, one of the monospace fonts but likeI said, there’s many more out there that you can use. Like I said, it all depends on whatfamily you pick, and what what kind of result you’re trying to achieve out of your fontsor you’re trying to make it readable Are you making a paper or a journal, it all dependson what you want out of your while document. So in this case, because we’re doing or creatinga 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 talkingabout the last property related to text and fonts.And that is font family. So I’m goingto talk a little bit about that. But in the next few videos, we’re going to actually lookingat how to include external fonts, which is going to be a very fun activity. And that’sgoing to really change the way that we use CSS. But before we do that, we need to learnabout font families. So first of all, if you don’t already know, a font family is basicallya collection of fonts that have similar features.So there are three main font families thatyou 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 everyor a lot of the academic papers. And well printed documents use these serif fonts. Soright now, for example, our font is a Sarah because you can see these tiny lines at theend 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 readon the computer. So there’s actually a another group of fonts, that which is the sans serifgroup. And if you don’t know sans serif groups, are basically the fonts that don’t have thoselines, if it’s not obvious enough, from name.So right now, this is a serif font. A sansserif 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, prettymuch 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 websitethat you see commonly today, the big ones, usually always use Sans Serif fonts, becausethey’re much easier to read. So those are the two main groups. But like I said, there’salso a third one, which is called mono space. So mono space is pretty much where all ofthe 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 amountof space, depending on what the letter is.So some pretty good examples of a sarafanare Times New Roman, which is probably the most famous, and Georgia. Some pretty goodexamples 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 fontis Korea new if you know what that is. Korea news, one of the monospace fonts but likeI said, there’s many more out there that you can use. Like I said, it all depends on whatfamily you pick, and what what kind of result you’re trying to achieve out of your fontsor you’re trying to make it readable Are you making a paper or a journal, it all dependson what you want out of your while document. So in this case, because we’re doing or creatinga 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 fontfamily. Now, this isn’t just for setting the family. This is also for spreading the specificfonts. And I’ll talk about that in just a second. So I’m going to go ahead and say sansserif. So this is the font family that I want and watch what happens to our page. Now, youcan see that it looks completely different. We can actually read everything and it looksa lot cleaner. So that’s why I like san serif fonts. And that’s why most developers muchprefer Sans Serif fonts over serif fonts, you can see that it just looks a lot easieron the eyes.It’s just much easier to read and use. But like I said, you can you don’tjust have to specify the family you can actually specify the specific font. And you can actuallydo this using the comma separator. So first of all, I’m basic set times new roman as themain font. And then I’m going to insert a comma, and then serif. So I’ll explain thisright 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 thiscomma here, pretty much what’s going to happen is, if Times New Roman is available, use thatas the font. But if it isn’t available, then fall back to the standard serif font. So youcan actually include more than just Times New Roman on here. So you can include threeor even for layers sometimes. But for now, we’re just going to use two and we’ll talkabout including very specific fonts in the next two videos, where we’re going to be includingthese 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, maybeyou know, if you’re using an external font, maybe this server has crashed, or maybe it’sjust not available on the browser, then use the serif family, there’s the general seriffont. So if I actually go ahead and remove this, you’re not going to see much of a differencebetween Times New Roman and Sarath.Like I said, you can see there’s not much of a changebecause it pretty much the same thing. But it is there. And if you use a different Sarahfont, such as Georgia, there will be some sort of a difference between the two, youcan see that now, although they aren’t exactly, they aren’t exactly the same, you can seethey both contain those lines, things like that. So that’s why you commonly use morethan more than one fonts, just in case maybe, if you’re using a different browser, maybesomeone’s using a very old browser, like Internet Explorer six or seven, then you can use someof the older fonts. So there you go. That’s pretty much it. For font families, it’s reallynot that hard to grasp. And once you really get into it, it becomes a very, very usefultool. So I’m going to go ahead and actually just change this. But like I was saying, itbecomes a very useful tool, once you get into the later parts of web development, becausechanging the font can completely change the look of your site.So that’s just one thingyou want to keep in mind. Alright, let’s move on. property. So if you go ahead and set fontfamily. Now, this isn’t just for setting the family. This is also for spreading the specificfonts. And I’ll talk about that in just a second. So I’m going to go ahead and say sansserif. So this is the font family that I want and watch what happens to our page. Now, youcan see that it looks completely different. We can actually read everything and it looksa lot cleaner. So that’s why I like san serif fonts. And that’s why most developers muchprefer Sans Serif fonts over serif fonts, you can see that it just looks a lot easieron the eyes. It’s just much easier to read and use. But like I said, you can you don’tjust have to specify the family you can actually specify the specific font. And you can actuallydo this using the comma separator.So first of all, I’m basic set times new roman as themain font. And then I’m going to insert a comma, and then serif. So I’ll explain thisright 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 thiscomma here, pretty much what’s going to happen is, if Times New Roman is available, use thatas the font. But if it isn’t available, then fall back to the standard serif font. So youcan actually include more than just Times New Roman on here. So you can include threeor even for layers sometimes. But for now, we’re just going to use two and we’ll talkabout including very specific fonts in the next two videos, where we’re going to be includingthese 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, maybeyou know, if you’re using an external font, maybe this server has crashed, or maybe it’sjust not available on the browser, then use the serif family, there’s the general seriffont. So if I actually go ahead and remove this, you’re not going to see much of a differencebetween Times New Roman and Sarath.Like I said, you can see there’s not much of a changebecause it pretty much the same thing. But it is there. And if you use a different Sarahfont, such as Georgia, there will be some sort of a difference between the two, youcan see that now, although they aren’t exactly, they aren’t exactly the same, you can seethey both contain those lines, things like that. So that’s why you commonly use morethan more than one fonts, just in case maybe, if you’re using a different browser, maybesomeone’s using a very old browser, like Internet Explorer six or seven, then you can use someof the older fonts.So there you go. That’s pretty much it. For font families, it’s reallynot that hard to grasp. And once you really get into it, it becomes a very, very usefultool. So I’m going to go ahead and actually just change this. But like I was saying, itbecomes a very useful tool, once you get into the later parts of web development, becausechanging the font can completely change the look of your site. So that’s just one thingyou want to keep in mind. Alright, let’s move on. So in this video, we are going to be lookingat actually using some external fonts. We’ve looked at fonts and text, and we know howto manipulate it now. But we don’t actually know the one crucial piece, which is usingexternal fonts. So your computer will most likely come preloaded with a bunch of differentfonts. If you use things like Microsoft Word, or, you know, maybe Google Docs, things likethat.They all come with pre loaded fonts. And although Google Docs technically isn’ton your computer, we’ll just leave it in there for now. So obviously, we have a lot of fontsto choose from in CSS. But first of all, how do we actually know which fonts to use? Andwhat 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 goingand getting fonts from the internet. Now, if you don’t already know this, most peoplewould think that you know, the fonts that you have are set for life, you can’t downloadanymore. Well, fonts are actually a huge growing industry.And there are so many differentfonts out there that you can use, and you can even make your own. So there’s obviouslya 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 nextvideo, we’re going to be including it into our project. So the first source I’m goingto recommend here, which is actually only source, but it’s called Google fonts, it wasput together by Google. And it’s a collection of 915 font families. So you can see we havea 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 lookingat actually using some external fonts.We’ve looked at fonts and text, and we know howto manipulate it now. But we don’t actually know the one crucial piece, which is usingexternal fonts. So your computer will most likely come preloaded with a bunch of differentfonts. If you use things like Microsoft Word, or, you know, maybe Google Docs, things likethat. They all come with pre loaded fonts. And although Google Docs technically isn’ton your computer, we’ll just leave it in there for now. So obviously, we have a lot of fontsto choose from in CSS. But first of all, how do we actually know which fonts to use? Andwhat 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 goingand getting fonts from the internet.Now, if you don’t already know this, most peoplewould think that you know, the fonts that you have are set for life, you can’t downloadanymore. Well, fonts are actually a huge growing industry. And there are so many differentfonts out there that you can use, and you can even make your own. So there’s obviouslya 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 nextvideo, we’re going to be including it into our project. So the first source I’m goingto recommend here, which is actually only source, but it’s called Google fonts, it wasput together by Google. And it’s a collection of 915 font families. So you can see we havea 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 changethe bolding and other settings, we’ll go over that a little bit later in this video. Soyou can head over to this, I’ve linked it in the lecture resources, or you can justcopy the link here from video. And it’s going to take you to this site. So there’s actually915 families on this site, which is a lot to choose from.Now you can see that thereare even you know things in different languages. There’s all sorts of different styles, maybefrom different general families. So this could be from, you know, a sensory family. Thiscould be from a Sarah family. So you can see that there are so many different choices thatyou can use. And depending on what type of website you want to create, you can actuallychoose the fonts that you want. So I’m gonna actually go through now and start pickingsome fonts. So what I would recommend is just go through and look at the many differentfonts you have here. So for example, I think this is a very nice font.So what I’m goingto do is just go ahead and click this plus icon And what it’s going to do here it saysthere’s one family selected, right? If you open it up, you can see that our font hasbeen selected. Now we’re going to work on embedding this in the next video. But fornow, I just want to leave it like this. So you can see that we can actually go aheadand 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 of900. So you can select as many as you want. But you can see that we actually have a loadtype here. So the reason that this is given is because we are including this from theinternet, 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 ofyour 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 toselect every single one of these weights, only select the ones that you think you’regoing 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 thatour load time is fast. So we’re okay. So you can see that apart from our buildings, wecan actually select some of some of the stuff from here. So instead of having to go intoour selection, we can actually just go and straight select it. From here, we can alsochange the size if we wanted to. And then we can click the plus icon. So you can goahead and play around with those when you include your own fonts. But for now, I thinkI’m just going to go with the default size and just add a bolded.So now I’m going togo ahead and actually include a second font, because it’s pretty common in web developmentand web design to include at least two fonts, you know, maybe one for headings, and onefor text. So I’m going to go ahead and find something that kind of fits in with the laterfont that we have here, I’m going to just select it back to the default size. So I’mgoing to try and find something that kind of matches this.It doesn’t have to be obviouslyexactly 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’sactually 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 bold700 as well, you can see that the load time is moderate now because of course, we’re includingmore than one font, but we don’t need to worry about that too much. So there we go. We havethat setup now. So there we go. That’s pretty much it for Google fonts. And you know, usingall these different fonts, now you can go ahead and customize it. Choose whatever makesyour website look good, or maybe whatever you want.But just make sure that you choosea font that really works with your website well and make sure you don’t include too manydifferent weights. So you can keep the load time within Bay. So in the next video, we’reactually going to go through and start importing this into our website. And I’m going to teachyou 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 changethe bolding and other settings, we’ll go over that a little bit later in this video. Soyou can head over to this, I’ve linked it in the lecture resources, or you can justcopy the link here from video. And it’s going to take you to this site. So there’s actually915 families on this site, which is a lot to choose from. Now you can see that thereare even you know things in different languages.There’s all sorts of different styles, maybefrom different general families. So this could be from, you know, a sensory family. Thiscould be from a Sarah family. So you can see that there are so many different choices thatyou can use. And depending on what type of website you want to create, you can actuallychoose the fonts that you want. So I’m gonna actually go through now and start pickingsome fonts. So what I would recommend is just go through and look at the many differentfonts you have here. So for example, I think this is a very nice font. So what I’m goingto do is just go ahead and click this plus icon And what it’s going to do here it saysthere’s one family selected, right? If you open it up, you can see that our font hasbeen selected.Now we’re going to work on embedding this in the next video. But fornow, I just want to leave it like this. So you can see that we can actually go aheadand 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 of900. So you can select as many as you want. But you can see that we actually have a loadtype here. So the reason that this is given is because we are including this from theinternet, 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 ofyour 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 toselect every single one of these weights, only select the ones that you think you’regoing 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 thatour load time is fast.So we’re okay. So you can see that apart from our buildings, wecan actually select some of some of the stuff from here. So instead of having to go intoour selection, we can actually just go and straight select it. From here, we can alsochange the size if we wanted to. And then we can click the plus icon.So you can goahead and play around with those when you include your own fonts. But for now, I thinkI’m just going to go with the default size and just add a bolded. So now I’m going togo ahead and actually include a second font, because it’s pretty common in web developmentand web design to include at least two fonts, you know, maybe one for headings, and onefor text. So I’m going to go ahead and find something that kind of fits in with the laterfont that we have here, I’m going to just select it back to the default size. So I’mgoing to try and find something that kind of matches this. It doesn’t have to be obviouslyexactly 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’sactually 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 bold700 as well, you can see that the load time is moderate now because of course, we’re includingmore than one font, but we don’t need to worry about that too much. So there we go. We havethat setup now. So there we go. That’s pretty much it for Google fonts. And you know, usingall these different fonts, now you can go ahead and customize it.Choose whatever makesyour website look good, or maybe whatever you want. But just make sure that you choosea font that really works with your website well and make sure you don’t include too manydifferent weights. So you can keep the load time within Bay. So in the next video, we’reactually going to go through and start importing this into our website. And I’m going to teachyou some really good failsafe tricks in case Google Fonts fails. Alright, let’s move on. So in the previous video, we started lookingat what type of fonts we can use in our website. Now we’re going to go through and actuallyinclude them. So first of all, let’s just look at our website. For now we have all ofour fonts setup, we have a bunch of text manipulation, ready to go and working on the website. Butnow what I’m going to do is actually go through and start using these external fonts. So we’renot going to use this Arial font anymore, so I’m going to go ahead and erase that. Andalso for the font weight, I’m also going to go ahead and erase that because there’s someissues 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 settingup our website with these external fonts. So the first thing you’ll notice here is thatwhen you go over to your Google fonts, it gives you this link tag to include. So thislink tag is pretty much going to link to Google fonts and pull them from their servers.Sothis is what you’re going to need to copy right here. You’re just going to copy thisand 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 thefonts ready so that when your stylesheet comes along and the compiler is reading it, allof the fonts are already there and ready to go.So there we go. Now that everything’slinked 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’tactually 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 wecan see the changes on the website. So on top of that, this, there’s this little texthere that allows you to do you know, you can just copy the style straight, but I’m goingto 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 selectour font. So we included two fonts, Leto and sorrow boon we’re going to go through is goahead and see which one we want to use.So I’m going to use Leto for the body text. Soright here in quotes, I’m going to go ahead and say, Leto, just like that. And now let’sgo ahead and refresh the page. And you can see how much of a difference that makes. Nowusing this new font, everything has changed, it makes the website look completely differentfrom what it used to be. So there we go, we’ve included that. But let’s go ahead and includeour 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 morespecific than the body selectors.So our font family is going to override the body fontfamily. So let’s go ahead and add that. Right there. Just like that. And let’s go aheadand 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 fontof the titles and subtitles. And you can see why using two fonts on your website makesit look a whole lot better. So there we go. We’ve added all of our fonts. But the onlyproblem is, we know that what what’s happening beside behind the scenes is that this linktag 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 theGoogle Fonts servers themselves are down.This is where we need to use the trick welearned 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, normallyit’s going to use the font specified. But if there’s some problem, and we can’t getthese fonts, maybe Google servers are down, it’s going to go over to the next font. Andwe know that sans serif is included on every single machine, which means that it’s goingto work fine. So let’s go ahead and do that. Now. If you remember, all we have to do isgo ahead and add a comma, and then put the name of the family, which in this case issans serif. We’re going to do this for the other two as well. So in the previous video, we started lookingat what type of fonts we can use in our website. Now we’re going to go through and actuallyinclude them.So first of all, let’s just look at our website. For now we have all ofour fonts setup, we have a bunch of text manipulation, ready to go and working on the website. Butnow what I’m going to do is actually go through and start using these external fonts. So we’renot going to use this Arial font anymore, so I’m going to go ahead and erase that. Andalso for the font weight, I’m also going to go ahead and erase that because there’s someissues 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 settingup our website with these external fonts. So the first thing you’ll notice here is thatwhen you go over to your Google fonts, it gives you this link tag to include. So thislink tag is pretty much going to link to Google fonts and pull them from their servers. Sothis is what you’re going to need to copy right here.You’re just going to copy thisand 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 thefonts ready so that when your stylesheet comes along and the compiler is reading it, allof the fonts are already there and ready to go. So there we go. Now that everything’slinked 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’tactually 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 wecan see the changes on the website. So on top of that, this, there’s this little texthere that allows you to do you know, you can just copy the style straight, but I’m goingto 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 selectour font. So we included two fonts, Leto and sorrow boon we’re going to go through is goahead and see which one we want to use.So I’m going to use Leto for the body text. Soright here in quotes, I’m going to go ahead and say, Leto, just like that. And now let’sgo ahead and refresh the page. And you can see how much of a difference that makes. Nowusing this new font, everything has changed, it makes the website look completely differentfrom what it used to be. So there we go, we’ve included that. But let’s go ahead and includeour 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 morespecific than the body selectors.So our font family is going to override the body fontfamily. So let’s go ahead and add that. Right there. Just like that. And let’s go aheadand 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 fontof the titles and subtitles. And you can see why using two fonts on your website makesit look a whole lot better. So there we go. We’ve added all of our fonts. But the onlyproblem is, we know that what what’s happening beside behind the scenes is that this linktag 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 theGoogle Fonts servers themselves are down. This is where we need to use the trick welearned 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, normallyit’s going to use the font specified. But if there’s some problem, and we can’t getthese fonts, maybe Google servers are down, it’s going to go over to the next font. Andwe know that sans serif is included on every single machine, which means that it’s goingto work fine.So let’s go ahead and do that. Now. If you remember, all we have to do isgo ahead and add a comma, and then put the name of the family, which in this case issans serif. We’re going to do this for the other two as well. And this one as well. Now, of course, thisis going to change based on the font that you use. And I’m actually going to show youthis right here. Let’s remove both of these and add a serif font. So this would be considereda 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 cansee just to prove that point that the family is going to depend on the font itself. Sowe explained a little bit about font families in that video. And obviously, all of themhave different characteristics.So of course, like I said, it depends completely on thetype 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’sjust one thing you need to keep in mind is that you want to make sure your fallback fontis both included on every machine. And it’s kind of similar to our font here. Now, ifI actually go ahead and erase this, now let’s go ahead and see, obviously, there is a visualdifference, but it still has that same style.There’s no lines, it’s clean to read. It’sjust straightforward. So that’s one thing you want to make sure of. Alright, so that’spretty much it for fonts. Next, we’re going to move on to layout, which is really gonnachange the way that this website looks. Alright, let’s move on. And this one as well. Now, of course, thisis going to change based on the font that you use. And I’m actually going to show youthis right here. Let’s remove both of these and add a serif font. So this would be considereda 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 cansee just to prove that point that the family is going to depend on the font itself. Sowe explained a little bit about font families in that video. And obviously, all of themhave different characteristics. So of course, like I said, it depends completely on thetype 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’sjust one thing you need to keep in mind is that you want to make sure your fallback fontis both included on every machine. And it’s kind of similar to our font here. Now, ifI actually go ahead and erase this, now let’s go ahead and see, obviously, there is a visualdifference, but it still has that same style.There’s no lines, it’s clean to read. It’sjust straightforward. So that’s one thing you want to make sure of. Alright, so that’spretty much it for fonts. Next, we’re going to move on to layout, which is really gonnachange the way that this website looks. Alright, let’s move on. So the next few videos are going to be focusedon CSS layout. So we’re pretty much done, at least for now with coloring and text andall of the cool features we can do with them.But now we’re gonna actually go through andstart using our skills with different well, new skills that we can actually put togetherand create really, really nice, awesome websites. So layout is probably one of the most powerfultools that you can use in CSS and completely change the way your website looks. But beforewe move on, we need to learn a little bit of theory behind how CSS works. So there’sthis concept in CSS called the box model, and it’s pretty much the the what happensis every Simple element is surrounded by an invisible box. Now this box has differentlayers, which we’re going to explain in the next video.But all of these boxes are touchingtogether, they’re kind of connected, what you can do is actually change the shapes ofthese boxes and change the shapes of the layers in order to move things around, and positionthem on a page in a way that makes the website look much better. Now, obviously, this isn’tthe only way of shaping your website, there are so many different methods, Flexbox, andgrid, and we’re all going to cover them later in this course.But for now, this is the basickind of layout features that you need to use, so that you can move on and start using someof the most complex features. So this is kind of what that invisible box looks like. Soat 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 centercontains the content. But then the other three layers are something completely unknown. Andwe’re going to be going through and explaining what those do. But for now, just understandthat 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 fromthe margin. But pretty much let’s just assume for now that the margin kind of move thingsaround, and it doesn’t actually move the content around, what padding is supposed to do isit’s basically supposed to give more room around the content itself, it’s not reallymeant to move the content around.So it’ll make some more sense when I go over marginif you don’t understand it now, but let’s move on to the next layer. The border is prettymuch the divide, or the separation line between the content, the padding and the margin. Soborders can be styled and changed. And by default, they’re invisible. But we can actuallygo through and change how they look which we’re going to be going through in a couplevideos time. So the border doesn’t actually create any spacing or anything itself, unlessyou wanted to.But pretty much what the border is supposed to be is kind of that divisionline. So the last layer that I want to talk about is the margin. So just like how thepadding is supposed to give spacing, or well padding around the content, the margin issupposed to move the content around and give it space between other elements. So whilethe 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 imageand then some text under it, you can use the margin of the text to kind of push it downfrom the image, whereas the padding will just kind of make internal space. Now, althoughit’s not the best example, as we go on and start using it, you’ll get this a lot moreif you don’t already. Alright, so that’s pretty much it for the box model. It’s a very, verysimple concept. But it can be really used to a very high potential, and it does containa lot of features that we’re going to be going over in the next few videos.Alright, let’smove on. So the next few videos are going to be focusedon CSS layout. So we’re pretty much done, at least for now with coloring and text andall of the cool features we can do with them. But now we’re gonna actually go through andstart using our skills with different well, new skills that we can actually put togetherand create really, really nice, awesome websites. So layout is probably one of the most powerfultools that you can use in CSS and completely change the way your website looks. But beforewe move on, we need to learn a little bit of theory behind how CSS works. So there’sthis concept in CSS called the box model, and it’s pretty much the the what happensis every Simple element is surrounded by an invisible box. Now this box has differentlayers, which we’re going to explain in the next video.But all of these boxes are touchingtogether, they’re kind of connected, what you can do is actually change the shapes ofthese boxes and change the shapes of the layers in order to move things around, and positionthem on a page in a way that makes the website look much better. Now, obviously, this isn’tthe only way of shaping your website, there are so many different methods, Flexbox, andgrid, and we’re all going to cover them later in this course. But for now, this is the basickind of layout features that you need to use, so that you can move on and start using someof the most complex features. So this is kind of what that invisible box looks like. Soat 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 centercontains the content.But then the other three layers are something completely unknown. Andwe’re going to be going through and explaining what those do. But for now, just understandthat 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 fromthe margin. But pretty much let’s just assume for now that the margin kind of move thingsaround, and it doesn’t actually move the content around, what padding is supposed to do isit’s basically supposed to give more room around the content itself, it’s not reallymeant to move the content around. So it’ll make some more sense when I go over marginif you don’t understand it now, but let’s move on to the next layer.The border is prettymuch the divide, or the separation line between the content, the padding and the margin. Soborders can be styled and changed. And by default, they’re invisible. But we can actuallygo through and change how they look which we’re going to be going through in a couplevideos time. So the border doesn’t actually create any spacing or anything itself, unlessyou wanted to. But pretty much what the border is supposed to be is kind of that divisionline. So the last layer that I want to talk about is the margin.So just like how thepadding is supposed to give spacing, or well padding around the content, the margin issupposed to move the content around and give it space between other elements. So whilethe 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 imageand then some text under it, you can use the margin of the text to kind of push it downfrom the image, whereas the padding will just kind of make internal space. Now, althoughit’s not the best example, as we go on and start using it, you’ll get this a lot moreif you don’t already.Alright, so that’s pretty much it for the box model. It’s a very, verysimple concept. But it can be really used to a very high potential, and it does containa lot of features that we’re going to be going over in the next few videos. Alright, let’smove on. So now what we’re going to be doing is goingthrough and starting to use the first layer of the box model, which in this case is thecontent itself. So although not technically a layer of this invisible box, it’s stilla big part of layout, and the shaping of things on your document, because the way you shapeand while style, your content is going to completely change how the rest of the boxmodels affected your padding and your margin.So what we’re going to be doing is going throughand using some of these. And if you actually remember, right here, we have already usedthe two main features of shaping content, height and width. So we’ve already prettymuch learned these properties. But I’m going to go through and do a couple more examplesjust so you can get the shape of things and how to use them. So first thing I want totalk about is the units that you should use. So usually on a page, the best way to do thisis using pixels or some absolute unit for height. But then for width, use a relativeunits such as v w, or percentage.Now we do this because although height is very, veryhard to determine responsively at least, they kind of stay the same as you move down sothe height is going to kind of stay consistent. The only problem is the width completely changeseverything. So the width of devices is very different from place to place. So a phonewould be quite a small width whereas you know full screen TV would be very wide width. Sothat’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’sgo through and actually use it on this image here.So the first thing I want to do is goahead and give this a class, we’re actually I’m going to give it an ID. So I’m going togive it an ID of about us image, just like that. All right, now, let’s go ahead and selectit here, I’m going to go hash about us image.Remember the id selector. And now what we’regoing to do is go through and start adding our, our properties. So the first thing I’mgoing to add is the height. So I’m just going to make this a cool 300 pixels, just to seehow it is. And most of this is very experimental, you’re not supposed to go through and changeeverything. And, you know, well, well you are, but you’re not supposed to go throughand 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 withthe 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%, itwould 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 goingthrough and starting to use the first layer of the box model, which in this case is thecontent itself. So although not technically a layer of this invisible box, it’s stilla big part of layout, and the shaping of things on your document, because the way you shapeand while style, your content is going to completely change how the rest of the boxmodels affected your padding and your margin.So what we’re going to be doing is going throughand using some of these. And if you actually remember, right here, we have already usedthe two main features of shaping content, height and width. So we’ve already prettymuch learned these properties. But I’m going to go through and do a couple more examplesjust so you can get the shape of things and how to use them. So first thing I want totalk about is the units that you should use. So usually on a page, the best way to do thisis using pixels or some absolute unit for height. But then for width, use a relativeunits such as v w, or percentage. Now we do this because although height is very, veryhard to determine responsively at least, they kind of stay the same as you move down sothe height is going to kind of stay consistent. The only problem is the width completely changeseverything.So the width of devices is very different from place to place. So a phonewould be quite a small width whereas you know full screen TV would be very wide width. Sothat’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’sgo through and actually use it on this image here. So the first thing I want to do is goahead and give this a class, we’re actually I’m going to give it an ID.So I’m going togive it an ID of about us image, just like that. All right, now, let’s go ahead and selectit here, I’m going to go hash about us image. Remember the id selector. And now what we’regoing to do is go through and start adding our, our properties. So the first thing I’mgoing to add is the height. So I’m just going to make this a cool 300 pixels, just to seehow it is. And most of this is very experimental, you’re not supposed to go through and changeeverything. And, you know, well, well you are, but you’re not supposed to go throughand 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 withthe 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%, itwould 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 herealready, so I’m going to go ahead and add percentage, there we go. Now, of course, youcould 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 samefor our purposes. So you can use whichever one you want. So there we go, we’ve changedit. Now if we go ahead and resize of most, you can actually go ahead and see that thewidth is going to be pretty much the same, well, the height stays constant. So one thingI want to talk about is a really cool feature that we can use in Chrome.And you can seethat’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 Chromewindow without actually having to use different devices. So if you go ahead and click on theicon, just right click anywhere on the page, click on Inspect, and it’s going to bringyou here to this page. And you can actually select any device you want from the drop downmenu and see how it would look on that on that device. So I can pretty much do whateverI want here. If I wanted to select an iPad, even an iPad Pro, you can actually see whatit would look like on the device. So this is a really useful feature that you can useto make sure that your website works everywhere, instead of having to go and upload it somewhereand 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 likethat you can see, and it will work perfectly. So yeah, that’s great. And you know, if maybeif you don’t want to use these devices from this drop down menu, you can actually go throughand change the size here, which is really useful. So I’m going to go ahead and closethis 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 supposedto go through and see what works.And obviously, you don’t have to use an absolute value. It’snot set in stone, but you’re supposed to go through and see what works for you. And fromthere, you can set the value. So this is just kind of a little experimental thing to teachyou how to use these features. But like I said, this website’s all about what this courseis all about practicing and getting experienced with this. So you can go through, check outthe project files and play around with these values yourself, really get a feel for howthis works.So that’s pretty much it for content resizing, it’s very easy, there’s only twoproperties 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 endof it, we’ll really know how to master the layout and really manipulate our page in thebest possible way. Alright, let’s move on. actually, you know what, we have V w herealready, so I’m going to go ahead and add percentage, there we go. Now, of course, youcould 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 samefor our purposes.So you can use whichever one you want. So there we go, we’ve changedit. Now if we go ahead and resize of most, you can actually go ahead and see that thewidth is going to be pretty much the same, well, the height stays constant. So one thingI want to talk about is a really cool feature that we can use in Chrome. And you can seethat’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 Chromewindow without actually having to use different devices.So if you go ahead and click on theicon, just right click anywhere on the page, click on Inspect, and it’s going to bringyou here to this page. And you can actually select any device you want from the drop downmenu and see how it would look on that on that device. So I can pretty much do whateverI want here. If I wanted to select an iPad, even an iPad Pro, you can actually see whatit would look like on the device. So this is a really useful feature that you can useto make sure that your website works everywhere, instead of having to go and upload it somewhereand 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 likethat you can see, and it will work perfectly. So yeah, that’s great. And you know, if maybeif you don’t want to use these devices from this drop down menu, you can actually go throughand change the size here, which is really useful. So I’m going to go ahead and closethis 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 supposedto go through and see what works. And obviously, you don’t have to use an absolute value. It’snot set in stone, but you’re supposed to go through and see what works for you. And fromthere, you can set the value. So this is just kind of a little experimental thing to teachyou how to use these features.But like I said, this website’s all about what this courseis all about practicing and getting experienced with this. So you can go through, check outthe project files and play around with these values yourself, really get a feel for howthis works. So that’s pretty much it for content resizing, it’s very easy, there’s only twoproperties 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 endof it, we’ll really know how to master the layout and really manipulate our page in thebest possible way. Alright, let’s move on. So in this video, we’re going to be focusingon one of the parts of the box model, which are mortars. So in the previous video, I talkeda little bit about some of the different layers of the box model and how they work. But inthis video, we’re actually going to be focusing on manipulating one of those layers, whichis 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 boxmodel comes together. Alright, let’s get started. So for the next few videos, we’re mainly goingto be working with the images simply because they’re just easier to manipulate and setthe 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 stylesthat you can use to style the borders. But we’re going to be using the main shorthandthat allows us to style everything all at once.So the property is similar to our backgroundproperty here, all you need to type is border, whoops, you do on the image. So I’m goingto go here on our radial gradients. And I’m going to start adding our border. So let’sgo ahead and get started. So what I’m going to do is just type border. And remember, everysingle element has a box around it has this box model or invisible box. So it doesn’tmatter what you choose, you can always style these elements, it might look weird on someelements like this text here, but you can do it with everything. So there are threemain parts to this element here. First is going to be the size. So we’ll talk aboutthat 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 goahead and start talking about this.So size is pretty similar to you know, changing thesize 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 somewherebetween, you know, one and three or four pixels, we can go much thicker than that, dependingon what you need. So I’m going to go ahead and show you want to pixels looked like.Soremember separated by a space. Now we’re going to go over the style. So there are many differentstyles 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. Nownormally, you’re going to see solid, that’s pretty much the most common one, I’ll showyou the other versions of this in just a second. So I’m going to go ahead and type solid, andnow come to the color. So as we learned refer before this can be a named color, this canbe 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’snot, let’s not use the color picker, let’s just use our RGB color skills. And take thecolor of the background, which is here. So we’re going to take those four. And I’m goingto go back to our image here and paste it in. And now what I’m going to do is just darkeneverything. And if you remember, the darker it gets the higher oak sorry, the lower allof these values get. So I’m just going to lower them all by about 50. So here, I’m justgoing to go 154. Now, again, this doesn’t have to be exact, or anything you can, youcan put really, whatever you want here, but I’m just trying to darken everything, I’mjust 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 theend of the background. So that’s one thing you need to keep in mind. There we go. Nowit’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 obvioushere with our bright red color there.But what I’m actually going to do is go aheadand just play around with some of these and see if we can change the features. So firstthing I’m going to do is go ahead and change the height. So I’m going to go ahead and setit 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 youwant your border to look like. So now let’s go ahead and change the style. So let’s goahead and try out some of these other styles. So first, I’m going to try dotted. So youcan see now we have a dotted border. Now let’s go ahead and try dashed. So in this video, we’re going to be focusingon one of the parts of the box model, which are mortars.So in the previous video, I talkeda little bit about some of the different layers of the box model and how they work. But inthis video, we’re actually going to be focusing on manipulating one of those layers, whichis 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 boxmodel comes together. Alright, let’s get started. So for the next few videos, we’re mainly goingto be working with the images simply because they’re just easier to manipulate and setthe 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 stylesthat you can use to style the borders.But we’re going to be using the main shorthandthat allows us to style everything all at once. So the property is similar to our backgroundproperty here, all you need to type is border, whoops, you do on the image. So I’m goingto go here on our radial gradients. And I’m going to start adding our border. So let’sgo ahead and get started. So what I’m going to do is just type border. And remember, everysingle element has a box around it has this box model or invisible box. So it doesn’tmatter what you choose, you can always style these elements, it might look weird on someelements like this text here, but you can do it with everything. So there are threemain parts to this element here. First is going to be the size. So we’ll talk aboutthat 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 goahead and start talking about this. So size is pretty similar to you know, changing thesize 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 somewherebetween, you know, one and three or four pixels, we can go much thicker than that, dependingon what you need. So I’m going to go ahead and show you want to pixels looked like. Soremember separated by a space. Now we’re going to go over the style. So there are many differentstyles 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. Nownormally, you’re going to see solid, that’s pretty much the most common one, I’ll showyou the other versions of this in just a second.So I’m going to go ahead and type solid, andnow come to the color. So as we learned refer before this can be a named color, this canbe 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’snot, let’s not use the color picker, let’s just use our RGB color skills. And take thecolor of the background, which is here. So we’re going to take those four. And I’m goingto go back to our image here and paste it in. And now what I’m going to do is just darkeneverything. And if you remember, the darker it gets the higher oak sorry, the lower allof these values get. So I’m just going to lower them all by about 50. So here, I’m justgoing to go 154. Now, again, this doesn’t have to be exact, or anything you can, youcan put really, whatever you want here, but I’m just trying to darken everything, I’mjust 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 theend of the background. So that’s one thing you need to keep in mind. There we go. Nowit’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 obvioushere with our bright red color there. But what I’m actually going to do is go aheadand just play around with some of these and see if we can change the features. So firstthing I’m going to do is go ahead and change the height. So I’m going to go ahead and setit 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 youwant your border to look like.So now let’s go ahead and change the style. So let’s goahead and try out some of these other styles. So first, I’m going to try dotted. So youcan see now we have a dotted border. Now let’s go ahead and try dashed. And you’re kind of getting the idea of howthis works. Let’s see doubled, I think or double actually, I think that’s probably thebest other than solid. Yeah, you can see that that looks pretty nice. Here, we have thatdouble border. It’s pretty useful in styling, but it’s not really used very commonly. Sothe last thing I want to go ahead and change is the color. So I’m going to go ahead andjust take a color from the color picker, I don’t really feel like going through the wholeRGB process again, let’s go ahead and just take this color, it’s quite dark. Let’s goahead and refresh our page and see what it looks like.And now you can see the colorhas changed. So you can see the borders are not only useful for just changing the styleof this of an image or a box or any box in that for that matter. They’re also usefulfor showing how the box model works. So I’m going to go ahead and change this back tosolid so you can get a better view. So if you remember in the last video we talked aboutthe different layers of the wall model, and we remembered that the padding was used toseparate or create spacing between the content and the border. In this case, you can seethat the border and the content are directly touching, which means there is pretty muchno padding at all, because there’s no space in between them. On top of that, you can seethat 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 andthe image.But that’s due to other margins. We’ll talk about that when we get later inthis section. And so you can see that this doesn’t have much margin either. So you canstart to see here how this whole box model comes together and how you can see what’sgoing on. So yeah, that’s a pretty useful way to kind of look at the box model and seehow everything comes together. In the next few videos, we’re going to be looking at theother layers of the box model. And then we’re going to bring it all together and start reallychanging up this the way this website looks. Alright, let’s move on. And you’re kind of getting the idea of howthis works.Let’s see doubled, I think or double actually, I think that’s probably thebest other than solid. Yeah, you can see that that looks pretty nice. Here, we have thatdouble border. It’s pretty useful in styling, but it’s not really used very commonly. Sothe last thing I want to go ahead and change is the color. So I’m going to go ahead andjust take a color from the color picker, I don’t really feel like going through the wholeRGB process again, let’s go ahead and just take this color, it’s quite dark. Let’s goahead and refresh our page and see what it looks like. And now you can see the colorhas changed. So you can see the borders are not only useful for just changing the styleof this of an image or a box or any box in that for that matter.They’re also usefulfor showing how the box model works. So I’m going to go ahead and change this back tosolid so you can get a better view. So if you remember in the last video we talked aboutthe different layers of the wall model, and we remembered that the padding was used toseparate or create spacing between the content and the border. In this case, you can seethat the border and the content are directly touching, which means there is pretty muchno padding at all, because there’s no space in between them. On top of that, you can seethat 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 andthe image.But that’s due to other margins. We’ll talk about that when we get later inthis section. And so you can see that this doesn’t have much margin either. So you canstart to see here how this whole box model comes together and how you can see what’sgoing on. So yeah, that’s a pretty useful way to kind of look at the box model and seehow everything comes together. In the next few videos, we’re going to be looking at theother layers of the box model. And then we’re going to bring it all together and start reallychanging up this the way this website looks. Alright, let’s move on. So in this video, we’re going to be movingon to the next two main layers of our box model.And in this video, we’re going to betalking about margin and padding. So you kind of already have an idea of what these twoare, we’ve talked about them. In the first video, we’ve talked about what they do, wehaven’t actually talked about how to manipulate them. So in this video, what I’m going tobe doing, what I’m going to be doing is going through and working with these two propertiesto 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 choosethe right thing to manipulate. And in this case, the best thing to work with is an imageright here, because it’s very easy to see and see the changes when you when you do thesemargin 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 responsiblefor what. So let’s get started. Now similar to the rest of the properties, the namingis pretty straightforward. In this case, we’re going to go ahead and use the shorthand marginproperty. But I’m also going to be showing you a few other ways, which I didn’t showyou with the border.Because these are a little bit easier. And they’re kind of hard to understandif you just use the shorthand property, so I’m going to be just building it from theground up. So the first property I’m going to look at is, of course, the shorthand marginproperty, and how to add margin and padding to all sides at the same time. So in caseyou didn’t know, this is called top, this is called bottom, this is left and this isright. But I’m sure you know that especially with working with multiple backgrounds, thingslike that.And pretty much the same throughout all of CSS. So let’s get started. So the firstthing I’m going to do is go ahead and find my image. And then I’m going to choose whichbox 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 startadding whatever we want. So remember, if you add just one value, it’s going to add it thesame value to all sides. So I’m going to say for example, right now 20 pixels. Now if Igo ahead and refresh the page, you can see that there is 20 pixels of space in betweenall sides of our image. So you can see 20 pixels on the left on the right on the topand on the bottom. So you can see what’s going on here with our padding free increase thisvalue, for example, it’s going to it’s going to almost double and now we have 40 pixelson each side. So that’s just a little bit of information about padding, you can seethe spacing between the content, and the border is getting a lot bigger. Now let’s go aheadand change this to margin and see what happens. So I’m actually just going to completely removethis and refresh the page. So now let’s go ahead and add our 40 pixel margin, we’ll justsay for now, so you can really see the difference.So now you can see that the content or thespace 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 sideof the page, the border and the top side, the border on the right and the border andthe bottom. So you can see that margin is moving the image itself around the page, whereasthe padding is just adding space inside the image. So now let’s go ahead and talk aboutsome 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 cango ahead and see our differences a lot more clear.So what you can actually do is adda dash and then the name of the side to it. To actually specify which side you want thepadding to be added to. So let’s just say I wanted to add it to the right side. Nowif I refresh the page, you can see that all of this still stays the same. But on the rightside, there is 40 pixels of padding.You can do this with as many as you want. So you cango padding top, for example. And I want 100 pixels on the top, and let’s just say on thebottom. And remember, always with the dash, I just want only five pixels. Now if we goahead and refresh the page, you can see it looks quite unbalanced, but you have 100 pixelson the top, we have 40 pixels on the right and five on the bottom. Now obviously, thisgets a little bit tedious after a while, after you keep you know doing padding right topbottom left, top right, top right, bottom left, and it gets quite irritating after awhile. So what I’m going to do is show you a really cool shorthand that you can use tostyle 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 movingon to the next two main layers of our box model. And in this video, we’re going to betalking about margin and padding. So you kind of already have an idea of what these twoare, we’ve talked about them. In the first video, we’ve talked about what they do, wehaven’t actually talked about how to manipulate them. So in this video, what I’m going tobe doing, what I’m going to be doing is going through and working with these two propertiesto 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 choosethe right thing to manipulate. And in this case, the best thing to work with is an imageright here, because it’s very easy to see and see the changes when you when you do thesemargin 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 responsiblefor what.So let’s get started. Now similar to the rest of the properties, the namingis pretty straightforward. In this case, we’re going to go ahead and use the shorthand marginproperty. But I’m also going to be showing you a few other ways, which I didn’t showyou with the border. Because these are a little bit easier. And they’re kind of hard to understandif you just use the shorthand property, so I’m going to be just building it from theground up. So the first property I’m going to look at is, of course, the shorthand marginproperty, and how to add margin and padding to all sides at the same time. So in caseyou didn’t know, this is called top, this is called bottom, this is left and this isright.But I’m sure you know that especially with working with multiple backgrounds, thingslike that. And pretty much the same throughout all of CSS. So let’s get started. So the firstthing I’m going to do is go ahead and find my image. And then I’m going to choose whichbox 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 startadding whatever we want. So remember, if you add just one value, it’s going to add it thesame value to all sides. So I’m going to say for example, right now 20 pixels. Now if Igo ahead and refresh the page, you can see that there is 20 pixels of space in betweenall sides of our image. So you can see 20 pixels on the left on the right on the topand on the bottom. So you can see what’s going on here with our padding free increase thisvalue, for example, it’s going to it’s going to almost double and now we have 40 pixelson each side. So that’s just a little bit of information about padding, you can seethe spacing between the content, and the border is getting a lot bigger. Now let’s go aheadand change this to margin and see what happens. So I’m actually just going to completely removethis and refresh the page. So now let’s go ahead and add our 40 pixel margin, we’ll justsay for now, so you can really see the difference.So now you can see that the content or thespace 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 sideof the page, the border and the top side, the border on the right and the border andthe bottom. So you can see that margin is moving the image itself around the page, whereasthe padding is just adding space inside the image. So now let’s go ahead and talk aboutsome 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 cango ahead and see our differences a lot more clear. So what you can actually do is adda dash and then the name of the side to it.To actually specify which side you want thepadding to be added to. So let’s just say I wanted to add it to the right side. Nowif I refresh the page, you can see that all of this still stays the same. But on the rightside, there is 40 pixels of padding. You can do this with as many as you want. So you cango padding top, for example. And I want 100 pixels on the top, and let’s just say on thebottom. And remember, always with the dash, I just want only five pixels. Now if we goahead and refresh the page, you can see it looks quite unbalanced, but you have 100 pixelson the top, we have 40 pixels on the right and five on the bottom. Now obviously, thisgets a little bit tedious after a while, after you keep you know doing padding right topbottom left, top right, top right, bottom left, and it gets quite irritating after awhile. So what I’m going to do is show you a really cool shorthand that you can use tostyle 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 fourvalues separated by spaces, but it’s a little bit confusing at first, okay, so just bearwith me. Now, what I’m going to do is for the left, I don’t want anything. So let’sjust 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 tosay zero. Now, you could say zero pixels. But in this case, we don’t want anything atall. 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’sgo 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 thebottom 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 seethat now it’s exactly the same. So here’s what you have to kind of remember, the firstone is the top, the second is the right, then the bottom and left. So an easy way to rememberthis 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 keepthat in mind and you’ll be fine. So if you if you ever forget, you can always go andcheck 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 cansee what’s going on. Now you can see if I change the margin, actually, it stays in thesame position. But instead of adding internal space, it’s adding external space. So that’sjust 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 talkabout shortening this into actually only two sections, because let’s just say on the topand bottom, you want a certain margin, but then on the left hand, right you want anotherthis is a pretty common thing that you you’re going to want to do in CSS.So I’m going toshow 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 goingto be for the top and bottom at the same time. So I’m going to go ahead and add 80 pixelsof padding, Oh, whoops, 80 pixels. There we go. And now for ourselves whoops, now forour second value, it’s going to be our left and right values at the same time.So I’mgoing to go ahead and add 40 pixels doesn’t matter the order, because this is always goingto be for the top and bottom, this is always going to be 40, left and right. So just makesure that they are equal. So let’s go ahead and refresh. And now you can see the leftand right have kind of stayed a little bit shorter. Whereas the top and bottom are verythe margin is very big. As you can see here, the top and bottom is double the left andright. So that’s a nice shorthand that you can use to style to different or Well, twodifferent sides. So for example, now, if you split, if you can just take this part andthis part style, the style and at the same time, and then you take the left and rightand do the same thing with them. So I know that’s a lot to take in. And there’s a lotof different ways. But just remember, if you ever get confused, you can either use theinternet, or just use margin dash and then the position. But other than that, all youneed to know for now is the concept.You just need to know how margin and padding work andhow you can actually manipulate them what they do. I mean, what do you do when you saythe margin left is 10 pixels. So just make sure that you know that, you know when youadd a certain space to a position, you’re basically changing the spacing between somethingand another thing based on what whichever layer you chose. So for example, if you chosepadding, you’re going to be changing the spacing between the content and the border. So that’spretty much it for margin and padding. Now we’re going to get a lot more experience withthis as we go through the course and style more things. But for now, just make sure youknow 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 fourvalues separated by spaces, but it’s a little bit confusing at first, okay, so just bearwith me. Now, what I’m going to do is for the left, I don’t want anything. So let’sjust 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 tosay zero. Now, you could say zero pixels. But in this case, we don’t want anything atall. 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’sgo 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 thebottom 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 seethat now it’s exactly the same. So here’s what you have to kind of remember, the firstone is the top, the second is the right, then the bottom and left. So an easy way to rememberthis 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 keepthat in mind and you’ll be fine. So if you if you ever forget, you can always go andcheck 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 cansee what’s going on. Now you can see if I change the margin, actually, it stays in thesame position. But instead of adding internal space, it’s adding external space. So that’sjust 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 talkabout shortening this into actually only two sections, because let’s just say on the topand bottom, you want a certain margin, but then on the left hand, right you want anotherthis is a pretty common thing that you you’re going to want to do in CSS.So I’m going toshow 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 goingto be for the top and bottom at the same time. So I’m going to go ahead and add 80 pixelsof padding, Oh, whoops, 80 pixels. There we go. And now for ourselves whoops, now forour second value, it’s going to be our left and right values at the same time. So I’mgoing to go ahead and add 40 pixels doesn’t matter the order, because this is always goingto be for the top and bottom, this is always going to be 40, left and right.So just makesure that they are equal. So let’s go ahead and refresh. And now you can see the leftand right have kind of stayed a little bit shorter. Whereas the top and bottom are verythe margin is very big. As you can see here, the top and bottom is double the left andright. So that’s a nice shorthand that you can use to style to different or Well, twodifferent sides. So for example, now, if you split, if you can just take this part andthis part style, the style and at the same time, and then you take the left and rightand do the same thing with them. So I know that’s a lot to take in. And there’s a lotof different ways. But just remember, if you ever get confused, you can either use theinternet, or just use margin dash and then the position. But other than that, all youneed to know for now is the concept. You just need to know how margin and padding work andhow you can actually manipulate them what they do.I mean, what do you do when you saythe margin left is 10 pixels. So just make sure that you know that, you know when youadd a certain space to a position, you’re basically changing the spacing between somethingand another thing based on what whichever layer you chose. So for example, if you chosepadding, you’re going to be changing the spacing between the content and the border. So that’spretty much it for margin and padding. Now we’re going to get a lot more experience withthis as we go through the course and style more things. But for now, just make sure youknow 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, becausewe’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 lookat documents. So the two properties that we’re going to be looking at are float, which isthe less important one and display, which is the very important properties that we needto learn. So let’s cover float first, because it’s an easier thing to approach. But beforewe start for both of these elements, you need to understand the concept of inline and blocklevel elements. So first of all elements have a certain display type, which we’re goingto be manipulating in the next property. This display type pretty much defines the behaviorof the elements. So there are two main display types block and inline.So pretty much ifwe look at our HTML document, here we go through and you can see all of these tags, creatingthese tags create a sort of a sort of display behavior for the content inside them. So theblock 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 cansee that if this was an inline element would be flowing with the rest of the things. Butyou can see here, despite the margin, this is moved on to its own section, it’s not playingor moving after the image, it’s moved on to its own section, and everything after it comesafter Well, the block. On the other hand, an inline element is something that won’treally move anything onto its own section, it’s going to keep it keep it intact, it’snot going to move it or change it in any way, it’s just going to leave it how it naturallyoccurs on the page.So an example, a very good example of one of these would be a spantag, because what a span tag pretty much does is it’s used to contain some piece of contentin an inline style. So for example, this italics class would be a perfect representation ofan inline tag, what we’re trying to do is I telesign, some text. And if the span wasa block level element, this text here, this italic size, text would be moved on to itsown section, so everything preceding it would come before it. And then there would be anew line with the text. And then after it would come the rest of the text. So you cansee there that the inline and block level tags really make a difference depending onwhat you want to use it for. So what we’re going to be doing in this video is going throughand learning how to change the display type of these different elements. But first, let’stalk about float. So again, these tags come with a natural display type and how they areplaced on the page is how they naturally occur.But there’s actually a way to change the waythat they look. And this is done using float. So if you just listen to the name there, whatelement pretty much does is change how the element will float on the page. So I’ll goahead 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 andI’m going to say it float to the right and watch what happens. You can see that now whathappens is pretty much this just flows over to the right side of the page. And it alsochanges all the content after it. So you can see that this content here has now been pushedup. So this kind of shows how a little bit of how flow works.And this doesn’t just haveto be with images, we can do it with text as well. So if I go through and choose somethinglike 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. Andyou can see that that kind of flows over to the right and everything before it is nowkind of pushed up where it was. So you can think of this as kind of a kind of a Tetrispuzzle block. When you’re moving something over, everything is going to be pushed upor 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, youcan kind of predict where everything is going to move on the page.But floats are reallyuseful for laying out documents. Especially if you want to kind of Have position imagesnext to text or move things around in a way that looks more like a proper document. SoI’m going to remove that float. And I’m just going to do it with our image over here, whichwith our image, our about us image. So I’m going to go ahead and say it floats over tothe right.So this is a pretty important video, becausewe’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 lookat documents. So the two properties that we’re going to be looking at are float, which isthe less important one and display, which is the very important properties that we needto learn. So let’s cover float first, because it’s an easier thing to approach. But beforewe start for both of these elements, you need to understand the concept of inline and blocklevel elements.So first of all elements have a certain display type, which we’re goingto be manipulating in the next property. This display type pretty much defines the behaviorof the elements. So there are two main display types block and inline. So pretty much ifwe look at our HTML document, here we go through and you can see all of these tags, creatingthese tags create a sort of a sort of display behavior for the content inside them. So theblock 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 cansee that if this was an inline element would be flowing with the rest of the things. Butyou can see here, despite the margin, this is moved on to its own section, it’s not playingor moving after the image, it’s moved on to its own section, and everything after it comesafter Well, the block. On the other hand, an inline element is something that won’treally move anything onto its own section, it’s going to keep it keep it intact, it’snot going to move it or change it in any way, it’s just going to leave it how it naturallyoccurs on the page.So an example, a very good example of one of these would be a spantag, because what a span tag pretty much does is it’s used to contain some piece of contentin an inline style. So for example, this italics class would be a perfect representation ofan inline tag, what we’re trying to do is I telesign, some text.And if the span wasa block level element, this text here, this italic size, text would be moved on to itsown section, so everything preceding it would come before it. And then there would be anew line with the text. And then after it would come the rest of the text. So you cansee there that the inline and block level tags really make a difference depending onwhat you want to use it for. So what we’re going to be doing in this video is going throughand learning how to change the display type of these different elements. But first, let’stalk about float. So again, these tags come with a natural display type and how they areplaced on the page is how they naturally occur. But there’s actually a way to change the waythat they look.And this is done using float. So if you just listen to the name there, whatelement pretty much does is change how the element will float on the page. So I’ll goahead 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 andI’m going to say it float to the right and watch what happens. You can see that now whathappens is pretty much this just flows over to the right side of the page. And it alsochanges all the content after it. So you can see that this content here has now been pushedup. So this kind of shows how a little bit of how flow works.And this doesn’t just haveto be with images, we can do it with text as well. So if I go through and choose somethinglike 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. Andyou can see that that kind of flows over to the right and everything before it is nowkind of pushed up where it was. So you can think of this as kind of a kind of a Tetrispuzzle block. When you’re moving something over, everything is going to be pushed upor 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, youcan kind of predict where everything is going to move on the page. But floats are reallyuseful for laying out documents. Especially if you want to kind of Have position imagesnext to text or move things around in a way that looks more like a proper document.SoI’m going to remove that float. And I’m just going to do it with our image over here, whichwith our image, our about us image. So I’m going to go ahead and say it floats over tothe right. See that. So now you can see that it floatsover to the right. And now everything before it has kind of been pushed up onto this sectionhere. So there we go. Now it’s working, and everything is looking great. Now let’s lookat the next property, which is display. So display is pretty much a way of changing thedisplay property of an element that it naturally comes with. So of course, we know things likea div or a paragraph tag come as a block level element, whereas something like a span ora bolding tag would come as an inline element.So what we’re going to be doing is going throughand changing these properties. Now, I didn’t actually cover the properties of float, whichI’m going to go over in just a second. But what I’m going to talk about is the differentproperties of display. So of course, you have the standard inline and block, which is prettyobvious, but then you have a few others.So the one that I’m going to be covering hereis none now. So what the display none property does is pretty much just completely, almostremove the element from the page. Now it doesn’t actually remove it. But what happens is theentire that invisible box that contains everything just suddenly disappears, you can’t see itanymore, it doesn’t take up any space. It’s just completely gone from the page.So I’mgoing to show you what that looks like right now. Let’s go ahead. And for example, let’sjust say that this table is kind of annoying, we don’t really want it here. So what I’mgoing to do over here in my table is given a class of site table. Now I’m going to goahead and select it here, dot site dash table, and I’m going to say display is none. Nowwatch what happens, you can see that that table completely disappears. And it doesn’teven take up the space anymore. It’s not like the table. It’s just invisible or not, notwhat not visible, but it’s completely gone. Now, this is very, very commonly used onceyou start using JavaScript. And would you start making your site’s interactive to maybecreate web games or hide something, maybe create some sort of hidden token, it can beused for all sorts of things.So this is a very useful display property. So I’m goingto go ahead and remove that. Now the next one I want to talk about, I’m actually goingto, I’ll just keep it there, if we decide to use it later. The next one I’m going totalk 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 tounderstand. But once we start using it, you can see how useful it is. So inline blockis a little bit Well, like I said, it’s a little bit hard to understand. But prettymuch what it does is take features from both inline and block level elements and combinesthem 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 inlight, or this inline block element takes that new sticks that sort of new line featureand removes it completely, it does not move anything onto its own new line. But what theblock level elements do is they actually create some spacing around the element once it’smoved 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 thatblock level spacing that can be found in other block level elements. So let’s go throughand actually demonstrate how this works. I’m going to go back to my table and add our inlineblock display property here, inline block. See that. So now you can see that it floatsover to the right. And now everything before it has kind of been pushed up onto this sectionhere.So there we go. Now it’s working, and everything is looking great. Now let’s lookat the next property, which is display. So display is pretty much a way of changing thedisplay property of an element that it naturally comes with. So of course, we know things likea div or a paragraph tag come as a block level element, whereas something like a span ora bolding tag would come as an inline element. So what we’re going to be doing is going throughand changing these properties. Now, I didn’t actually cover the properties of float, whichI’m going to go over in just a second. But what I’m going to talk about is the differentproperties of display.So of course, you have the standard inline and block, which is prettyobvious, but then you have a few others. So the one that I’m going to be covering hereis none now. So what the display none property does is pretty much just completely, almostremove the element from the page. Now it doesn’t actually remove it. But what happens is theentire that invisible box that contains everything just suddenly disappears, you can’t see itanymore, it doesn’t take up any space. It’s just completely gone from the page. So I’mgoing to show you what that looks like right now. Let’s go ahead. And for example, let’sjust say that this table is kind of annoying, we don’t really want it here. So what I’mgoing to do over here in my table is given a class of site table.Now I’m going to goahead and select it here, dot site dash table, and I’m going to say display is none. Nowwatch what happens, you can see that that table completely disappears. And it doesn’teven take up the space anymore. It’s not like the table. It’s just invisible or not, notwhat not visible, but it’s completely gone. Now, this is very, very commonly used onceyou start using JavaScript. And would you start making your site’s interactive to maybecreate web games or hide something, maybe create some sort of hidden token, it can beused for all sorts of things. So this is a very useful display property. So I’m goingto go ahead and remove that. Now the next one I want to talk about, I’m actually goingto, I’ll just keep it there, if we decide to use it later. The next one I’m going totalk 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 tounderstand.But once we start using it, you can see how useful it is. So inline blockis a little bit Well, like I said, it’s a little bit hard to understand. But prettymuch what it does is take features from both inline and block level elements and combinesthem 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 inlight, or this inline block element takes that new sticks that sort of new line featureand removes it completely, it does not move anything onto its own new line. But what theblock level elements do is they actually create some spacing around the element once it’smoved 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 thatblock level spacing that can be found in other block level elements. So let’s go throughand actually demonstrate how this works. I’m going to go back to my table and add our inlineblock display property here, inline block. Now I’m going to go ahead and refresh thepage and see what happens. So you can see that it’s kind of kept on the same line. Butit’s given that sort of spacing or well block level spacing that you can’t really find witha normal inline element. If I actually go ahead and change this to inline here, you’llsee 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 inlineelement and an inline block element. So there you go. inline block is a very useful displayproperty. You can use it a lot in your website to maybe layout grids, and all sorts of thingslike that. And we’re actually going to be using some very special display propertieslater in this course called flex and grid, which are really going to help us create thesebeautiful grids and layouts that can transform our website.Everywhere. So that’s prettymuch 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 mainfloat properties, which are left and right. But there’s actually a few more that we canuse 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 floatingelement, which is called inherit. So you can see here that we have Child Elements and parentelements. 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 floatas right.And we can set the one of the child elements such as the h2, we can set its floatas inherit, what’s going to happen is it’s going to take the float property of the parentelement. Now, you’re probably asking why this would be useful at hoc at all? Well, prettymuch, what you can do is you can actually lay out multiple elements without having tospecify their float as long as their children and parents. So for example, if you have anelement that’s maybe four or five levels deep, and you don’t want to specify the float everytime, you can just use an inherit element to move everything to the right side, withonly specifying the float once to the last value I want to talk about is the is the nonvalue.So this is kind of the default value that you’re going to see if you don’t specifyanything. And it’s pretty much just going to keep the item in its place. It’s not goingto change its float or display, and it’s pretty much not going to move it around at all. It’snot the same as display none, though, it doesn’t really remove anything, what float none prettymuch does, it’s just leaves it where it naturally occurs in the text. So for example, if youhave a block level, div tag, and you’ve set its float to none, then it’s just going toappear as a block level elements is not going to move around or do anything similar. Sothere you go. That’s pretty much it for floats, and displays. We’re going to be working withthese a lot throughout the rest of this course.And they’re very important property. So Irecommend you get some practice with them, and start using them. So you can see all ofthe 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 commonway or at least a word of manipulating your website and making it look really good. Sowithout it, the website is just kind of everywhere, all the elements are scattered around. Butif you want to really make the website, look how you want it to look, you need to use thisin combination with a few other features that we are going to learn in the future in orderto make your website look great.Alright, let’s move on. Now I’m going to go ahead and refresh thepage and see what happens. So you can see that it’s kind of kept on the same line. Butit’s given that sort of spacing or well block level spacing that you can’t really find witha normal inline element. If I actually go ahead and change this to inline here, you’llsee 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 inlineelement and an inline block element. So there you go. inline block is a very useful displayproperty. You can use it a lot in your website to maybe layout grids, and all sorts of thingslike that. And we’re actually going to be using some very special display propertieslater in this course called flex and grid, which are really going to help us create thesebeautiful grids and layouts that can transform our website.Everywhere. So that’s prettymuch 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 mainfloat properties, which are left and right. But there’s actually a few more that we canuse 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 floatingelement, which is called inherit.So you can see here that we have Child Elements and parentelements. 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 floatas right. And we can set the one of the child elements such as the h2, we can set its floatas inherit, what’s going to happen is it’s going to take the float property of the parentelement. Now, you’re probably asking why this would be useful at hoc at all? Well, prettymuch, what you can do is you can actually lay out multiple elements without having tospecify their float as long as their children and parents.So for example, if you have anelement that’s maybe four or five levels deep, and you don’t want to specify the float everytime, you can just use an inherit element to move everything to the right side, withonly specifying the float once to the last value I want to talk about is the is the nonvalue. So this is kind of the default value that you’re going to see if you don’t specifyanything. And it’s pretty much just going to keep the item in its place.It’s not goingto change its float or display, and it’s pretty much not going to move it around at all. It’snot the same as display none, though, it doesn’t really remove anything, what float none prettymuch does, it’s just leaves it where it naturally occurs in the text. So for example, if youhave a block level, div tag, and you’ve set its float to none, then it’s just going toappear as a block level elements is not going to move around or do anything similar. Sothere you go. That’s pretty much it for floats, and displays. We’re going to be working withthese a lot throughout the rest of this course. And they’re very important property. So Irecommend you get some practice with them, and start using them.So you can see all ofthe 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 commonway or at least a word of manipulating your website and making it look really good. Sowithout it, the website is just kind of everywhere, all the elements are scattered around. Butif you want to really make the website, look how you want it to look, you need to use thisin combination with a few other features that we are going to learn in the future in orderto make your website look great. Alright, let’s move on. So today we’re going to get started with anew topic in CSS. And this is a very exciting one, because we’re going to start learningmore about very advanced layout techniques. So in the past, we’ve learned about two prettybasic layout to learn about floats and displays and the box model, but they’re not reallyenough to create the best websites possible. To do that, we’re going to need some extraadvanced 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 aquick or I’m going to give a quick introduction to it. In this video, we’ll be talking a littlebit about what it is, how it works, and how you can apply it and what you can do withit. 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 flexiblebox. And similar to the box model.It’s a concept in CSS, or a feature that allows youto create and arrange items or elements very easily. So it’s a great alternative to usingsomething like the box model or floats or displays if you want to create very responsivewebsites or lay out your items in a way that makes it look great. So this is an alternativeto using those traditional techniques that were using earlier versions of CSS. So theFlexbox or the main Flexbox is split into two different components. You have the containerand the flex items. So the container is the parent element, it’s what is going to becomethe container for all of the items now. Usually what you would do is use this on a div orsome other form of container element. And then use some special properties which we’regoing to be covering in the next video to create the flex container. But then the nextpart is the flex items.So this can be pretty much anything you want images, links, spanswhatever 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 manipulatethem and create really nice layout like this one that we have here. And that’s what we’reactually going to be covering in the next few videos is learning how to manipulate thecontainer 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 themfor? Well, although it might not be apparent, pretty much all pages these days use someform of CSS layout, whether it be the box model, or Flexbox, or CSS Grid, which we’regoing 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 youhave the right side of your page, which takes up maybe 30% of the page. And that’s youror 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 startto see how this all connects together, you can create really good looking websites bycreating one huge flex container, and then creating a bunch of separate items, puttingall of your different things in those items. So it’s pretty much just a way to layout yourwebsite.Now in the past, we’ve used floats to move images around. And we’ve used alsomargin and padding to push things up and down. But that’s not a really efficient way, it’smore of a kind of hack to move things around. And using something like Flexbox pretty muchlets you do all of this naturally. Alright, so there we go. That’s a little introductionto Flexbox. And how it works. Now what we’re going to do is go ahead and go onto our machineand start creating some flex containers. Alright, let’s move on. So today we’re going to get started with anew topic in CSS. And this is a very exciting one, because we’re going to start learningmore about very advanced layout techniques. So in the past, we’ve learned about two prettybasic layout to learn about floats and displays and the box model, but they’re not reallyenough to create the best websites possible. To do that, we’re going to need some extraadvanced 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 aquick or I’m going to give a quick introduction to it. In this video, we’ll be talking a littlebit about what it is, how it works, and how you can apply it and what you can do withit. 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 flexiblebox. And similar to the box model. It’s a concept in CSS, or a feature that allows youto create and arrange items or elements very easily.So it’s a great alternative to usingsomething like the box model or floats or displays if you want to create very responsivewebsites or lay out your items in a way that makes it look great. So this is an alternativeto using those traditional techniques that were using earlier versions of CSS. So theFlexbox or the main Flexbox is split into two different components. You have the containerand the flex items. So the container is the parent element, it’s what is going to becomethe container for all of the items now. Usually what you would do is use this on a div orsome other form of container element.And then use some special properties which we’regoing to be covering in the next video to create the flex container. But then the nextpart is the flex items. So this can be pretty much anything you want images, links, spanswhatever 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 manipulatethem and create really nice layout like this one that we have here. And that’s what we’reactually going to be covering in the next few videos is learning how to manipulate thecontainer 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 themfor? Well, although it might not be apparent, pretty much all pages these days use someform of CSS layout, whether it be the box model, or Flexbox, or CSS Grid, which we’regoing 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 youhave the right side of your page, which takes up maybe 30% of the page. And that’s youror 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 startto see how this all connects together, you can create really good looking websites bycreating one huge flex container, and then creating a bunch of separate items, puttingall of your different things in those items. So it’s pretty much just a way to layout yourwebsite. Now in the past, we’ve used floats to move images around. And we’ve used alsomargin and padding to push things up and down. But that’s not a really efficient way, it’smore of a kind of hack to move things around.And using something like Flexbox pretty muchlets you do all of this naturally. Alright, so there we go. That’s a little introductionto Flexbox. And how it works. Now what we’re going to do is go ahead and go onto our machineand start creating some flex containers. Alright, let’s move on. So in this video, we’re going to be goingahead and creating our first flex container or Flexbox. Now, I already have some apparatusset up here so that we can get started straight away without having to go and do anythingwith any of the styling. And this is the best way to really see how Flexbox works. Becausewithout it, you know, it’s just kind of look, it’s gonna look kind of weird, all the invisiblebackgrounds and things. So I think this is the best way to really see demonstrate howFlexbox works.Alright, let’s get started. So well, it’s actually quite easy to set upa flex container, the hard part is creating how you want, but it uses the display propertyjust 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’sgoing to do is create our flex container.So all we have to do is go ahead and findour parent element, the container that we want, and I already have the class set uphere. If you want to go ahead and do this on your own, you can, like I said, if maybeif you want to copy these styles, for example, you can go ahead and check out the projectfiles. But like I said, you can just go ahead and create your own setup so that you canstart 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 isour main element. So I’m going to go over here. And I will go into go ahead and giveit 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 ofthese items have been spaced out accordingly. Now all of the default values of all of theflex properties have now been set up now that our display mode has been activated. Now inthe next few videos, we’re actually going to be going through and manipulating theseproperties. For example, changing the order, we’re going to change the size and width ofthese. And we’re going to go ahead and justify and align the content. But that’s for a futurevideo. For now, all you need to know is that by setting the display property to flex ona parent container, it’s going to set up all the default values of the flex propertiesand 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 goingahead and creating our first flex container or Flexbox. Now, I already have some apparatusset up here so that we can get started straight away without having to go and do anythingwith any of the styling. And this is the best way to really see how Flexbox works. Becausewithout it, you know, it’s just kind of look, it’s gonna look kind of weird, all the invisiblebackgrounds and things. So I think this is the best way to really see demonstrate howFlexbox works. Alright, let’s get started. So well, it’s actually quite easy to set upa flex container, the hard part is creating how you want, but it uses the display propertyjust 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’sgoing to do is create our flex container.So all we have to do is go ahead and findour parent element, the container that we want, and I already have the class set uphere. If you want to go ahead and do this on your own, you can, like I said, if maybeif you want to copy these styles, for example, you can go ahead and check out the projectfiles. But like I said, you can just go ahead and create your own setup so that you canstart 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 isour main element. So I’m going to go over here.And I will go into go ahead and giveit 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 ofthese items have been spaced out accordingly. Now all of the default values of all of theflex properties have now been set up now that our display mode has been activated. Now inthe next few videos, we’re actually going to be going through and manipulating theseproperties. For example, changing the order, we’re going to change the size and width ofthese. And we’re going to go ahead and justify and align the content. But that’s for a futurevideo. For now, all you need to know is that by setting the display property to flex ona parent container, it’s going to set up all the default values of the flex propertiesand 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 coveringtwo of the properties of our flex container, direction and wrap. So right now we have everythingset 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 wantto 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 propertythat we’re going to use is flex direction, flex dash direction. And you add this to thecontainer to the flex container. So here we’re going to specify either row or column rowis the default value, and it’s going to be going in a direction to the right side ofthe container.We also have column, which is what we kind of saw before. And you cansee it’s a little bit better spaced out. And you can see it goes A to E, except it goesin a column. Now, that’s pretty easy to understand. But we can also go reverse. So instead ofA to E, it goes eat a, all we have to do is add dash reverse to column a row, and it’sgoing to flip the direction that our item is going in. Let’s refresh. And now you cansee it’s going in reverse. We can also do the same thing with row or pretty much anyother value for this property here. You can see now it goes E to a, and it also goes inthe opposite way to the left side of the page instead of to the right side. So that’s itfor flex direction, it’s very easy to understand, I’m just going to go ahead and set it backto wrote the default.The next item I want to talk about is flex wrap. So this is a littlebit more complicated to understand. But once we start using it, it gets quite easy. Prettymuch when you wrap an item, it’s going to move it to a new row or column to avoid theexceeding the maximum length. So for example, if we had more than the specified amount ofitems 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 acertain length, rump length, wrap it around and move it to a new line.So I’m actuallygoing to go ahead and do that here. I’m going to go ahead and copy all of these items, prettymuch double it. And then I’m going to say f, g, h, i and j. And now let’s go ahead andrefresh the page and see how this looks. You can see we have now abcdefg H I J. And ofcourse it’s not going past the page yet, but we can actually wrap this around and see howit looks. So all we have to do is add the flex dash wrap property. And now we can eitherspecify we can specify one of two values, wrap and no rap. So I’m going to go aheadand say rap. Now if we go ahead and refresh the page, you can see that instead of kindof 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 exactsame thing, but it reverses the order. So now if we go ahead and refresh, you can seethat 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’regoing 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’sgo ahead and set the property back to wrap. So those are the two main properties thatwe’re going to cover in this video is wrap and flex direction. Now, of course, theseare two very basic properties, but they’re still very useful. And you can really seehow 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 propertiesthat we can use on our flex container in CSS.So in this video, we’re going to be coveringtwo of the properties of our flex container, direction and wrap. So right now we have everythingset 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 wantto 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 propertythat we’re going to use is flex direction, flex dash direction. And you add this to thecontainer to the flex container. So here we’re going to specify either row or column rowis the default value, and it’s going to be going in a direction to the right side ofthe container.We also have column, which is what we kind of saw before. And you cansee it’s a little bit better spaced out. And you can see it goes A to E, except it goesin a column. Now, that’s pretty easy to understand. But we can also go reverse. So instead ofA to E, it goes eat a, all we have to do is add dash reverse to column a row, and it’sgoing to flip the direction that our item is going in. Let’s refresh. And now you cansee it’s going in reverse. We can also do the same thing with row or pretty much anyother value for this property here. You can see now it goes E to a, and it also goes inthe opposite way to the left side of the page instead of to the right side. So that’s itfor flex direction, it’s very easy to understand, I’m just going to go ahead and set it backto wrote the default. The next item I want to talk about is flex wrap. So this is a littlebit more complicated to understand.But once we start using it, it gets quite easy. Prettymuch when you wrap an item, it’s going to move it to a new row or column to avoid theexceeding the maximum length. So for example, if we had more than the specified amount ofitems 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 acertain length, rump length, wrap it around and move it to a new line.So I’m actuallygoing to go ahead and do that here. I’m going to go ahead and copy all of these items, prettymuch double it. And then I’m going to say f, g, h, i and j. And now let’s go ahead andrefresh the page and see how this looks. You can see we have now abcdefg H I J. And ofcourse it’s not going past the page yet, but we can actually wrap this around and see howit looks. So all we have to do is add the flex dash wrap property. And now we can eitherspecify we can specify one of two values, wrap and no rap. So I’m going to go aheadand say rap. Now if we go ahead and refresh the page, you can see that instead of kindof 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 exactsame thing, but it reverses the order.So now if we go ahead and refresh, you can seethat 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’regoing 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’sgo ahead and set the property back to wrap. So those are the two main properties thatwe’re going to cover in this video is wrap and flex direction. Now, of course, theseare two very basic properties, but they’re still very useful. And you can really seehow 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 propertiesthat we can use on our flex container in CSS. So in this video, we’re going to be talkingabout two very important elements or what properties that can be used to justify andalign 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 forthe vertical alignment. So let’s talk about them. The first one which is for horizontalalignment is called justify content. Now, both of these ello, both of these propertiesactually contained three main values which are shared between the two of them. And theneach of them can take two special values, which actually align them in a pretty differentway than you would expect. So let’s talk about justify content. Now first of all, you’llnotice that these are a little bit stretched out, don’t worry about that for now, that’sjust because of the added height to the container will talk about that in just a second.Butlet’s get started. So the first three properties that are pretty common are flex start, flexend, and center. So flex start is going to be where the container starts, which in thiscase is on the left. On the other hand, the end is going to be the opposite. So on inthis container, it’s on the right and then center positions in the middle. So what I’mgoing to do here is just set it as center for now. And you can see that now all of oureyes limbs have been centered in the middle here. If I said something like flex end, andremember, it does contain a dash in there, it’s going to move everything to the end ofthe container here. So those are the three main values. Let’s talk about the two specialones now. Now, pretty much these ones are going to be messing a little bit with thespacing between these, but they are still related to alignment, because it’s changingthe spacing in a way that does actually align our elements here.So the two main valuesare space around and space between. So let’s talk about space between first, what happensis that space, the spacing between the flex items is created so that it’s all equal. Andit creates equal divisions to move everything on well, equally divided from each other onthe same row. On the other hand, space around actually creates spacing on all sides of theitem. So instead of just creating them between, it’s going to create them between some ofthe flex items and the edges.So though, that’s the main difference between the two, and itdepends on what you really want. So for example, if you want a centered kind of item or a centeredFlexbox, what you would do is use the space around property. Whereas if you wanted somethingto be stretched out, you would use the space between property. So in this video, we’re going to be talkingabout two very important elements or what properties that can be used to justify andalign 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 forthe vertical alignment. So let’s talk about them. The first one which is for horizontalalignment is called justify content. Now, both of these ello, both of these propertiesactually contained three main values which are shared between the two of them.And theneach of them can take two special values, which actually align them in a pretty differentway than you would expect. So let’s talk about justify content. Now first of all, you’llnotice that these are a little bit stretched out, don’t worry about that for now, that’sjust because of the added height to the container will talk about that in just a second. Butlet’s get started. So the first three properties that are pretty common are flex start, flexend, and center. So flex start is going to be where the container starts, which in thiscase is on the left. On the other hand, the end is going to be the opposite. So on inthis container, it’s on the right and then center positions in the middle. So what I’mgoing to do here is just set it as center for now. And you can see that now all of oureyes limbs have been centered in the middle here. If I said something like flex end, andremember, it does contain a dash in there, it’s going to move everything to the end ofthe container here.So those are the three main values. Let’s talk about the two specialones now. Now, pretty much these ones are going to be messing a little bit with thespacing between these, but they are still related to alignment, because it’s changingthe spacing in a way that does actually align our elements here. So the two main valuesare space around and space between. So let’s talk about space between first, what happensis that space, the spacing between the flex items is created so that it’s all equal. Andit creates equal divisions to move everything on well, equally divided from each other onthe same row. On the other hand, space around actually creates spacing on all sides of theitem. So instead of just creating them between, it’s going to create them between some ofthe flex items and the edges. So though, that’s the main difference between the two, and itdepends on what you really want. So for example, if you want a centered kind of item or a centeredFlexbox, what you would do is use the space around property.Whereas if you wanted somethingto be stretched out, you would use the space between property. So there we go. Those are some of the littleitems or values that you can use under justify content property. Now let’s move on to alignitems. So this is the property that aligns it vertically. Now by default, it’s set tostretch, which is what we can see here.So it just stretches all the way across downto the bottom of the container, we can actually change this. So let’s go ahead and add thisproperty align items. Now what we’re going to do is change it to center. So just likebefore, 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 centerhere. 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 thebottom of the container, justify content says the flex start is on the left side, and theflex end is on the right. So there we go, you can see what this is what this looks likeright 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’twant to stretch them, this is what you would do, you could also set it to flex and if youwanted something to appear at the end of the page. And yeah, that’s pretty much it forthose three main values. Now let’s talk about the two special values. So these are a littlebit different because they don’t follow some general convention. But the two values arebaseline and stretch. Now we’ve already covered stretch a little bit in the beginning of thisin which we could set stretch as our default value. And all that does is just align itall 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 thatall of these items, no matter their size, are aligned to a baseline. Now if I actuallygo and add some inline styles to override some of these, so for example B, I’m goingto let’s just say I’m going to make the line height, which is a property we haven’t actuallylearned yet, what we’re going to do is just set the line height to whoops, real problemthere, I’m going to set this to 100 pixels, like that.And now what I’m going to do isgo ahead and refresh the page and see what happens, you can see that this is a littlebit higher, but they’re all aligned on the same line, you can see that the fonts herehave been changed a little bit not really not really apparent here. But you can seethe heights are different, but they’re still all in the same line. So that’s what baselineactually does it just no matter the size, or the font text or anything, it’s all goingto 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 somethingto the center of a Flexbox, what you would do is just set justify content and jaw andalign items, both of them to the center.And what that’s gonna do is just align everythingto the center of the flex box. So that’s what I’ve just done here is I’ve set both of themto center so that way on top, it’s centered between the top and the bottom as well asthe left and the right. Alright, let’s move on. So there we go. Those are some of the littleitems or values that you can use under justify content property. Now let’s move on to alignitems. So this is the property that aligns it vertically. Now by default, it’s set tostretch, which is what we can see here. So it just stretches all the way across downto the bottom of the container, we can actually change this.So let’s go ahead and add thisproperty align items. Now what we’re going to do is change it to center. So just likebefore, 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 centerhere. 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 thebottom of the container, justify content says the flex start is on the left side, and theflex end is on the right. So there we go, you can see what this is what this looks likeright 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’twant to stretch them, this is what you would do, you could also set it to flex and if youwanted something to appear at the end of the page.And yeah, that’s pretty much it forthose three main values. Now let’s talk about the two special values. So these are a littlebit different because they don’t follow some general convention. But the two values arebaseline and stretch. Now we’ve already covered stretch a little bit in the beginning of thisin which we could set stretch as our default value. And all that does is just align itall 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 thatall of these items, no matter their size, are aligned to a baseline. Now if I actuallygo and add some inline styles to override some of these, so for example B, I’m goingto let’s just say I’m going to make the line height, which is a property we haven’t actuallylearned yet, what we’re going to do is just set the line height to whoops, real problemthere, I’m going to set this to 100 pixels, like that.And now what I’m going to do isgo ahead and refresh the page and see what happens, you can see that this is a littlebit higher, but they’re all aligned on the same line, you can see that the fonts herehave been changed a little bit not really not really apparent here. But you can seethe heights are different, but they’re still all in the same line. So that’s what baselineactually does it just no matter the size, or the font text or anything, it’s all goingto 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 somethingto the center of a Flexbox, what you would do is just set justify content and jaw andalign items, both of them to the center. And what that’s gonna do is just align everythingto the center of the flex box.So that’s what I’ve just done here is I’ve set both of themto center so that way on top, it’s centered between the top and the bottom as well asthe left and the right. Alright, let’s move on. So for the first part of this section, we’vebeen 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 talkedanything 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 ofthe properties that we can use on our items themselves to change how they look. And that’swhen the real power of Flexbox comes in, and really shows how it can be used.So the firstitem that we’re going to be covering or property in this case is flex item order. Now, insteadof adding this directly to the container, we can actually go through and add this tothe flex items themselves. So I’m going to hold Ctrl or Command if you’re on Mac, andgo ahead and add our style property to all five of these flex items, because what we’regoing to actually have to do is add this property to all of our items, seems like a new linewas created there. Let’s get started. So pretty much what we’re going to be doing is usinga property to change the positioning or order in this case of our flex items.So I’m goingto go ahead and create that multiple cursor feature again. And the property we’re goingto use is order. Now what we can do is go ahead and start specifying our order. So prettymuch what we’re going to do is go through and change what this looks like and how thislooks 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 andadd something to make these properties look in a different way instead of having to actuallymove all of these around.So instead of moving the divs around, and you know changing allof 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 toas many numbers or as many items as you have, and the default value is zero. And this isjust going to keep it in its position. But we can actually specify the number to seewhere it lands. So let’s just say that I want D first, what I’m going to do is go aheadand under my order property, add a one, just like that. Now I’m going to go ahead and addE, so I’m going to set my order to two. Now if you’ve worked with computers before, youmight think that it starts with zero, but in this case, zero is our default value. Sowe’re not actually going to be using that. So I have D then E.Now let’s say I wouldbe next. So I’m going to put it under the third position. Now for C or actually a, I’mgoing to put as the fourth position, and C is the last. So let’s see if this holds uphere, we refresh the page d V AC. So you can see that we can actually change the orderof these flex items directly from our CSS instead of having to go through and move themaround. Now you might know you might be wondering why this could be useful at all. Now, althoughmight 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.Becauseyou can’t just go through and program something to move the divs around in your HTML documentwithout 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 definitelybe 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 touse it with an inline style tag. But it would be much easier considering that if withoutit, 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 wantto use it with a class method, maybe you already have an existing class, you can go ahead anddo that. There’s nothing wrong with that. I’m just using this because it’s a lot moreconvenient and easy to use. Alright, so that’s pretty much it about flex order. It’s quiteeasy to learn once you know how to find the positions of items and how you know how toorder them in the right way. As long as you know the number of items you have, it’s veryeasy to position them just the way you like it.Alright, let’s move on. So for the first part of this section, we’vebeen 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 talkedanything 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 ofthe properties that we can use on our items themselves to change how they look.And that’swhen the real power of Flexbox comes in, and really shows how it can be used. So the firstitem that we’re going to be covering or property in this case is flex item order. Now, insteadof adding this directly to the container, we can actually go through and add this tothe flex items themselves. So I’m going to hold Ctrl or Command if you’re on Mac, andgo ahead and add our style property to all five of these flex items, because what we’regoing to actually have to do is add this property to all of our items, seems like a new linewas created there. Let’s get started. So pretty much what we’re going to be doing is usinga property to change the positioning or order in this case of our flex items. So I’m goingto go ahead and create that multiple cursor feature again. And the property we’re goingto use is order. Now what we can do is go ahead and start specifying our order.So prettymuch what we’re going to do is go through and change what this looks like and how thislooks 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 andadd something to make these properties look in a different way instead of having to actuallymove all of these around. So instead of moving the divs around, and you know changing allof 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 toas many numbers or as many items as you have, and the default value is zero. And this isjust going to keep it in its position.But we can actually specify the number to seewhere it lands. So let’s just say that I want D first, what I’m going to do is go aheadand under my order property, add a one, just like that. Now I’m going to go ahead and addE, so I’m going to set my order to two. Now if you’ve worked with computers before, youmight think that it starts with zero, but in this case, zero is our default value. Sowe’re not actually going to be using that. So I have D then E. Now let’s say I wouldbe next. So I’m going to put it under the third position. Now for C or actually a, I’mgoing to put as the fourth position, and C is the last.So let’s see if this holds uphere, we refresh the page d V AC. So you can see that we can actually change the orderof these flex items directly from our CSS instead of having to go through and move themaround. Now you might know you might be wondering why this could be useful at all. Now, althoughmight 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.Becauseyou can’t just go through and program something to move the divs around in your HTML documentwithout 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 definitelybe 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 touse it with an inline style tag. But it would be much easier considering that if withoutit, 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 wantto use it with a class method, maybe you already have an existing class, you can go ahead anddo that. There’s nothing wrong with that. I’m just using this because it’s a lot moreconvenient and easy to use.Alright, so that’s pretty much it about flex order. It’s quiteeasy to learn once you know how to find the positions of items and how you know how toorder them in the right way. As long as you know the number of items you have, it’s veryeasy to position them just the way you like it. Alright, let’s move on. So in this video, we’re going to be talkingabout 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 completelyresponsible for the responsive power of Flexbox. And it’s what really makes it what it is todayand why it’s used so commonly over things like floats and display types.So first ofall, if we look at it, now, it might seem that flex grow and shrink, just specify thewidth and height. And although they sort of do, they are very different when it comesto the core concept and how it’s decided. So the first thing we need to do is talk aboutthe 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 spaceeach. But you can see that there’s all of this extra room here on the side. So whatactually happens is these properties work to define how the extra space or this remainingexcess space is divided up between them. And from there, we can actually specify the widthbased on the you know, browser width, and it’s all responsive. So it’s all decided completelybased on the browser and on the properties that you define.So the first thing I’m goingto do is go ahead and actually add this property to all of them. And I’m gonna explain whyin 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. Nowwe’re not going to use all these in one go, we’re just going to do this gradually, andthen our flex basis. Okay, so let’s talk about flex basis. First, what this does is it prettymuch defines the minimum width of an item or a flex item. So this can be any value doesn’tjust have to it doesn’t have to be a specific number or unit. So for example, I’m goingto go ahead and set this as maybe 100 pixels for each one as its minimum width, we go aheadand refresh the page.And now you can see it’s a lot wider. But you can see that there’sstill this extra space. So this is where our flex grow property comes in. Now what happensis, if I actually go ahead and go to all of them, and set them all as one, what this ispretty 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’sgo ahead and see that when we refresh the page, you can see now there’s only a littlebit of margin, which is normal. But all of them are divided up equally. Now that we’veset them as one. But what happens if we go ahead and actually change this value? Let’sgo ahead and for example, set our fifth item as to maybe. So now you can see that, althoughit’s not much bigger, it is a little bit bigger. So what this is pretty, I’m gonna go aheadand set it to actually something a little bit bigger, so it’s more obvious.So you cansee now this is a lot bigger than the other items. So pretty much what this is sayingis our fifth item, this container item is going to get five times as much excess spaceas the rest of the items here. So one thing you need to know about flex grow is that youneed to add this property to every single one of them and make sure that they have adefined value.If they don’t, if you want them just to give them a default space, givethem 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 seethat this is actually bigger than when we set this to flex this flex grow property tofive. So what’s going on here, pretty much what’s happening is the default value forour 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 weset this to one, everything else is not taking any excess space, leaving it all to that onevalue.So all of that extra space is taken up by this block here. And you can see thatand it’s proved proven because there is still no excess space here, since it’s all takenup out by this property. So what I would recommend is before we learn the flex So in this video, we’re going to be talkingabout 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 completelyresponsible for the responsive power of Flexbox. And it’s what really makes it what it is todayand why it’s used so commonly over things like floats and display types.So first ofall, if we look at it, now, it might seem that flex grow and shrink, just specify thewidth and height. And although they sort of do, they are very different when it comesto the core concept and how it’s decided. So the first thing we need to do is talk aboutthe 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 spaceeach.But you can see that there’s all of this extra room here on the side. So whatactually happens is these properties work to define how the extra space or this remainingexcess space is divided up between them. And from there, we can actually specify the widthbased on the you know, browser width, and it’s all responsive. So it’s all decided completelybased on the browser and on the properties that you define. So the first thing I’m goingto do is go ahead and actually add this property to all of them. And I’m gonna explain whyin 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. Nowwe’re not going to use all these in one go, we’re just going to do this gradually, andthen our flex basis.Okay, so let’s talk about flex basis. First, what this does is it prettymuch defines the minimum width of an item or a flex item. So this can be any value doesn’tjust have to it doesn’t have to be a specific number or unit. So for example, I’m goingto go ahead and set this as maybe 100 pixels for each one as its minimum width, we go aheadand refresh the page. And now you can see it’s a lot wider. But you can see that there’sstill this extra space. So this is where our flex grow property comes in. Now what happensis, if I actually go ahead and go to all of them, and set them all as one, what this ispretty 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’sgo ahead and see that when we refresh the page, you can see now there’s only a littlebit of margin, which is normal.But all of them are divided up equally. Now that we’veset them as one. But what happens if we go ahead and actually change this value? Let’sgo ahead and for example, set our fifth item as to maybe. So now you can see that, althoughit’s not much bigger, it is a little bit bigger. So what this is pretty, I’m gonna go aheadand set it to actually something a little bit bigger, so it’s more obvious. So you cansee now this is a lot bigger than the other items.So pretty much what this is sayingis our fifth item, this container item is going to get five times as much excess spaceas the rest of the items here. So one thing you need to know about flex grow is that youneed to add this property to every single one of them and make sure that they have adefined value. If they don’t, if you want them just to give them a default space, givethem 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 seethat this is actually bigger than when we set this to flex this flex grow property tofive. So what’s going on here, pretty much what’s happening is the default value forour 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 weset this to one, everything else is not taking any excess space, leaving it all to that onevalue. So all of that extra space is taken up by this block here. And you can see thatand it’s proved proven because there is still no excess space here, since it’s all takenup out by this property.So what I would recommend is before we learn the flex property in the next video, just go aheadand add this flex grow property to every single item or container if you plan to use it. Sonow if we go ahead and refresh the page, you can see that that’s working great now what’sthe advantage of property in the next video, just go aheadand add this flex grow property to every single item or container if you plan to use it. Sonow if we go ahead and refresh the page, you can see that that’s working great now what’sthe advantage of Using this, before we move on to our nextproperty, if I actually resize this window, right here, I’m just gonna resize it, youcan see that when it grows, it still takes up the same proportions of excess space. Nowwe’ll talk about getting smaller in just a little bit. But you can see here that it doesactually take up the same proportion. And that’s where the really responsive power ofFlexbox comes in, is when you’re resizing your windows and browsers and there’s allof 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’sthe 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 forthis example, we’ll go ahead and use it later. So when we go ahead and actually shrink thiswindow, you can see that that proportion is actually lost. So what’s going on here, prettymuch when you go below the minimum width, whether it’s defined on our flex basis, orthe minimum width of the of the, of the container item itself, what’s happening is that proportionis completely removed, and you go to the default value of flex shrink. So flex shrink is similarto flex grow, except what happens is it defines the rate of shrinkage of each container itemagain, relative to the rest of the items. So in this case, what we have to do is goahead and look at how this trig property works.The default value for this, unlike flex growis one, not zero. So what this is saying is shrink each item at the same rate as all theother 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 goahead and show you how to manipulate this. And this is where the real responsive powercomes 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 thingto 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 letme 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, evenif it goes below, do not shrink the item at all, let everything else shrink.Let’s goahead and see how this looks on our site. So we’re going ahead, we’re removing thatspace. But you can see that our first value does not shrink at all. So there we go. Nowlet’s go ahead and start adding our shrinkage values to the rest of our items here. So whatI’m going to do is first add a value of one to all of them, just like this, just to keepeverything 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 timesas fast.So we’re gonna go over to our middle value and change the flex shrink to threetimes. So now we go ahead and refresh the page. And when we shrink it, you can see thatthat value shrinks three times as fast as everything else. So you can see that and it’spretty apparent there. So there we go. That’s pretty much it for our three values. Now onething 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 mentionthat in the when I started changing them. But there we go. Now what I’m going to sayis, why would you use something like this flex grow and flex shrink, when you’re layingout entire pages based on Flexbox, you want to make it as responsive as possible, youdon’t want to go and you know, have it looked completely different on one device to theother. What you can actually do is use this to change the look of a website, dependingon what device you’re on.So for example, you can use this property to change the lookof a website on a mobile phone versus on a widescreen TV, it’s going to be completelydifferent. And you can do this using only a few properties instead of having to go anddefine entire styles for separate devices. So from here, we can actually really see thetrue cloud power of Flexbox. From here, we can go ahead and actually model our websitewith just a few styles that are very streamlined and efficient to change the look of a websitecompletely on different devices. So I hope that was a little bit easy. To understandnow, 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 ofFlexbox, 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 reallyuseful shorthand property that can summarize all three of these into an even more streamlinemethod. So in the past video, I talked just briefly about the flex property. And prettymuch what it is, is a shorthand to use the flex grow shrink and basis property in onego. So we can use this to our great advantage, because instead of adding all of these propertiesto every single one of these items, we can actually just summarize it down into one simpleproperty.So let’s go ahead and talk about it. Pretty much the flex property, which isthe property that we’re going to be using follows or takes in three values, the growthe 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’tactually have that defined, just go ahead and set it as the default value. So just aquick summary grow the default is zero, which means it’s not growable. The default stringvalue is one, which means shrink it at the rate of everyone else. And then the thereis no default for the basis property, unless you use something like auto. So what you cando is go ahead and define that as 100 pixels. Now, what we’re going to do is go ahead anddo it for the rest of these items, flex, flex just the property.Here, we’re going to goone, 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 growone 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 throughand add all three of these properties. One, one, and 100 fixes. All right, now let’s go ahead and erase allof 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 tolook 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’sgoing wrong there. Yeah, there we go. So let’s just check out the behavior, we shrink B getsmaller D doesn’t shrink at all. And we when we size up, our last value gets bigger. Let’sgo ahead and refresh the page and see if this worked. So when we shrink, D is supposed tostay 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 allof this works. Instead of adding three properties, we can actually just go ahead and do thisin 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 withFlexbox in this section, and then you can go off and start using it and creating allsorts of really cool responsive websites and layouts with it.But for now, what we’re goingto be doing is going through and learning the final property. Now we’ve learned howto align all of the elements at the same time in our flex container, we learned how to alignit both vertically and horizontally, but we’re actually going to be doing is learning howto align each item. And remember, because each item is laid out with width wise in acertain way, we can only align it vertically. So just keep that in mind for now. So let’sget started. Now in order to align it vertically, we use the Align items property to work withand align all of these. So in this case, what we did with our container is aligned all ofthem to center. But what we’re going to be doing now is going through and aligning eachindividual item using a special property called align itself. Now one thing to note is thatthis 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 thisonly only and only this item to the top. So let’s get started. First thing I want to dois go ahead and add the property. And remember, we have to go and add it just like everythingelse. So I’m going to go through and add it now. So first thing I’m going to do is goand let’s just take our first item, for example. Where is it? There we go. So now I’m goingto 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 withthe normal values, let’s go ahead and save flex start.So just like our other valueswith our default container, what we can actually do is align them with the same values. Socenter flex start and flex end. So let’s go ahead and refresh the page. And you can seenow that that specific item, which is D, or the first item is aligned to the start ofthe flex container, whereas the rest of the items are aligned to the middle, which isbased on the Align items property that we had on our container.So now let’s go aheadand create a sort of V shape out of all of our items here. So what I’m going to do isfirst go and add our flex, sorry, aligned self property to all of our values, here areall of our container items. And now what I’m going to do is start styling them. So we knowthat the first one is at the start, we want the second one here to be in the center. Soalthough it’s already defined, I’m just going to say center to make everything a littleeasier to read. Now we’re going to go ahead and look for the third one, which needs tobe at the bottom. So what I’m going to say here is flex end. And let’s go ahead and refresh working sofar. Our fourth one has to be on the same level as he so we’re going to keep that inthe center here, wherever it is, let’s see. Yep, it’s the fourth one centered. And nowwe want our final one to be at the top as well.So it is a little confusing to readwith the orders. But after a little bit of looking, you can see how this whole thingworks. Now obviously, it’s a little bit out of proportion because of our sizes here. Butyou can see that our thing is still responsive. It’s still resizing in the same way, we justaligned the items differently. Alright, so there you go. That’s pretty much how thisworks.And one thing to note that before we move on is you can’t actually use stretchand baseline on a line self, they just don’t work because they are kind of container specificproperties and they won’t, they work off of values of the container. So aligning it onan item just wouldn’t really work in the same way. So that is one thing you need to keepin mind is that you can only use these three values. Alright, so like I said, we were movingon and learning about all of the different alignments. And now that we’ve learned howto align each item, we can really use this along with our flex property and some otherFlexbox properties on the container to create a really nice responsive layout. So I encourageyou to go ahead and try this on your own, create your own flex layouts, and don’t evenjust use these blocks, you can go through and use images and forums and all sorts ofthings.And just style them in a way that makes the website look good. Because now thatyou’ve learned the tools to create a responsive container, you can go through and actuallystart practically applying it to the real world. Alright, let’s move on. So in thisvideo, we’re going to be looking at grid versus Flexbox. Now in the previous section, we lookedat Flexbox as a whole, we looked at all the different container properties, we also lookedat some of the other properties that we can use on our items. But today, we’re going tobe looking at a different type of well layout property, and that is grid.So before we getstarted, I’m going to give a little introduction to grid and what it actually is. So similarto Flexbox grid is a display type that’s going to allow us to work with our layout and ourCSS in a different way. So again, they are both completely all complete alternativesto some of the other layout features that were used in the older times and in otherversions of CSS. So what we’re going to be doing is again, in this section, going throughlooking at the different types, and what we do with grid, and how it actually all fitstogether. So now that we know some of the similarities,let’s look at the differences. So although they are both alternatives to our, to ourdifferent 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 isa lot more manual it requires well it doesn’t require but you can control your containerin a much easier way. So you can really customize your layout and see how everything fits togetherwith a lot more tools. So one of the the main difference is how the grid system focuseson both the width and height. So although Flexbox does have some height features, it’smainly 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’sreally the reason for the name is because it is more focused on creating a grid, providingtools for columns and rows, and all sorts of things that we’re going to cover in thenext few videos looking at, you know, some of the tools that we can use in grid and theinherent differences between grid and Flexbox. So I hope that was a really in depth viewat the differences between grid and Flexbox. And we will go through and talk more aboutthem as we go through the section, you know, learning more tools and properties that wecan use on our grid. Alright, so I hope that you took a lot from this video. And althoughyou’re not really supposed to know anything about how they work, it’s good to keep inmind about some of the differences between them, and draw your own conclusions aboutwhether you should use grid or Flexbox depending on what type of website or application youare creating.Alright, let’s move on. So in this video, we’re going to be startingcreating our different grid items and working with our grids. So I’ve already created andset up a little playground or sandbox for our grid here, we’ve pretty much adopted thesame style as the Flexbox here using all of our different, you know, widths and heightsand all these different blocks. But I encourage you, when you’re doing this on your own togo ahead and experiment around, maybe use some different items. I’m just doing thisbecause it’s easy for demonstrations. Alright, so let’s get started.Pretty much grid. Andwhile Flexbox have very similar ways of activation, they both use a display type or the displayproperty to set or activate the container. Now the only difference is is is the propertythat it or sorry, the value that needs to be used to activate these, which is prettyfair, which is fairly obvious. So let’s get started. First of all, we need to put it onthe container. Remember, we’re not working with the items, we’re working with the containeras a whole. So all I need to do similar to how we created our flex container is thatof saying Flexbox, or grid box or whatever, all we have to do is type in grid.And whatthis will do is set up our grid container. Let’s go and refresh. And you can see thatalthough you know may not appear that nothing has changed, we have activated a whole rangeof properties that we can now use on our grid here to set up everything and start creatingour grid. Now you’ll notice that when we set up our Flexbox, so many things different somany different things change. But without grid, we actually need to go through and setup the grid by ourselves, which is what the whole manual element about it, which is wherethe whole manual element comes in is we have to go and create a grid and sort of shapeit in a way that suits our needs. Alright, so that’s pretty much it for creating thegrid. Now I know this wasn’t a very heavy video, but there are going to be a lot moreconcepts 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 throughand start learning some of the more difficult parts of CSS Grid. Alright, let’s move on. So in this video, we’re goingto be moving on with grid and start creating and setting up this grid to really just definethe style that we want to use for our website. So what we’re going to do is go ahead andget started with some of the two basic properties that we’re going to be using, which are templaterows and columns. So unlike Flexbox, we can actually specify the number of grids are wellthe number of rows and columns that we want manually and create the exact style that wewant to divide up all our elements. So what we’re going to be doing is using two specialproperties that we can go ahead and use. And what this is going to do is allow us to splitup our grid into a specified number of rows and columns, which we can then divide theitems up into, and then start specifying the sizes and other parts of these items.So likeI 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 andsome of the other core concepts in grid that will allow us to really shape up this gridbox 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 templatecolumns and rows. So pretty much what this does is sets up the grid to start off witha certain number of rows or columns depending on what property that you’re using. And thenfrom there, you can actually specify the sizes of each column and row. Now, we’re not tochanging individual item sizes yet, but we can actually go ahead and change the sizeof each individual row or column to create alternating sizes and alternating boxes, whichhave 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 areasfor now we don’t need to know them. Now, what we’re going to do is set up our grid templatecolumns 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 typeout the sizes that we want. And based on the number of sizes or values that we input, itwill decide the number of rows that we want. So I’ll give you an example here, let’s justsay I’m going to the first row to be 10 pixels wide, which is pretty small.And then I wantedthe second one to be 50 pixels, and the third one to be 10 pixels again. So what we’re pretty much doing here is settingup setting it up so that we have three columns. Because we’ve passed in three values, thefirst is going to be about 10 pixels, which is very, very small, the next one is goingto 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 effectthat has here, we have a lot of empty space open here. Again, becausewe’re using absolute values and not relative values. Or at least relative to the box thatwe have here, you can see that our boxes here are really divided up in a weird way. So ourfirst column is 10 pixels very small. And then the second one is it’s getting reallymixed 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 doingsomething like this would obviously really mess up the grid. Now, obviously, you’re notgoing to go and set all of this to 10 pixels at 50 pixels. But you can just see what kindof an effect this has already. We haven’t even created any rows yet. And we’ve alreadycompletely customized the way our grid looks without touching or doing anything. UnlikeFlexbox, 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, allwe need to do is pass in a set number of values, and it’ll decide what we need for us. Andjust one thing to note, these don’t need to be the same imagine it imagine it as sortof a table here, we have three columns going downwards, and three rows going from leftto right. So let’s go ahead and specify this year, I’m going to go ahead and say I onlywant 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.Andnow our first row is much smaller, and our second row is a lot bigger. So you can seealready what you can do with this. And that you have power as of using these templatecolumns and rows, as I’ve explained before, but this isn’t a really convenient, or efficientway to create a nice looking grid. Because how are we supposed to know the elements orthe amounts of each device, especially with, you know, all these different viewports andsizes, we need to keep this consistent across all devices.So there’s actually a reallyeasy value that we can use, which is called auto. Now if we actually go ahead and setall of our rows to auto, what’s going to happen is it’s actually going to divide the spaceevenly between the three no matter the size. And I can also even go ahead and do this withmy rows. And now if I refresh the page, you can see this looks a lot better. Now you cankind of see how the spacing is working here, we have three columns. And obviously there’snothing in our third column for the bottom row.But then we also have two rows, so it’skind of split down the middle. And now we have our three elements up here and our fourthand fifth element down here. So you can see here that what’s happening is it’s dividingthe space evenly between our elements or our grid. And if we did actually go ahead andremove on the values and change it to an absolute value, use something like 100 pixels, what’sgoing to happen is the remaining space is going to be kind of divvied up between thetwo columns. And obviously, it doesn’t look like it here, because we don’t have spacingsenabled. There’s a bunch of things going on behind the scenes. But what happens is theremaining space is kind of divided up between the two columns. So you can see already thatwith these values, we can create some really nice looking grids without even having todo much work. Now, what I would recommend is, instead of going and specifying all ofour 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 learnsome techniques to split up our items and make them look a lot larger without havingto change the size of the columns and rows. Because it is a much easier, it’s much easierto work with our items rather than the grid itself. Alright, so that’s pretty much itfor template columns and rows. Now, like I said, just for any other exercise, I recommendyou to go ahead and play with this on your own. Try and create your own custom gridsand throwing images and all sorts of things in there, play around with it, and try andsee what you can create. And just try and come up with this many cool crazy ideas aspossible. Because there is a lot you can do with just these two. Properties, which aregrid 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, theseproperties are very similar to the ones we learned in Flexbox, which is actually somewhereup here, where we’ve learned how to justify and align items in different ways.But thereare very similar concepts. The only problem is some of the values and the properties themselvesare 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 ofaffecting our understanding of the properties. So what I’m going to be doing in this videois going and teaching you in this video how to align and justify our items both horizontallyand vertically. So let’s start with the first one, which is very similar to Flexbox.Andit is the justify content property. So just like we’ve learned before, this is going tojustify 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 withthis, I’m going to go ahead and create a new property here justify content. Now, just likewith our previous property, there are three main values that are used both in our justifycontent property, and the aligned content property, which we’re going to learn in justa second.The only problem is in our Flexbox section, we looked at them and they did havea prefix, which are flex start and flex end. So basically, like I said, these are sortof do signify the start and end of the flex box depending on what axes you’re aligningyour items on. But instead of adding that prefix here, we’re just going to say startand and center, instead of something like grid start or granddad, they don’t use anyof that prefixes.All that’s included are the three main keywords. So it’s a lot simplerto understand. And but it is a little bit harder when you start using both Flexbox andgrid, 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 aheadand 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 ourtemplate columns, and that’s the key word there template are ignored, and everythingis completely aligned to the right side of our grid. So we can also do it just like withour previous properties in our Flexbox, we can also align it to the start and do prettymuch whatever we want with these. So the next value, or the next two values that we’re goingto use for this property are space around and space evenly, which is a little bit differentfrom space between.So they both work in the same way, in that they create spacing betweenthe items to give them to you all even them out in the grid. But the only difference ison our Flexbox we actually used space between whereas on our grid, we’re using the valuespace evenly. So I’m going to go ahead and show you that here. I’m going to just go aheadand say space evenly. Like that. Now if I refresh the page, you can see that althoughit 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. Nowthere are remember spaces between or before and after our first items, and that’s thekey word there.You can see instead of saying between it says evenly. And pretty much, whatthis is saying is, we’re actually going to space them evenly, not just put space in betweenthem. 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 prettymuch exactly the same. Now, of course, we don’t have lots of space or room to work withhere. So you’re not going to see the direct impact or differences between these. So fornow, let’s just consider them the same purpose. Like I said, we’ve used both of these in thepast, and you know exactly what they do.So now let’s go ahead and get started with ournext value or sorry, property, which is our align content property. Now, instead of usingalign 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 goahead and give it a little bit more height, I’m going to say maybe 500 pixels, refreshthe 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 justa second. So what I’m going to do is go ahead and start playing around with some of theseproperties. Now, what’s actually really interesting is for our align items, we can actually useboth space evenly and space around. But we also we also have our space between propertyfrom our Flexbox section.So if I go ahead and try that out now, space in between, and refresh the page, you can see what happensis that we have our space between right there just as we’ve signified and it’s not spacedevenly. Remember if there’s no space, before or after our top and bottom items. So that’sa 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, justgo ahead and show you that here are three standard values, which are center start andend. So I can go ahead and show you that now.Start out or sorry, line content to the end. Andthat will push everything down to the bottom of bottom of the page. So there we go. There’sa 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. Andeverything will just fall naturally into place. And remember, if you ever forget how to dosomething, you can always go and both review the lectures or just Google it. It’s reallythat simple.There are tons of articles and helpful resources out there to help you decideor figure out some of the properties you may have lost or forgotten in your time usingCSS. So there we go. That’s pretty much it for aligning content, it’s quite easy in termsof properties. Although there are a lot of values once you start using them and gettingused to some of the subtle differences, everything will just fall naturally into place.As Isaid before, alright, let’s move on. So in this video, we’re going to be looking at anotherfeature 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’regoing 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 themusing our justification here, I’m actually going to go ahead and erase these or commentthem out just for this lecture. So we can create some good demonstrations here. So whatI’m going to be doing is going through and talking about these gaps. And they’re actuallypretty important when it comes to the whole thing because you can completely change theway a grid looks by creating spacing.And obviously, if you’ve seen any websites, andreally look closely at it, you’ll understand the importance of spacing in websites, theyreally bring everything together and create sort of a hierarchy that’s easy on the eyesif you’ve taken any UX or design. So let’s get started. Now what I’m going to be doingis going ahead and creating these column and row gaps. So the first the first one I wantto talk about is column gaps. And just as we were working with our call template columnsand 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 usingis grid column gap. And you can obviously kind of associate these together to memorizethem or maybe learn them easier.But besides that, we’re going to go ahead and get thisstarted. 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 maynot be obvious, immediately, you can kind of see that these columns are a little bitmore 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 thecolumns. Now that we’ve specified it. So now what I’m going to do is go ahead and actuallychange 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, exceptit specifies the gap between rows. So this is probably going to be a lot more obvioushere, what I’m going to do is just going ahead and saying 300 pixels, and notice how thegap of this place kind of gets bigger. You can see now that there is a much bigger gapbetween our top row and our bottom row.So that’s pretty easy. But obviously, you don’twant to go through and specify these every single time. So there’s actually a reallynice shorthand property that we can use to bring this all together, I’m going to go aheadand actually, I’ll keep these for now, and then I’ll erase them when we’re done. So instead of specifying which axes you wantto do it on, or which axis sorry, you can just say grid gap. And what this is goingto do is just create the gap instantly, where you can pass in two values and specify itor do it all in one go. So this takes the column first. And then the row, kind of justhow template columns goes first. And template rows go first in a shorthand, which we haven’tactually talked about.But we’ll get to that later. For here, what we’re going to do isspecify our column first, which is 150 pixels, and our row gap next 300 pixels. Now, I’mgoing to go ahead and erase these other values that we don’t need and refresh the page. SoI actually made a little mistake there, and I put the column before the rows or if I causeany confusion there. So what I’m going to do is actually just go ahead and change thisreally quickly.So that this will work. Now if I go ahead and refresh, you can see thatthey look exactly the same. Again, sorry for that mix up. Just remember that the row orthe row size comes before the column size, just keep that in mind. So there we go. Nowwe have our grid gap setup. Now this is pretty much it for our well, column gap or row gapare all of these gaps for our grid layout. Now, there’s really not that much to it, it’svery easy to set up. But once you do that, it becomes very easy to sort of work withyour 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 canreally maximize the use of the grid layout in CSS. Alright, let’s move on. So now we’regoing 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 lotto chew.And don’t worry, if you don’t get it on the first try. We’re going to go throughthis slowly, and we’re going to go through it step by step so that we can learn everythingabout this. So in this video, we’re gonna be learning about the real true power of gridand more we’re going to be learning is how to rearrange and resize items based on startingat starting and ending points. So that’s what we’re going to be doing today. The first thingwe need to do is obviously go and go to our grid container on our HTML file, since weneed 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 becauseit’ll be much easier to see and understand what’s going on. When we just have these fiveshere, what I’m actually going to do is go ahead and add a sixth item just to break evenhere 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 bea green something. Actually, let’s just go for a nice dark orange something here. Andwe’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 afew different shorthands and properties that we can use to set this up. So the first thingwe need to learn is the lines and the concept of lines. So we do know that we have our columnsand 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 beginninghere, 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 thisitem to go from line one to line three, and from row line one to row, line two.And wecan do this using a few properties and some shorthand, and some other keywords and otherother things that we can do to set this whole thing up. So one thing you need to keep inmind that is that lines are the basically the core concept, the most important partof 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’sjust one thing to keep in mind. Alright, let’s get started. So the first thing I’m goingto do is talk about how to start an end at certain item at a designated area. So we’regoing to go through and specify the start and end points. Now there are many differentways to do this. But we’re going to start with the basic sort of syntax that we shoulduse to set this up. And then we’ll move in some into some of the more advanced syntaxto set this thing up and start creating shorthands and other shorts of properties.So let’s goahead and get started. What I’m going to do is select what item I want, let’s just goahead and say the first item. And now what we need to do is go ahead and set read columnlike 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 separatedby a slash. So the start point is going to be the starting column line. So I’m goingto say one, and the end point is going to be well, the ending, and I’m just going tosay 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 ina different way. What’s happening is we’re starting at line one, and then we’re goingto end at line three. And you can see that although it’s not resizing properly, it stilldoes take up that space in an invisible way.So we have our item two at the start of linethree, and everything is pushed right past it overriding those template rows and columnsthat 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 startand 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 goahead and say line two, just like this. Now I’m going to refresh the page. And you cansee nothing’s happened because it does start at one and end at two. Let’s go ahead andset 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 thatspace. 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’regoing to be covering over the next few videos. Now instead of specifying an endpoint or anend line. Because these can get quite confusing, you don’t know where line start and wherelines end. And it does get quite confusing, especially when you have very big grids withlots of different columns and rows. So instead of this, you can actually specify the distancethat you want it to take up. So the keyword that you can use for this is span. What thisis going to say is start at some line, whichever one you choose, and span or take up a certainamount of well spaces depending on what value you’re using. So for now, I’m going to sayspan two, and here. I’m also going to change this to span two. Now let’s refresh and seewhat happened. You can see that nothing has changed. Of course because They are exactlythe same thing, you start at column one.And you take up two more spaces, you go up twomore lines, you start at row one, and then you go down two more lines. So you start atline 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 pointslike this, you can actually kind of visualize the what you’re doing with your grids, andhow 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 goingto be learning in just a few videos time.But this is kind of the basic idea of specifyingthese items, you can go through and you can set start and end point, add points basedon the different lines and the sort of model created by the grid. And then you can sethow big you want each item to be. Alright, let’s move on. So today we are going to becovering or looking at the last feature of our grid section. And it’s pretty much justa summary of what we did here, but using a shorthand. So you can see that we have ourgrid 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 whenyou’re developing what websites, you’re going to want to do this, you don’t want to go anddo each of these properties individually. For all of them, you’re going to want to doit quick and fast for both axes. And that’s how you get the maximum out of grid.So whatwe’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 goingto go through it with you.So right now I have changed this part a little bit of kindof messed around with the column starts and ends so that you can differentiate betweenthe values. So pretty much what the first value we’re going to input just like hereis going to be your row starting point. So you’re going to go ahead and input two inthis case, because we want to match this exactly. And the next instead of your row end is actuallyyour column starting point. So then we’re going to put one. Now from here, this is wherea lot of people get mixed up and confused. Pretty much what’s happening is just how likewith margin, you go top right, bottom left, or with any other kind of property that dealswith those kind of multiple value scenarios, what’s going to happen here is you have therow column start, and then you have the row column.And so just keep that in mind. Andeverything will work out for you. So all you have to do is go ahead and say two, one. Andnow we’re going to put our row end. Remember, we have row start column, start row end, andthen 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. Andthen of course, the column ending value, which in this case is span three. Should now whatwe’re going to do is go ahead and and just comment these out for now and see if anythinghas changed.And you can see, of course, it hasn’t. Since we pretty much summarize thisinto our shorthand, we don’t actually have a use for these anymore, so I’m going to goahead and get rid of them. So now that you know how to do it, let’s talk about some ofthe 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 allsorts of things. And you don’t want to go and input those two for each one, it getsa little bit confusing after a while. So it’s much easier if you just have one propertythat can summarize both the column and the row in one clean swoop. And then you can applythem to all of your different pieces. So your sidebar would go and start and end here, thenyour header would go here and you get the idea.So that’s pretty much it for grids andgrid area, there’s a lot to cover. And of course, practice makes perfect with thesekinds of things. But the more you use it, the more you will understand how to sort ofwork 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, thedeveloper and what kind of work they’re doing. So there’s always shortcuts and all sortsof little tricks you can use with these properties to really lay out your website related toyour special field of development or work.Alright, let’s move on. So this is going tobe starting a brand new section. And we’re actually going to be looking at a very cooland useful feature in CSS. Now, of course, this isn’t a very old or considered a essentialfeature, but it’s still very useful. And it can help you make your website look a lotbetter. So in this section, we’re going to be covering everything to do with movementon your page. So things like animations, transitions, and some other features that you can use tosort 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 workingwith some of the properties.But the first one I want to talk about in this video isour transition property. So there is a lot to cover in this video. And transition isactually a shorthand for four different properties. So there’s going to be a lot to work withand talk about, so I’m going to go through it a little bit slow. But once you get tothe 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 thatwe’ve learned in this section selectors, displays, margins, all sorts of things like that, includingstyling the button just with a little creativity. And now we have our page kind of a littlebit better laid out for our animation. So the main part that we’re going to be focusingon is our contact us section, and notably our Submit button. So this is the main kindof focus piece of this section. So pretty much right now we have a static page, there’snothing moving nothing changing positions or properties or anything like that.And rightnow, what I want to do is focus on the submit button to create some transitions. Now prettymuch what’s going to happen is we’re going to use pseudo selectors to change the stateof this button. Or change some of the properties in it. Sofor example, the background or the text color, or anything like that, and then we’re goingto use the transition property to make it appear smooth.So that’s one thing to keepin mind, the transition property itself isn’t that big of a deal. But the real work goesbehind the pseudo selectors and how you use them. So let’s get started. The first thingI 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 onyour own if you’re following along. And then I’m going to use a pseudo selector. And I’mjust 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, becauseagain, there could always be issues. Let’s refresh hover, it’s black, you can see thatit’s already working, it’s just not smooth. So let’s go through and start changing someof 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 lightershade of blue, something that would indicate that you’re hovering over.So I’m going togo ahead and do that. And for now, we’re just going to stick with one property. Well, oncewe go forward, we’re actually going to add more and more properties to make it look alot cleaner. Let’s go ahead and refresh. See if that works, you can see that it is a muchlighter 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 ourspecial 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 whatwe do is go to our base class. And we’re going to set our transition property here. And nowwe have a bunch of different values to input. The first is going to be the property thatyou want to well transition because remember, the property is basically going to smoothit out and move the property on one hand and from the base class slowly to the other ina nice, clean, automated way.So if you want to select all of your properties, you canjust hit all, but I wouldn’t recommend that unless you unless you want to shorten thingsor smooth over time, because sometimes your classes can change. And it can cause errorsin the long run. So what I would do is for now I’m just going to select the specificproperty that I want. Next thing I want to talk about is the duration. So this is prettymuch the time it’s going to take to move from one property or one value to the other. Nowthis can be anything. Now you would specify this in seconds or milliseconds dependingon what you want to choose.I’m going to go ahead and use seconds. So I’m going to saytwo seconds. And s by the way is the unit for seconds in case you didn’t know. The nextwe want to go is talk about the sort of transition style So this is probably the most complicatedthing to work with, because there’s a lot of different styles and haven’t really usedthem in daily life. But it’s pretty easy. Pretty much what you’re going to do is decidewhat kind of a change do you want? Do you want it to go straight from A to B? Do youwant it to be smooth or speedy. And what I’m going to do is just run through some of themain ones you have here. So the first one, and the most common one is going to be easetyping is, and pretty much what this does is it’s kind of the standard transition, itgoes is it goes straight from A to B, then you have linear, which is not very commonlyused, especially in transitions.But it just goes straight from A to B without any, youknow, speed changes or anything like that. And you also have a couple more, there isone called ease in out like this. And you can pretty much just read this a name, itgoes 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 thesorry, 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’sstart working with our transition property here.So I’m actually going to go with easeand out just to spice it up a little bit, not use the basic ones. And then the lastproperty that we’re going to select is the delay. So pretty much what’s going to happenis when you hover over it right now there’s no delay, it’s zero seconds, the animationplays instantly. Or what you can actually do is set a delay that you can use to let’sjust say after you hover, wait two seconds, and then play the animation. So let’s justgo 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. Andif you don’t understand it, we’ll break it down and do some more examples. Let’s go aheadand refresh the page. So what I’m going to do is hover over my button here, you can seethat it’s going to wait whoops. So I’m going to hover over.Now we’re going to wait. Andyou can see after one second, it turns into that kind of shade that we want it. Now Ifeel like we’re going to remove that one second delay, because we don’t need it. And I’m actuallygoing to shorten this down 2.5 seconds. Now what I want to do is refresh the page. Andnow you can see it’s a lot faster. Now once you get into this range of one, you want tostart 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 withthis tinker with it and see how it works. So you can see when we do this, that it changesthe color. And when we hover over it changes back. So now you can see the difference betweennot having a transition and having it. Let’s comment this out for a second. And you cansee 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 completelychanges everything. Now why don’t we go ahead and try out some of the other styles becauseit’s much easier to show you how these styles works, rather than just explaining them. Solet’s go ahead and see linear. So pretty much what’s going to happen, it justgoes straight from A to B, no speech changes or anything.Of course, with something thissmall, it’s not very noticeable. But when you have translations and all these differentchanges, then it will definitely be noticeable. So there you go, you have a linear transitionthere. Now let’s go ahead and try our ease transition, refresh it. And you can see thatit is a lot faster. And like I said, not very noticeable. But we can see a clear differencein 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 towardsthe end, it’s much faster.Now of course, it would be easier to demonstrate if it wasn’t300 milliseconds. Let’s go ahead and see this when it is on a higher time, so you can seekind of how that works there. So there we go. Those are the different types of transitiontypes. That’s probably the hardest property to or sorry value to work with. And then afterthat, everything becomes a lot simpler. So now let’s go ahead and start adding somemore properties here to make this a little bit more interesting. I’m going to go aheadand add some padding. So I’m going to say when it’s hovered over pretty much doublethe padding, so 20 pixels, 30 pixels.Now here, what we’re going to do is either usea comma to separate the different property That we want to use. Or we can just eraseall 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 seeit gets bigger. On top of that, the sorry, the background changes. Now, of course, youcan 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, transformationfunctions, we can do a lot more with it. But for now, we need to stick with the basicsof 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 withmuch newer CSS versions is that not all browsers support them, they all compile in a differentway. And some of them don’t support these newer properties, especially in the olderversion. So for example, Internet Explorer seven, Internet Explorer eight, all of thosevery old browsers, which people still use, won’t be able to see this property. Now youhave two solutions to this, either use a fallback, which is you know, if the transition doesn’twork, just maybe have a fallback image or don’t play it at all. Or you can use a browsersupport prefix. So each one or each type of browser has a different prefix, but the mainones are for Chrome and Safari, we need to use WebKit, like this.And remember, you needto start it with a dash and end it with a dash like this. Then you one for Mozilla Firefoxis 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 thethree 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 asthese 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 youhave to go and copy each one, and it is a pain.But if you want the maximum browsersupport, you need to do this. So of course, if we refresh the page, nothing’s gonna happenhere. But anybody who’s using an older browser, if I was testing this on maybe Internet Explorerseven, would see a clear difference between before and after we added these browser supportprefixes. So that’s pretty much it for transitions. Now, there is a lot to cover, and we willwork with them throughout the future. But all you need to do is go ahead, select prettymuch 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 orsomething like that, or if you click it, you want to change some of these properties. There’sa bunch of pseudo selectors out there. And combining that with the transition propertyand the skills you’ve learned in CSS, you can really make this website or whatever websiteyou’re working on interactive, without even having to learn any animation, or proper transformationproperties. Alright, let’s move on. So in this video, we’re going to be covering differenttransform properties. And this is going to be quite a long video. Just like the transitionvideo, we do have a lot to cover. There’s many different values and functions that weneed to use to complete this. But it is a pretty essential step of this section. Solet’s just get straight into it. So firstly, what we’re going to be using in this videoare actually not values, their functions. Now, just like this RGB thing is a functionthat takes a bunch of inputs and gets a value out. Or maybe something else.Well, it seemslike this is the only one on the page. But what we’re going to be doing is using a bunchof 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 insteadof inputting absolute or direct values, this kind of processes in a different way behindthe 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 itaffects this. So pretty much we have two different sections of this video, we have our physicalchange properties or our movement, so our translation and our scaling, and then we alsohave our different rotation properties, or Well, I should say functions, but there wego.So we’re going to have our Translation in our scale, so our physical changes, andthen our rotation. And at the end, I’m going to throw in a nice shorthand function thatsummarizes all of it. So let’s start with our physical changes. So the first thing weneed to learn about is translate. So we’re only going to be covering 2d translationsfor today, because 3d can get very complicated very quick. And it’s not really useful inday to day life or developer life, unless you’re making something that specificallyneeds it. So we’re just going to cover 2d translations, and other function transformationfunctions for today. So pretty much what this is going to do istaken two different values, one of them is going to be the Y shift and the x shift. Andit’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 Iwanted to move, or let’s just say 10 pixels to the left, and I wanted to move it 10 pixelsup, it would do that.And of course, there are many different ways to do it. But whatwe’re going to do is use this translate method to really change the way that this whole thingworks. So what we’re going to do is are we’re going to use an alternative method to youknow, something like margin or grid or all of those. So the first thing you want to dois 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 yourleft and your right shift, right is going to be your positive value, so anything abovezero, and if you want to shift it left, you use negative values. And then of course, thesecond value is the y axis. So up as positive and down is negative. So let’s start withour x shift, I’m going to just go ahead and say 50 pixels here. So I want to shift itpick 50 pixels to the right. And remember, we don’t need we need to, we don’t need tosay anything like to write or anything like that, we just need to specify the value, thenwe 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 notchanging 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 addyour properties, you can see that I added it to our pseudo selector instead of our baseclass. And that’s one thing or one point I just wanted to make about these pseudo selectorsis that if you add them on, maybe here, it’s not just going to inherit it magically andput it on the base class, you do need to be specific. Remember, these two are completelydifferent 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 stylesare already applied. And then the new styles here are overridden. But this is a completelynew property, it doesn’t actually exist on our base class. So just make surethat you don’t make that mistake. Let’s go ahead and paste that on the base class. I’lldo it just above the transitions. Now refresh the page, and it’s translated perfectly. Sonow that we’ve done that, I want to talk about browser support for a second. Now all of theseare 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 wantthe maximum support on your on your page on your site, you want to make sure you includethose prefixes. So there we go, we’ve covered it translates. Now let’s work with our nextvalue, which is going to be scale.So scale works in a similar way to how maybe increasingthe padding would work. What’s gonna happen is you’re going to go and you’re going totype in scale, which is the name of the function, and then you’re going to pass in a decimalvalue, it doesn’t have to be a decimal, but pretty much what you’re going to do is justsay, let’s say I want to scale this up by two and a half times, what’s gonna happenis this is going to size up by two and a half, we refresh, you can see that it’s gotten alot 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 theissues here with margin and padding and all sorts of things like this. So be pretty carefulwhen you do this. You don’t want to mess up your page or change your style, or anythinglike that. You just want to make sure that you can scale without having to to mess withthe layout of your page.So that’s for scale, and all of the physical properties. Now let’smove on to some of the rotation properties. So the first two, we’re going to cover orsorry, 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 skewingon different axes. So we’ll get to that in just a second. Let’s refresh the page. Sothe first one I’m going to use is rotate, and this takes one value, obviously, it’sgoing to be our degree value. So if you don’t remember from our gradient section, what happenspretty much here is we rotated kind of circularly. Well, not for this one. But we can use degreesto actually change the angle or direction of our gradient.So for example, 90 degreesB, a 90 degree shift, so would go to the right, and then negative 90 degrees would go theother way. So it would go to the left. So if you just remember that you’d be doing greathere. 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 minus90, it will pretty much flip. So it was facing up vertically. And I’ll actually show youthat 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 aboutthe two special ones. So pretty much what’s going to happen here is they’re going to skewthem along certain axes. Now, this is really hard to explain. And most likely, nobody willget it if it explained. So the only real way to show it or the only real way to teach itis by showing it. So what I’m going to do is use skew.And you can see we have our shorthandand we also have skew x and skew y. So what I’m going to select this skew x first, andpretty 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 imaginea stick or a paper attached to a rod and you’re rotating it around that rod.So now let’sgo ahead and input our value just like before, we’re going to use degree values. So I’m goingto 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 prettymuch what this has happened is rotated along that axis.So if I go negative 45, it’s goingto go the other way, just like that. And you can kind of see how that works. Now if wechange this to skew y, it’s going to go it’s going to do this exact same thing. But it’sgoing to be on the opposite axis. So it’s going to be on a vertical rod. So just imaginethat, refresh the page, and you can see how that is working. Now obviously, it is veryhard to see and visualize. So I wouldn’t encourage you to use skew X or Y. If you want to rotatesomething you should most likely stick or you should try and stick to the three I justcovered.So the last value we’re going to be talking about or the last function is goingto be our matrix function. So this is going to be a shorthand to summarize everythinginto one go. And pretty much from here, what we’re going to do is pretty much just summarizeeverything in one clean swoop. So pretty much this takes six arguments. And one thing youdo have to note is it doesn’t take rotation into account, it only works with skews, soyou just have to keep that in mind.If you’re planning to rotate it, you should probablyadd that as a as another function. So let’s get started. What we’re going to do is goahead and work with our matrix function. So we’re going to erase this. And we’re goingto go ahead and add our matrix. Now these six arguments do follow a very, very specificpattern or a order.So we’re going to have to go through it slowly so that you can understandit. 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 isthat we were actually using shorthand. shorthand functions to avoid all the mess with scalex and scale y and just shorten things up. So one thing you do need to keep in mind isthat every scale component or function like this will have an x and a y value. And whatwe 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 keepit the same, all you have to do is input one, pretty much this is not typing pretty muchwhat this is going to happen.Or what this is going to do is say set this button or objector element one times as big as itself, which is, of course, just going to result in thesame. 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 usedecimal decimal values here. And one thing also tonote is that you don’t have to include the unit’s like we did before. So no PX or mmor dagger do anything like that, you just include the numbers. So you do include decimalpoints here.So I’m just going to go quick 45 on both of these. And remember, this isactually 45 degrees, so keep that in mind. Next thing we’re going to do is input ourscale 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 100pixels. Whoops, 150. Remember, pixels pixels. So this is a little bit confusing, but it’sdon’t try not to use it that much only use it if you really have to, or if you want toshorten code down.But I would recommend not using this function very often. It’s quiteclunky and ordered, and it doesn’t really allow for freedom. So just keep that in mindwhen 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 thatrotation 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 ofx 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 shiftsour movements here, and we also have our scaling.So go ahead and try these out on differentelements, 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 havingto use some of the traditional methods that we’ve learned. Alright, let’s move on. Soin this video, we’re going to be looking at CSS animations.So we’ve looked at transitionsand some of the different transformation functions that we can use to sort of work with our elementsin a different way. But now we’re going to be learning another essential component, whichare animations. So we’re going to be covering this over the next few videos. And for thefirst one, we’re going to be creating the animation. So first of all, what are the advantagesof using an animation? Well, firstly, when you’re using a transition, you have to applythose specific styles to everything you want to perform a transition with. But with ananimation, 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, orsorry, turns the background from red to black, then you can apply it to any item.Whereasif you use transitions, you’d have to go through and go through every single element, changethe suit of selectors, and do all sorts of things. On top of that, when you’re usinganimations, you can play something at the start, instead of having or with a delay insteadof having to wait for some event to happen with a pseudo selector. So pretty much whathappens here is you can say, we can pretty much just remove this image completely fromthe page or translate it at the start when the page is first refreshed. We can alsouse 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 arecompletely custom, custom. You can name them whatever you want and do whatever you wantinside them. There are a few keywords that we need to use to get this set up. Now ananimation is split up into something called keyframes. Now pretty much each animationhas at least one at least two keyframes. So you have the starting and the ending. Andthen you can add keyframes in between to decide the different stages of the animation.Soto define an animation, all you have to do is go at keyframes. So in this case Is theprefix and keyframes is going to be our keyword. And then you name the animation. I’m justgoing 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 stylesand expect it to work perfectly. There are two different ways or two different main waysthat we can define our keyframes.So pretty much the kind of standard way of writing oneof these keyframes is typing out the the keyword. So for example, I’m just going to type examplehere. Now, of course, if in a real world scenario wouldn’t be like this, it would be a numberor a percentage, or an actual keyword, but it wouldn’t just say example, then you’regoing to create these curly braces, again inside of our keyframes. And here, you wouldtype the styles at this stage. So for example, if I wanted a red background, you would typeit 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 initialstarting point. And then two, which is going to be your ending starting or ending pointsorry, here, what you’re going to do is type in whatever you want. So for example, let’sjust say our, I’m actually going to change this black to red, since that’s what the orsorry, red to black, red to black.Now here, I would say start from when the backgroundis red. Now there doesn’t have to be anything here. But it would be recommended that youdo start with something unless you’re going for something specific after that. And thenhere to, I’m going to say at the end of it, make sure the background is black. Now, ofcourse we don’t have to work with timings or anything here, because that’s all decidedwhen 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 wantedmore than one background, you can’t just add two background properties in one go. So insteadof this, what we use is percentages. So you can say at 0%, you want to have some specialproperties. So I’m going to say background is red. And then you can say at 100%. So atthe 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 propertieshere as you want, it doesn’t really change anything. But of course, you want to try andlimit the amount of properties you add or sorry, stops or keyframes to maybe six orseven at the max. Now unless you’re doing something very specific. Maybe you want strobelights 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 haveto work with one property. What if we wanted to translate something. So what I can do isactually 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 translateby 10 pixels, and 10 pixels. And at the end of it, we want to translate by 20 pixels and20 pixels.So you can see how this works. So for example, let’s just say we wanted toenlarge something and change the color from red to black. We can do it just like thisexcept maybe using scale or padding or any other way that you choose whichever one whicheverone you think is best for the specific website you’re developing. Now one thing I’m goingto mention is that the kind of convention is to keep these curly brackets on the sameline. But if it is getting a little bit long like this one, you can definitely open andclose them just like I’m doing here.Don’t be limited by the whitespace. It’s not reallya defining factor. You can space these however you want. But usually you’re not going touse more than one property on a keyframe like this. If you do have a giant animation, somethingwith, 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 multiplesof 10. This could be 30% 37% way 37% of the way through, it could be 25 you could splitit into quarters, you could do pretty much anything you want with this But the key thingyou have to remember is you’re designing your own animation, you’re going to want to fitit to how you want. So for example, if you just wanted to enlarge something, you didn’treally you don’t really have to use these percentages you can just use to and from orfrom and to, since you only have two stops, but if you want to do something like multiplecolor change, then you most likely want to switch to percentages.So you want to go from0% to 33% 66%, you know, work with it, just kind of see how everything works togetherand design the animation based on what you need. So this is the video based on designingthe animation. Now in the next video, we’re actually going to be adding our animationand 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 createdin the previous video to one of our elements.And then we’re actually going to be goingthrough and working with it in the next video. So first of all, let’s just recap what we’vedone. So far. In the previous video, we created some keyframes for animation, I talked aboutall 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 someof our elements.So this is going to be quite a short video because it is quite easy tojust go ahead and add the animation. But there is a lot to cover about the different propertiesof 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, thisis used with translation and background colors. So we can pretty much apply it to anythingon this page. For now I’m just going to go with our about me text right there. So thefirst thing I’m going to do is go ahead and select it by adding a class, it looks likewhere is it hold on, let’s see seems to be have lost and all this.It’s got to be somewherethere we go about me. So he already has a class subtitles. So what we’re going to dois, well, actually, there’s already stuff applied there. So it would be much betterif 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 recommendyou keep your animations and keyframes at the bottom so that if you ever need to referencethem, you can just scroll down and see all of them there. So what I’m going to do isgo ahead and select this. So I’m going to go hash, and then about me, open up the curlybraces. And now what we’re going to do is go and start adding our animation. So thisis pretty easy to do, all you have to do is use one property animation name.And you cansee a little shorthand there. But we’re going to be covering that a little bit later. Let’sgo ahead and add that. And here we’re going to put the name of our animation. So thiswould be red to black. And remember, it’s going to be the exact name of the animationthat 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 coverin 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 propertiesfor the animation to start running.So for now, all we’ve done is taken the keyframesjust slot them on to the about me title. And in the next video, we’re going to go and actuallyset this up so that we can start seeing it moving, changing the times and actually makingthe animation come to life. Alright, let’s move on. So now we’re actually going to begoing 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 howthe animation works and how we can work with it.So let’s get started. Now, I’m only goingto be covering some of the basic properties here. But there are many more out there. Thereare so many different ways that you can work with these animations and change their propertiesor how they work. Well, what we’re going to do is go ahead and use some of these basicfunctions, so we can get this up and running and working. So let’s get started. The firstone, I want to talk about an animation duration. And this is probably the best or well notreally the best, but it’s the most important one, because pretty much what happens is theanimation duration is going to actually allow your animation to run. So what I’m going todo here is first of all set up this function here.And pretty much the default value ofthis property here it’s actually zero. And that’s why in the last video, this wasn’trunning at all, we added the animation, but because the default value is zero, prettymuch 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 secondvalue here. So I’m going to go ahead and say two seconds, which is quite fast. So I’m actuallygoing to go ahead with four seconds. Now if we refresh the page, you can see that thatanimation does play. And you can see it kind of works like that, it goes from red to yellowto 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 propertiesto actually change how this work and maybe, you know, repeat it over and over again anddo all sorts of things with them. So the next property I’m going to be covering is the sortof 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 aboutthe duration. But now we’re going to be talking about the style. So pretty much the styleis probably the hardest property to learn about kind of how, you know, we looked attransition properties or styles. And those were the hardest, this is pretty much theexact same. So pretty much what happens here is that this style is going to define thespeeds, or how the animation works out. So all we have to do is go ahead and type outanimation. 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 mainones. 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’sgo ahead and check it out. We have linear, of course, which is just straight, there’sno speed changes, or weird anything like that, you can see just go straight down. So youcan see a very clear difference there, especially here, unlike the transition. Whereas withease, it would stop in the middle and then speed back up. Whereas linear, it just goesstraight. Of course, we also have ease in and ease out and ease in out just like wecovered before. So there we go, I’m going to leave it at linear, because I think itlooks the best. There we go. And you can see we’ve set that speed curve there. So now let’stalk about the next property, which is going to be the animation delay. So the delay isa little bit of a weird case here, because you can use positive values.But you can alsouse negative values, which is a little bit confusing, but let’s talk about it here. SoI’m going to go ahead and add an animation delay, just like that. And here, I’m goingto 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 startswhen the animation is zero, which is the default, it starts right as the page loads. But ifyou go negative two, it’s pretty much acting as if you’re already two seconds into theanimation. That’s kind of how negative values work here. Now, obviously, there’s no realapplication for this unless you’re looking for something really, really niche that youneed it. But this isn’t really widespread or used. very commonly, it’s just a reallycool thing to know about animation delays. So the next thing we’re going to cover isthe 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.Sowe can use the property animation iteration count. And here, what we’re going to do isapply our the number of times we wanted to iterate. So for example, if I wanted to, toiterate or loop over two times, I could refresh, of course, it starts a little bit early, andit 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 thenthis means that this is just going to keep going over and over pretty much forever untilyou terminate the page or close it or even change something. But when this is set, it’sgonna keep looping over and over again pretty much forever. So there we go. Now let’s goahead 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’sgoing to be our animation direction. So this is the final value just like you’re seeinghere before we started, but it’s actually pretty useful unlike something like the negativeanimation delay value here.Pretty much what this is going to say is the starting and endingpoints of the animation. So for example, let’s go ahead and add that property their animationdirection. And now we’re going to talk about the four main values for this function. Ofcourse, 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 totwo times and remove the delay. Just like that, so that we can get the full picturehere. So if we refresh the page, you can see that it’s just normal, it goes from startto finish. And then you have your opposite way, which is reverse. So pretty much whathappens here is it goes from 100% to 0%. And the properties aren’t flipped, they stay exactlythe same. So if you look at this, it goes back in time, all the way to its startingposition. 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 gobackward.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 ofcourse, just like with our first two, you have alternate reverse, which does still thealternation, but it starts at 100, instead of at zero, so it’s kind of going to starthere and then go back to it starting and bounce back to 100. Let’s look at that here. You can see it goesup, and then it bounces all the way back to its starting position. So there we go. That’spretty 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 dohere is summarize all of them because there is a lot to cover.And you’re not going toadd five animations every time, especially when you have to use all of the differentbrowser support tools and prefixes. And it gets really complicated after some time. Sowhat I’m going to do is use a very cool shorthand that just summarizes everything for us. Sowe don’t even have to use our animation name here, we can just cover it all once in ouranimation 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 isred to black.Your next value is going to be the duration, which is a pretty importantone. So we’re going to set it the same at four seconds, your next value is going tobe your timing function or your speed. So we’re going to set it linear here. And thennext 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 seethat does get a little bit long there. So I’m going to leave both of these versionson in the project file for you to decide for yourself. Now let’s refresh the page, seewhat happens. Oh, whoops, forgot the pixels. Sorry, forgot the second value there. Let’srefresh. And now you can see that it goes from the back to the start, just like we hadhere. So like I said that shorthand is a little bit hectic to memorize and you know, learnall of the different values. But there is always Google if you forget the order or anythinglike that. And what makes this really useful. If you want to add any browser freebet forprefixes like this, you can easily do that. And then just copy this over for the differentprefixes. So you can go here, here, here and put your different prefixes. So I have fromMozilla, we have from Microsoft, so Internet Explorer.And then of course, we have ouropera. So we have four different prefixes here and five values for one element, you’dhave to put 20 properties just to get this all covered. Now, you can probably see theadvantage of using something like this, with that shorthand over all of the really clunkyproperties. Alright, so that’s pretty much it for animation properties, or the differenttypes of animations or ways you can manipulate these animations. Of course, there is onceyou learn this, there’s a lot of power that can go into it. You can create all sorts ofdifferent animations, grow styles, and then you can really manipulate them just by usingthese five values. We didn’t even we didn’t even have to touch the animation to make itlook completely different. So that’s pretty much it. Now we’ve covered a lot of featuresin CSS. And in the next section, we’re actually going to be going through and styling thewebsite 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 reallygoing to get challenged to use all of the skills you’ve learned in this section.Maybetouch up on some things that you may not have been comfortable with, or you may have beenfuzzy on. Alright, let’s move on. So now that you’ve learned pretty much allof the basic skills, or some of the more advanced skills as well, in CSS, it’s time to moveon and start working on a challenge. So pretty much in this challenge, you are given an unstyledwebsite, which by the way, a zip, or a packaged file of all of the files that you can useto get started is available for download on this Udemy lecture. So what you can do isjust 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 objectiveshere, 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 listsof tasks as you like, but pretty much, you’re just gonna have to style this website fromscratch 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 videoposted in on the next lecture. But it is quite long, so you don’t have to watch that. Butif you want to see how I did it, maybe you want to, you know, review everything or geta little view on some of the topics, you can always watch that but don’t feel forced ordon’t feel like you have to watch that lecture. If you don’t want to watch it, all you haveto do is click on it the bulleted list icon and just tick off the lecture, just make surethat if you want it to mark as complete, just tick off the lecture make sure that it isfinished.And then you don’t have to watch it. But other than that, we have this websitethat is just completely unstyled. And we have to go and style it. Now just to show you thisis what our website here looks like I’m going to actually refresh the page. So you can seethat nice fade in, we have a sidebar, which we styled and created borders for. And wealso have a nice image grid. So you can see there that is responsive. So if I go and actuallyresize the window, you can see there that it is responsive, we have a little bit ofimage 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 customfonts.And we use Flexbox and grid to set up this website along with animations, youcan see a nice transition in color there. So we’re going to be doing all of this inthe solution video. Again, you don’t have to watch it, you can either copy what it lookslike on this page. Or instead, you can just go and do whatever you want. Pretty much justtake the content I give you and style it however way. And I would encourage you to either goon the video lab website, or the q&a section of this course and post what you’ve got, youknow, show off your skills and show off what you can create out of this website, it’s reallyencouraged to you know, share it with the community, and everyone can learn from eachother 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 howto do just for you feel free to use Google, this isn’t a test, it’s more of a fun activityto see how far you’ve gotten in CSS.So that’s just one thing to keep in mind. Alright, Iwill see you in the solution video. So in this video, we’re going to get started andstart finishing up this website, we’re going to, you know, do all of the skills and useeverything 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 withmy 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 closeoff our previous site. Because what’s happening here is we have our actual site set up. Butwe need to start working on our CSS through an external stylesheet as we’ve been doingfor the last well for most of this course. So we’re going to get started with that.We’regoing to use Ctrl or Command n to create a new file. And then I’m going to save it inmy 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 whatI like to do before I start is just kind of get myself in the right mind frame by settingout the kind of phones I want to use, the different colors, everything like that.Sowhat I’m going to do is just create a comment Up here using this notation. I’ve used ita couple times throughout the course. And what we’re going to do is in here, we’re goingto type out all of the stuff we need. So I’m going to say primary font. Whoops. So we haveour primary font, here, we have our secondary font. And now we have our different colors. So whatI like to do for my colors is have my RGB code, do whatever here, and then you havethe name of the color.So this would be for example, black, pretty much. So we’re goingto do that in just a second. But first of all, let’s just go and find the fonts thatwe want to use. We’re not going to import them yet. But we just want to look and seewhat 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 twofonts, 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 ourheaders, we’re going to use Roboto condensed, so we have normal Roboto here, but we’re goingto use the condensed version. So for the primary font, it’s going to be later. And for oursecondary, which is for pretty much headers and subtitles, things like that, it’s goingto 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 differentcolor scheme, don’t worry about it, it doesn’t really matter. But what we’re going to dois 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 andeasier on the eyes.So let’s start off with blue here, I’m going to go with quite a darkkind of blue something around here. And I’m going to copy that in. And I’m going to saydark blue, although it’s not really dark, dark blue. But I’m going to say that and pastein the code. Now let’s go with a lighter blue. Now we can always use RGBA color codes. Butagain, 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’smove 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 likethis would be good. So I’m just going to say the bold orange. And again, it doesn’t reallymatter what you give these, your names, as long as you kind of understand them, you canname them whatever you want. And then we’re going to go with a lighter orange. So somethingaround here. Now what I like to do, if you’re trying to create a lighter color, is justlook for something on the this side of the spectrum closer towards the higher valuesof the RGB.So if it’s low, it’s most likely going to be dark, you can see that in effecthere. 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 readyto go. But next thing we need to do is actually link the stylesheet because we haven’t linkedit yet. So what I’m going to do in my head here is create a link tag, hit tab. And nowwe’re going to reference it just like before, we need to go back one directory, we use dotdot. Now we’re up here in our challenge directory. So previously, we were here. Now we’ll jumpback up to challenge. Now we need to jump back forward one into the CSS directory.Andthen 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’sa pretty good first task. So again, none of these have to be in order, as I said in thelast video, so we’re just going to go ahead and fix up these images because they are quitebig. So that’s what I’m going to do. First, I’m going to go ahead and reference all theimages for now. Now we can go and change the classes and do specificity later. But fornow, I’m just going to specify them and group them all at once. So I’m going to set theirwidth to 400 pixels, and their height 200 pixels. Now, obviously, I’ve kind of createda, a, I really don’t like absolute values. But for something like this, it isn’t, it’skind of necessary.And we can work with the relative newness or the responsiveness ofthese images later. So let’s go ahead and refresh see how it looks. So now we know forsure that our images are working fine. And of course, you can see how the absolute valuesare kind of stretching this out. They’re not kept in proportion. But for now we don’t needto worry about that. So there we go. We’ve resized our images, and now we can see everythinga lot more clearly. So we have our images set up. The next thing I want to do is actuallyset up our page. To have two sections, we want to have our content section. And we wantto have our sidebar. So we have our sidebar section, I’m actually going to create a dividerthere, 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 isselect the class main. Although now that I’m looking at it, we could probably just usean ID instead. So I’m going to go ahead and change the ID to main, remember, there’s onlyone main on the whole page. So it’s not like we need to use a class. And from here, we’llget 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 herepretty obviously. But now we’re going to start working with it. So pretty much what I havevision for the change is we have our content section, which is taking up the majority ofthe 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 totake 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 wouldjust 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 workinggreat.Now, what I recommend that you do while you’re doing this is always try and go andsee how your page looks in different viewpoints. So if you go ahead and you click on Inspectanywhere on your page, you can actually go and use your Chrome responsiveness kind ofthing here to check out how your page would look on different devices. So I would recommendusing this over resizing the browser, because resizing, the browser actually shows someinaccuracy. So you can really see how it would look like on your phone, or you know, maybean 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 sayit’s about 50 pixels. There we go. And, yeah, let’s you can see now that that gap has beencreated. 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 thisin a much better way. So there we go. That’s great and working fine. So now that we’veset 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 classesmyself, 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 sortsof things like that, we want to be able to group all of them or style all of them togetherat the same time.So that’s what I’m going to do here. First thing I want to do is adda class of subtitle to all of the subtitles, just pretty obvious. Now again, some of themare 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 cansee here that there’s actually a mini topic which we want to be smaller. So what I’m goingto do is change the class and change this actually to topic, subtitle. So now we can specify this in a more specificway. So instead of having to use the subtitle class, we can actually go and talk about thisin a different way. So there we go. Now let’s go ahead and start looking at some of theother parts of the site. Oh, we actually still have more, you can see we have a lot of stuffhere.So what I’m going to do is actually add classes to each of these posts, becausethey are going to be a little bit different considering the grid situation that we havehere. 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 ofthe other stuff. So here, for example, our paragraphs, or kind of our descriptions andour posts, I want to also create a class for those.So I’m going to say class, I’m goingto say post text, or post description, it doesn’t really matter, whichever one you arecomfortable with. And we’re going to leave these blank for now. And actually also goahead and add a class to these dips. Because remember, the more we can specify The betterour 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 classto that. So there we go, we have everything set up. Now we’ve added our classes. So thenext thing I want to do is go ahead and import my different fonts. So firstly, let’s go aheadand check out our little documentation mini documentation there. And we’re going to startselecting 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 importit all at the same time.So we have our Roboto condensed, there we go. add that. Now whatwe’re going to do is go ahead and whoops, didn’t mean to do that. Now, we’re going togo ahead and select some other fonts here or sorry, weights here. So I’m going to selectbold 704. Later, I’m going to also select bold 700. And we’re also going to go witha light.So the load time is moderate, it’s not going to, you know be very easy on thesite. 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 goingto go into my index and insert the link right below here. So I’m going to do that oh, becauseactually, we need to put the stylesheet below the below the fonts, remember, because weneed the fonts to load in first. So there we go, we have that important. Now what we’regoing to do is just go ahead and copy these onto our onto here, just for reference. Nowwe are going to, you know, put these and specify these different selectors, obviously, butfor now, I just want to leave them in there. So it just in case we forget some of thesefallbacks or anything like that, we’re just going to keep that there. For reference, I’mgoing to actually put that in our little notepad there. So now let’s go ahead and refresh thepage.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 selecteverything that has a class of subtitle, right here. And what I’m going to do is paste in thisfont 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 styleeverything. And if we don’t like that, what we can do instead is just go and change thefont family. So that for example, if maybe we want to have a different font, maybe it’sa subtitle or some special text, we can just easily specify it without having to go throughand you know, specify each one every single time. So it’s a much easier way. So now thatwe are starting to do this, we can actually start to see flaws here. So for example, wealso 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 fontfamily, and refresh. And you can see that that is now working we have everything setup here.And you can see there’s also a little bit of text here. So you can kind of startto notice bugs in you know, maybe HTML that you’ve written or anything like that, youcan easily start to notice bugs in it, once you start styling it. So this is most likelyan indentation error. Maybe this text ended up outside the paragraph tag, so I’m goingto look for it. It is next to our l eyes. And you can see it is right there. So whatI’m going to do is just erase that we started out, we start up our p tag. And I’m goingto create a new one under it just to make things a little cleaner. Now I refresh andthat is working. This is most likely an error with indentation, things like that. So now we have our paragraph text, everythinglike that set up.What I’m going to do is now work on our headers. So I’m going to startoff with our h ones. And I’m going to give it that header font family. So I’m going toCtrl 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 onall 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 completelytransformed. We’ve you know, imported this custom font and laid out our site in a waythat just makes it look a lot better. So that is working fine. So There we go, we have thisset up, and it is working fine.Now what I want to do is go ahead and start working onsome of other layout features on this page. Once we get into that, we can start tacklingcoloring and formatting and all the other things after we’ve used the fonts. So let’sget started. What I want to do first is working on our little image grid here. So we don’tactually have a proper grid setup, which is what I’m looking to fix in this in this partof the video. So I’m going to go ahead and do that. Now. I’m going to first of all, selectit. So we’re going to look for that class that we use, which is image grid.So we’regoing to go into here and select that using dot image dash grid. And there are many differentways to create a grid these days, but the way I’m going to use to make it a lot easieris just use Flexbox. So we’ve already used grid once Flexbox would be a great way tosolve this. So let’s go ahead and refresh the page. And now you can see that we havecreated a little Flexbox here.So we have that set up. And obviously you can see thatit is pretty badly laid out right after creating the Flexbox. So we’re going to tackle thatproblem now. Now, there are actually only two commands that we need to fix this, wecan go and set up our flex grow and shrink to make it just how we like it. But thereis an easy workaround to it, the first thing we want to do is turn wrapping on. So we’regoing to say flex wrap, wrap. And this is just going to move everything on to a newline, which is pretty easy. You can see there that that is working fine now. And when Iresize the page or turn it into full width, you can see that that creates a nice threeby 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 notkind 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 illusionthat it’s not taking up the space, it actually should be.But it is centered. So it’s centeredto 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 imagesbecause they don’t look that good when they’re just slammed together, you want to createsome kind of contrast between colors. So we’re going to use a nice special selector.To dothis, we’re going to select every single image inside of the grid instead of having to placenew 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 everyimage inside of our image grid, open that up. And we’re just going to give it a marginof 10 pixels very easy, we don’t need to work with anything else, refresh the page, andthat margin has been added. So you can see how that looks a lot better now that we’vedone it.And it’s still responsive when we you know, change the display, maybe to iPador anything like that you can see it is still responsive, it’s not changing it at, it’snot 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 thisright 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 goingto do, instead of doing that is just use a simple float. So I’m going to give this anID since we only need to do this as a one time thing. So I’m going to go ahead and lookfor 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 classthere.So I’m going to set it as image one, just like this. So what I’m going to do isgo ahead and give that a float of right, just like that. And whoops, forgot the id selectorthere, we refresh the page. And now that is working fine. Now obviously, you can see thereis a little bit of an issue with the spacing. So we’re going to use a quick fix for thisand give it a margin of about 15 pixels. So this is going to kind of push everything tothe 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’treally control where the spacing is going to go. So what I’m going to do to fix thisis 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 almostthere. We’re going to actually use 300 pixels. Now, of course, in a normal scenario, youwouldn’t have to use this, you know, maybe you would want to use a grid or Flexbox, likeI specified here.But like I said, you can pretty much use whatever creative methodsyou deem necessary. And this is much easier because again, there are only three itemsand 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 goahead and tackle some of the other parts of this site. So we have our little image gridhere, we have things like this, let’s go ahead and check out our item list here. So we dohave animations, which we’re going to leave for last, we have our image grid. And therewe 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 goahead 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 goingto say to pixels, because monnit, that big, solid. And now we’re going to go ahead and copy acolor from up here. So I’m going to go ahead and use a dark blue. Just like that, copyit 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’mgoing 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 goahead and style those in just a second.But first of all, if you can start to see oursidebar working here, we have that little grid gap. And we have our the start of oursecond column there. So it’s working great. Let’s go ahead and start working with ourmargins here. So first thing I’m going to select is our post title. So I’m going togo ahead and say post title. Now you can do this in two ways. Since there’s only one h2and 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 giveit a margin on the left of maybe five pixels. And now what that’s going to do is push thatinside. And we’re going to have to do the same for our paragraph text. So I’m goingto go ahead and add our post text class here, I must have forgotten it. So we’re going togo on dot post text and give that the same margin. There we go. And now we have everythingpushed in. So there are still margining issues there. You can see that with some of thesehere. 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 seewhat really works for you. And you can see that now that’s really fixed that up. Andwe have our posts sorted. So there we go, we have everything working. Now let’s go aheadand 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 betterway. So firstly, I’m going to give the page a background. So what I’m going to do is givethe whole page so I’m going to use the body selector. I’m actually going to do that atthe top. So I’m going to use the body selector body. And I’m going to give it a color, orsorry, background, a background and I’m going to give it our light blue color, just likethat.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 goingto go ahead and use an RGBA because this isn’t light enough. So that’s what I meant aboutflexibility at the beginning of the video, you can go ahead and change the colors basedon your main four here.So I’m going to give this about point five, just make it a littlebit lighter on the eyes. You can see that looks a lot better now. So now that we’vedone that, I’m actually considering changing the border color here. So what I’m going todo is go ahead and find it. And instead of using our blue, I’m going to use a bold orangeso it’s going to be quite striking on the eyes there. So I’m going to go ahead and dothat. And there we go. We have our dark orange there. Now what I’m going to do is specifythis and select our sidebar class. So I’m going to go ahead and do that right belowall of these.So I’m going to go dot sidebar. And I’m going to give it a background of alight 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 selectedsubtitle went on to the wrong one. So I’m going to paste that in here. And there wego. Now refresh the page, and we have that orange background color there. So we couldyou 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 checkupof 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 ourhovers and our transitions.So this is going to be the final part of thevideo, 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 quitelong. And I want to keep this short. So let’s get started. So first thing I’m going to dois work with our links.Now, we haven’t actually added anything to the links. So that’s whatI’m going to do first of all, now I kind of left it up to you what you want to add tothe links, but what I’m going to do is just go and check out each of these. So I’m goingto 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 goingto 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’reactually inside of our post, sorry, we’re going to go post and then our a or our anchortag. 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 marginthat we need, remember, because to space it out a little bit, then what I’m going to dois say text decoration none. So pretty much what this is going to do. Oh whoops, didn’tneed 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 ofhaving 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.Soremember, we have it added to our paragraphs or allies. And I think it only makes senseif 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’mgoing to say the post color is going to be our that dark blue that we had. So this isbefore 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, wehaven’t actually seen this before, but it’s pretty easy to do, you just add it onto theelement. And the only thing that we’re going to change remember is going to be the colorof the text there.So I’m going to go and find our light blue. And I’m going to pastethat in. So now when we hover over it, it should change the color to a light blue. That’sworking 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, youwant to support it or you want browser support, you should always use this. So now I’m goingto 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 andit takes 0.5 seconds to change color. Now we could of course go and you know add ourspecial 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 animationsequence, which is going to be our sidebar, and our, our main section here kind of fadingin if if it makes sense. So that’s what we’re going to do here. First thing I’m going todo 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’mgoing to do is first create our image hover, just like that. And I Oh, yeah, I forgot Iput that up at the top here. So I’m going to create my image hover. And here, I’m goingto 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, becausewe 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 transitionproperty. So we’re going to go again, point five seconds, and we’re going to add two properties. Sowe’re going to go height and width separated by a comma, refresh. And of course, it seemsto be a little problem there. Whoops, I forgot to add that misspelling here. Now we do that and it changedit. 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 goingto do to fix that is just use the all property. So what this is going to do is transitionthe height and the width together. When I refresh, you can see that that styles or moveseverything together, because pretty much what’s happening is it’s overriding our our widthproperty, it’s just setting it instantly, and then it’s changing the height, which wedon’t want. So I’m going to set that there, you can see that’s working great. So whatwe’re going to do now is go ahead and create that fade in effect that we needed for ourcontent 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 whatI’m going to do is start creating our animation.So the first thing we need to do is createkeyframes. So I’m going to go add keyframes, and then the name of our animation, let’sjust call it fade in for now. So the next thing I need to do is select my, the differenttime stamps I want. So I’m going to use the from and two keywords to do this from andto. Now we’re going to use a property that we haven’t actually learned before.And hopefullyyou 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 numberto opacity one, just like our RGB a color code, now we’re going to do is just refreshthe page, obviously, we’re not going to see anything, just make sure that everything isstill running the same. So I’m going to go ahead and now add our animations to both ofthese sections or both of these block here. Sorry, blocks. So I’m going to go ahead andsay 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 thisworks. And you can see that it now fades in.So there we go, we have our page set up andworking, we refresh here, we can hover over images and make them look better. And it justlooks 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 lookinggreat. Alright, let’s move on. So you’ve reached the end of the course now. So before we moveon, I want to congratulate you it very few people who ended up starting the course makeit to the end. And it does take a lot of discipline to learn everything and stick to it throughoutthe course. So I just like to say well done. And it’s great that you’re here with me.Butnow that you’ve learned CSS what what is there to do next? I mean, should I just stop anduse my skills? Or are there other things that I need to learn. So I’m going to give youthis helpful guide to maybe get you off your feet and start learning new skills progressingyour careers. So I’m going to talk about it. Now before we move on. Let’s just take a secondand recap what position we’re in right now. So by now you should have pretty good proficiencyin both html5 and CSS three, which are just the latest versions of the two.So you shouldknow all of the concepts and inner workings behind CSS and how it works so you can reallysee how a page is fit together using everything so box models Flexbox responsive this thingslike that. By now, you should have the skills to style your website in pretty much any waythat you want. If you want to make it, you know, a very rustic or vintage feel. Or ifyou want to lay it out in a nice modern design, you should be able to layout your websitewith 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 arguablythe most important is JavaScript. Now, JavaScript is the programming language, it’s kind ofwhat makes a website come to life, it gives it that interactive feel. And you can alsochange things in a much easier way. And without JavaScript, you can’t really grab the essenceof web development as a whole, you need it to be able to bring your website togetherand really take it to the next level. So that’s one skill that you should definitely learnnext, if you’re planning on continuing. Now, once you’ve learned JavaScript, then you have to go on and choose what kindof career path you want to go down.If you’re planning to go down a front end route, soyou’re only developing things that you know, you’re only changing the look and feel ofthe website, on the main mainframe, then you should start learning some more advanced skillson either of the big three. So I’ve let I’ve left some examples there. So there are lotsof libraries, frameworks, that things people have created. So you can go and research someof these. Some of them I would recommend for CSS, or some of the pre processors, whichare sass and less. So I would recommend you go and check those out.You can also lookat 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 youknow, you’re trying to wrack your brain and keep all those in your memory. Just go anddo some research on what where you want to go and what kind of skills you should learnnext, 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, deliveringspecified 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 theweb.And it is made or powered by Python, you also have PHP and a JavaScript, whichis JavaScript web server, which is called node j, s. And then you have some others likeRuby and dotnet. So there are so many out there, you can always go and research andyou’ll find tons of options. So there you go. So that’s pretty much it. We’ve coveredeverything on CSS, we’ve talked about grids, Flexbox. And pretty much everything thereis to know about the basic concepts behind CSS, when you can start specializing and goinginto very specific details. And obviously, it’s ever expansive, you’re never going tohave to stop learning. So by the time you’re watching this, there could be an entirelynew version of CSS out with a ton of new features. So never stop learning and always keep, youknow, 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 andyou will eventually end up as a web developer that can really create things to his or hercreative freedom.Alright, thanks for taking the course..

As found on YouTube

Share this article

Leave a comment