CSS Tutorial - Zero to Hero (Complete Course)

CSS Tutorial - Zero to Hero (Complete Course)

SUBTITLE'S INFO:

Language: English

Type: Human

Number of phrases: 6970

Number of words: 118284

Number of symbols: 520989

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles prepared by human
00:00
Hi, welcome to the CSS zero to hero course, in this course, you're going to completely learn how to use CSS from the ground up, we're going to cover every single concept or every major concept in CSS, and really build up our knowledge of it. So before we move on, I just wanted to give you some motivation on what you're going to be doing in this course. So you can, you know, really get excited about the course and start jump, you just jump straight into learning. So first of all, let's look at some of the stuff that we've done over the course. Now we start with a base website. And over time, we style this and change up the website using every technique that we've learned. So you can see that we've created multiple grids, colors, we've changed this completely and transformed the website in every single way. We've also created things like gradients. And we've also styled change our custom fonts, colors, and backgrounds. We cover all of this in depth throughout the course. And we do it step by step so that you don't rush through and forget anything.
01:03
At the end of the course, there's also a little challenge here, where you try to bring all your skills together and style a website from scratch. Now there is a solution video, if you need it, maybe you just want to see another opinion on it. But pretty much you're going to bring all the skills you learned in this course together and create this nice website. It's responsive, it's got all sorts of layout features. And it also has animations, you can see just like that. So that's some of the actual website stuff we're going to be doing in the course. But why don't we look at some of the code that we've written. So I created this file from the start, I didn't have it at the start of this course. But at the end, you can see that we've written now, well over 100 lines of code here. And I although it may look intimidating. Now, I do explain every single part of it, so that at the end, you can just read this straightaway and understand what's going on in an instant. There's also the styling for our solution video or for the solution to the challenge here. So you
02:07
can see we've got a bunch of stuff here. And like I said, it may look confusing, but once we move on, this will make a lot more sense. So that's pretty much it for the little achievements video for this course, I hope you're a little bit motivated and excited to go forward and start learning about CSS is a pretty exciting topic. And it can really advance your web development if you don't already know it. Alright, let's get straight into it. Hi, welcome to the CSS zero to hero course, in this course, you're going to completely learn how to use CSS from the ground up, we're going to cover every single concept or every major concept in CSS, and really build up our knowledge of it. So before we move on, I just wanted to give you some motivation on what you're going to be doing in this course. So you can, you know, really get excited about the course and start jump, you just jump straight into learning. So first of all, let's look at some of the stuff that we've done over the course. Now we start with a base website. And over time, we style this and change up the website using every technique that we've learned. So you can see that we've created multiple grids, colors, we've changed this completely and transformed the website in every single way. We've also created things like gradients. And we've also styled change our custom fonts, colors, and backgrounds. We cover all of this in depth throughout the course. And we do it step by step so that you don't rush through and forget anything. At the end of the course, there's also a little challenge here, where you try to bring all your skills together and style a website from scratch. Now there is a solution video, if you need it, maybe you just want to see another opinion on it. But pretty much you're going to bring all the skills you learned in this course together and create this nice website. It's responsive, it's got all sorts of layout features. And it also has animations, you can see just like that. So that's some of the actual website stuff we're going to be doing in the course. But why don't we look at some of the code that we've written. So I created this file from the start, I didn't have it at the start of this course. But at the end, you can see that we've written now, well over 100 lines of code here. And I although it may look intimidating. Now, I do explain every single part of it, so that at the end, you can just read this straightaway and understand what's going on in an instant. There's also the styling for our solution video or for the solution to the challenge here. So you can see we've got a bunch of stuff here. And like I said, it may look confusing, but once we move on, this will make a lot more sense. So that's pretty much it for the little achievements video for this course, I hope you're a little bit motivated and excited to go forward and start learning about CSS is a pretty exciting topic. And it can really advance your web
03:00
development if you don't already know it. Alright, let's get straight into it. So in this video, I'm going to be giving a quick introduction to the syllabus of the course. Now it is quite a long video. So if you don't want to watch it, or if you don't really want to know an in depth analysis on what the course is going to be covering, then you can go ahead and skip this video. All I say is that please make sure that you read the prerequisites lecture that came before this. Now, there are some very important details in there and some skills that you need to know to move on with this course. And if you don't know them, you're going to have a very difficult time picking up some of the language. Now there's only one real prerequisite, which is HTML. But you can go ahead and read that. And just make sure that you have all the skills necessary. Alright, so let's get started. And the first thing I want to talk about is the section structure. So the section is just a it's a bunch of lectures. So these are video lectures. And they're made in an interactive way. So you can see in this picture here, I am coding along with a nice preview on the side showing what what our progress looks like. So at the end of each section is a 10, a 10 question multiple choice quiz that covers all of the skills learned in that section. So it's really encouraged to go and just try it out and see if you know everything. And then that way you can diagnose yourself and see maybe there's some skills that you're
04:00
fuzzy on or you need to revisit. And on top of that, I really encourage everyone who is following along in the course, to not just watch and be a passive consumer, you know, really go out and try and use your skills because otherwise you're not going to learn it. Otherwise, you're just gonna end up having the information on your head. And especially when it comes to development programming, you know, experiences everything, you can't just watch lectures and just magically be able to do it. So I encourage you to go off and follow the lectures and try and really use the skills that you learn in your own time and that will make sure that you have the highest retention possible. So let's get straight into it. The first section, which is the section we're in right now is the introductory section. So setting up the course and we also install all the programs and software necessary to set up our working environment. So you can follow along it's not necessary but it is highly recommended. Because if you're using maybe Something else that you're not experienced
05:01
with, you may have a hard time getting used to the program and things like that. So I recommend you follow along and set up the environment just like I do. So the second question of sorry, the second section is the introduction to CSS. Now, unlike the first section, this is going to be looking at introducing the actual CSS language, we're going to be looking at some theory behind it, where it's used and what kind of a difference it makes, we're also going to be looking at creating and linking our own CSS document to our page. So the third section is going to be looking at our first real part of CSS. So these are the selectors and properties. Now, again, you don't need to know any of these terms. I'm just going over like a kind of spit ball kind of effect here, just trying to just skim over everything. So here we're going to learn about a very important concept, which are selectors and properties, and how they really play into CSS, we're also going to be learning about the different types of selectors and where to use each one, depending on the situation.
06:03
So you're going to learn that as well. next section is where we start using the real power of CSS. So we're going to start using colors. And we're going to be applying those colors to our page. So we're going to be learning about different color types, how kind of a little bit of how colors are set up on the computer. So things like RGB or other color codes, and then we're going to use them and apply them using CSS to backgrounds and text and all sorts of other things. The next section is going to be looking at mainly at text. So we're going to be looking at trying to change the field style and look of text. So we're going to be changing the fonts the size, we're also going to be changing the bolding, there are so many different things that you can do in the section. And we're going to cover all of them then. So the next section is where we will kind of take a turn from looking at styling and looking now at layout. So we're going to be learning some more fundamental CSS concepts related to layout, we'll talk about those when we get to it, then we're
07:04
going to be applying them to actually change the style or the layout of our page. So we're going to be moving items around, we're going to resize them and do all sorts of things with them once we get to that point. The next section we're going to look at is called Flexbox. Now I'm sure you've heard of this if you've looked into any web development, but pretty much it's an alternate way to mess around with the layout in CSS, and it is quite new. But it is a pretty commonly used concept today, especially for Responsive layouts, making websites that can work on all devices. So it's a pretty important concept there. So we're going to focus on the theory behind Flexbox. First, talking about how it works, how it's set up. And then we're also going to be applying it to real life talking about, you know, where it can be used some of the benefits, and then actually using it in our own projects by creating our own Flexbox and messing around with it. So we're going to do that as well. So the next section is pretty similar to Section seven, it's going to be looking at a another alternative to using normal layout features. in CSS. It's called
08:08
grid. And there are a lot of similarities. But we're also going to be talking about the differences. So along with going over a comprehensive overview of kind of how grid works, we're also going to be going over some of the similarities and differences kind of comparing it to Flexbox. And then we're going to talk about, you know which one you should use in each individual situation. So the next section is probably one of my favorites because it really puts all of the older kind of websites from the new sites and separates them the modern sites from the old sites, and we're going to be looking at animations and transitions. So first, we're going to look at transitions and how to use pseudo selectors. Again, don't worry about our means to create these nice smooth transitions. And then we're also going to be learning how to manipulate them. So kind of change how a transition looks, we're also going to learn how to create a flight and manipulate our own animation. So we create these animations from scratch using CSS. And then we can kind of change them and change
09:11
how they look based on what we want. So the last section is a really interesting section, which kind of summarizes everything and test your skills. So it starts with a 30 question final exam, which is a bunch of questions from every single section or topic that we've covered. And it is it is a final exam. So there is like a passing grade and everything like that. But again, if you fail, there's no real consequences to it. It's just kind of a diagnostic tool to test where you are in your CSS knowledge. And after that, it's followed by a really nice challenge, which can help you know, really see where you're at, not from a theoretical standpoint, but from an actual practical standpoint. So this challenge is going to be talked about later and when to get to that point, but pretty much you're going to Be styling a website from scratch, you're going to be given a blank HTML document or Well, it's not blank, it's going to have content. But you're going to be given an HTML document with no styling. And you have to style it yourself based on
10:12
a list of So in this video, I'm going to be giving a quick introduction to the syllabus of the course. Now it is quite a long video. So if you don't want to watch it, or if you don't really want to know an in depth analysis on what the course is going to be covering, then you can go ahead and skip this video. All I say is that please make sure that you read the prerequisites lecture that came before this. Now, there are some very important details in there and some skills that you need to know to move on with this course. And if you don't know them, you're going to have a very difficult time picking up some of the language. Now there's only one real prerequisite, which is HTML. But you can go ahead and read that. And just make sure that you have all the skills necessary. Alright, so let's get started. And the first thing I want to talk about is the section structure. So the section is just a it's a bunch of lectures. So these are video lectures. And they're made in an interactive way. So you can see in this picture here, I am coding along with a nice preview on the side showing what what our progress looks like. So at the end of each section is a 10, a 10 question multiple choice quiz that covers all of the skills learned in that section.
11:23
So it's really encouraged to go and just try it out and see if you know everything. And then that way you can diagnose yourself and see maybe there's some skills that you're fuzzy on or you need to revisit. And on top of that, I really encourage everyone who is following along in the course, to not just watch and be a passive consumer, you know, really go out and try and use your skills because otherwise you're not going to learn it. Otherwise, you're just gonna end up having the information on your head. And especially when it comes to development programming, you know, experiences everything, you can't just watch lectures and just magically be able to do it. So I encourage you to go off and follow the lectures and try and really use the skills that you learn in your own time and that will make sure that you have the highest retention possible. So let's get straight into it. The first section, which is the section we're in right now is the introductory section. So setting up the course and we also install all the programs and software necessary to set up our working environment. So you can follow along it's not necessary but it is highly recommended. Because if you're using maybe Something else that you're not experienced with, you may have a hard time getting used to the program and things like that. So I recommend you follow along and set up the environment just like I do. So the second
12:31
question of sorry, the second section is the introduction to CSS. Now, unlike the first section, this is going to be looking at introducing the actual CSS language, we're going to be looking at some theory behind it, where it's used and what kind of a difference it makes, we're also going to be looking at creating and linking our own CSS document to our page. So the third section is going to be looking at our first real part of CSS. So these are the selectors and properties. Now, again, you don't need to know any of these terms. I'm just going over like a kind of spit ball kind of effect here, just trying to just skim over everything. So here we're going to learn about a very important concept, which are selectors and properties, and how they really play into CSS, we're also going to be learning about the different types of selectors and where to use each one, depending on the situation. So you're going to learn that as well. next section is where we start using the real power of CSS. So we're going to start using colors. And we're going to be applying those colors to our page. So we're going to be learning about different color types, how kind of a little bit of how colors are set up on the computer. So things like RGB or other color
13:31
codes, and then we're going to use them and apply them using CSS to backgrounds and text and all sorts of other things. The next section is going to be looking at mainly at text. So we're going to be looking at trying to change the field style and look of text. So we're going to be changing the fonts the size, we're also going to be changing the bolding, there are so many different things that you can do in the section. And we're going to cover all of them then. So the next section is where we will kind of take a turn from looking at styling and looking now at layout. So we're going to be learning some more fundamental CSS concepts related to layout, we'll talk about those when we get to it, then we're going to be applying them to actually change the style or the layout of our page. So we're going to be moving items around, we're going to resize them and do all sorts of things
14:37
with them once we get to that point. The next section we're going to look at is called Flexbox. Now I'm sure you've heard of this if you've looked into any web development, but pretty much it's an alternate way to mess around with the layout in CSS, and it is quite new. But it is a pretty commonly used concept today, especially for Responsive layouts, making websites that can work on all devices. So it's a pretty important concept there. So we're going to focus on the theory behind Flexbox. First, talking about how it works, how it's set up. And then we're also going to be applying it to real life talking about, you know, where it can be used some of the benefits, and then actually using it in our own projects by creating our own Flexbox and messing around with it. So we're going to do that as well. So the next section is pretty similar to Section seven, it's going to be looking at a another alternative to using normal layout features. in CSS. It's called grid. And there are a lot of similarities. But we're also going to be talking about the differences. So along with going over a comprehensive overview of kind of how grid works, we're
15:39
also going to be going over some of the similarities and differences kind of comparing it to Flexbox. And then we're going to talk about, you know which one you should use in each individual situation. So the next section is probably one of my favorites because it really puts all of the older kind of websites from the new sites and separates them the modern sites from the old sites, and we're going to be looking at animations and transitions. So first, we're going to look at transitions and how to use pseudo selectors. Again, don't worry about our means to create these nice smooth transitions. And then we're also going to be learning how to manipulate them. So kind of change how a transition looks, we're also going to learn how to create a flight and manipulate our own animation. So we create these animations from scratch using CSS. And then we can kind of change them and change how they look based on what we want. So the last section is a really interesting section, which kind of summarizes everything and test your skills. So it starts with a 30 question
16:41
final exam, which is a bunch of questions from every single section or topic that we've covered. And it is it is a final exam. So there is like a passing grade and everything like that. But again, if you fail, there's no real consequences to it. It's just kind of a diagnostic tool to test where you are in your CSS knowledge. And after that, it's followed by a really nice challenge, which can help you know, really see where you're at, not from a theoretical standpoint, but from an actual practical standpoint. So this challenge is going to be talked about later and when to get to that point, but pretty much you're going to Be styling a website from scratch, you're going to be given a blank HTML document or Well, it's not blank, it's going to have content. But you're going to be given an HTML document with no styling. And you have to style it yourself based on a list of based on a list of tasks given in the document. Now, don't worry too much about that. But pretty much there is a solution video that I created to style it based on how I want the website to look. But again, it's not kind of like an iron fist thing, you can go and
17:44
be creative with it once you get to that point. Because once you learn all that CSS, what's the point, if you just have to conform to something, you can really unleash your creative freedom through CSS, once you learn all the skills necessary. So again, it will be talked about in a lot more detail once we get to that point. But for now, that's just a quick overview of what it's going to look like. From here. Alright, so there's a quick overview of what the course is going to go over some of the topics. Now, again, this isn't a, you know, kind of a strict video on, you know, this is what we're going to learn. And if you don't learn it, that's it. It's just kind of showing you what you're going to be getting out of the course, so that you can really get a view into it before you start working on the course. Alright, let's get started. based on a list of tasks given in the document. Now, don't worry too much about that. But pretty much there is a solution video that I created to style it based on how I want the website to look. But again, it's not kind of like an iron fist thing, you can go and be creative with it once you get to that point. Because once you learn all that CSS, what's
18:45
the point, if you just have to conform to something, you can really unleash your creative freedom through CSS, once you learn all the skills necessary. So again, it will be talked about in a lot more detail once we get to that point. But for now, that's just a quick overview of what it's going to look like. From here. Alright, so there's a quick overview of what the course is going to go over some of the topics. Now, again, this isn't a, you know, kind of a strict video on, you know, this is what we're going to learn. And if you don't learn it, that's it. It's just kind of showing you what you're going to be getting out of the course, so that you can really get a view into it before you start working on the course. Alright, let's get started. So in this video, I'm just going to be talking about some of the software that we're going to be using in this course. Now, there's not a lot of actual software, since most of the stuff we're going to be doing is built straight into CSS and HTML. But we do need a text editor. And if you want to go ahead and use Notepad, go ahead. But I wouldn't really recommend that because it is quite hard to use when you're developing things. So I recommend this
19:48
text editor right here. It's called Sublime Text, and gives you all of the color coding and formatting that you need, it makes things really easy for you. So you can go ahead to the website. Here, it's attached to the lecture resources, if you go ahead and click in the top left corner, in the bullet list icon, you can go ahead and find the lecture contents and downloadable resources. So go ahead, check out this website. And depending whether you're on Windows or Mac or Linux, you go ahead and download this. And then it should be pretty much it. So this is what its gonna look like when you're inside, I was just typing a little bit of stuff here making things making sure things were working. So there you go, this is what it's gonna look like, once you download it, we'll go through and actually set everything up as we go through this course. Alright, let's move on. So before we move on, I just want to talk about finding project files. Now, I do do a lot of code throughout each lecture. And if you want to keep track of those, or maybe have some sort of working
20:51
reference of what's going on, then I highly recommend that you go and check out the GitHub repository that I created for all the content of this course. Now, if you don't know what Git is, or how to use it, don't worry, I'm going to show an alternative to that in just a second, using this platform. But pretty much this is going to contain all the history of every single lecture. Now, if you know how to use Git, you can download this and check out each state. But if you don't know, then all you have to do is head over to the main page. And right here under commit, it's pretty much going to show every single lecture changes. So for example, I have seven to eight item alignment, so I can click on it. And when I click on this, it shows all of the changes I have made to both files or any files that I've changed. So for example, you can see here, it has one changed file. And you can see I've added a bunch of stuff here. So you can kind of review what I've done over the lecture. So you can just go ahead and check it out. I've attached this to the lecture resources, if you want to go and look at it. Now, this does contain all of the history, all of the things that I've done over the course. So you can go review, maybe look at the code. And you can also download it, you can download the actual file or the the repository from here. So you can just download that very easily. And other than that, you can find
21:51
all of the project files on here, if you ever need them. So if you want to, you know, maybe bookmark this or keep this somewhere or Notepad, just to make sure that you have a reference of it throughout the course in case you ever want to go and review the contents or changes of some lecture. You will have it there. Alright, let's move on. So in this video, I'm just going to be talking about some of the software that we're going to be using in this course. Now, there's not a lot of actual software, since most of the stuff we're going to be doing is built straight into CSS and HTML. But we do need a text editor. And if you want to go ahead and use Notepad, go ahead. But I wouldn't really recommend that because it is quite hard to use when you're developing things. So I recommend this text editor right here. It's called Sublime Text, and gives you all of the color coding and formatting that you need, it makes things really easy for you. So you can go ahead to the website. Here, it's attached to the lecture resources, if you go ahead and click in the top left corner, in the bullet list icon, you can go ahead and find the lecture contents and downloadable resources. So go ahead, check out this website. And depending whether you're
22:56
on Windows or Mac or Linux, you go ahead and download this. And then it should be pretty much it. So this is what its gonna look like when you're inside, I was just typing a little bit of stuff here making things making sure things were working. So there you go, this is what it's gonna look like, once you download it, we'll go through and actually set everything up as we go through this course. Alright, let's move on. So before we move on, I just want to talk about finding project files. Now, I do do a lot of code throughout each lecture. And if you want to keep track of those, or maybe have some sort of working reference of what's going on, then I highly recommend that you go and check out the GitHub repository that I created for all the content of this course. Now, if you don't know what Git is, or how to use it, don't worry, I'm going to show an alternative to that in just a second, using this platform. But pretty much this is going to contain all the history of every single lecture. Now, if you know how to use Git, you can download this and
24:10
check out each state. But if you don't know, then all you have to do is head over to the main page. And right here under commit, it's pretty much going to show every single lecture changes. So for example, I have seven to eight item alignment, so I can click on it. And when I click on this, it shows all of the changes I have made to both files or any files that I've changed. So for example, you can see here, it has one changed file. And you can see I've added a bunch of stuff here. So you can kind of review what I've done over the lecture. So you can just go ahead and check it out. I've attached this to the lecture resources, if you want to go and look at it. Now, this does contain all of the history, all of the things that I've done over the course. So you can go review, maybe look at the code. And you can also download it, you can download the actual file or the the repository
25:10
from here. So you can just download that very easily. And other than that, you can find all of the project files on here, if you ever need them. So if you want to, you know, maybe bookmark this or keep this somewhere or Notepad, just to make sure that you have a reference of it throughout the course in case you ever want to go and review the contents or changes of some lecture. You will have it there. Alright, let's move on. So today, I'm going to be giving a quick introduction to CSS, we're going to be going through what it actually is, why it's used and what actually does CSS do. So before we get started, if you're just starting out this course and you don't really know the prerequisites, make sure that you do have a little bit of HTML experience. It's not recommended. Sorry, it's not needed. But it's highly recommended because we're going to be using a lot of HTML in this
26:13
course. And although we're not going to be writing any directly, it would be really helpful to know some so I do offer a free HTML course. It's really quick one and a half hours, you should be go good to go and up and running in just one or two days. So if you don't know any HTML, you can go and check that out. And if you do know, HTML, continue watching along. So first of all, let's get started, what actually is CSS. So if you don't know what it stands for already, it's called Cascading Style Sheets. So from that name, you can pretty much assume that this is used to style websites. So unlike HTML, which is used to create structure and actual website content, this is mainly used to give it that visual flair to make the websites look good. So CSS is pretty much what makes a website standout from websites from the early days from the early 2000s, things like that. So that's what really makes a website stand out is the CSS or the styling. So this pretty much goes hand in hand with HTML. As
27:17
it said, Here, they work almost consistently together. And they're always used all like all the time together. So let's go ahead and check out some pages that look with CSS and without. So you can see here that this is the page with CSS. So you can change all of the layout options. You can make fonts, font changes, text manipulation, all sorts of things, which we're all going to be doing in this course are learning to do. And this is the website without HTML, sorry, without CSS looks pretty standard, right? Obviously, this looks just like a normal website doesn't have any HTML, apart from some font changes. But you can see that the difference that something like this mix, CSS will completely change the way a website looks if it's used correctly. So the next line is just a little bit of information about CSS, we're going to be going way more in depth into all of these points later. So a CSS file is saved in the dot CSS format, we're going to be doing that in the next few
28:18
videos. There's some information about selectors and things like that, like I said, you can just read through this, I'm not going to go through it, because we're going to talk about it way more in detail in the next few sections. But for now, this is just a little bit of general information about CSS. Alright, so now that you know what CSS is, why don't we go ahead and get started working with CSS. So today, I'm going to be giving a quick introduction to CSS, we're going to be going through what it actually is, why it's used and what actually does CSS do. So before we get started, if you're just starting out this course and you don't really know the prerequisites, make sure that you do have a little bit of HTML experience. It's not recommended. Sorry, it's not needed. But it's highly recommended because we're going to be using a lot of HTML in this course. And although we're not going to be writing any directly, it would be really helpful to know some so I do offer a free HTML course. It's really quick one and a half hours, you should be go good to go and up and running in just one or two days. So if you don't know any HTML, you can go and check that out. And if you do know, HTML, continue watching along. So first of all, let's get started, what actually is CSS. So if you don't know what it stands
29:20
for already, it's called Cascading Style Sheets. So from that name, you can pretty much assume that this is used to style websites. So unlike HTML, which is used to create structure and actual website content, this is mainly used to give it that visual flair to make the websites look good. So CSS is pretty much what makes a website standout from websites from the early days from the early 2000s, things like that. So that's what really makes a website stand out is the CSS or the styling. So this pretty much goes hand in hand with HTML. As it said, Here, they work almost consistently together. And they're always used all like all the time together. So let's go ahead and check out some pages that look with CSS and without. So you can see here that this is the page with CSS. So you can change all of the layout options. You can make fonts, font changes, text manipulation, all sorts of things, which we're all going to be doing in this course are learning to do. And this is the website without HTML, sorry, without CSS looks pretty standard, right? Obviously, this looks just like a normal website doesn't have any HTML, apart from some font changes. But you can see that the difference that something like this mix, CSS will completely change the way a website looks if it's used correctly. So the next line is just a little bit of information
30:23
about CSS, we're going to be going way more in depth into all of these points later. So a CSS file is saved in the dot CSS format, we're going to be doing that in the next few videos. There's some information about selectors and things like that, like I said, you can just read through this, I'm not going to go through it, because we're going to talk about it way more in detail in the next few sections. But for now, this is just a little bit of general information about CSS. Alright, so now that you know what CSS is, why don't we go ahead and get started working with CSS. So in this video, we're going to be creating and linking a CSS stylesheet. So we're not actually going to be doing with anything with it yet, we're just going to be creating it and linking it so that we can get started and actually learn some of the properties in CSS. Alright, let's get started. So the first thing I want to do is go ahead and create my CSS file. So what I'm going to do is go into my Sublime Text or my text editor. Now,
31:26
if you're not using this, and you know how to use the other text editor that maybe you're using some something else like Visual Studio, go ahead and use that if you know the shortcuts. But for now, I am going to use Sublime Text on Sublime Text. To create a new file, you go Ctrl or Command n depending on what operating system you're on. Once you're there, you can use Ctrl S to go ahead and save the file. And right now I'm here. And what I want to do is create a new folder, a new directory in my course content folder. Again, you can set this up however you like. But the way I like doing it is creating a folder for every type of file. So that for example, when the website gets very big, when you have multiple pages, multiple style sheets, everything stays organized. So I'm going to go ahead and create that directory. Go ahead into my CSS folder here. And I'm going to name this style dot CSS. So dot CSS, D is the file format used to save CSS documents, and style, just kind
32:33
of the standard name you use when you're saving CSS documents. So once I go ahead, and I'm going to go ahead and save that. Now I have my stylesheet created. But we don't actually have anything yet, because right now our HTML page is blank and our CSS file is blank. So this is where knowing a little bit of HTML comes in handy. First of all, I'm going to go ahead and create my boilerplate. I just typed in HTML and hit tab. Again, I talked all about this in my other courses talking about HTML. But there we go, we're going to go ahead and do that. I'm just going to say my website here. And once that's done, I'm going to go ahead and link it. So how do we actually do this? Well, what you want to do pretty much is just go into here and into your head into the head portion of your website, you're going to go ahead and create a link tag. So if you just take the link and hit tab in Sublime Text, it's going to create the tag for you. So let's go ahead and break this down here. REL stylesheet is pretty much saying that we're linking to a stylesheet. But then type says it's a CSS stylesheet. So this is just kind of a more specific identifier.
33:35
And then we have the href. So in the href. This is where we're going to put the URL to our stylesheet. So if you don't already know how to write file URLs, pretty much what we're going to do is first up move back in directory, because right now we're inside here and there's no CSS. We want to go back to the top level. So Going to go dot dot slash. Now remember, we're up here, I want to go into CSS. So I hit CSS slash, and then style dot CSS, which has our endpoints or final destination. So this is pretty much your basic link tag, this is how it works. You have all of your stuff here and you created it. And from there, you can go ahead and pretty much do whatever you want. So right here, I have my stylesheet linked and everything's working. But we don't actually know if it works yet. So in the next
34:39
video, we're actually going to be going through and testing our stylesheet, I'm going to show you a few ways that you can do that. Alright, let's move on. So today, I'm going to be showing you how you can test your CSS stylesheet. So we've already created the file and linked it. But now we're actually going to go ahead and test it because we don't know if this is working or not. So obviously, we don't know anything about CSS yet. We don't know about selectors or properties or how to do anything with them. But I just want you to keep this in mind so that when you know how to do them, it becomes very easy to test these style sheets. So for a style sheet to work, we need all of the properties that are in this file to appear on the page. So the easiest way we can test it is but just by writing
35:41
a random, obvious property, that's going to change the way the website looks. If it's not working, then we know that something's wrong with our link. So I'm going to go ahead and just create a property here. Now, you don't know how to do any of this. So don't worry about it. We're going to learn how to do all of this later. But what you want to do pretty much is create a random property, you can go ahead and copy this on for now, I'm going to go ahead and refresh the page. And you can see that this is bright red. Now if I go ahead and make the link wrong. So if I, for example, remove a letter, you can see that it's still white, which means that this isn't working. So this is pretty much the easiest way that you can test your stylesheet. If it's working, it's just writing some random, obvious properties don't make them completely non visible, you want to make sure that you can actually see the difference on the page. And then you want to go ahead and refresh it. And if it's working, you will know that this stylesheet is linked properly. Alright, let's move on.
36:41
So in this video, we're going to be creating and linking a CSS stylesheet. So we're not actually going to be doing with anything with it yet, we're just going to be creating it and linking it so that we can get started and actually learn some of the properties in CSS. Alright, let's get started. So the first thing I want to do is go ahead and create my CSS file. So what I'm going to do is go into my Sublime Text or my text editor. Now, if you're not using this, and you know how to use the other text editor that maybe you're using some something else like Visual Studio, go ahead and use that if you know the shortcuts. But for now, I am going to use Sublime Text on Sublime Text. To create a new file, you go Ctrl or Command n depending on what operating system you're on. Once you're there, you can use Ctrl S to go ahead and save the file. And right now I'm here. And what I want to do is create a new folder, a new directory in my course content folder. Again, you can set this up however you like. But the way I like doing it is creating a folder for every
37:45
type of file. So that for example, when the website gets very big, when you have multiple pages, multiple style sheets, everything stays organized. So I'm going to go ahead and create that directory. Go ahead into my CSS folder here. And I'm going to name this style dot CSS. So dot CSS, D is the file format used to save CSS documents, and style, just kind of the standard name you use when you're saving CSS documents. So once I go ahead, and I'm going to go ahead and save that. Now I have my stylesheet created. But we don't actually have anything yet, because right now our HTML page is blank and our CSS file is blank. So this is where knowing a little bit of HTML comes in handy. First of all, I'm going to go ahead and create my boilerplate. I just typed in HTML and hit tab. Again, I talked all about this in my other courses talking about HTML. But there we go, we're going to go ahead and do that. I'm just going to say my website here. And once that's done, I'm
38:51
going to go ahead and link it. So how do we actually do this? Well, what you want to do pretty much is just go into here and into your head into the head portion of your website, you're going to go ahead and create a link tag. So if you just take the link and hit tab in Sublime Text, it's going to create the tag for you. So let's go ahead and break this down here. REL stylesheet is pretty much saying that we're linking to a stylesheet. But then type says it's a CSS stylesheet. So this is just kind of a more specific identifier. And then we have the href. So in the href. This is where we're going to put the URL to our stylesheet. So if you don't already know how to write file URLs, pretty much what we're going to do is first up move back in directory, because right now we're inside here and there's no CSS. We want to go back to the top level. So Going to go dot dot slash. Now remember,
39:58
we're up here, I want to go into CSS. So I hit CSS slash, and then style dot CSS, which has our endpoints or final destination. So this is pretty much your basic link tag, this is how it works. You have all of your stuff here and you created it. And from there, you can go ahead and pretty much do whatever you want. So right here, I have my stylesheet linked and everything's working. But we don't actually know if it works yet. So in the next video, we're actually going to be going through and testing our stylesheet, I'm going to show you a few ways that you can do that. Alright, let's move on. So today, I'm going to be showing you how you can test your CSS stylesheet. So we've already created the file and linked it. But now we're actually going to go ahead and test it because we don't know if this is working or not. So obviously, we don't know anything about CSS yet. We don't know about selectors or properties or how to do anything with them. But I just want you to
41:03
keep this in mind so that when you know how to do them, it becomes very easy to test these style sheets. So for a style sheet to work, we need all of the properties that are in this file to appear on the page. So the easiest way we can test it is but just by writing a random, obvious property, that's going to change the way the website looks. If it's not working, then we know that something's wrong with our link. So I'm going to go ahead and just create a property here. Now, you don't know how to do any of this. So don't worry about it. We're going to learn how to do all of this later. But what you want to do pretty much is create a random property, you can go ahead and copy this on for now, I'm going to go ahead and refresh the page. And you can see that this is bright red. Now if I go ahead and make the link wrong. So if I, for example, remove a letter, you can see that it's still white, which means that this isn't working. So this is pretty much the easiest way that you can test your stylesheet. If it's working, it's just writing some random, obvious properties don't make them completely non visible, you want to make sure that you
42:04
can actually see the difference on the page. And then you want to go ahead and refresh it. And if it's working, you will know that this stylesheet is linked properly. Alright, let's move on. So in this video, I'm going to be talking about CSS selectors. I'm also going to be going through what they do and what types of selectors there are. So you're probably wondering what a selector actually is, because we haven't actually talked about this at all. And it's pretty much one half of everything that you do in CSS. So as you know, you have two different documents, you have your HTML document, which is kind of your structure gives all of the different text and content of the page. And then you have your CSS document, which is going to be for all the styling. Now because the two documents are kind of disconnected, you can't just go and type random things and have them appear where you want them, you need a way to actually assign these styles and properties to elements on the page. So we do this with something called selectors. So selectors pretty much a way of grabbing an element from an HTML document, and then styling it. So it's kind of like a target in a way. There are many different types of selectors. And they all work in different
43:09
ways and are used for different purposes. So I'm going to be going through three with you in this video. So the first one is the element selector. The element selector is the most basic of all of them, pretty much, what you do is you find the name of the target that you want to select or target. So in this case, it would be the paragraph tag or the p tag. And then you have the selector here. So pretty much how a selector works is you just type out the selector. And then you have curly braces, and then you have your properties, we'll go that will go with this in much more depth towards the end of this section. So you go through and you select, you type out your tag name. And pretty much what that's going to do is select all of the elements on the document with that tag name. So there we go. That is the first one. The next is the class selector. So the class selector is very similar to the element selector, except it goes by class name. So you can see here
44:11
that we have some class attributes here, we assign the class, don't worry, we'll go through with this in the next video. But you can see we assigned the class to these values. And pretty much all we have to do to references is type dot, which is the class prefix for CSS, and then the name of the class and then again, the properties. So you can actually use this cloud. The reason that we use classes over things like element selectors, is because you can apply this class to specific items, and it's only going to style those specific items. So for example, maybe if you had a subtitle, and you only wanted to style that subtitle, you would go through and actually apply that class to your subtitle, your element, whether it's a paragraph or a header. And from there, you're going to go through and add it. So there we go. The next What I want to talk about is the id selector. So these
45:16
two, the class and id selector are pretty much identical, you have your attribute where you assign the class or ID. But the only difference is the prefix here is a hash symbol or an octave Thorpe or hash tag. So then you type up the name of the ID, and it puts it here. Now, I am going to go through and actually talk more about why when we should use classes and IDs. And I'm going to talk about some of the differences between them. And although they look very similar, we actually have different very different purposes for them, based on how you use them in your HTML document. So those are some of the basics of selectors, like I said, we're gonna go through and pretty much use this all the time during our course. So we're gonna go through use them and add the properties. So it's pretty good that you get familiar with these now, so that when we move on, this becomes kind of like second nature. So in this video, I'm going to be talking about CSS selectors. I'm also going to be going through what they do and what types of selectors there are. So you're probably
46:20
wondering what a selector actually is, because we haven't actually talked about this at all. And it's pretty much one half of everything that you do in CSS. So as you know, you have two different documents, you have your HTML document, which is kind of your structure gives all of the different text and content of the page. And then you have your CSS document, which is going to be for all the styling. Now because the two documents are kind of disconnected, you can't just go and type random things and have them appear where you want them, you need a way to actually assign these styles and properties to elements on the page. So we do this with something called selectors. So selectors pretty much a way of grabbing an element from an HTML document, and then styling it. So it's kind of like a target in a way. There are many different types of selectors. And they all work in different ways and are used for different purposes. So I'm going to be going through three with you in this video. So the first one is the element selector. The element selector is the most basic of all of them, pretty much, what you do is you find the name of the target that you want to select or target. So in this case, it would be the paragraph tag or the
47:21
p tag. And then you have the selector here. So pretty much how a selector works is you just type out the selector. And then you have curly braces, and then you have your properties, we'll go that will go with this in much more depth towards the end of this section. So you go through and you select, you type out your tag name. And pretty much what that's going to do is select all of the elements on the document with that tag name. So there we go. That is the first one. The next is the class selector. So the class selector is very similar to the element selector, except it goes by class name. So you can see here that we have some class attributes here, we assign the class, don't worry, we'll go through with this in the next video. But you can see we assigned the class to these values. And pretty much all we have to do to references is type dot, which is the class prefix for CSS, and then the name of the class and then again, the properties. So you can actually
48:26
use this cloud. The reason that we use classes over things like element selectors, is because you can apply this class to specific items, and it's only going to style those specific items. So for example, maybe if you had a subtitle, and you only wanted to style that subtitle, you would go through and actually apply that class to your subtitle, your element, whether it's a paragraph or a header. And from there, you're going to go through and add it. So there we go. The next What I want to talk about is the id selector. So these two, the class and id selector are pretty much identical, you have your attribute where you assign the class or ID. But the only difference is the prefix here is a hash symbol or an octave Thorpe or hash tag. So then you type up the name of the ID, and it puts it here. Now, I am going to go through and actually talk more about why when we should use classes and IDs. And I'm going to talk about some of the differences between them. And although they look very similar, we actually have different very different purposes for them, based on
49:28
how you use them in your HTML document. So those are some of the basics of selectors, like I said, we're gonna go through and pretty much use this all the time during our course. So we're gonna go through use them and add the properties. So it's pretty good that you get familiar with these now, so that when we move on, this becomes kind of like second nature. So in this video, I am going to be teaching you how to how to add classes in IDs to our document here and actually start using some of these selectors. Now, I'm not going to teach you any of the properties yet, because we're going to cover that in a little bit later in this section and in the next few sections. But I'm just going to be teaching you how to get familiar with classes and IDs, because they are by far the most commonly used selectors in CSS, I mean, sometimes very uncommonly, you'd see some elements, selectors, and other types of selectors, which we're going to go over in the next few videos. But the two most common that you're going to see are our classes and IDs. So let's go through and get started. Now I have a bunch of HTML content here, we're actually going to be using this and adding on to it for the rest of the course, we're going to be styling this website
50:31
fully. But let's actually go through and start adding these classes and IDs. So the first thing you need to note, before we move on, is that classes and IDs are different, you can't just use them interchangeably. And I'm going to explain why in the next video. But for now, let's just pretend that they are the same. And we can use them interchangeably because they have almost the same methods of application. So let's go ahead now the first thing you want to do is identify the element that you want to target. So first of all, let's just say I wanted to maybe make the color of this red. Okay, so the color of this title. Now that we know we've targeted it, we want to actually go through and edit it. So first thing, how do you think we would go through and do this now if you're thinking going through and adding an element selector or maybe adding some inline styles, if you know what that is, then you are right, partially, but the only problem is that if there are
51:32
any other h ones on this page, then it will style all of them as well. And because we only want to style this title, that wouldn't be really effective. So the best way to do this would be to use a class or an ID, I'm going to go ahead and use a class. So the way the way you would do this is go through and type in class as your attribute. And you would again, put this into the opening tag of whatever target element you want to style. And in here, you're putting, you're gonna put your class name. Now, if this isn't where you put your CSS prefix, this isn't where you put the dots. As I explained in the last video, here, you're just going to type the name of the class. So I'm going to go through and type a title, just like that. And you can name this whatever you want. But I'd recommend keeping it short and sweet. You don't want it to get too long, because then it's going to be really hard to work with. So once you've applied that, and we go ahead and refresh
52:33
the page, you can see that nothing's actually there, it hasn't started working yet. That's because we haven't applied any styles. So when we go over here, we need to actually select our element. So I'm going to go ahead and add the prefix for a class, which is dot, and then the name of the class, which is title. Then I'm going to open up these brackets and get started. So what I want to do here is now apply on my properties. I'm going to be explaining you to you how to do all of this in the next in future videos. of a for now, all you need to know is that the first thing you need to do is select an element using some method. And then you're going to add the properties. So I'm going to go ahead and refresh the page. And you can see it works just like that. Now to prove to you that this
53:34
works, I'm actually going to go through and style just this about me right here, blue. So you can see we have more than one h2 on the page, but there's only one h1. But let's say we wanted to only style this the about me and we didn't want to style every single h2, what I would do is go ahead and add a class of subtitle to our target element. And then here I would select it So in this video, I am going to be teaching you how to how to add classes in IDs to our document here and actually start using some of these selectors. Now, I'm not going to teach you any of the properties yet, because we're going to cover that in a little bit later in this section and in the next few sections. But I'm just going to be teaching you how to get familiar with classes and IDs, because they are by far the most commonly used selectors in CSS, I mean, sometimes very uncommonly, you'd see some elements, selectors, and other types of selectors, which we're going to go over in the next few videos. But
54:41
the two most common that you're going to see are our classes and IDs. So let's go through and get started. Now I have a bunch of HTML content here, we're actually going to be using this and adding on to it for the rest of the course, we're going to be styling this website fully. But let's actually go through and start adding these classes and IDs. So the first thing you need to note, before we move on, is that classes and IDs are different, you can't just use them interchangeably. And I'm going to explain why in the next video. But for now, let's just pretend that they are the same. And we can use them interchangeably because they have almost the same methods of application. So let's go ahead now the first thing you want to do is identify the element that you want to target. So first of all, let's just say I wanted to maybe make the color of this red. Okay, so the color of this title. Now that we know we've targeted it, we want to actually go through and edit
55:43
it. So first thing, how do you think we would go through and do this now if you're thinking going through and adding an element selector or maybe adding some inline styles, if you know what that is, then you are right, partially, but the only problem is that if there are any other h ones on this page, then it will style all of them as well. And because we only want to style this title, that wouldn't be really effective. So the best way to do this would be to use a class or an ID, I'm going to go ahead and use a class. So the way the way you would do this is go through and type in class as your attribute. And you would again, put this into the opening tag of whatever target element you want to style. And in here, you're putting, you're gonna put your class name. Now, if this isn't where you put your CSS prefix, this isn't where you put the dots. As I explained in the last video, here, you're just going to type the name of the class. So I'm going to go through and type a title, just like that. And you can name this whatever you want. But I'd recommend keeping it short and sweet. You don't want it to get too long, because then it's going
56:44
to be really hard to work with. So once you've applied that, and we go ahead and refresh the page, you can see that nothing's actually there, it hasn't started working yet. That's because we haven't applied any styles. So when we go over here, we need to actually select our element. So I'm going to go ahead and add the prefix for a class, which is dot, and then the name of the class, which is title. Then I'm going to open up these brackets and get started. So what I want to do here is now apply on my properties. I'm going to be explaining you to you how to do all of this in the next in future videos. of a for now, all you need to know is that the first thing you need to do is select an element using some method. And then you're going to add the properties. So I'm going to go ahead and refresh the page. And you can see it works just like that. Now to prove to you that this works, I'm actually going to go through and style just this about me right here, blue. So you can see we have more than one h2 on the page, but there's only one h1. But let's
57:51
say we wanted to only style this the about me and we didn't want to style every single h2, what I would do is go ahead and add a class of subtitle to our target element. And then here I would select it just like that and give it its color. So you can go ahead and try this if you want. Don't try and do anything crazy. If you know what Go ahead, but for now, let's just go ahead and stick with that. And there you go. You can see we've styled that blue and it hasn't changed. Anything else? So that's working perfectly seems to be going fine. And we're selecting everything. But what if we wanted to use IDs. So let's just say that this right here, this contact us, we wanted to use an ID for it. Now, for now, we don't actually know why we want to use an ID. But let's just pretend that we do know why. So what I would do is go ahead and use the ID attribute. So I'm going to go ahead and add that. And I'm going to say contact dash us. Now, usually, in CSS classes or IDs, you would use these dashes right here, instead of dots or uppercase, or any other naming convention, this is just kind of the standard way to do it. Now we don't have to style it, I can't just go ahead
58:55
and do this, this wouldn't work. The reason being the prefix here is a.so. css would interpret this as a class and not an ID, instead, we're going to have to use our author Thor or hash, then why don't we go ahead and color this one, green. Okay, let's go ahead and refresh the page and check this out. And you can see that it has this kind of olive green color, so it's working great. So there we go, you can see that we've worked with some of these selectors and applied some of our IDs. Now, you can go ahead onto the GitHub repository, pull it, download it, do whatever you want. If you don't know how to use Git, I do have a free course on that as well. But it's very easy. You can go back to any state and time, check it out and play, play around with these trying and replicate this and add your own classes and IDs and try and you know, figure out how things work here. So yeah, that's
59:56
pretty much the basics of adding classes and IDs. In the future, we're going to use some more complicated selectors, which don't actually involve having to directly reference some of these. So those are going to get pretty complicated, but we're going to build up to that point. So let's move on. So in this video, I'm going to be talking about a very important concept in CSS. So this is a pretty important concept, because it's pretty much going to change the way that you use selectors. Right now, we're just assuming that all of these selectors kind of work in the same in a similar way. We don't actually know why. They're why they exist. I mean, why is there a class and an id selector when they both do the same thing. So that's what I'm going to be explaining in this video. And it all comes down to one concept called specificity. So specificity is pretty much talking about the overriding or rewriting of properties in CSS. And it's pretty much this concept that different selectors
01:01:01
are more powerful than others in a sense. So for example, if you had two selectors, on one element, one of them said the color was blue, and one of them said the color was green, the more powerful there the more specific selector would end up overriding the other ones and applying that property to the element. So there's this really helpful article here from w three schools. If you need some more help on this, or you don't really understand it, you can go ahead and read this. There's a lot of numbers involved like this. But you know, you can go ahead and read this, but I'm just going to explain it in Word terms, because these numbers tend to get really confusing. And they end up meaning the same thing at the end of the day. So let's go ahead and get started. Now, I think it's really helpful if we start from the ground up. So I've removed all of the styling that we applied in the last video. So first of all, I'm going to go ahead and create an element selector. So
01:02:01
on all h twos, I want the color to be blue, or actually I'm going to make it red. So there we go. Now we know that every single h2 is red. Okay? Well, let's just say for our about me right here, I'm going to add a class, okay. And I'm going to call this about me, and I'm going to add it to my h2. Now in my in my styles, here, we're going to use the class selector and say the color is blue. So this is where we have a confliction. You can see that one selector says the color is red, but one selector says the color is blue. So what are we supposed to do about this? Which one do you think is going to prevail, I mean, you can just have both red and blue at the same time, you can see that blue is actually
01:03:02
more specific. So you can see that elements are or actually selectors have different powers. And the more powerful they are, the more specific they are. The higher they are, the higher they're going to be on the scale and the higher the chance of having or applying the right just like that and give it its color. So you can go ahead and try this if you want. Don't try and do anything crazy. If you know what Go ahead, but for now, let's just go ahead and stick with that. And there you go. You can see we've styled that blue and it hasn't changed. Anything else? So that's working perfectly seems to be going fine. And we're selecting everything. But what if we wanted to use IDs. So let's just say that this right here, this contact us, we wanted to use an ID for it. Now, for now, we don't actually know why we want to use an ID. But let's just pretend that we do know why. So what I would
01:04:05
do is go ahead and use the ID attribute. So I'm going to go ahead and add that. And I'm going to say contact dash us. Now, usually, in CSS classes or IDs, you would use these dashes right here, instead of dots or uppercase, or any other naming convention, this is just kind of the standard way to do it. Now we don't have to style it, I can't just go ahead and do this, this wouldn't work. The reason being the prefix here is a.so. css would interpret this as a class and not an ID, instead, we're going to have to use our author Thor or hash, then why don't we go ahead and color this one, green. Okay, let's go ahead and refresh the page and check this out. And you can see that it has this kind of olive green color, so it's working great. So there we go, you can see that we've worked with some of these selectors and applied some of our IDs. Now, you can go ahead onto the GitHub repository,
01:05:10
pull it, download it, do whatever you want. If you don't know how to use Git, I do have a free course on that as well. But it's very easy. You can go back to any state and time, check it out and play, play around with these trying and replicate this and add your own classes and IDs and try and you know, figure out how things work here. So yeah, that's pretty much the basics of adding classes and IDs. In the future, we're going to use some more complicated selectors, which don't actually involve having to directly reference some of these. So those are going to get pretty complicated, but we're going to build up to that point. So let's move on. So in this video, I'm going to be talking about a very important concept in CSS. So this is a pretty important concept, because it's pretty much going to change the way that you use selectors. Right now, we're just assuming that all of these selectors kind of work in the same in a similar way. We don't actually know why. They're why
01:06:10
they exist. I mean, why is there a class and an id selector when they both do the same thing. So that's what I'm going to be explaining in this video. And it all comes down to one concept called specificity. So specificity is pretty much talking about the overriding or rewriting of properties in CSS. And it's pretty much this concept that different selectors are more powerful than others in a sense. So for example, if you had two selectors, on one element, one of them said the color was blue, and one of them said the color was green, the more powerful there the more specific selector would end up overriding the other ones and applying that property to the element. So there's this really helpful article here from w three schools. If you need some more help on this, or you don't really understand it, you can go ahead and read this. There's a lot of numbers involved like this. But you
01:07:10
know, you can go ahead and read this, but I'm just going to explain it in Word terms, because these numbers tend to get really confusing. And they end up meaning the same thing at the end of the day. So let's go ahead and get started. Now, I think it's really helpful if we start from the ground up. So I've removed all of the styling that we applied in the last video. So first of all, I'm going to go ahead and create an element selector. So on all h twos, I want the color to be blue, or actually I'm going to make it red. So there we go. Now we know that every single h2 is red. Okay? Well, let's just say for our about me right here, I'm going to add a class, okay. And I'm going to call this about me, and I'm going to add it to my h2. Now in my in my styles, here, we're going to use the class selector and say the color is blue. So this is where we have a confliction. You can see
01:08:13
that one selector says the color is red, but one selector says the color is blue. So what are we supposed to do about this? Which one do you think is going to prevail, I mean, you can just have both red and blue at the same time, you can see that blue is actually more specific. So you can see that elements are or actually selectors have different powers. And the more powerful they are, the more specific they are. The higher they are, the higher they're going to be on the scale and the higher the chance of having or applying the right selector property. So what we're going to do is actually go through and talk about the different powers or specificities, or specifics of each selector and we're going to see which one is most powerful. So right now We know that the element selectors are less powerful than the class. But there is actually two more that are more powerful than the class selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know
01:09:15
it's not really going to make much sense. So I'm actually just going to rename it to subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the class name. with CSS fun. There we go. So now we have two blue sub titles and one red. So you can see that the class will overwrite the header, or sorry, the element tag. But there are like I said, there are still two that are more powerful. The next after the class is the ID. So I'm going to go over here to services and add an ID of services, oops, services. All right. Now, what I'm going to do is go into my CSS file, and use the id selector. color green. So I'm going to go ahead and refresh now. And you can see that it's right here, it's green. So now that we know the ID is going to overwrite the class,
01:10:16
and the class is going to overwrite the header. So there is still one more that is more powerful. And that is called inline styling. So we don't actually know what inline styling is. But pretty much we don't need to use a CSS file to do inline styling. All we need is the element and the HTML file. So why don't I go ahead and use services here, because we're kind of on a roll, and I want to use this again. So what I'm going to do is a style, which is the attribute. And then here, we add all of our CSS properties, no selector nothing. So I'm going to say here, that color is still blue. And we don't actually, still blue is part of the CSS color collection, we'll explain all of those in future sections. So if I go ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class and the header here. So pretty much there are, there's an order here that you need to
01:11:19
take away from this video. headers are the least specific, they kind of applied to everything, and they're not that powerful. The class selector is above that, and then the ID and then the inline styling, or the style attribute. So if you follow this order, you will pretty much you can predict what is going to be the outcome and which styles are going to be followed. So this is a pretty useful tool and in CSS, and it pretty much allows you to structure your file in a way that makes sense to other people when they're reading it. But there's still one more question we need to answer. What's the difference between a class and an ID. Apart from the obvious specificity difference, we actually use classes and IDs in different situations. And they're pretty simple. Classes are meant to be used multiple times. So if you have done any programming before, you'll know that a class is kind of like a blueprint, it's made so that you can create multiple objects from it. But the thing is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention
01:12:25
is, you're only supposed to use an ID for one single element. So for example, let's take this file we have here we have three sub titles, and one for the about me section. In this structure, what we would do is create a sub title class for every sub title on the page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple h2 is on this page. So we only want to apply it to the subtitles. But then for our bio about me here, there's only going to be one of them on this whole document, which means we're going to use the ID of about me. And then from there, we can go and apply our styles and do all of that. So that's just the main difference between classes and IDs. And now that you know how to use them, you can actually go through and apply them properly in real world scenarios. So that's just a very important thing to keep in mind. You're only supposed to use IDs once and classes can be used multiple times. Alright, let's move on. selector property. So what we're going to do is actually go through and talk about the
01:13:25
different powers or specificities, or specifics of each selector and we're going to see which one is most powerful. So right now We know that the element selectors are less powerful than the class. But there is actually two more that are more powerful than the class selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know it's not really going to make much sense. So I'm actually just going to rename it to subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the class name. with CSS fun. There we go. So now we have two blue sub titles and one red. So you can see that the class will overwrite the header, or sorry, the element tag. But there are like I said, there are still two that are more powerful. The next after the class is the ID. So I'm going to go over here to services and add an ID of services, oops, services. All right. Now, what I'm going to do is go into my CSS file, and use the id selector. color green. So I'm going to go ahead and refresh now. And you can see that
01:14:25
it's right here, it's green. So now that we know the ID is going to overwrite the class, and the class is going to overwrite the header. So there is still one more that is more powerful. And that is called inline styling. So we don't actually know what inline styling is. But pretty much we don't need to use a CSS file to do inline styling. All we need is the element and the HTML file. So why don't I go ahead and use services here, because we're kind of on a roll, and I want to use this again. So what I'm going to do is a style, which is the attribute. And then here, we add all of our CSS properties, no selector nothing. So I'm going to say here, that color is still blue. And we don't actually, still blue is part of the CSS color collection, we'll explain all of those in future sections. So if I go
01:15:28
ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class and the header here. So pretty much there are, there's an order here that you need to take away from this video. headers are the least specific, they kind of applied to everything, and they're not that powerful. The class selector is above that, and then the ID and then the inline styling, or the style attribute. So if you follow this order, you will pretty much you can predict what is going to be the outcome and which styles are going to be followed. So this is a pretty useful tool and in CSS, and it pretty much allows you to structure your file in a way that makes sense to other people when they're reading it. But there's still one more question we need to answer. What's the difference between a class and an ID. Apart from the obvious specificity difference, we actually use classes and IDs in different situations. And they're pretty simple. Classes are meant to be used multiple times. So if you have done any programming before, you'll know that a class is kind of like a blueprint, it's made so that you can create multiple objects from it. But the thing is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention
01:16:30
is, you're only supposed to use an ID for one single element. So for example, let's take this file we have here we have three sub titles, and one for the about me section. In this structure, what we would do is create a sub title class for every sub title on the page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple h2 is on this page. So we only want to apply it to the subtitles. But then for our bio about me here, there's only going to be one of them on this whole document, which means we're going to use the ID of about me. And then from there, we can go and apply our styles and do all of that. So that's just the main difference between classes and IDs. And now that you know how to use them, you can actually go through and apply them properly in real world scenarios. So that's just a very important thing to keep in mind. You're only supposed to use IDs once and classes can be used multiple times. Alright, let's move on. So in this video I am we are going to be looking at pseudo selectors. So this is a special
01:17:35
type of selector that is used commonly in interactivity with your website. So this is usually visible only when something is done on the website. So it's a pretty it's pretty cool feature. And it's used very commonly throughout CSS. And once we get to the animations and transitions part, we're actually going to be used soon as we be we're going to be using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors I want to cover here. There's a lot of number of only going to be covering the main ones that are we're going to be using. So before we go on, I'm just going to show you what a pseudo selector actually is. So usually what you would do is, after a selector, you would add a colon, and then the name of the pseudo selector. So this is just an example of one of them. And then the properties will apply normally. Now watch what happens when I hover over our h2 here, you can see that it's working perfectly. And when we hover over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the services part here. Because again, these are all separate classes. And obviously, with specificity and everything like that, they won't apply. So there we go. We have everything
01:18:38
working here. And that's one of the pseudo selectors, which is hover. So let's move on to some of the next ones. Now, there's also two that I'd like to talk about, which is first child and last child. So the concept behind child and parent elements is that right here, if we look Actually, this is a little bit complicated example, let's look at this unordered list here, we have an A ul unordered list, and then we have three allies. Okay, so pretty much this is going to be the first child because it's placed inside of the UL, the second is going to be the second child, and then this is going to be the third child. So you can see here that this is kind of the relationship between child and parent. And what we can actually do is specify which one we want to select. So if I go over here and select all URLs, and then of course, the colon for the pseudo selector, and select first child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm gonna refresh the page, and you can see that it's not working. Now, although it might seem like you want to put the URL first, obviously, because, again, you're looking for the first
01:19:41
child of the URL, this isn't actually how you're supposed to write it. Instead, you're supposed to write the element that you're trying to select, which in this case is our list item, or our Li. So now if I go ahead and refresh the page, you can see that the first one here is going to be blue, it's a little bit of a confusing rule to get around. But once you get used to it, it becomes very easy. We also change this to last or last child like this. And then what's going to happen is it's going to select the last one. Now, there's also one more that I'd like to talk about quickly, which is nth child. So I'm just going to show you how this thing works and child. And then in brackets, you put the number here. So when you're going to put here is pretty much what number of the child you want to style. In this case, I want every second Li child to be colored
01:20:42
steel blue. So throughout the page, every second Li that is inside of a that is the child element is going to be styled blue, go ahead and refresh the page, you can see that works there. So there's actually one more selector that I want to talk about, at least for children, and that is the only child selector. So I think it makes perfect sense, pretty much what we're trying to look for is something that there's only one child inside of it. So for example, nothing on this page here actually has one child. But why don't we go ahead and add that. So under this list, I'm just going to temporarily remove these here, just like that. All right, let's go ahead and save, make sure it's working. There we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by car. And I'm going to say only child. So pretty much what this is saying is for every Li that is the only child of its parent. And you can see this, the UL does only has one child. So I'm going to go ahead and give it a color of purple, for example. And you can see that it works perfectly. But what would happen if I tried this on, let's just say for example,
01:21:47
the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm also going to give this a color of purple. So in this video I am we are going to be looking at pseudo selectors. So this is a special type of selector that is used commonly in interactivity with your website. So this is usually visible only when something is done on the website. So it's a pretty it's pretty cool feature. And it's used very commonly throughout CSS. And once we get to the animations and transitions part, we're actually going to be used soon as we be we're going to be using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors I want to cover here. There's a lot of number of only going to be covering the main ones that are we're going to be using. So before we go on, I'm just going to show you what a pseudo selector actually is. So usually what you would do is, after a selector, you would add a colon, and then the name of the pseudo selector. So this is just an example of one of them. And then the properties will apply normally. Now watch what happens when
01:22:52
I hover over our h2 here, you can see that it's working perfectly. And when we hover over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the services part here. Because again, these are all separate classes. And obviously, with specificity and everything like that, they won't apply. So there we go. We have everything working here. And that's one of the pseudo selectors, which is hover. So let's move on to some of the next ones. Now, there's also two that I'd like to talk about, which is first child and last child. So the concept behind child and parent elements is that right here, if we look Actually, this is a little bit complicated example, let's look at this unordered list here, we have an A ul unordered list, and then we have three allies. Okay, so pretty much this is going to be the first child because it's placed inside of the UL, the second is going to be the second child, and then this is going to be the third child. So you can see here that this is kind of the relationship between child and parent. And
01:23:54
what we can actually do is specify which one we want to select. So if I go over here and select all URLs, and then of course, the colon for the pseudo selector, and select first child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm gonna refresh the page, and you can see that it's not working. Now, although it might seem like you want to put the URL first, obviously, because, again, you're looking for the first child of the URL, this isn't actually how you're supposed to write it. Instead, you're supposed to write the element that you're trying to select, which in this case is our list item, or our Li. So now if I go ahead and refresh the page, you can see that the first one here is going to be blue, it's a little bit of a confusing rule to get around. But once you get used to it, it becomes very easy. We also change this to last or last child like this. And then what's going to happen is it's going to select the last one.
01:24:56
Now, there's also one more that I'd like to talk about quickly, which is nth child. So I'm just going to show you how this thing works and child. And then in brackets, you put the number here. So when you're going to put here is pretty much what number of the child you want to style. In this case, I want every second Li child to be colored steel blue. So throughout the page, every second Li that is inside of a that is the child element is going to be styled blue, go ahead and refresh the page, you can see that works there. So there's actually one more selector that I want to talk about, at least for children, and that is the only child selector. So I think it makes perfect sense, pretty much what we're trying to look for is something that there's only one child inside of it. So for example, nothing on this page here actually has one child. But why don't
01:25:58
we go ahead and add that. So under this list, I'm just going to temporarily remove these here, just like that. All right, let's go ahead and save, make sure it's working. There we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by car. And I'm going to say only child. So pretty much what this is saying is for every Li that is the only child of its parent. And you can see this, the UL does only has one child. So I'm going to go ahead and give it a color of purple, for example. And you can see that it works perfectly. But what would happen if I tried this on, let's just say for example, the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm also going to give this a color of purple. Now let's go ahead and refresh and see what's going on. All right. So you can see that that TD right here, it's somewhere in this table, nothing's actually happening. That's because as we can see here, there is nothing on this page where there's only one TD as a child. So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually
01:26:59
style anything if they don't exist. So there we go. That's pretty much for the basic children kind of pseudo selectors. Let's move on to some other students, selectors. Now, there are selectors of this type that are actually specific to certain elements, and one of them is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There we go, we have our link there. So I click on it takes me there, pretty standard stuff. Now, we can actually create pseudo selectors for this. So I'm going to be giving you two for now. Now, there are many, many more. But these are the two main ones you need to focus
01:28:05
on. The rest of them are kind of generalized. And these are the main two that you're going to be using. So I'm going to create them here. And remember, you're using the element name, you can use the class if you want, it's not limited to single element names, actually, why don't I go ahead and do that, I'm going to give it an ID, because again, we only have one of these on the page, I'm going to give it an ID of Google link, just like that. So now I'm gonna go ahead and reference that in here. So remember, it's just the name of this electric Google dash link, in this case, and then the colon. So here, I'm going to go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just a second. Alright, so let's look at the first one here, Google link, like, pretty much what this is saying is, if you've ever been on a web page, you know that there is a difference between before you click on the link and after, there's kind of some stylistic changes. So that's where pseudo selectors actually come into play. The website has of those has those defined properties. And they actually change the way that the link looks before and after
01:29:07
it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember, so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going to go ahead and give it a color of red tie blue there. Remember, usually, the default is that it is going to be purple like this color here. Let's go ahead and refresh the page, you can see that it's actually read now. Now, obviously, I can't really go back in time, and change the link so that it doesn't look clicked. But you can see how powerful this the pseudo selectors are, because you can do so many different things. And once we learn more properties, you can actually change different parts of the page. And it becomes very powerful to use these pseudo selectors. So that's just one thing to keep in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm actually going to go ahead and add that hover property there back in case anyone wants to use the project files. So there we go. We've covered everything here. And we've added all of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that help you to look at all of the different pseudo selectors. And most of them, you're not really going to use very often, they are useful in any way, because they're usually you just use some basic pseudo selectors like hover and active, which I haven't actually covered. But things like that. So you're not really going to use all of them. But I just wanted to give you an introduction to the main ones, so that when it comes time to use them, you have the tools to finish the job or create that effect that you've always wanted. Alright,
01:30:10
let's move on. Now let's go ahead and refresh and see what's going on. All right. So you can see that that TD right here, it's somewhere in this table, nothing's actually happening. That's because as we can see here, there is nothing on this page where there's only one TD as a child. So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually style anything if they don't exist. So there we go. That's pretty much for the basic children kind of pseudo selectors. Let's move on to some other students, selectors. Now, there are selectors of this type that are actually specific to certain elements, and one of them is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There we go, we have our link there. So I click on it takes me there, pretty standard stuff.
01:31:11
Now, we can actually create pseudo selectors for this. So I'm going to be giving you two for now. Now, there are many, many more. But these are the two main ones you need to focus on. The rest of them are kind of generalized. And these are the main two that you're going to be using. So I'm going to create them here. And remember, you're using the element name, you can use the class if you want, it's not limited to single element names, actually, why don't I go ahead and do that, I'm going to give it an ID, because again, we only have one of these on the page, I'm going to give it an ID of Google link, just like that. So now I'm gonna go ahead and reference that in here. So remember, it's just the name of this electric Google dash link, in this case, and then the colon. So here, I'm going to go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just a second. Alright, so let's look at the first one here, Google link, like, pretty much what
01:32:12
this is saying is, if you've ever been on a web page, you know that there is a difference between before you click on the link and after, there's kind of some stylistic changes. So that's where pseudo selectors actually come into play. The website has of those has those defined properties. And they actually change the way that the link looks before and after it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember, so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going to go ahead and give it a color of red tie blue there. Remember, usually, the default is that it is going to be purple like this color here. Let's go ahead and refresh the page, you can see that it's actually read now. Now, obviously, I can't really go back in time, and change the link so that it doesn't look clicked. But you can see how powerful
01:33:17
this the pseudo selectors are, because you can do so many different things. And once we learn more properties, you can actually change different parts of the page. And it becomes very powerful to use these pseudo selectors. So that's just one thing to keep in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm actually going to go ahead and add that hover property there back in case anyone wants to use the project files. So there we go. We've covered everything here. And we've added all of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that help you to look at all of the different pseudo selectors. And most of them, you're not really going to use very often, they are useful in any way, because they're usually you just use some basic pseudo selectors like hover and active, which I haven't actually covered. But things like that. So you're not really going to use all of them. But I just wanted to give you an introduction to the main ones, so that when it comes time to use them, you
01:34:20
have the tools to finish the job or create that effect that you've always wanted. Alright, let's move on. Today, we're going to be looking at Advanced selectors. So right now, we've looked at our basic selectors, or class selectors, element selectors, and Id selectors. And we've also looked at some pseudo selectors, which is very useful. But now we're going to look at some of the more advanced selectors. Now, you're not going to use these every day. They're not used very commonly, but it just shows what you can actually do with these selectors, because there is a lot. So there's a bunch of advanced selectors. And I'm actually going to be breaking these down into two parts, we're going to be looking first at our basic advanced selectors. And I know that sounds a little bit contradictive. But we'll get into that in just a second. And then after that, we're going to be talking about attribute selectors, which are probably the hardest type of selector to get used to. Alright, let's get started. So the first thing I want to talk about is how you actually set up these
01:35:23
selectors. Now, these sometimes contain one, two, or sometimes even three elements in one selector. So I'm going to be going through these and talking about how they all work. So the first selector I'm going to be talking about is something called the adjacent sibling selector. So pretty much what this does is selects every single element that directly follows a different element. So I'll show you how to set this up. Let's first take a look at our HTML page every over here, sorry. Now you can see we have our services, which is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl, slash, like that. So if you type control slash comments here with which pretty much just renders it useless, it doesn't run or anything like that. Let's get started. So the first thing I want to do is go ahead and set this up. So I want to be able to apply styles to every a tag or anchor tag that comes directly after an h2. So the way to set this up is all you have to do is go the element that you Want to be the first element. So in this
01:36:23
case, it's going to be our h2. And then afterwards, it's going to be the element that you want after, which is our a tag. So you want h2 plus a. So this is pretty much saying every anchor tag that follows an h2. So then we can pretty much just set the style however we want. So I'm going to say color is red, just like that. Now remember, this isn't any there is no pseudo selector on this, if you could add it if you wanted to. Because this is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh the page. And you can see it turns red again. So that's the first type of selector. Next thing I want to look at is the general sibling combinator, or selector. So this is a little bit more difficult to understand. But All in good time, it's once you get used to it, it becomes much easier to understand. So pretty much what the general sibling selector does, is goes for the same kind of idea as this selector here, it looks for elements that go directly after one another, except they have to be sharing the same parents, okay. So for example, let's see our input here our form, we have an input and a text area, or
01:37:27
a button followed by a text area, for example. So what we're going to do here is I want to style every button that's followed by a text area, except in this case, they have to share the same parent. So what we're going to do is go and say, every button, which is going to be the next one, or the final one, which is eight here. So sorry, it's actually going to be text area. Right, because that's the first element here, which is our text area. And then this symbol followed, and then it's going to be a button, like that. So this is seeing every button that is followed, or that is after a text area, but they're in the same parent. So from here, we can go and style it however we want. So in this case, I'm going to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you can see that the button color is purple. So like I said, the main difference between these two is that the first one is going to be styling elements that follow each other no matter where they are on the scale. So if you actually look up here, they don't share any parents,
01:38:28
they're completely separate elements. Whereas here, they have to follow each other. And I'll actually demonstrate that quickly. If we change this to a plus here. and refresh, the style is still going to work because they are directly preceded. But the only thing is if they aren't. So for example, I'm just going to actually move this button out of the form. Today, we're going to be looking at Advanced selectors. So right now, we've looked at our basic selectors, or class selectors, element selectors, and Id selectors. And we've also looked at some pseudo selectors, which is very useful. But now we're going to look at some of the more advanced selectors. Now, you're not going to use these every day. They're not used very commonly, but it just shows what you can actually do with these selectors, because there is a lot. So there's a bunch of advanced selectors. And I'm actually going to be breaking these down into two parts, we're going to be looking first at our basic advanced selectors. And I know that sounds a little bit contradictive. But we'll get into that in just a second. And then after that, we're going to be talking about attribute selectors, which are probably the hardest type of selector to get used to. Alright, let's get started. So the first thing I want to talk about is how you actually set up these selectors. Now, these sometimes contain one, two, or sometimes even three elements in one selector. So I'm going to be going through these and talking about how they all work.
01:39:29
So the first selector I'm going to be talking about is something called the adjacent sibling selector. So pretty much what this does is selects every single element that directly follows a different element. So I'll show you how to set this up. Let's first take a look at our HTML page every over here, sorry. Now you can see we have our services, which is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl, slash, like that. So if you type control slash comments here with which pretty much just renders it useless, it doesn't run or anything like that. Let's get started. So the first thing I want to do is go ahead and set this up. So I want to be able to apply styles to every a tag or anchor tag that comes directly after an h2. So the way to set this up is
01:40:34
all you have to do is go the element that you Want to be the first element. So in this case, it's going to be our h2. And then afterwards, it's going to be the element that you want after, which is our a tag. So you want h2 plus a. So this is pretty much saying every anchor tag that follows an h2. So then we can pretty much just set the style however we want. So I'm going to say color is red, just like that. Now remember, this isn't any there is no pseudo selector on this, if you could add it if you wanted to. Because this is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh the page. And you can see it turns red again. So that's the first type of selector. Next
01:41:36
thing I want to look at is the general sibling combinator, or selector. So this is a little bit more difficult to understand. But All in good time, it's once you get used to it, it becomes much easier to understand. So pretty much what the general sibling selector does, is goes for the same kind of idea as this selector here, it looks for elements that go directly after one another, except they have to be sharing the same parents, okay. So for example, let's see our input here our form, we have an input and a text area, or a button followed by a text area, for example. So what we're going to do here is I want to style every button that's followed by a text area, except in this case, they have to share the same parent. So what we're going to do is go and say, every button, which is going to be the next one, or the final one, which is eight here. So sorry, it's actually going to be text area. Right, because that's the first element here, which is our text area. And then this symbol followed, and then it's going to be a button, like that. So this is
01:42:40
seeing every button that is followed, or that is after a text area, but they're in the same parent. So from here, we can go and style it however we want. So in this case, I'm going to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you can see that the button color is purple. So like I said, the main difference between these two is that the first one is going to be styling elements that follow each other no matter where they are on the scale. So if you actually look up here, they don't share any parents, they're completely separate elements. Whereas here, they have to follow each other. And I'll actually demonstrate that quickly. If we change this to a plus here. and refresh, the style is still going to work because they are directly preceded. But the only thing is if they aren't. So for example, I'm just going to actually move this button out of the form. Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay, so we have the button back. Now I'm going to go ahead and change this back to our symbol
01:43:43
there. And if we go ahead and refresh, you can see that the button right there, it doesn't actually have that styling anymore, because although they directly follow each other, they're not under the same parent. So that's just one minor difference. Alright, let's move on to the next one. It's called the child selector. So this is probably the most basic out of all of these advanced selectors. And pretty much what is saying is every single child have a certain element. So I'll give you an example. Here, we have an Li and a ul, this is pretty basic, all you have to do is type ul, which is going to be a parent. And then this symbol or the greater than symbol, and Li so this is gonna say every single Li inside of a ul, open up the brackets. And let's start to color this time to blue. I'm just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity
01:44:47
rules, once you use these advanced selectors get quite complicated. But for example, if we actually look at the Li here, the style for this, we can see that the Li with the pseudo selector is actually more specific than the this general selector. So I'm going to go ahead and comment that out. Now if we refresh the page, you can see that it's blue. So that's just one thing to keep in mind with these advanced selectors. They can get pretty complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is to be able to classify these once we get and start using these advanced selectors. Like I said, usually you won't use these in your general use. So I'm not going to go over specificity especially because usually, you'll group up all of these styles into one selector. Okay, so that's the child selector. The next one is very similar to the child selector, but instead of having direct children, there's actually something called a descendant. So
01:45:50
I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay, but then I'm going to create an ordered list inside of the Output training to create an Li and put the ordered list inside of that. So pretty much what's going on here is I'm creating an ordered list or a numbered list inside of a list item that is inside of a ul. So a little bit complicated. But we'll get to that in just a second. So I'm going to create an Li inside of this. And I'm going to say, my numbered list item, just like that. Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item here with our item. All right, so let's get started on using this descendant selector. So I'm going to get started, first thing I want to do is actually set this up. So first thing we're going to have is the parent. Okay, so in this case, it's going to be our ul, remember, because that's the top level. But then I'm going to select the Li here, but I'm not going to put our greater than symbol. So that's the big difference. This is the
01:46:53
descendant selector, and then this is going to be our child selector. So that's just the main difference, it's very easy to miss, just make sure that you don't mess that up. So now I'm going to select the color and set it to four. Now let's just say green. All right, now let's go ahead and refresh the page. And you can see that all of the lies inside of there are going to be green, right? Only problem is our ordered list right here is actually purple, right? And of course, you know, our list here is getting a little bit complicated. So I'm going to go ahead and comment this out. Remember, this is a very specific selector. Now, if I go ahead and refresh, both of them are green. All right. So what do you need to take away from this, it's pretty much what this is saying is any Li that eventually boils back or propagates up if you have done any programming before, that goes up to N A ul, okay, so I'll just show you what that means. In this case, the
01:47:54
Li is a direct child of the UL, right. But then we have another Li in here, which is a child of n o l, which is just child of an Li, which is a child of the UL, right. So as you move up and up, it eventually comes back to the UL as the parent element. So the main difference you need to take away from this is that the child selector is selecting any direct children. So anything here would not apply, because we're actually Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay, so we have the button back. Now I'm going to go ahead and change this back to our symbol there. And if we go ahead and refresh, you can see that the button right there, it doesn't actually have that styling anymore, because although they directly follow each other, they're not under the same parent. So that's just one minor difference. Alright, let's move on to the next one. It's called the child selector. So this is probably the most basic out of all of these advanced selectors. And pretty much what is saying is every single child have a certain element. So I'll give you an example. Here, we have an Li and a ul, this is pretty basic, all you have to do is type ul, which is going to be a parent.
01:48:56
And then this symbol or the greater than symbol, and Li so this is gonna say every single Li inside of a ul, open up the brackets. And let's start to color this time to blue. I'm just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity rules, once you use these advanced selectors get quite complicated. But for example, if we actually look at the Li here, the style for this, we can see that the Li with the pseudo selector is actually more specific than the this general selector. So I'm going to go ahead and comment that out. Now if we refresh the page, you can see that it's blue. So that's just one thing to keep in mind with these advanced selectors. They can get pretty complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is to be able to classify these once we get and start using these advanced selectors. Like I said, usually you won't use these in your general use. So I'm not going to go over specificity especially because usually, you'll group up all of these styles into one selector. Okay,
01:50:00
so that's the child selector. The next one is very similar to the child selector, but instead of having direct children, there's actually something called a descendant. So I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay, but then I'm going to create an ordered list inside of the Output training to create an Li and put the ordered list inside of that. So pretty much what's going on here is I'm creating an ordered list or a numbered list inside of a list item that is inside of a ul. So a little bit complicated. But we'll get to that in just a second. So I'm going to create an Li inside of this. And I'm going to say, my numbered list item, just like that. Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item here with our item. All right, so let's get started on using this descendant selector. So I'm going to get started, first thing I want to do is actually set this up. So first thing we're going to have is the parent. Okay, so in this case, it's going to be our ul, remember, because that's the top level. But then I'm going to select the Li here, but I'm not going to put our greater than symbol. So that's the big difference. This is the descendant selector, and then this is going to be our child selector. So that's just the
01:51:01
main difference, it's very easy to miss, just make sure that you don't mess that up. So now I'm going to select the color and set it to four. Now let's just say green. All right, now let's go ahead and refresh the page. And you can see that all of the lies inside of there are going to be green, right? Only problem is our ordered list right here is actually purple, right? And of course, you know, our list here is getting a little bit complicated. So I'm going to go ahead and comment this out. Remember, this is a very specific selector. Now, if I go ahead and refresh, both of them are green. All right. So what do you need to take away from this, it's pretty much what this is saying is any Li that eventually boils back or propagates up if you have done any programming before, that goes up to N A ul, okay, so I'll just show you what that means. In this case, the Li is a direct child of the UL, right. But then we have another Li in here, which is a child of n o l, which is just child of an Li, which is a child of the UL, right. So as you move up and up, it eventually comes back to the UL as the parent element. So the main difference you need to take away from this is that the child selector is selecting any direct children. So anything here would not apply, because we're actually this one wouldn't apply, because the ordered list is actually a child of the Li remember,
01:52:05
but when you're using the descendant selector, what actually happens is, if it is contained inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate this. Now. Let's go ahead and actually remove this Li remember, because once you get to this point, CSS gets a little bit complicated. This is going to end up styling everything inside it. So I'm actually just going to remove this and leave it just the ordered list. So right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh. And you can see it still stays the same, because we have this style applied. But why don't we go ahead and remove this, what do you think's going to happen? Well, you can see here that this stays blue, remember, because of our direct child selector, but then this doesn't have any style at all. So this Li works perfectly. It is a direct child of the UL, which means it's going to be colored with the style specified. The only problem is this Li is a direct child
01:53:07
have the ordered list, which is completely separate from this one. So the styles aren't going to be applied on this one. On the other hand, if we did have our descendant selector enabled, it's going to style both of them because remember, the Li is a child of the oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference between the two, you might be able to miss it, it could really mess up your code. So just make sure to keep that in mind. Alright, so those are pretty much the basic advanced selectors, those are the four that you're mainly going to use. Again, there's many more, but they are quite difficult. And we're not going to cover them because they're not very useful. So there we go. Those are the four selectors that you can use. Go ahead and practice them as much as you want. You know, try messing them around, open up some HTML files and just see what you can do with them. All right, let's move on. this one wouldn't apply, because the ordered list is actually a child of the Li remember,
01:54:11
but when you're using the descendant selector, what actually happens is, if it is contained inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate this. Now. Let's go ahead and actually remove this Li remember, because once you get to this point, CSS gets a little bit complicated. This is going to end up styling everything inside it. So I'm actually just going to remove this and leave it just the ordered list. So right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh. And you can see it still stays the same, because we have this style applied. But why don't we go ahead and remove this, what do you think's going to happen? Well, you can see here that this stays blue, remember, because of our direct child selector, but then this doesn't have any style at all. So this Li works perfectly. It is a direct child of the UL, which means it's going to be colored with the style specified. The only problem is this Li is a direct child have the ordered list, which is completely separate from this one. So the styles aren't
01:55:12
going to be applied on this one. On the other hand, if we did have our descendant selector enabled, it's going to style both of them because remember, the Li is a child of the oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference between the two, you might be able to miss it, it could really mess up your code. So just make sure to keep that in mind. Alright, so those are pretty much the basic advanced selectors, those are the four that you're mainly going to use. Again, there's many more, but they are quite difficult. And we're not going to cover them because they're not very useful. So there we go. Those are the four selectors that you can use. Go ahead and practice them as much as you want. You know, try messing them around, open up some HTML files and just see what you can do with them. All right, let's move on. Welcome back. So in this video, I am going to be talking about the last type of selector. These are called attribute selectors. They're a little bit complicated once you get started, but once we actually start using them, they become very easy to use. So first of all,
01:56:15
what is an attribute selector? Well, as we know, in HTML, we can actually add attributes to all of our elements. So for example, this image here has an attribute of source which tells the image tag where the source of the images. But what we can actually do in CSS is use these to our advantage, we can select certain elements that for certain attributes and their values. So for example, let's go ahead and try and rewrite this subtitle class here. So we know if we go over here that all of our, all of our subtitle classes are used in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So what we do is first start off with our tag name, which is h2. But then inside of some square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're not going to do it like this, we're going to have to select some sort of attribute. What this allows us to do is actually select certain things or certain elements based on their attributes. So in this clip, in this case, we want to select everything that has the attribute of class, and we want to make sure that the class itself is subtitled. Okay. Now, you do not need quotation marks for these, unlike how they were in HTML, you can see
01:57:16
we do need quotation marks, but in CSS, we don't actually need them. Alright, so there we go. We have rewritten our class here. But we've read we've but we've written it in a way that allows us to select it based on its act on the attribute of it itself. So let's go ahead and refresh the page and see what happens, you can see that this state exactly the same. Now nothing has changed. If I go ahead and change this back to dot subtitle, just like that, refresh the page, you can see nothing's changed. So that's pretty basic. Now, it doesn't just have to be class, we can select it based on many different things. So for example, if I wanted to select this image over here, I'm going to go over to the bottom, I could say image, image, and then every and then the source has to be equal to something. All right. So there we go. Now we've done that. But there's actually more than one type of selector. Now, usually, this is the basic one where you just equate one side to the other. But there's actually many more types of selectors, which allow you to kind of modify the attribute selectors and make them much more powerful than they are right now. So how do we do this? Well, I'm going to be covering just a few of them with
01:58:24
you today, and showing you how you can use them. So we have two images on this page. Now both of them are located in this image folder. Is there do you think that there's any way that we can select both of them in one go using an attribute selector? Well, there actually is. So here's what we have to do. First of all, let's find the common factor between these two images. They both are contained inside this folder. So they both start definitely start with this path, dot dot slash IMG slash, both of them are going to contain this. And if we actually go back and look, you can see that both images actually do contain this link here, wherever the other images, there it is. So there we go. Now we've done that. But remember that this is direct equating this has to be equal to this. And unfortunately, neither of them are equal to that. So how do you think we fix this? Well, all we have to do is put a carrot behind the attribute, just like this. So what this says is every single image where the source contains or starts with, sorry, yeah, starts with this piece of information, what comes after, it doesn't matter. But what we're doing is selecting all of the images where the source attribute starts with this value right here. So this is you can already see how powerful this is. Now, if we go ahead
01:59:32
and refresh the page, obviously, we can't see anything because we didn't add any styles. But I'm going to go ahead and add a quick style for you. Or you don't need to know how to do this, Welcome back. So in this video, I am going to be talking about the last type of selector. These are called attribute selectors. They're a little bit complicated once you get started, but once we actually start using them, they become very easy to use. So first of all, what is an attribute selector? Well, as we know, in HTML, we can actually add attributes to all of our elements. So for example, this image here has an attribute of source which tells the image tag where the source of the images. But what we can actually do in CSS is use these to our advantage, we can select certain elements that for certain attributes and their values. So for example, let's go ahead and try and rewrite this subtitle class here. So we know if we go over here that all of our, all of our subtitle classes are used
02:00:37
in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So what we do is first start off with our tag name, which is h2. But then inside of some square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're not going to do it like this, we're going to have to select some sort of attribute. What this allows us to do is actually select certain things or certain elements based on their attributes. So in this clip, in this case, we want to select everything that has the attribute of class, and we want to make sure that the class itself is subtitled. Okay. Now, you do not need quotation marks for these, unlike how they were in HTML, you can see we do need quotation marks, but in CSS, we don't actually need them. Alright, so there we go. We have rewritten our class here. But we've read we've but we've written it in a way that allows us to select it based on its act on the attribute of it itself. So let's go ahead and refresh the page and see what happens, you can see that this state exactly the same. Now nothing has changed. If I go ahead and change this back to dot subtitle,
02:01:40
just like that, refresh the page, you can see nothing's changed. So that's pretty basic. Now, it doesn't just have to be class, we can select it based on many different things. So for example, if I wanted to select this image over here, I'm going to go over to the bottom, I could say image, image, and then every and then the source has to be equal to something. All right. So there we go. Now we've done that. But there's actually more than one type of selector. Now, usually, this is the basic one where you just equate one side to the other. But there's actually many more types of selectors, which allow you to kind of modify the attribute selectors and make them much more powerful than they are right now. So how do we do this? Well, I'm going to be covering just a few of them with you today, and showing you how you can use them. So we have two images on this page. Now both of them are located in this image folder. Is there do you think that there's any way that we can select both of them in one go using an attribute selector? Well, there actually is. So here's what we have to do. First of all, let's find the common factor between these two images. They both are contained inside this folder. So they both start definitely start with this path, dot dot slash IMG slash, both of them are
02:02:40
going to contain this. And if we actually go back and look, you can see that both images actually do contain this link here, wherever the other images, there it is. So there we go. Now we've done that. But remember that this is direct equating this has to be equal to this. And unfortunately, neither of them are equal to that. So how do you think we fix this? Well, all we have to do is put a carrot behind the attribute, just like this. So what this says is every single image where the source contains or starts with, sorry, yeah, starts with this piece of information, what comes after, it doesn't matter. But what we're doing is selecting all of the images where the source attribute starts with this value right here. So this is you can already see how powerful this is. Now, if we go ahead and refresh the page, obviously, we can't see anything because we didn't add any styles. But I'm going to go ahead and add a quick style for you. Or you don't need to know how to do this, I'm actually going to make it a little bit more obvious. So you don't need to know how to do this. We're going to cover it later. But you can see now both images are covered
02:03:43
in black. Okay. So there we go. That's just one way, one of the selectors we can do, we can also change this to $1 sign, and in this case, it's going to be make sure that the source attribute ends with this value. Okay. So there we go, we can do that. Obviously, the style isn't going to work anymore, because this doesn't apply. But there's also another one that we can do, which is using a star the multiplication symbol. And pretty much what this is, is if it contains it anywhere, anywhere in the the value for beginning and middle doesn't matter. As long as it contains this. It's going to be there. So I'm going to go ahead and refresh and you can see now that works because both of them do contain this. So those are the three basic ones, but there's also some more complicated selectors now I'm going to go ahead and cover them. But you don't exactly need to know these, because they're a little bit complicated. So I'm just going to go ahead and do them.
02:04:48
The first one is called a whitespace attribute selector. So pretty much, if you don't know this already, you can actually add multiple classes to something in HTML. So I'm actually going to go ahead and add another class to the subtitles. And I'm just going to call it just something random particle subtitle. Obviously, it's a little bit confusing, but just bear with me. So you can actually add multiple classes or multiple arguments separated by white spaces or spaces, inside these inside these attributes. Now, obviously, this is specific to some very small, a very small number of attributes, where you can do this now just keep that in mind. For now, what we're going to do is go forward and start using this. So I'm going to go ahead and select anything that contains this, this class specifically. Now I couldn't do you know, maybe the attribute selector where it ends in this or contains
02:05:52
it, but there is another selector that we can use. So I'm going to go ahead and say h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol, okay, and then equals, and then our value in this in this case, it's going to be our class, which is article subtitle. All right. So now we can go ahead and add whatever you want. So I'm actually going to go ahead and give it a background. Now, again, you do not need to know what this is yet. I'm just trying to vary up the properties a little bit here. So let's go ahead and refresh the page and see what happens, you can see that a green background has been added to this, I'm not going to try hovering over that it's a little bit different compensate, but you can see that a green background has been added to it. Now, this could be used for a using a contain attribute selector. But this is a little bit more specific. And it only works for things that are separated by whitespace. So if you want to isolate certain elements that contain a certain class x, for example,
02:06:54
you can do it with these class attributes. And that would work perfectly. So the next selector I'm going to talk about is a little bit more complicated. And it's very similar to the first step, the first one that we talked about, which was the general attribute selector, the one where, where it's exactly quality. But there's a little bit of a difference here. There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here. Okay. So pretty much what this is saying is fine, every h2, where the class is equal either equal to directly article dash subtitle, or article dash subtitle with a dash. So, again, it does have to start with this. So it can't just be containing followed by a dash, it does have to start with this. So why would you want to use something like this? Why can't you just use the exact equality? Well, this is a pretty basic site right here. Now, we're not really doing anything complicated, or any multiple stylesheets or anything like that. But sometimes when you have want to have multiple elements, or you want to build libraries, you can create multiple elements that are followed by an ID. So for example,
02:07:56
just list them here. I'm gonna actually put this in a comment. So I could have subtitle, dash, and then some Id like that subtitle, dash, and then again, some ID. So you can see why we would use something like this, pretty much. What you want to do is select everything that I'm actually going to make it a little bit more obvious. So you don't need to know how to do this. We're going to cover it later. But you can see now both images are covered in black. Okay. So there we go. That's just one way, one of the selectors we can do, we can also change this to $1 sign, and in this case, it's going to be make sure that the source attribute ends with this value. Okay. So there we go, we can do that. Obviously, the style isn't going to work anymore, because this doesn't apply. But there's also another one that we can do, which is using a star the multiplication symbol. And pretty much what this is, is if it contains it anywhere, anywhere in the the value for beginning and middle doesn't matter. As long as it contains this. It's going to be there. So I'm going to go ahead and refresh and you can see now that works because both of them do contain
02:09:03
this. So those are the three basic ones, but there's also some more complicated selectors now I'm going to go ahead and cover them. But you don't exactly need to know these, because they're a little bit complicated. So I'm just going to go ahead and do them. The first one is called a whitespace attribute selector. So pretty much, if you don't know this already, you can actually add multiple classes to something in HTML. So I'm actually going to go ahead and add another class to the subtitles. And I'm just going to call it just something random particle subtitle. Obviously, it's a little bit confusing, but just bear with me. So you can actually add multiple classes or multiple arguments separated by white spaces or spaces, inside these inside these attributes. Now, obviously, this is specific to some very small, a very small number of attributes, where you can do this now just keep that in mind. For now, what we're going to do is go forward and start using this. So I'm going to go ahead and select anything that contains this, this class specifically. Now I couldn't do you know, maybe the attribute selector where it ends in this or contains it, but there is another selector that we can use. So I'm going to go ahead and say h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol, okay, and then equals, and then our value in this in this case, it's going to be our
02:10:05
class, which is article subtitle. All right. So now we can go ahead and add whatever you want. So I'm actually going to go ahead and give it a background. Now, again, you do not need to know what this is yet. I'm just trying to vary up the properties a little bit here. So let's go ahead and refresh the page and see what happens, you can see that a green background has been added to this, I'm not going to try hovering over that it's a little bit different compensate, but you can see that a green background has been added to it. Now, this could be used for a using a contain attribute selector. But this is a little bit more specific. And it only works for things that are separated by whitespace. So if you want to isolate certain elements that contain a certain class x, for example, you can do it with these class attributes. And that would work perfectly. So the next selector I'm going to talk about is a little bit more complicated. And it's very similar to the first step, the first one that we talked about, which was the general attribute selector, the one where, where it's exactly quality. But there's a little bit of a difference here. There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here.
02:11:06
Okay. So pretty much what this is saying is fine, every h2, where the class is equal either equal to directly article dash subtitle, or article dash subtitle with a dash. So, again, it does have to start with this. So it can't just be containing followed by a dash, it does have to start with this. So why would you want to use something like this? Why can't you just use the exact equality? Well, this is a pretty basic site right here. Now, we're not really doing anything complicated, or any multiple stylesheets or anything like that. But sometimes when you have want to have multiple elements, or you want to build libraries, you can create multiple elements that are followed by an ID. So for example, just list them here. I'm gonna actually put this in a comment. So I could have subtitle, dash, and then some Id like that subtitle, dash, and then again, some ID. So you can
02:12:10
see why we would use something like this, pretty much. What you want to do is select everything that has subtitle and then the dash in it. And you're probably also wondering, okay, why can't you just use one or the other selectors like something that starts with it? Well, sometimes this is contained in a chain, or sometimes there's multiple dashes. And on top of that, some sometimes it may change, you know, maybe this could be in the middle of 15 other classes. So you can see why you'd want to use something like this. And although it's not used very commonly, it's still very important to know. Alright, so those are pretty much all of the advanced Arctic attribute selectors. Like I said, You aren't going to use these very commonly. But again, it is good to know they are very powerful selectors. So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice, and just try using the selectors on your own. All of the project files are available on GitHub, the they the link to the repository was posted at the beginning of the course. So you can go ahead and check that out if you want to download the files and work with
02:13:10
them. But other than that, there we go. That's pretty much it for selectors now we can actually move on and start using CSS. Alright, let's move on. has subtitle and then the dash in it. And you're probably also wondering, okay, why can't you just use one or the other selectors like something that starts with it? Well, sometimes this is contained in a chain, or sometimes there's multiple dashes. And on top of that, some sometimes it may change, you know, maybe this could be in the middle of 15 other classes. So you can see why you'd want to use something like this. And although it's not used very commonly, it's still very important to know. Alright, so those are pretty much all of the advanced Arctic attribute selectors. Like I said, You aren't going to use these very commonly. But again, it is good to know they are very powerful selectors. So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice, and just try using the selectors on your own. All of the project files are available on GitHub, the they the link to the repository was posted at the beginning of the course.
02:14:15
So you can go ahead and check that out if you want to download the files and work with them. But other than that, there we go. That's pretty much it for selectors now we can actually move on and start using CSS. Alright, let's move on. I'm not really going to talk a lot in this video because there's not really much to talk about, but this video and the next are very important because right now you're probably just piecing things together about the whole way that we use CSS. And we've had to use a couple properties here and there, but you Probably don't actually know what these brackets do, or how selectors work or how any of this is actually put together. So that's what I'm going to be doing in the next few videos is explaining how all of this comes together. And once we learn that, we can actually move on to the fun part, which is using CSS and styling this website. So first thing I want to explain is properties. Now, we've talked a little bit about properties here and there, because we've needed them to demonstrate points on how selectors work. Now, obviously, it might have been better if we use properties first. But in my opinion, it's better that you learn selectors before you learn properties.
02:15:19
Because if you learn selectors First, you'll be able to understand the premise or the theory behind CSS, and how things work. Whereas if you just learn properties first, then most of your focus will be on how the properties work and not the selectors. And I feel that it's much more important that you learn the selectors before the properties so that you can actually understand CSS and how it works as a whole. So that aside, let's move on to properties. Now, like I said, we've used these a little bit in the past, we haven't actually talked about them in detail. So this is a property. Now, they're contained within selectors. And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector is going to target the element. But the actual properties are what give it its change. And what make it what it is, without the or without properties than the selectors would be completely useless. So let's go ahead and talk about the parts of properties. Now first of all,
02:16:20
a colon is always needed, you cannot use a property without a colon and a semi colon, the colon comes after the property. Now the property is pretty much defining what is going to change the color, the background, the positioning, the height, the width, there are so many properties out there. And they are all used in different ways. And then next is the value. Now, most of the time, you can actually use multiple types of values. But for something like color, there are very specific rules that you need to use for them. And we're actually going to be learning those rules and how to use colors in the next section. But for now, the just think of the value as a key or Well, not a key, the value is sort of the guideline towards the property, the value is like the value to the attribute that actually defines what's changing. and the value actually gives it that change. So just keep that in mind. So that's pretty much it for properties, it's very simple. And we're going to get lots of exposure to them as we move through the course. But for now, all you need to keep in mind is that properties have two components, the actual property itself, which is kind of the guideline on what's changing, followed by a colon, and then the value itself, which
02:17:21
is going to be the change or the type of change that happens in our our element. So what happens through our selector, and at the end of it all, you always put a semi colon, if we remove the semi colon, it's not going to work. So yeah, that's pretty much it for properties. Let's move on. So this is going to be the final video on or in this section, we're not really going to be doing anything or styling the website. But for now, I just want to talk a little bit about a very important part of CSS. Now, this is pretty much going to define the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really looking at properties yet. But we've covered a lot of different selectors and how they work. But now we need to put the two together, we know what properties are. And we definitely know what selectors are. So we need to know how these two work together. Now, I've talked
02:18:25
a little bit about this in the past, but we haven't actually gone through it in detail. So that's what I'm going to be doing in this video. So first of all, if you look at all of the CSS code, we can see a pattern involved here. First of all, in every single one of these there are these curly braces. And on top of that in every single one, there is some italicized text, which is due to the development tool that we're using, but there's some italicized text, and then some other text here, and there's always a colon and a semi colon. And on top of that before every first curly brace, there's always going to be some form of text here, which is our selectors. But how do these actually work together? So this is very important for something called the CSS a general rule. And it's pretty much
02:19:26
going to teach you how all CSS is supposed to look. So first of all, there's always three parts to your I'm not really going to talk a lot in this video because there's not really much to talk about, but this video and the next are very important because right now you're probably just piecing things together about the whole way that we use CSS. And we've had to use a couple properties here and there, but you Probably don't actually know what these brackets do, or how selectors work or how any of this is actually put together. So that's what I'm going to be doing in the next few videos is explaining how all of this comes together. And once we learn that, we can actually move on to the fun part, which is using CSS and styling this website. So first thing I want to explain is properties. Now, we've talked a little bit about properties here and there, because we've needed them to demonstrate points on how selectors work. Now, obviously, it might have been better if we use properties first. But in my opinion, it's better that you learn selectors before you learn properties. Because if you learn selectors First, you'll be able to understand the premise or the theory behind CSS, and how things work. Whereas if you just learn properties first, then most of your focus will be on how the properties work and not the selectors. And I feel that
02:20:28
it's much more important that you learn the selectors before the properties so that you can actually understand CSS and how it works as a whole. So that aside, let's move on to properties. Now, like I said, we've used these a little bit in the past, we haven't actually talked about them in detail. So this is a property. Now, they're contained within selectors. And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector is going to target the element. But the actual properties are what give it its change. And what make it what it is, without the or without properties than the selectors would be completely useless. So let's go ahead and talk about the parts of properties. Now first of all, a colon is always needed, you cannot use a property without a colon and a semi colon, the colon comes after the property. Now the property is pretty much defining what is going to change the color, the background, the positioning, the height, the width, there are so many properties
02:21:32
out there. And they are all used in different ways. And then next is the value. Now, most of the time, you can actually use multiple types of values. But for something like color, there are very specific rules that you need to use for them. And we're actually going to be learning those rules and how to use colors in the next section. But for now, the just think of the value as a key or Well, not a key, the value is sort of the guideline towards the property, the value is like the value to the attribute that actually defines what's changing. and the value actually gives it that change. So just keep that in mind. So that's pretty much it for properties, it's very simple. And we're going to get lots of exposure to them as we move through the course. But for now, all you need to keep in mind is that properties have two components, the actual property itself, which is kind of the guideline on what's changing, followed by a colon, and then the value itself, which is going to be the change or the type of change that happens in our our element. So what happens through our selector, and at the end of it all, you always put a semi colon, if we remove
02:22:36
the semi colon, it's not going to work. So yeah, that's pretty much it for properties. Let's move on. So this is going to be the final video on or in this section, we're not really going to be doing anything or styling the website. But for now, I just want to talk a little bit about a very important part of CSS. Now, this is pretty much going to define the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really looking at properties yet. But we've covered a lot of different selectors and how they work. But now we need to put the two together, we know what properties are. And we definitely know what selectors are. So we need to know how these two work together. Now, I've talked a little bit about this in the past, but we haven't actually gone through it in detail. So that's what I'm going to be doing in this video. So first of all, if you look at all of the CSS code, we can see a pattern involved here. First of all, in every single one of
02:23:42
these there are these curly braces. And on top of that in every single one, there is some italicized text, which is due to the development tool that we're using, but there's some italicized text, and then some other text here, and there's always a colon and a semi colon. And on top of that before every first curly brace, there's always going to be some form of text here, which is our selectors. But how do these actually work together? So this is very important for something called the CSS a general rule. And it's pretty much going to teach you how all CSS is supposed to look. So first of all, there's always three parts to your to your selector here, there is the selector itself. There's the curly braces, which actually represents something called a CSS block. And then there's the properties. So first of all, let's talk about the selector. Now, we all know that selector defines what elements you're trying to collect or target on your HTML page. A selector can look any different way it can look like this with some weird symbols. It could have colons and pseudo selectors or
02:24:45
it can just It looks something very plain like this. But we all know that they do something different. And over the last few videos, we've been covering what selectors actually do. So now what we're going to do is go through, and I'm going to teach you how this selector plays in with everything else. So we have our selector over here, this could be anything, an element selectors, pseudo selector attribute selector like one of these. But for now, we have our selector. So this is going to target some element on a page. Now, the part we haven't talked about is something called the CSS block. So pretty much once you select something, you need to define all of your styles. And as we know, all of your styles have to go in between these two curly braces. So that's what we call a CSS block. The curly braces define the beginning and end of this block. And it can be empty, it doesn't need to have anything inside it. But what's going on here is this block is going to contain all of the styles that are then going to be targeted towards our selector. And then of course,
02:25:47
we have the properties. So all of these have only had one property where you can actually do more than one property. So a property looks like this property, a colon, and then a value, and a semicolon. So the property is going to be the name of the actual style, this can be color background, and we're going to learn a bunch of these throughout this course. But this could be anything. On the other hand, the value has to be sort of targeted or matching the style of the property. So for example, if this was a color, we can use pixels, because pixels are for size. So there are many different ways that you can use these different values. And they all depend on your property. So what I didn't show you is you can actually have more than one property. Now these can be in any style, as long as they have the semi colon and the colon. And they come inside the block. So this can be property to add value to. And you can put pretty much as many styles as you want in here. So for example, if you wanted to style a subtitle, and you wanted to change the font size, the color, and the background all at the same time, you don't need to create three separate CSS blocks, you can do it all in one. And that's the real power of CSS is that you don't have you can keep your code
02:26:48
concise and clean, without having to create all of these different blocks. So this is pretty much the general rule, you have to follow this pretty much for all of the CSS you write using a selector and then different properties contained inside of a block. So like I said, we're going to get much more experience with actually using CSS, as we delve more into CSS and learning all of the different features it has to offer. Alright, let's move on. to your selector here, there is the selector itself. There's the curly braces, which actually represents something called a CSS block. And then there's the properties. So first of all, let's talk about the selector. Now, we all know that selector defines what elements you're trying to collect or target on your HTML page. A selector can look any different way it can look like this with some weird symbols. It could have colons and pseudo selectors or it can just It looks something very plain like this. But we all know that they do something different. And over the last few videos, we've been covering what selectors actually do. So now what we're going to do is go through, and I'm going to teach you how this selector plays in with everything else. So we have our selector over here, this could be anything, an element selectors, pseudo selector attribute selector like one of these. But for now, we
02:27:52
have our selector. So this is going to target some element on a page. Now, the part we haven't talked about is something called the CSS block. So pretty much once you select something, you need to define all of your styles. And as we know, all of your styles have to go in between these two curly braces. So that's what we call a CSS block. The curly braces define the beginning and end of this block. And it can be empty, it doesn't need to have anything inside it. But what's going on here is this block is going to contain all of the styles that are then going to be targeted towards our selector. And then of course, we have the properties. So all of these have only had one property where you can actually do more than one property. So a property looks like this property, a colon, and then a value, and a semicolon. So the property is going to be the name of the actual style, this can be color background, and we're going to learn a bunch of these throughout this course. But
02:28:57
this could be anything. On the other hand, the value has to be sort of targeted or matching the style of the property. So for example, if this was a color, we can use pixels, because pixels are for size. So there are many different ways that you can use these different values. And they all depend on your property. So what I didn't show you is you can actually have more than one property. Now these can be in any style, as long as they have the semi colon and the colon. And they come inside the block. So this can be property to add value to. And you can put pretty much as many styles as you want in here. So for example, if you wanted to style a subtitle, and you wanted to change the font size, the color, and the background all at the same time, you don't need to create three separate CSS blocks, you can do it all in one. And that's the real power of CSS is that you don't have you can keep your code concise and clean, without having to create all of these different blocks. So this is pretty much the general rule, you have to follow this pretty much for all of the CSS you write using a selector and then different properties contained inside of a block. So
02:29:59
like I said, we're going to get much more experience with actually using CSS, as we delve more into CSS and learning all of the different features it has to offer. Alright, let's move on. So this is the start of a new section. And now that we've learned all we need to know about selectors, we're going to actually start styling up our website and making it look good. So first of all, let's just talk about coloring. In general, I mean, what is coloring? And what are we supposed to do with it. So as we know, we already have a bunch of colors here. And they all look fine. But what we're actually trying to do here is color our website in a way that makes it look modern, and appealing to users. So we're going to be learning a bunch of different techniques that you can use to color your website. Now we've already used one in the past, and it's a very common one. And that is, of course, the color property. Now we're going to be talking more about this in the next video and using it in depth. But
02:31:04
first thing I want to talk about is the different types of colors, because there's actually more than one. So first of all, we've all used and while you've at least seen me use the colors have given by name so for example, red, green, blue, and purple. But there's actually more than that there's so much more to colors than just those names, because as you know, they're actually quite limiting, you can't really change the color and choose as you want. So what I'm here to teach you about is the three different types of colors and how they work. So the first one is obviously the CSS color codes or names. And what they do is is pretty much given a name, and they each have a designated color. So this is a really easy way for testing colors. For example, if you want to test if a property works, as we saw at the beginning of this course. And you can also use them for you know, maybe quick fixes or trying to just try out different colors. But once you get into the really specific
02:32:06
detailed web design, and once you start producing your website properly, you're going to want more than just the color CSS gives you. So I've actually attached to the lecture resources, this website here, you have a bunch of different CSS color codes. And you can see that there's actually a huge range of them, we only use the basic ones that are quite vibrant and they really hit the eyes very hard. But you can see there's actually a lot more than what we just use. The only problem is nobody wants to memorize all of these different names. So what we're actually going to be doing is learning how to use these two, which are the ones I'm going to be talking about in this video. So first of all, let's talk a little bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate how this whole thing works. We actually don't need this for now. So I'm going to discipline full screen. So this is a color picker that I found on Google, you can go ahead and search
02:33:06
it anywhere. But I like using Google's provided one, because it provides you with both the hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first of all, you can slide up and down this thing and choose whichever color you want. And you can see that these two codes change. So what do they actually mean? Well, first, let's talk about the hex code. So we all know that when you're normally using numbers, you range from zero to nine. So any given number in this new in that numeral system can be made up of 012, and all the way up to nine. So in that case, there's 10 possible combinations. But in hex code, there's actually 16 different possible combinations, you can go from zero to nine, and then A to F. So for example, let's just take this right here, this could actually be converted into a number if we wanted to, suppose B, actually stands for 12, because it goes zero to nine, and then a B, so 12. And you can actually convert this into a number, which is very interesting. So I'm not really going to be talking about the applications of hex code in this in this video, because that goes all the way down
02:34:10
into computer science. And we're not really looking at that now. But one thing we can do is actually create colors based on this. So first of all, you'll notice that our code here starts off with a hashtag. And then you have six digits. So each one can have 16 possible combinations. But as we know, color any color is made up of either red, green, or blue, at least on the computer for the standard color palette. So it's made up of red, green, and blue. Now basically, this hex code is split up into three two digit pairs. So the first pair of numbers is meant to represent the amount of red in the color, the second, the amount of green, and the third, the amount of blue, RGB. And these parents can range from 00, which means none of that color to F F, which is the highest value. Remember, hexadecimal goes from zero to f. So I'm just going to choose something very basic here, like a standard blue. You can see here that this is the purest blue that you can get. Pretty much what this is saying is the first two is 00, which means there's no red, the second pair, or Yeah, the second pair is also 00, which means no green. But then the third is F F, which means all blue. So this is pretty easy. So if we go to something like white,
02:35:14
for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which actually creates white. And if we chose black, you can see that that's zero. So this is a pretty hard thing to understand. Once you get into some of these more complicated colors. Again, we don't really use hexadecimal in normal in normal use, when we're creating colors or writing code, we don't really use these numbers. So it's actually much easier to work with RGB codes. So RGB is a little bit different in the style that it's written. But it all represents the same concept. Pretty much there are three numbers here. And these aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the first for red, the second for green, and the third for blue, just like this one, except in this case, the numbers can go from zero to 255, zero being the minimum and 255 being the maximum. So this is actually much easier to read. Let's go back to our blue here. And I'm actually just going to write the code here. So you can see that there's zero red,
02:36:15
zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum. And obviously, you can see that once we go back to those complicated colors. When you look here, it's quite complicated to understand. But when we look at the RGB code, we can see that there's a moderate amount of red, a large amount of green and large amounts of blue, and therefore it should theoretically be a cold color. Now again, you don't really need to know how to construct these QR codes from your head, they're quite hard to understand. So what I would recommend is when you're designing these colors, or designing these, these websites, I would recommend you just go and use a color picker, too much easy too much, much easier to decide. And you can also get a lot more experience hands on experience with these colors rather than memorizing all the theory behind them. So both of these will work fine and in the next video I'm going to show you how to actually use these codes in our in our website and actually use them to style and color text. Alright, let's move on.
02:37:20
So this is the start of a new section. And now that we've learned all we need to know about selectors, we're going to actually start styling up our website and making it look good. So first of all, let's just talk about coloring. In general, I mean, what is coloring? And what are we supposed to do with it. So as we know, we already have a bunch of colors here. And they all look fine. But what we're actually trying to do here is color our website in a way that makes it look modern, and appealing to users. So we're going to be learning a bunch of different techniques that you can use to color your website. Now we've already used one in the past, and it's a very common one. And that is, of course, the color property. Now we're going to be talking more about this in the next video and using it in depth. But first thing I want to talk about is the different types of colors, because there's actually more than one. So first of all, we've all used and while you've at least seen me use the colors have given by name so for example, red, green, blue, and purple. But there's actually more than that there's so much more to colors than just those names, because as you know, they're actually quite limiting, you can't really change the color and choose
02:38:25
as you want. So what I'm here to teach you about is the three different types of colors and how they work. So the first one is obviously the CSS color codes or names. And what they do is is pretty much given a name, and they each have a designated color. So this is a really easy way for testing colors. For example, if you want to test if a property works, as we saw at the beginning of this course. And you can also use them for you know, maybe quick fixes or trying to just try out different colors. But once you get into the really specific detailed web design, and once you start producing your website properly, you're going to want more than just the color CSS gives you. So I've actually attached to the lecture resources, this website here, you have a bunch of different CSS color codes. And you can see that there's actually a huge range of them, we only use the basic ones that are quite vibrant and they really hit the eyes very hard. But you can see there's actually a lot more than what
02:39:31
we just use. The only problem is nobody wants to memorize all of these different names. So what we're actually going to be doing is learning how to use these two, which are the ones I'm going to be talking about in this video. So first of all, let's talk a little bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate how this whole thing works. We actually don't need this for now. So I'm going to discipline full screen. So this is a color picker that I found on Google, you can go ahead and search it anywhere. But I like using Google's provided one, because it provides you with both the hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first of all, you can slide up and down this thing and choose whichever color you want. And you can see that these two codes change. So what do they actually mean? Well, first, let's talk about the hex code. So we all know that when you're normally using numbers, you range from zero to nine. So any given number in this new in that numeral system can be made up of 012, and all the way up to nine. So in that case, there's 10 possible combinations.
02:40:36
But in hex code, there's actually 16 different possible combinations, you can go from zero to nine, and then A to F. So for example, let's just take this right here, this could actually be converted into a number if we wanted to, suppose B, actually stands for 12, because it goes zero to nine, and then a B, so 12. And you can actually convert this into a number, which is very interesting. So I'm not really going to be talking about the applications of hex code in this in this video, because that goes all the way down into computer science. And we're not really looking at that now. But one thing we can do is actually create colors based on this. So first of all, you'll notice that our code here starts off with a hashtag. And then you have six digits. So each one can have 16 possible combinations. But as we know, color any color is made up of either red, green, or blue,
02:41:37
at least on the computer for the standard color palette. So it's made up of red, green, and blue. Now basically, this hex code is split up into three two digit pairs. So the first pair of numbers is meant to represent the amount of red in the color, the second, the amount of green, and the third, the amount of blue, RGB. And these parents can range from 00, which means none of that color to F F, which is the highest value. Remember, hexadecimal goes from zero to f. So I'm just going to choose something very basic here, like a standard blue. You can see here that this is the purest blue that you can get. Pretty much what this is saying is the first two is 00, which means there's no red, the second pair, or Yeah, the second pair is also 00, which means no green. But then the third is F F, which means all blue. So this is pretty easy. So if we go to something like white, for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which actually creates white. And if we chose black, you can see that that's zero. So this is a
02:42:38
pretty hard thing to understand. Once you get into some of these more complicated colors. Again, we don't really use hexadecimal in normal in normal use, when we're creating colors or writing code, we don't really use these numbers. So it's actually much easier to work with RGB codes. So RGB is a little bit different in the style that it's written. But it all represents the same concept. Pretty much there are three numbers here. And these aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the first for red, the second for green, and the third for blue, just like this one, except in this case, the numbers can go from zero to 255, zero being the minimum and 255 being the maximum. So this is actually much easier to read. Let's go back to our blue here. And I'm actually just going to write the code here. So you can see that there's zero red, zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum. And obviously, you can see that once we go back to those complicated colors. When you look here, it's quite complicated to understand. But when we look at the RGB code, we can see that there's a moderate amount of red, a large amount of green and large amounts of blue,
02:43:42
and therefore it should theoretically be a cold color. Now again, you don't really need to know how to construct these QR codes from your head, they're quite hard to understand. So what I would recommend is when you're designing these colors, or designing these, these websites, I would recommend you just go and use a color picker, too much easy too much, much easier to decide. And you can also get a lot more experience hands on experience with these colors rather than memorizing all the theory behind them. So both of these will work fine and in the next video I'm going to show you how to actually use these codes in our in our website and actually use them to style and color text. Alright, let's move on. So in this video, I am going to be starting to color and style our website. So we're going to go through and use the selector skills that we've learned in the previous section to actually go through and start adding some color. On top of that, we're going to be using
02:44:44
the skills we learned about hex code and RGB color codes to vary up our style or method of coloring things. Because in the past, like I've said, we've just used some basic techniques with CSS color codes. And now we're going to be working with our own custom colors. So first of all, let's go ahead and start adding some classes to this website to get it set up for our styling. So first thing I did is actually started from a clean slate because it was getting quite messy before and I thought that it would be better if we started from scratch. So the first thing I'm going to do is go ahead and add a class or an ID actually, I think would be better to our title, since there's only one of them. So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from the skills you learned in the last section. Let's also go ahead and add some classes for our paragraph text. And because of course, we have more than one paragraph, we're actually going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph.
02:45:48
Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class on to our other paragraphs, instead of writing it down. There we go. So the next thing I want to do is go ahead and add some classes to this list here just for convenience. So I'm going to go ahead and add a class for a list item. Now, obviously, we're not going to use all of these in one go. But I was just considering to add them so that when we get into it, we can actually go ahead and use them without having to go ahead and add these classes every single time. So there we go, we did that. Let's also go ahead and add a class to our link, link. And now we have our table items. We're going to leave this for now because it might take a long time. Oh, we'll we'll style this when we get later into
02:46:49
our section. So there we go, we did that. Now the last thing I want to do is just go ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some classes. So class is form input. And this is actually quite commonplace to add, or write class names and Id names with these. So with dashes, instead of you know snake case, which is using capital letters in like that. It's just a convention in CSS. So let's go ahead and add the same class here. Just like that. There we go. And we'll also we're also going to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that. There we go. Just copy that. And over to our other subtitles. And once we're done with that, we'll move on and start coloring our text. Right, there we go. So everything's looking good. That means nothing has gone wrong. Let's go ahead and start styling our text. So first thing I want to do is style our header here. So obviously, you don't really want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment a little bit for this video with some of our colors. So first of all, I'm going to need
02:47:54
to select it. This is the first part of our general rule. So because it's an ID, I'm going to go hash, and then title, open up our block with our curly braces. And now we're going to start writing our property. So if you don't know this already, the property is going to be color. This is the text of the the color of the text. And I know it doesn't look like it since it doesn't say tech stash color, similar to a bunch of other properties. But this is the way to color your text. So here, we can go ahead and type a property or sorry, our value. Now before we've used colors, like steel blue, which is a CSS color code. But now let's go ahead and challenge ourselves and start actually messing with these colors using our own color picker. So first of all, I want to choose a color that I really like. And I'm going to go for a sort of deep orange. So we don't want to go for something too dark. But we also don't want to go for something too light so that it's hard on the eyes. Now I think a color like this is good. Now how would we actually implement this? Well, we
02:48:55
just copy and paste it. And if you're thinking that that's the right way, well, then you're right, it's actually very easy. All you have to do is copy your hex or RGB code and paste it into So in this video, I am going to be starting to color and style our website. So we're going to go through and use the selector skills that we've learned in the previous section to actually go through and start adding some color. On top of that, we're going to be using the skills we learned about hex code and RGB color codes to vary up our style or method of coloring things. Because in the past, like I've said, we've just used some basic techniques with CSS color codes. And now we're going to be working with our own custom colors. So first of all, let's go ahead and start adding some classes to this website to get it set up for our styling. So first thing I did is actually started from a clean slate because it was getting quite messy before and I thought that it would be better if we started from scratch. So the first thing I'm going to do is go ahead and add a class or
02:49:58
an ID actually, I think would be better to our title, since there's only one of them. So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from the skills you learned in the last section. Let's also go ahead and add some classes for our paragraph text. And because of course, we have more than one paragraph, we're actually going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph. Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class on to our other paragraphs, instead of writing it down. There we go. So the next thing I want to do is go ahead and add some classes to this list here just for convenience. So I'm going to go ahead and add a class for a list item. Now, obviously, we're not going to use all of these in one go. But I was just considering to add them so that when we get into it, we can actually go ahead and use them without having to go ahead and add these classes every single time. So there we go, we did that. Let's also go ahead and add a
02:50:58
class to our link, link. And now we have our table items. We're going to leave this for now because it might take a long time. Oh, we'll we'll style this when we get later into our section. So there we go, we did that. Now the last thing I want to do is just go ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some classes. So class is form input. And this is actually quite commonplace to add, or write class names and Id names with these. So with dashes, instead of you know snake case, which is using capital letters in like that. It's just a convention in CSS. So let's go ahead and add the same class here. Just like that. There we go. And we'll also we're also going to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that. There we go. Just copy that. And over to our other subtitles. And once we're done with that, we'll move on and start coloring our text. Right, there we go. So everything's looking good. That means nothing has gone wrong. Let's go ahead and start styling our text. So first thing I want to do is style our header here. So obviously, you don't really
02:52:00
want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment a little bit for this video with some of our colors. So first of all, I'm going to need to select it. This is the first part of our general rule. So because it's an ID, I'm going to go hash, and then title, open up our block with our curly braces. And now we're going to start writing our property. So if you don't know this already, the property is going to be color. This is the text of the the color of the text. And I know it doesn't look like it since it doesn't say tech stash color, similar to a bunch of other properties. But this is the way to color your text. So here, we can go ahead and type a property or sorry, our value. Now before we've used colors, like steel blue, which is a CSS color code. But now let's go ahead and challenge ourselves and start actually messing with these colors using our own color picker. So first of all, I want to choose a color that I really like. And I'm going to go for a sort of deep orange. So we don't want to go for something too dark.
02:53:02
But we also don't want to go for something too light so that it's hard on the eyes. Now I think a color like this is good. Now how would we actually implement this? Well, we just copy and paste it. And if you're thinking that that's the right way, well, then you're right, it's actually very easy. All you have to do is copy your hex or RGB code and paste it into into here just like that. Now if I go ahead and refresh the page, you can see that that color is being reflected on our title. Now I would recommend instead of using your hex code, go ahead and add an RGB code. And I'll tell you why later in this section, but for now, just think that this is better because it's a little bit more flexible, and you can change it easily. So on top of that, use an RGB color code really allows you to mess around with the colors in a way that if you didn't know hex code you wouldn't be able to. So for example, let's say I wanted to increase the amount of blue in this, all they would have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you can see that that color has completely changed by adding more blue. By doing it, we've kind
02:54:07
of mixed around the colors and created this pinkish color. Imagine you're working with a color palette, instead of a digital kind of weird color mixer. Think of you have a giant pile of red, green and blue. And what you're doing here is changing all of the proportions to get just the color you want. So let's go ahead and change this color back to nine. There we go. Now we have our orange color there. So let's go ahead and also style up our, our subtitles here. And one common thing that you do with hierarchies of text. So for example, titles and then sub titles and paragraph is usually your titles or your high up on the hierarchy are going to have very dark colors. And then your sub titles are things that are lower on the hierarchy are going to have around the same color scheme, but they're going to be a little lighter. So what I'm going to do is just go ahead to my color picker and drag this up a little bit. Of course, you could do this by just increasing all of the values. But I actually prefer to use the color picker because I could really see what's
02:55:09
going on. So I'm going to choose something a little bit lighter, maybe something around here. Again, we don't want it to be too light, because then it's going to be too hard on the eyes. So I think I'm going to go something around here. So we're going to go ahead and copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle, because remember, it's a class, then I'm going to use my property color and paste in our RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles have been colored down. So there we know everything is working really well for now. And we're starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again, the whole point is to be styling a website as you go along. So I recommend you go ahead and mess around with your own colors. Again, you can just find this color picker by going to Google, if you don't really like it, you could always go to another color picker on
02:56:10
search for one. But you can go ahead choose your own colors. If you don't like orange, you can go with blue, maybe something a little colder. It's totally up to you just get some practice with using colors on different types of texts, and get some more practice using CSS on your own. Alright, let's move on. into here just like that. Now if I go ahead and refresh the page, you can see that that color is being reflected on our title. Now I would recommend instead of using your hex code, go ahead and add an RGB code. And I'll tell you why later in this section, but for now, just think that this is better because it's a little bit more flexible, and you can change it easily. So on top of that, use an RGB color code really allows you to mess around with the colors in a way that if you didn't know hex code you wouldn't be able to. So for example, let's say I wanted to increase the amount of blue in this, all they would have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you can see that that color has completely changed by adding more blue. By doing it, we've kind of mixed around the colors and created this pinkish color. Imagine you're working with a color palette, instead of a digital kind of weird color mixer. Think of you have a giant pile of red, green and blue. And what you're doing here is changing all of the proportions
02:57:14
to get just the color you want. So let's go ahead and change this color back to nine. There we go. Now we have our orange color there. So let's go ahead and also style up our, our subtitles here. And one common thing that you do with hierarchies of text. So for example, titles and then sub titles and paragraph is usually your titles or your high up on the hierarchy are going to have very dark colors. And then your sub titles are things that are lower on the hierarchy are going to have around the same color scheme, but they're going to be a little lighter. So what I'm going to do is just go ahead to my color picker and drag this up a little bit. Of course, you could do this by just increasing all of the values. But I actually prefer to use the color picker because I could really see what's going on. So I'm going to choose something a little bit lighter, maybe something around here. Again, we don't want it to be too light, because then it's going to be too hard on the eyes. So I think I'm going to go something around here. So we're going to go ahead and copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle,
02:58:17
because remember, it's a class, then I'm going to use my property color and paste in our RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles have been colored down. So there we know everything is working really well for now. And we're starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again, the whole point is to be styling a website as you go along. So I recommend you go ahead and mess around with your own colors. Again, you can just find this color picker by going to Google, if you don't really like it, you could always go to another color picker on search for one. But you can go ahead choose your own colors. If you don't like orange, you can go with blue, maybe something a little colder. It's totally up to you just get some practice with using colors on different types of texts, and get some more practice using CSS on your own. Alright, let's move on.
02:59:20
So in this video, we are going to be covering background colors. Now, I know it's a little bit intimidating considering we've never actually done backgrounds before. But it's very similar to colors in the values that he uses. The only difference is is what it's actually styling. So I'm going to be teaching you how to create backgrounds on your website. Now, obviously, we're not going to go all crazy and start creating backgrounds for everything. Because we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds aren't really usable. Because sometimes, especially with colors, it just doesn't really look that good. So what we're actually going to do is go through and just practice with our background for now. So the first thing I need to do is actually look for something to create a background on. And we all know what a background on text looked like. Now, we don't actually know why the background goes all the way to the edge yet. We haven't gotten we haven't gotten into layout yet. Once we do, you'll know how to change that. For now though, I think it's
03:00:24
really fitting to go through and style this whole page. So firstly, what selector Do we need to use? Considering that we're trying to select everything? How are we supposed to create a background on every single item? Do we go through and select everything and add that background? Well, we actually look at a look at our HTML page, you can see that all of our text here is contained inside of our body tag. So the easiest way to select this, because again, there's only one of our body, we can just use an element selector. So I'm going to go ahead and select it with body. So usually, you would actually put tags, elements selectors at the top. So I'm going to go ahead and do that now. Open up our block using those curly braces. And now we can add our background. So first of all, the property used to Select and Color background is called background color. But we're not actually going to use that because background is much easier considering that you can actually go and also select images and URLs instead of colors. It's much more flexible, and I prefer using
03:01:27
it over background color. So I'm going to go ahead and select that as my property. So from now, you can just go ahead and add your value. Similarly to color. You can use an RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set it as red And just worn your eyes because it's quite puffing. So you can see that now our entire site has been styled red. Now, obviously, I don't want this, this doesn't really look very good. So I'm going to go ahead and erase this property for now. And we're going to go through and choose a color. So I would recommend choosing something a little bit light. So I'm going to go for about a light turquoise or light blue, something like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh the page, you can see we have this really nice light blue, which kind of fits in with our oranges. Now, because it's a little bit, it doesn't really look that good on this light orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with
03:02:32
RGB is to just go ahead and drop all of the values this way, you stay in the same proportions, but you're just darkening everything. So I'm going to go ahead and darken our subtitles. So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And this becomes 148. And obviously, these don't have to be exact, and this can become 30. So these don't have to be exact, like I said, we're just darkening the titles, you can see, you can see that they got a little bit darker, and it looks better on this color. Alright, there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and apply this to pretty much anything you want. So if I actually go ahead and style our subtitles with our blue background, obviously, it won't look that good, but it works perfectly fine. So there we go. That's pretty much how to add color to backgrounds. And in the next video, I'm going to be teaching you how to actually change the type of background that you're using. Because obviously, sometimes you want to actually change the background
03:03:32
and use maybe a custom image, or you want to link to an image online. So I'm going to be teaching you how to do that in the next video. So let's just go and refresh the page. Keep that normal. Alright, let's move on. So in this video, we are going to be covering background colors. Now, I know it's a little bit intimidating considering we've never actually done backgrounds before. But it's very similar to colors in the values that he uses. The only difference is is what it's actually styling. So I'm going to be teaching you how to create backgrounds on your website. Now, obviously, we're not going to go all crazy and start creating backgrounds for everything. Because we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds aren't really usable. Because sometimes, especially with colors, it just doesn't really look that good. So what we're actually going to do is go through and just practice with our background for now. So the first thing I need to do is actually look for something to create a background
03:04:32
on. And we all know what a background on text looked like. Now, we don't actually know why the background goes all the way to the edge yet. We haven't gotten we haven't gotten into layout yet. Once we do, you'll know how to change that. For now though, I think it's really fitting to go through and style this whole page. So firstly, what selector Do we need to use? Considering that we're trying to select everything? How are we supposed to create a background on every single item? Do we go through and select everything and add that background? Well, we actually look at a look at our HTML page, you can see that all of our text here is contained inside of our body tag. So the easiest way to select this, because again, there's only one of our body, we can just use an element selector. So I'm going to go ahead and select it with body. So usually, you would actually put tags, elements selectors at the top. So I'm going to go ahead and do that now. Open up our block
03:05:34
using those curly braces. And now we can add our background. So first of all, the property used to Select and Color background is called background color. But we're not actually going to use that because background is much easier considering that you can actually go and also select images and URLs instead of colors. It's much more flexible, and I prefer using it over background color. So I'm going to go ahead and select that as my property. So from now, you can just go ahead and add your value. Similarly to color. You can use an RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set it as red And just worn your eyes because it's quite puffing. So you can see that now our entire site has been styled red. Now, obviously, I don't want this, this doesn't really look very good. So I'm going to go ahead and erase this property for now. And we're going to go through and choose a color. So I would recommend choosing something a
03:06:35
little bit light. So I'm going to go for about a light turquoise or light blue, something like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh the page, you can see we have this really nice light blue, which kind of fits in with our oranges. Now, because it's a little bit, it doesn't really look that good on this light orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with RGB is to just go ahead and drop all of the values this way, you stay in the same proportions, but you're just darkening everything. So I'm going to go ahead and darken our subtitles. So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And this becomes 148. And obviously, these don't have to be exact, and this can become 30. So these don't have to be exact, like I said, we're just darkening the titles, you can see,
03:07:38
you can see that they got a little bit darker, and it looks better on this color. Alright, there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and apply this to pretty much anything you want. So if I actually go ahead and style our subtitles with our blue background, obviously, it won't look that good, but it works perfectly fine. So there we go. That's pretty much how to add color to backgrounds. And in the next video, I'm going to be teaching you how to actually change the type of background that you're using. Because obviously, sometimes you want to actually change the background and use maybe a custom image, or you want to link to an image online. So I'm going to be teaching you how to do that in the next video. So let's just go and refresh the page. Keep that normal. Alright, let's move on. So in this video, we're going to be looking at a different type of background in CSS. So now that we've covered basic color types, and we've also covered a little bit of background,
03:08:39
and using background tracks, we're going to move on to an alternate way of creating backgrounds. And that's through background images. So right now we know the basics of coloring, so we were able to call it a text. Now with our own custom colors using a color picker, we can also go ahead and use our own, you know, backgrounds and things like that with our own colors. But now what I want to cover is looking at different types of backgrounds themselves. So in this case, we're going to be looking at images. So first of all, when we want to set the background to an image, we can just go ahead and add an RGB color code, we're going to need to go and actually link to an image. So I'm going to show you a really easy way of doing this, the first thing we're going to need is an image. And for this method, you can actually use images with from the internet without having to download them using URLs. So show you how to do that now. So if I go ahead and search for a landscape
03:09:42
image, just like this. And now we want to look for a sort of low resolution one, we don't want to do too big, I think this will be pretty good, it's going to look a little bit weird, but just for this purpose, we're going to use it. So now what we need to do is get the URL link to this image. So you can do this by right clicking on it. And then you're going to go ahead and click on copy image address. Okay, so what this is going to do is get the actual link to the image itself. Right now this link is going to Google Images. But what we actually need is the link to the image itself. So there we go, we have that set up. Now we need to go ahead and add the image to the page. So under here, I'm going to just erase this color code for now. And I'm going to show you how to add our image. So there's this thing in CSS, they're called functions. Now, we're not really going to go very in depth about them. But pretty much what they do is they take a few inputs, they process them, and they give an output. So the first example of a function that we've already used is this right here, it takes three inputs A red, a green, and a blue, does
03:10:42
some magic behind the scenes, and then gives us a color back. So what we're going to do here is use another function called URL. So what this is going to do is take in the link or to the URL, and then it's going to find that image and set it. So in quotations, it doesn't have to be in quotations, just remember that you're going to paste in your image. So remember, I just copied this from the image address. And now we have it here. So we have the image. Let's go ahead and check it out on our website. So there we go. You can see that whoops, you can see that our image is set here. Now there's a few issues, obviously with the repetition and everything, but we're not going to be covering those until maybe in a few videos. Where we talk about some other background properties. But there we go for now, we've actually set our image and now it is set on our website. So when you think of a URL, you're most likely thinking of linking to google images or some sort of
03:11:42
web URL. But that's not the only type of URL that we can use a URL is just a link to an endpoint. This right here is a URL, it's just not linking to a website, it's instead linking to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually going to show you is that we can use these local URLs in here. So I'm going to erase this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh the page. And now you can see that it still works perfectly. Because again, it's linking to an endpoint, it's just not on our website, it's instead stored on our local machine. So there we go, we have that set up now. But there's actually another way that you can set background images. And this goes the same for background colors. So why I like to use the background property is because you can set anything you want in one go. You can set it as a color as an image, and he do many other things. But instead, you can actually use very specific properties that work for specific value. So for example, in this case, we can use background image. And from here, we can go ahead and copy paste the URL, like
03:12:45
that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show you that it still works perfectly fine. So you see I refresh the page, and it's still working. And this goes the same for for background colors, you can go ahead and add a background color, and then add some random RGB value just going to go for a full black for now. And you can see that it still works. The only problem is if I go ahead and paste in that URL here. Oh, what if I go ahead and paste in that URL here, So in this video, we're going to be looking at a different type of background in CSS. So now that we've covered basic color types, and we've also covered a little bit of background, and using background tracks, we're going to move on to an alternate way of creating backgrounds. And that's through background images. So right now we know the basics of coloring, so we were able to call it a text. Now with our own custom colors using a color picker, we can also go ahead and use our own, you know, backgrounds and things like that with our
03:13:47
own colors. But now what I want to cover is looking at different types of backgrounds themselves. So in this case, we're going to be looking at images. So first of all, when we want to set the background to an image, we can just go ahead and add an RGB color code, we're going to need to go and actually link to an image. So I'm going to show you a really easy way of doing this, the first thing we're going to need is an image. And for this method, you can actually use images with from the internet without having to download them using URLs. So show you how to do that now. So if I go ahead and search for a landscape image, just like this. And now we want to look for a sort of low resolution one, we don't want to do too big, I think this will be pretty good, it's going to look a little bit weird, but just for this purpose, we're going to use it. So now what we need to do
03:14:49
is get the URL link to this image. So you can do this by right clicking on it. And then you're going to go ahead and click on copy image address. Okay, so what this is going to do is get the actual link to the image itself. Right now this link is going to Google Images. But what we actually need is the link to the image itself. So there we go, we have that set up. Now we need to go ahead and add the image to the page. So under here, I'm going to just erase this color code for now. And I'm going to show you how to add our image. So there's this thing in CSS, they're called functions. Now, we're not really going to go very in depth about them. But pretty much what they do is they take a few inputs, they process them, and they give an output. So the first example of a function that we've already used is this right here, it takes three inputs A red, a green, and a blue, does
03:15:50
some magic behind the scenes, and then gives us a color back. So what we're going to do here is use another function called URL. So what this is going to do is take in the link or to the URL, and then it's going to find that image and set it. So in quotations, it doesn't have to be in quotations, just remember that you're going to paste in your image. So remember, I just copied this from the image address. And now we have it here. So we have the image. Let's go ahead and check it out on our website. So there we go. You can see that whoops, you can see that our image is set here. Now there's a few issues, obviously with the repetition and everything, but we're not going to be covering those until maybe in a few videos. Where we talk about some other background properties. But there we go for now, we've actually set our image and now it is set on our website. So when you think of a URL, you're most likely thinking of linking to google images or some sort of web URL. But that's not the only type of URL that we can use a URL is just a link to an
03:16:53
endpoint. This right here is a URL, it's just not linking to a website, it's instead linking to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually going to show you is that we can use these local URLs in here. So I'm going to erase this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh the page. And now you can see that it still works perfectly. Because again, it's linking to an endpoint, it's just not on our website, it's instead stored on our local machine. So there we go, we have that set up now. But there's actually another way that you can set background images. And this goes the same for background colors. So why I like to use the background property is because you can set anything you want in one go. You can set it as a color as an image, and he do many other things. But instead, you can actually use very specific properties that work for specific value. So for example, in this case, we can use background image. And from here, we can go ahead and copy paste the URL, like
03:17:59
that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show you that it still works perfectly fine. So you see I refresh the page, and it's still working. And this goes the same for for background colors, you can go ahead and add a background color, and then add some random RGB value just going to go for a full black for now. And you can see that it still works. The only problem is if I go ahead and paste in that URL here. Oh, what if I go ahead and paste in that URL here, just gonna link to it straight. So if I go ahead and add the URL to the color, it's not going to work, because this is specifically for colors. Alright, so there we go. That's pretty much it. For background images, it's quite easy to use, all you have to do is make sure that you have a working URL, you can just test it by putting it in and seeing the backroads loading properly. And from there, just use your URL function and a suitable property, such as background or background image, and you should be good to go. Alright,
03:18:59
let's move on. So in this video, we're going to be looking at some more background properties. Now we're not going to be looking at all of them. Because most of these aren't really useful. And they're not really used in everyday life. But what I'm going to be doing is showing you the main properties that you can use with backgrounds that can really change how your backgrounds look. So we're actually going to be covering covering only two in this video. So that's background size, and background repeat. So the first thing I want to cover is background repeat, because I think it's the most important. So you can see we have our background there, I already set the height and width, don't worry about these values or the properties or anything. Again, we'll talk about those later in this in this course. But for now, you can see that we have our background here, which is actually inside of a div. So I set the div height and width. And now there's a background here. So I want to mess around with this background and see what I can do. So first of all, you'll notice that we can see here that we have so for example, two or three or four of the same image. And pretty much what's happening is the image is being repeated, so that it can fill up all of the content space. Now this is done by default, because again, all of the values
03:20:00
and pixels and the dimensions are absolute. They're not like other programs where you can just throw a picture on there, and it'll automatically resize. When you're working with web development. It takes those raw dimensions, it just plugs them straight into the website. So that's why we need to do a little bit of styling. So you can see that this image is big enough. And remember, because this is a direct image, what's happening here is we have an image tag, and then the image is just being plugged straight in there. Whereas with here, we don't actually have an image tag, what we have is an empty div, which is just think of it if you don't know what that is think of it as a container. It has a width and height of this much. But then this is an empty box. All we're doing is filling it with this image. So instead of plugging the image straight in, we're just filling an empty
03:21:03
box with these images. And of course, the image isn't big enough to fill it. So what we have to do is or what HTML actually does by default is repeat this. So if you don't want that there is an easy way to fix it. Now it's probably not going to give you the result that you expected. But what you're going to do is go ahead and say background background, dash repeat Pretty much you can either set this to no repeat, which is the default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the default value. But if you want to set it to no repeat, this is pretty much going to remove that repeating property. Now, although it might look like now this image is going to cover the whole thing, watch what happens, you can see that it only takes up that small box. And this might look like it just resized everything. But if I go ahead and add a background color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page, you can see what's actually happening here is that we have the image, and it's not taking
03:22:13
up the full image if I go ahead and set this to repeat. just gonna link to it straight. So if I go ahead and add the URL to the color, it's not going to work, because this is specifically for colors. Alright, so there we go. That's pretty much it. For background images, it's quite easy to use, all you have to do is make sure that you have a working URL, you can just test it by putting it in and seeing the backroads loading properly. And from there, just use your URL function and a suitable property, such as background or background image, and you should be good to go. Alright, let's move on. So in this video, we're going to be looking at some more background properties. Now we're not going to be looking at all of them. Because most of these aren't really
03:23:19
useful. And they're not really used in everyday life. But what I'm going to be doing is showing you the main properties that you can use with backgrounds that can really change how your backgrounds look. So we're actually going to be covering covering only two in this video. So that's background size, and background repeat. So the first thing I want to cover is background repeat, because I think it's the most important. So you can see we have our background there, I already set the height and width, don't worry about these values or the properties or anything. Again, we'll talk about those later in this in this course. But for now, you can see that we have our background here, which is actually inside of a div. So I set the div height and width. And now there's a background here. So I want to mess around with this background and see what I can do. So first of all, you'll notice that we can see here that we have so for example, two or three or four of the same image. And
03:24:20
pretty much what's happening is the image is being repeated, so that it can fill up all of the content space. Now this is done by default, because again, all of the values and pixels and the dimensions are absolute. They're not like other programs where you can just throw a picture on there, and it'll automatically resize. When you're working with web development. It takes those raw dimensions, it just plugs them straight into the website. So that's why we need to do a little bit of styling. So you can see that this image is big enough. And remember, because this is a direct image, what's happening here is we have an image tag, and then the image is just being plugged straight in there. Whereas with here, we don't actually have an image tag, what we have is an empty div, which is just think of it if you don't know what that is think of it as a container. It has a width and height of this much. But then this is an empty box. All we're doing is filling it with this image. So instead of plugging the image straight in, we're just filling an empty
03:25:21
box with these images. And of course, the image isn't big enough to fill it. So what we have to do is or what HTML actually does by default is repeat this. So if you don't want that there is an easy way to fix it. Now it's probably not going to give you the result that you expected. But what you're going to do is go ahead and say background background, dash repeat Pretty much you can either set this to no repeat, which is the default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the default value. But if you want to set it to no repeat, this is pretty much going to remove that repeating property. Now, although it might look like now this image is going to cover the whole thing, watch what happens, you can see that it only takes up that small box. And this might look like it just resized everything. But if I go ahead and add a background color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page,
03:26:23
you can see what's actually happening here is that we have the image, and it's not taking up the full image if I go ahead and set this to repeat. Now the background is taking up the full image. So I'm actually just going to go ahead and set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there we go. Now that we know how to adjust the repet repetition of these backgrounds, why don't we go ahead and actually talk about background size, because that's the important one, that's going to allow us to fill this whole container. So first of all, now that we know the background repeat just changes, if it repeats or not, we need to know how to alter the size, we can do this using a property called background size. So I'm going to go ahead and actually erase this, we don't need it for now, just like that. So you can
03:27:25
actually go ahead and set the size of the background. And remember, depending on whether you set it to repeat or not, this is going to change your effect. So right now, it's still on repeat since we removed that property. But pretty much the way to manipulate this is the first value is going to be the height. So for example, let's say I wanted to take up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can see that because our repeat is actually off. Sorry, our repeat is on, we can see that it just keeps repeating until this whole space is filled up. Now, obviously, it's going to be pretty hard to get this exactly at the dimensions. If I actually go ahead and set this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's still repeating. So it's very hard to get this working in the way that you want it to cover the whole thing exactly, even if you use the direct values. So there's actually a keyword that you can use to fix this up. All you have to do is type cover here. So if I go ahead and refresh, you can see now the image takes up the full width. And although
03:28:29
it sacrifices the quality, pretty much what's happening here is this cover value is going to resize the image based on the dimensions just right to that it fits this whole thing. There's also one more keyword that you can use, which is called contain. But the only problem is with contain is it's going to resize it as much as possible. The only problem is it trying to resize it without messing with the proportions. So let's say that this is maybe a two to one ratio. So for every two widths, there's one height. So let's just use that as an example. Basically, what's happening here is that no matter how much you stretch this, you cannot go the full way without stretching it off the screen. So contain doesn't do that. Instead, it just repeats the image. Now if we actually change this back to cover, you can see that it does cut off part of that image because it just stretches it out the full way until the image color or the background covers the full width. So there you go. That's pretty much it for background size. Now I would recommend going instead
03:29:31
not with the sizing option pixels, but instead using the cover keyword or the contain keyword, if you know that your proportions are right, or if you need it for some other purpose. So yeah, pretty much those are the two main other background properties that you're going to be using. Obviously, there's many more, but they're not as useful. And they don't really make as much of a difference as these two. Alright, let's move on. Now the background is taking up the full image. So I'm actually just going to go ahead and set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there we go. Now that we know how to adjust the repet repetition of these backgrounds, why don't we go ahead and actually talk about background size, because that's the important one, that's going to allow us to fill this whole container. So first of all, now that we know the background repeat just changes, if it repeats or not, we need to know how to alter the size, we can do this using a property called background size. So I'm going
03:30:37
to go ahead and actually erase this, we don't need it for now, just like that. So you can actually go ahead and set the size of the background. And remember, depending on whether you set it to repeat or not, this is going to change your effect. So right now, it's still on repeat since we removed that property. But pretty much the way to manipulate this is the first value is going to be the height. So for example, let's say I wanted to take up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can see that because our repeat is actually off. Sorry, our repeat is on, we can see that it just keeps repeating until this whole space is filled up. Now, obviously, it's going to be pretty hard to get this exactly at the dimensions. If I actually go ahead and set this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's still repeating. So it's very hard to get this working in the way that you want it to cover the whole thing exactly, even if you use the direct values. So there's actually a keyword that you can use to fix this up. All you have to do is type cover here. So
03:31:38
if I go ahead and refresh, you can see now the image takes up the full width. And although it sacrifices the quality, pretty much what's happening here is this cover value is going to resize the image based on the dimensions just right to that it fits this whole thing. There's also one more keyword that you can use, which is called contain. But the only problem is with contain is it's going to resize it as much as possible. The only problem is it trying to resize it without messing with the proportions. So let's say that this is maybe a two to one ratio. So for every two widths, there's one height. So let's just use that as an example. Basically, what's happening here is that no matter how much you stretch this, you cannot go the full way without stretching it off the screen. So contain doesn't do that. Instead, it just repeats the image. Now if we actually change this
03:32:41
back to cover, you can see that it does cut off part of that image because it just stretches it out the full way until the image color or the background covers the full width. So there you go. That's pretty much it for background size. Now I would recommend going instead not with the sizing option pixels, but instead using the cover keyword or the contain keyword, if you know that your proportions are right, or if you need it for some other purpose. So yeah, pretty much those are the two main other background properties that you're going to be using. Obviously, there's many more, but they're not as useful. And they don't really make as much of a difference as these two. Alright, let's move on. So in this video, we're going to be talking a little bit more about RGB colors. But we're actually going to be adding one more feature to this. So right now we've talked about RGB, which is our basic color set. We have a red, a green and a blue. There's actually one more
03:33:41
that we're missing out on the can really improve the quality of our colors. And that's a or alpha. So right now you can see we have an RGB color code. But what if we wanted to add this mysterious alpha component? What will we do? So I'm actually going to go ahead and use it as the background. Well, the first thing you need to do is change the RGB name to RGB a. And in this way, we've completely changed the way the color looks. Now if we go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha value. So all we have to do is after green Sorry, blue, keep getting those two mixed up. After the final value, you're gonna add another comma. And here is where you can put any value between zero and one. So now that you know what you can do with it, alpha is pretty much the transparency or opacity of a color zero, meaning it's completely transparent, you can't see it at all. And one, meaning it's fully visible. Think of this in percentages. For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way, you can really think about opacity in a much easier way. So I'm going to go ahead and actually set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you
03:34:43
can see that the color is still there, it's just a lot lighter. Now, you're probably asking like, why don't you just go and maybe make the color lighter? Well, it's actually much easier to control it this way. And on top of that, if you want things like maybe fading, or you want to maybe change a color fade into a different one, you can't really just change the color every time, because in animation, it's much easier to just change the opacity, reduce it or increase it, then change the color every time. So it's also much easier to use RGB a colors when you're trying to just control the overall look of a color. So usually, when you're using just simply RGB colors, you can only get a certain look. But once you add opacity into the mix, you can completely change the way that it looks. So pretty much here's the takeaway they're supposed to take from this video, you can have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now this a value stands for alpha, or opacity or transparency, whatever you want to call
03:35:48
it, then this value isn't like just from zero to 255. Instead, you have to set a value between zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent. And then one being when it's completely visible. Alright, so that's pretty much it for this RGBA color scheme, it's very easy to use, you don't really need to use a color picker. For that, you can just think about how opaque you want it. And from there, you can set your value. All right, let's move on. So in this video, we're going to be talking a little bit more about RGB colors. But we're actually going to be adding one more feature to this. So right now we've talked about RGB, which is our basic color set. We have a red, a green and a blue. There's actually one more that we're missing out on the can really improve the quality of our colors. And that's a or alpha. So right now you can see we have an RGB color code. But what if we wanted to add this mysterious alpha component? What will we do? So I'm actually going to go ahead and use it as the background. Well, the first thing you need to do is change the RGB name to RGB a. And in this way, we've completely changed the way the color looks. Now if we
03:36:48
go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha value. So all we have to do is after green Sorry, blue, keep getting those two mixed up. After the final value, you're gonna add another comma. And here is where you can put any value between zero and one. So now that you know what you can do with it, alpha is pretty much the transparency or opacity of a color zero, meaning it's completely transparent, you can't see it at all. And one, meaning it's fully visible. Think of this in percentages. For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way, you can really think about opacity in a much easier way. So I'm going to go ahead and actually set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you can see that the color is still there, it's just a lot lighter. Now, you're probably asking like, why don't you just go and maybe make the color lighter? Well, it's actually much easier to control it this way. And on top of that, if you want things like maybe fading,
03:37:52
or you want to maybe change a color fade into a different one, you can't really just change the color every time, because in animation, it's much easier to just change the opacity, reduce it or increase it, then change the color every time. So it's also much easier to use RGB a colors when you're trying to just control the overall look of a color. So usually, when you're using just simply RGB colors, you can only get a certain look. But once you add opacity into the mix, you can completely change the way that it looks. So pretty much here's the takeaway they're supposed to take from this video, you can have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now this a value stands for alpha, or opacity or transparency, whatever you want to call it, then this value isn't like just from zero to 255. Instead, you have to set a value between
03:38:56
zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent. And then one being when it's completely visible. Alright, so that's pretty much it for this RGBA color scheme, it's very easy to use, you don't really need to use a color picker. For that, you can just think about how opaque you want it. And from there, you can set your value. All right, let's move on. So in this video, this is going to be talking about the last feature with using colors. And it's a little bit hard to grasp at first. But once you start using it, you can really get used to it. So we're going to be working with gradients in this video on for now, I'm just going to go ahead and erase this background. And I'm just going to have a single color. So I'm just going to say steel blue. And I'm going to also erase this color property. So
03:39:59
now we have a background of the steel blue color. There we go. So now it's working. So pretty much if you don't know what a gradient is already, it's kind of a transition between two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you know, moves or diffuses from through the colors. So for example, you start just completely red. And then you move up along and as as you go up, it gets more and more blue. So you're sort of mixing between the two colors. So if you've ever done any painting before, you're used, maybe coloring pencils, if you kind of use paint and draw between the two colors, depending on the proportions between them, it's going to make sort of a purple ish, and then it transitions like that. So pretty much that's what's going on here without gradients is we're transitioning between two colors. Now of course, you can do more than two, you can put three, four, you can put as many colors as you want. But pretty much what you have to take away from this is that a gradient is just a transition between a
03:41:03
number of colors. Okay, so now that we know what a gradient is, let's go ahead and get started adding them. So there are actually two types of gradients, radial and linear. So radial gradients are circular, they kind of move outwards from a center. And depending on the percentages or how much you want of each color, it's going to change the way the gradient looks. A linear gradient on the other hand is the one that I described earlier, a smooth red transition to blue, it could go from left to right, top to bottom and even diagonally depending on how we define the direction later in this video when we start creating our gradients, alright, let's get started. So the first thing I want to work with is linear gradients. So the way to do this just with our RGBA or a URL, all we have to do is type linear dash gradient. Just like that. And from here, we can start defining our directions. So if you don't already know about directions already, pretty much there are four different positions top, bottom, left and right. And you can also combine the
03:42:08
two to create corners. So for example, top right would be the top right corner. So first of all, what you're going to want to do is type two. And then you're going to say the name of the direction. So in this case, I'm just going to say two, right. So what this is going to be saying is you want the grid to move to the right side. So it's going to be going this way. Now, there's also another way to do this I'll talk about in just a second. But for now, let's leave it like this. And then after your comma, you're going to add as many colors as you want. So in this case, I'm going to add red, and blue. And remember to separate them also by a comma. Let's go ahead and refresh and see what's happening, you can see that we have a red slowly transitioning into a blue to the right side. So remember, it starts with the first color and moves on. Let's go ahead and add a green in there, and then a steel blue, and then a blue. Now we have four colors that are slowly transitioning,
03:43:11
we have a red, that slowly transition into a green, and then a steel blue, you can sort of see it there and then a blue. And just saying we don't actually have to use these name colors, I just wanted to use them because it looked it was quite easy to look at. So what we can actually do and here's your first use for Opacity is you can go ahead and let's just take a random color here. So to write Remember, this is starting here, we're going to paste in that color. But then we're going to finish it with an RGB a color, So in this video, this is going to be talking about the last feature with using colors. And it's a little bit hard to grasp at first. But once you start using it, you can really get used to it. So we're going to be working with gradients in this video on for now, I'm just going to go ahead and erase this background. And I'm just going to have a single color.
03:44:16
So I'm just going to say steel blue. And I'm going to also erase this color property. So now we have a background of the steel blue color. There we go. So now it's working. So pretty much if you don't know what a gradient is already, it's kind of a transition between two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you know, moves or diffuses from through the colors. So for example, you start just completely red. And then you move up along and as as you go up, it gets more and more blue. So you're sort of mixing between the two colors. So if you've ever done any painting before, you're used, maybe coloring pencils, if you kind of use paint and draw between the two colors, depending on the proportions between them, it's going to make sort of a purple ish, and then it transitions like that. So pretty much that's what's going on here without gradients is we're transitioning between two colors. Now of course, you can do more than
03:45:18
two, you can put three, four, you can put as many colors as you want. But pretty much what you have to take away from this is that a gradient is just a transition between a number of colors. Okay, so now that we know what a gradient is, let's go ahead and get started adding them. So there are actually two types of gradients, radial and linear. So radial gradients are circular, they kind of move outwards from a center. And depending on the percentages or how much you want of each color, it's going to change the way the gradient looks. A linear gradient on the other hand is the one that I described earlier, a smooth red transition to blue, it could go from left to right, top to bottom and even diagonally depending on how we define the direction later in this video when we start creating our gradients, alright, let's get started. So the first thing I want to work with is linear gradients. So the way to do this just with our RGBA or a URL, all we have
03:46:22
to do is type linear dash gradient. Just like that. And from here, we can start defining our directions. So if you don't already know about directions already, pretty much there are four different positions top, bottom, left and right. And you can also combine the two to create corners. So for example, top right would be the top right corner. So first of all, what you're going to want to do is type two. And then you're going to say the name of the direction. So in this case, I'm just going to say two, right. So what this is going to be saying is you want the grid to move to the right side. So it's going to be going this way. Now, there's also another way to do this I'll talk about in just a second. But for now, let's leave it like this. And then after your comma, you're going to add as many colors as you want. So in this case, I'm going to add red, and blue. And remember
03:47:23
to separate them also by a comma. Let's go ahead and refresh and see what's happening, you can see that we have a red slowly transitioning into a blue to the right side. So remember, it starts with the first color and moves on. Let's go ahead and add a green in there, and then a steel blue, and then a blue. Now we have four colors that are slowly transitioning, we have a red, that slowly transition into a green, and then a steel blue, you can sort of see it there and then a blue. And just saying we don't actually have to use these name colors, I just wanted to use them because it looked it was quite easy to look at. So what we can actually do and here's your first use for Opacity is you can go ahead and let's just take a random color here. So to write Remember, this is starting here, we're going
03:48:27
to paste in that color. But then we're going to finish it with an RGB a color, like that. And pretty much what's what's going to happen is this is going to be a slowly fading out color, just like this. So you can see what's happening is we start with a fully functional color, which has a full track or a has no transparency at all. And we slowly slowly make it fade more and more out until we can't see the picture at all, or the color in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty much it for linear gradients. Let's talk about actually making diagonal gradients now. So we know that we can have to write, we can also have to top for example, if you wanted to start from the start from the bottom, just like that. And you can see now it goes up. But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom right corner, what you would do is just type it out like this to bottom right. Now if we refresh the page, you can see that it slowly goes down and fades out just at the bottom right. So there we go. That's pretty much it for positioning. But there's actually another
03:49:27
way to do this, and it's through angles. So if you don't already know how to use angles, then you can pretty much skip this step because it's quite hard to get the use of it. But once you learn how to actually work with angles, and you know how to, you know, move them around things like that, it becomes very easy to work with them. So let's say you wanted them to go in a very specific direction. So for example, you wanted it to end somewhere here. Now, obviously, you can't use words for positioning, because they only work at certain places such as the corners. So if you wanted to do this, you're going to have to go ahead and use angles. So first thing I'm going to do is go ahead and erase this part because we're not using positioning, and then we're going to go ahead and type our angle. So the first thing I'm
03:50:31
going to do is define the place that I wanted to end. So let's say this time I wanted to add on the left here. So what I'm going to do is go ahead and say minus 90, because remember what's happening here is we want it to just flip completely around. So let's say this is our starting angle is zero, and we go all the way down minus 90. So if you don't already know 90 is kind of a quarter turn. And what's going to happen is from here, we can type D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead and refresh the page. You can see that now it goes from right to left. Now this is a pretty bad example considering we can just do this normally, by typing to left. Well, why don't we go ahead and choose something a little bit more specific. So I'm going to go 146 degrees. So just remember that pointing upwards is kind of the starting position.
03:51:33
And then we turn 90 degrees, and then just a little bit over halfway. And I think that's not a very good example. So I'm going to go with 160. Now you can see once I refresh the page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead and add something like maybe 215 or something like that, go ahead and refresh, you can see that they are ending in different places, it's a lot more specific. Now, it's not very obvious with this kind of fading color. But what's happening here is we can directly control where we want our gradient to end. So that's one way of using linear gradients. Now let's go ahead and talk about the next type of gradient, which are radial gradients. So first of all, I'm just going to erase this whole thing here because I don't really need it. Now, radial gradients don't work in the same way that linear ones do instead of having a specified direction. So for example, you want to go from Right to left or from top to bottom, instead, what happens is we can actually define the percentages or proportions of each color
03:52:36
that we want. The next thing I'm going to talk about is actually this background size. So one thing you need to note is that you cannot specify the cover, background size or anything like that for these radial gradients, because they just won't work. So what we're gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our radial gradient. So I'm going to go ahead and type radio dash gradient, like that. And pretty much what's what's going to happen is this is going to be a slowly fading out color, just like this. So you can see what's happening is we start with a fully functional color, which has a full track or a has no transparency at all. And we slowly slowly make it fade more and more out until we can't see the picture at all, or the color in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty much it for linear gradients. Let's talk about actually making diagonal gradients now. So
03:53:39
we know that we can have to write, we can also have to top for example, if you wanted to start from the start from the bottom, just like that. And you can see now it goes up. But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom right corner, what you would do is just type it out like this to bottom right. Now if we refresh the page, you can see that it slowly goes down and fades out just at the bottom right. So there we go. That's pretty much it for positioning. But there's actually another way to do this, and it's through angles. So if you don't already know how to use angles, then you can pretty much skip this step because it's quite hard to get the use of it. But once you learn how to actually work with angles, and you know how to, you know, move them around things like that, it becomes very easy to work with them. So let's say you wanted them to go in a very specific direction. So for example, you wanted it to end somewhere here. Now, obviously, you can't use words for positioning, because they only work at certain places such
03:54:40
as the corners. So if you wanted to do this, you're going to have to go ahead and use angles. So first thing I'm going to do is go ahead and erase this part because we're not using positioning, and then we're going to go ahead and type our angle. So the first thing I'm going to do is define the place that I wanted to end. So let's say this time I wanted to add on the left here. So what I'm going to do is go ahead and say minus 90, because remember what's happening here is we want it to just flip completely around. So let's say this is our starting angle is zero, and we go all the way down minus 90. So if you don't already know 90 is kind of a quarter turn. And what's going to happen is from here, we can type D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead and refresh the page. You can see that now it goes from right to left. Now this is a
03:55:40
pretty bad example considering we can just do this normally, by typing to left. Well, why don't we go ahead and choose something a little bit more specific. So I'm going to go 146 degrees. So just remember that pointing upwards is kind of the starting position. And then we turn 90 degrees, and then just a little bit over halfway. And I think that's not a very good example. So I'm going to go with 160. Now you can see once I refresh the page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead and add something like maybe 215 or something like that, go ahead and refresh, you can see that they are ending in different places, it's a lot more specific. Now, it's not very obvious with this kind of fading color. But what's happening here is we can directly control where we want our gradient to end. So that's one way of using linear gradients. Now let's go ahead and talk about the next type of gradient, which are radial gradients. So first of all, I'm just going to erase this whole thing here because I don't really need it. Now, radial
03:56:43
gradients don't work in the same way that linear ones do instead of having a specified direction. So for example, you want to go from Right to left or from top to bottom, instead, what happens is we can actually define the percentages or proportions of each color that we want. The next thing I'm going to talk about is actually this background size. So one thing you need to note is that you cannot specify the cover, background size or anything like that for these radial gradients, because they just won't work. So what we're gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our radial gradient. So I'm going to go ahead and type radio dash gradient, just like that. And now what we can do is specify a certain amount of colors. So for example, I'm just going to start out with red and blue. Now if we refresh the page, you can see it starts off red, and ends and blue. But we can actually add more than two colors, just like with our, our linear gradient there, what we can actually do is go ahead and type in let's For example, let's just say green as an example. Now if we refresh the page, you can see that we've added a third color. Now, if we wanted to change the proportions,
03:57:47
so for example, let's pretend that this blue is taking up too much space, we don't want that much, we can actually specify how much we want of each. So let's change the proportions, what we can do is go ahead and add percentages. So what I'm going to do first is go and specify what I want here. Now one thing to note is that these have to be in order, you have to have the minimum percentage, or the smallest percentage at the start, and then the largest at the finish. So I'm going to go ahead and start off with something small, like 20%, then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead and refresh the page, you can see that there is a lot more green and a lot less blue, and red. So the final thing I want to cover for radial gradients is the shape. Now you can actually specify the shape that you want. Now right now I have an ellipse or sort of oval shape,
03:58:50
we can actually change it, all we have to do is type the name of the shape. Now there are two values, you can put here ellipse, which is the default, and circle, I'm going to go ahead and type circle. Now if I go ahead and refresh, you can see that this is in a much more circular shape, rather than the previous oval. And although it's not a perfect circle, obviously, our proportions aren't going to change what it looks like. Alright, so that's pretty much it for gradients. There's quite a lot to learn about these. And there's a lot more features that you can cover. But for now, I think this is great. Now what I'm going to do is go ahead and just create another gradient, another linear gradient right under this one, just so you can see what it looks like. So for example, I'm going to go ahead, and maybe let's just go for the body background for now, I'm going to go ahead and actually add a linear gradient gradient here. And I'm going to say, let's just say to bottom, because
03:59:56
again, we wanted this kind of stretch from top to bottom. So now what we're going to do is start off very strong. So we're going to have our main RGBA color, or RGB, whoops, our main color here. So I'm going to copy this. So this is going to be a fully, fully visible color, starting from the top, and then we're going to end with a much less visible color. So there you go. Now let's go ahead and refresh the page. And you can see that maybe there's a little bit of an error there. Oh, yeah, forgot to spell it. There we go. Now we can go ahead and refresh. And you can see it's still not working so much errors, you're probably Yep, forgot the got the parentheses there. Just make sure that you're doing this, right, because sometimes you can make some silly errors. So for example, if you look here, we were actually we were missing a bracket. So now if we go ahead and refresh, there we
04:00:59
go. It's a lot better now. So we start off with a nice, fully visible color, and we end off with a less visible color. Alright, so there we go. That's pretty much it for gradients, you can go ahead and download this file from the project, you can go ahead and look at how everything works here, mess around with it, see what you can do, because there is a lot to gradients and although they're not used everyday, they're still very useful tools, and they can really help you out in your web development careers. Alright, let's move on. just like that. And now what we can do is specify a certain amount of colors. So for example, I'm just going to start out with red and blue. Now if we refresh the page, you can see it starts off red, and ends and blue. But we can actually add more than two colors, just like with our, our linear gradient there, what we can actually do is go ahead and type in let's For example, let's just say green as an example. Now if we refresh the page, you can see that we've added a third color. Now, if we wanted to change the proportions,
04:02:02
so for example, let's pretend that this blue is taking up too much space, we don't want that much, we can actually specify how much we want of each. So let's change the proportions, what we can do is go ahead and add percentages. So what I'm going to do first is go and specify what I want here. Now one thing to note is that these have to be in order, you have to have the minimum percentage, or the smallest percentage at the start, and then the largest at the finish. So I'm going to go ahead and start off with something small, like 20%, then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead and refresh the page, you can see that there is a lot more green and a lot less blue, and
04:03:04
red. So the final thing I want to cover for radial gradients is the shape. Now you can actually specify the shape that you want. Now right now I have an ellipse or sort of oval shape, we can actually change it, all we have to do is type the name of the shape. Now there are two values, you can put here ellipse, which is the default, and circle, I'm going to go ahead and type circle. Now if I go ahead and refresh, you can see that this is in a much more circular shape, rather than the previous oval. And although it's not a perfect circle, obviously, our proportions aren't going to change what it looks like. Alright, so that's pretty much it for gradients. There's quite a lot to learn about these. And there's a lot more features that you can cover. But for now, I think this is great.
04:04:08
Now what I'm going to do is go ahead and just create another gradient, another linear gradient right under this one, just so you can see what it looks like. So for example, I'm going to go ahead, and maybe let's just go for the body background for now, I'm going to go ahead and actually add a linear gradient gradient here. And I'm going to say, let's just say to bottom, because again, we wanted this kind of stretch from top to bottom. So now what we're going to do is start off very strong. So we're going to have our main RGBA color, or RGB, whoops, our main color here. So I'm going to copy this. So this is going to be a fully, fully visible color, starting from the top, and then we're going to end with a much less visible color. So there you go. Now let's go ahead and refresh the page. And you can see that maybe there's a little bit of an error there. Oh, yeah, forgot to spell it. There we go. Now we can go ahead and refresh. And you can see it's still not working so
04:05:11
much errors, you're probably Yep, forgot the got the parentheses there. Just make sure that you're doing this, right, because sometimes you can make some silly errors. So for example, if you look here, we were actually we were missing a bracket. So now if we go ahead and refresh, there we go. It's a lot better now. So we start off with a nice, fully visible color, and we end off with a less visible color. Alright, so there we go. That's pretty much it for gradients, you can go ahead and download this file from the project, you can go ahead and look at how everything works here, mess around with it, see what you can do, because there is a lot to gradients and although they're not used everyday, they're still very useful tools, and they can really help you out in your web development careers. Alright, let's move on. So in this video, we're going to be talking about some of the different types of units in CSS. So so far, we've been working with some basic coloring techniques, we've learned about selectors, and then different properties. And then we've learned about some of these different values, but we haven't actually learned what all of these different things mean this this PX this percentage, and we don't actually know how they work. So what
04:06:13
I'm going to be doing today is talking about some of the different types of units and how you can identify which one to use. So first thing I want to talk about is the difference between the two types of units which are absolute units, and rarely have units. So firstly, we have to talk about some of the units we've already been using, for example, pixels. Now pixels is a little bit special, I'll explain you. I'll explain it to you in just a second. But pretty much the commonly used absolute units are things like centimeters, millimeters and inches, which are absolute, they it's not dependent on anything else. If you set it as one inch, it's going to be one inch long, no matter if you're doing it on a phone, or an ultra wide TV. So that's what absolute units are, they aren't affected by anything around them. The second group are relative units. And these are a little bit different. Relative units are usually dependent on something. So for example, our percentage unit here is dependent on the parent elements while unit. So for example, if this service image here or here, has a width of 70%, that means that the parent element of this service image or this service image right here, which in this case is our body, take 70% of its width of
04:07:16
its total width. So the whole way through of the body is 100%. And 70% is going to be somewhere around here, because that's what we set it as now notice that when I start resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't work because I haven't refreshed the page. But you can see, no matter how small I make it, it's only going to take up 70% of the total body width. So this is really good for something like a responsive design. Because what happens is when you're using absolute units in a responsive design, let's say you set this width as 200 pixels on a phone, it's going to appear very large, whereas on an ultra wide TV, it's going to appear too small. So using something like percentages would be very useful, because then you could resize your window here, however you like it and still have that look that you want. So that's pretty much it for percentages. But there's also a lot of different relative values that we can use. And I'm going to go through all of these in just a second. But the first thing
04:08:17
I want to talk about is this special unit, which is pixels. Now pixels is a little bit different. Now, although it is considered an absolute unit, it is actually relatively scale based on what device you're on. So if you don't already know your screen right now that you're watching this video on is made up of a bunch of little tiny pixels. Now there's this concept in computing, it's called DPI, it's pretty much used to calculate the resolution of your screen. And depending on the number of pixels you have, the resolution is going to change. So on low DPI, tablets or things like that, anything that has a very low resolution. So for example, if you're on YouTube, and you've changed your resolution to four ADP, what's going to happen is then the video is going to sort of adjust how many pixels are in that video. Now, I'm not going to get too deep into how pixels are changed and things like that. But pretty much what happens is on high resolution devices, these pixels aren't going to appear the same as on low resolution devices, because obviously, this is taking up only 400 pixels of height. And if you have an ultra high display a very high definition
04:09:17
TV 400 pixels is only going to be about half of what it is here. So what actually happens in this is on these high DPI displays, each pixel in this unit is actually taking up multiple pixels relative to the resolution of the display. So for example, on a TV, every pixel, according to this height would actually take up something like four pixels. So this is to give it that absolute illusion. Now although it is in theory, or at its core relative, when you're when you're actually using it, it is an absolute value. So that's just one thing you need to keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like that. But we're not focusing on that. For now, we're just focusing on how we can use different values for different things. So let's go ahead and cover some of the different units that we can use for absolute unit. So the easiest way to do this is through changing
04:10:18
the size of the text. Now again, we're going to cover this much later in this section. So don't worry about that too much. So the first one we can use is centimeters. So I can see the font size is two centimeters. Now, if I refresh the page, you can see that it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you would get two centimeters. There's also many more such as millimeters and inches and pretty much everything in between. So you can see that's also a lot smaller. So we have our standard pixels here, but there's actually a few more that we can use. Now they're not very they're not used that commonly so I'm not really going to go over them that much. But there Is he there, there are some other units that you can use instead of pixels that kind of follow that same formula. So there is something called PT, which are points, and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can see that that actually gets a little bit taller. Go ahead and change that back to pixels, you can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar
04:11:25
to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it is. So there we go. That's just a little bit of some of the other absolute values. Now let's cover relative values. So the first one, the first one that we actually already covered was percentage. So we already looked at, you know, our percent symbol over here, which pretty much takes up, again, a certain size or whatever value of its parent element. But there's actually many more that I want to cover. The first one I'm going to look at is E M. So pretty much what if what I do here is it's going to represent the size relative to the current standard font size. So let's just pretend that we know that this font size
04:12:28
is value, let's just call it F, what's going to happen is if we set the body font size to two, em, you're going to double everything or double it based on F, which is our font size. So if I set to em here, just like that, and go ahead and refresh the page, you can see that all of the text is double the standard font size. So again, this is completely relative to the standard font size. So I'm actually going to go ahead and erase this here and start using style tags. Instead, I feel like it's just going to be a lot easier to you know, move around and easy, easily move that around. So now we've covered percent an EM so those are the two main types of relative units. But there's actually two more that I want to cover, which is view width and view height. So in web design, and in development, in general, there's this thing called the viewport, which is pretty much the dimensions of whatever you're viewing it on. So in this case, our viewport would be the bodies width,
04:13:30
and then the bodies height. So VW and VH, view, view width and view height actually allow you to work with So in this video, we're going to be talking about some of the different types of units in CSS. So so far, we've been working with some basic coloring techniques, we've learned about selectors, and then different properties. And then we've learned about some of these different values, but we haven't actually learned what all of these different things mean this this PX this percentage, and we don't actually know how they work. So what I'm going to be doing today is talking about some of the different types of units and how you can identify which one to use. So first thing I want to talk about is the difference between the two types of units which are absolute units, and rarely have units. So firstly, we have to talk about some of the units we've already been using, for example, pixels. Now pixels is a little bit special, I'll explain you. I'll explain it to you in just a second. But pretty much the commonly used absolute units are things like centimeters, millimeters and inches, which are absolute, they it's not dependent on anything else. If you set it as one inch, it's going to be one inch long, no matter if you're doing it on a phone,
04:14:31
or an ultra wide TV. So that's what absolute units are, they aren't affected by anything around them. The second group are relative units. And these are a little bit different. Relative units are usually dependent on something. So for example, our percentage unit here is dependent on the parent elements while unit. So for example, if this service image here or here, has a width of 70%, that means that the parent element of this service image or this service image right here, which in this case is our body, take 70% of its width of its total width. So the whole way through of the body is 100%. And 70% is going to be somewhere around here, because that's what we set it as now notice that when I start resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't work because I haven't refreshed the page. But you can see, no matter how small I make it, it's only going to take up 70% of the total body width. So this is really good for
04:15:39
something like a responsive design. Because what happens is when you're using absolute units in a responsive design, let's say you set this width as 200 pixels on a phone, it's going to appear very large, whereas on an ultra wide TV, it's going to appear too small. So using something like percentages would be very useful, because then you could resize your window here, however you like it and still have that look that you want. So that's pretty much it for percentages. But there's also a lot of different relative values that we can use. And I'm going to go through all of these in just a second. But the first thing I want to talk about is this special unit, which is pixels. Now pixels is a little bit different. Now, although it is considered an absolute unit, it is actually relatively scale based on what device you're on. So if you don't already know your screen right now that you're watching this video on is made up of a bunch of little tiny pixels. Now there's this concept in computing, it's called DPI, it's pretty much used to calculate the resolution of your screen. And depending on the number of pixels you have, the resolution is going to change. So on low DPI, tablets or things like that, anything that has a very low resolution.
04:16:42
So for example, if you're on YouTube, and you've changed your resolution to four ADP, what's going to happen is then the video is going to sort of adjust how many pixels are in that video. Now, I'm not going to get too deep into how pixels are changed and things like that. But pretty much what happens is on high resolution devices, these pixels aren't going to appear the same as on low resolution devices, because obviously, this is taking up only 400 pixels of height. And if you have an ultra high display a very high definition TV 400 pixels is only going to be about half of what it is here. So what actually happens in this is on these high DPI displays, each pixel in this unit is actually taking up multiple pixels relative to the resolution of the display. So for example, on a TV, every pixel, according to this height would actually take up something like four pixels. So this is to give it that absolute illusion. Now although it is in theory, or at its core relative, when you're when you're actually using it, it is an absolute value. So that's just one thing you need to keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like that. But we're not focusing on that. For now, we're just focusing on how we can use
04:17:43
different values for different things. So let's go ahead and cover some of the different units that we can use for absolute unit. So the easiest way to do this is through changing the size of the text. Now again, we're going to cover this much later in this section. So don't worry about that too much. So the first one we can use is centimeters. So I can see the font size is two centimeters. Now, if I refresh the page, you can see that it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you would get two centimeters. There's also many more such as millimeters and inches and pretty much everything in between. So you can see that's also a lot smaller. So we have our standard pixels here, but there's actually a few more that we can use. Now they're not very they're not used that commonly so I'm not really going to go over them that much. But there Is he there, there are some other units that you can use instead of pixels that kind of follow that same formula. So there is something called PT, which are points, and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can see that that actually gets a little bit taller. Go ahead and change that back to pixels, you
04:18:43
can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it is. So there we go. That's just a little bit of some of the other absolute values. Now let's cover relative values. So the first one, the first one that we actually already covered was percentage. So we already looked at, you know, our percent symbol over here, which pretty much takes up, again, a certain size or whatever value of its parent element. But there's actually many more that I want to cover. The first one I'm going to look at is E M. So pretty much what if what I do here is it's going to represent the size relative to the current standard font size. So let's just pretend that we know that this font size is value, let's just call it F, what's going to happen is if we set the body font size to two, em, you're going to double everything or double it based on F, which is our font size. So if I set to em here, just like that, and go ahead and refresh the page, you can
04:19:48
see that all of the text is double the standard font size. So again, this is completely relative to the standard font size. So I'm actually going to go ahead and erase this here and start using style tags. Instead, I feel like it's just going to be a lot easier to you know, move around and easy, easily move that around. So now we've covered percent an EM so those are the two main types of relative units. But there's actually two more that I want to cover, which is view width and view height. So in web design, and in development, in general, there's this thing called the viewport, which is pretty much the dimensions of whatever you're viewing it on. So in this case, our viewport would be the bodies width, and then the bodies height. So VW and VH, view, view width and view height actually allow you to work with work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total body width or body height. So remember, this isn't based on the parent element, this is
04:20:52
based on the total viewport, this could be the HTML document the body tag, it depends on what you're viewing it on. So for example, if I go ahead and change the width here to 70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously, if I go ahead and refresh the page, you can see it gets just a little bit bigger because there's actually a viewport itself is bigger than the body tag, which is the parent element. Now we'll talk about that later in the course, because it's quite advanced. But what you can see here is that right here, it doesn't actually affect it because the body is almost completely equivalent to the viewport. But for example, if we wanted to set the font size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would actually look completely different from 70 v w, which is 70% of the total viewport. So
04:21:52
that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't have to be completely set in stone. So if I actually wanted to say VH. So 400 times 1% of the view height, what would happen here is that this image would become four times the total height of the viewport. So that's just also one thing to keep in mind. So I'm going to go ahead and change this back to pixels. We'll just keep that with the same because it doesn't really make that much of an impact. Okay, so there we go. Those are some of the different units in CSS, I've actually attached a little reference sheet that you can use, you can refer to, to this to this lecture, you can go ahead click on it. And if you want to revise any of these you can, but just a fair warning, you're not really going to be using a lot of these units, the main ones you're going to use, you're most likely pixels and percent. But for some cases, you're going to want to use some other units.
04:22:57
So although absolute units are still useful in some cases, so for example, if you want a very specific dimensions or viewport on your screen, so for example, if you only want users to access something on the phone, then or a very specific phone, then you can go ahead and use pixels because it's going to look the same no matter what phone people use, because it's all going to be the same. The only problem is is when people start using different devices using absolute values are going to look very different based on On what device you're using. And that's why you should kind of stick to using these, these relative units instead of using things like pixels, centimeters and millimeters. So things like em percent view width and view height would be very, very useful, because then you can scale it based on whatever device you want. So for example, it's going to look the same, or at least this width, whether you're using it on a phone, or a desktop computer, because again, it takes up 70% of the width no matter what it is. So that's just some of the basics about some of these units. Now, like I said, you don't need to know these by heart, you
04:23:57
can just go ahead and keep them at the back of your head. And once we start using them and start using them in our, you know, font layout, things like that, we'll actually start using these units a lot more, and they will make a lot more sense. So this is just a quick introduction to these units and why we should use them. And you're not supposed to be going ahead and you know, completely mastering every single one by now. Alright, let's move on. work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total body width or body height. So remember, this isn't based on the parent element, this is based on the total viewport, this could be the HTML document the body tag, it depends on what you're viewing it on. So for example, if I go ahead and change the width here to 70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously, if I go ahead and refresh the page, you can see it gets just a little bit bigger because there's actually a viewport itself is bigger than the body tag, which is the parent element.
04:25:02
Now we'll talk about that later in the course, because it's quite advanced. But what you can see here is that right here, it doesn't actually affect it because the body is almost completely equivalent to the viewport. But for example, if we wanted to set the font size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would actually look completely different from 70 v w, which is 70% of the total viewport. So that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't have to be completely set in stone. So if I actually wanted to say VH. So 400 times 1% of the view height, what would happen here is that this image would become four times the total height of the viewport. So that's just also one thing to keep in mind. So I'm going to go ahead and change this back to pixels. We'll just keep that with the same because it doesn't really make that much of an impact. Okay, so there we go. Those are
04:26:04
some of the different units in CSS, I've actually attached a little reference sheet that you can use, you can refer to, to this to this lecture, you can go ahead click on it. And if you want to revise any of these you can, but just a fair warning, you're not really going to be using a lot of these units, the main ones you're going to use, you're most likely pixels and percent. But for some cases, you're going to want to use some other units. So although absolute units are still useful in some cases, so for example, if you want a very specific dimensions or viewport on your screen, so for example, if you only want users to access something on the phone, then or a very specific phone, then you can go ahead and use pixels because it's going to look the same no matter what phone people use, because it's all going to be the same. The only problem is is when people start using
04:27:05
different devices using absolute values are going to look very different based on On what device you're using. And that's why you should kind of stick to using these, these relative units instead of using things like pixels, centimeters and millimeters. So things like em percent view width and view height would be very, very useful, because then you can scale it based on whatever device you want. So for example, it's going to look the same, or at least this width, whether you're using it on a phone, or a desktop computer, because again, it takes up 70% of the width no matter what it is. So that's just some of the basics about some of these units. Now, like I said, you don't need to know these by heart, you can just go ahead and keep them at the back of your head. And once we start using them and start using them in our, you know, font layout, things like that, we'll actually start using these units a lot more, and they will make a lot more sense. So this is just a quick
04:28:09
introduction to these units and why we should use them. And you're not supposed to be going ahead and you know, completely mastering every single one by now. Alright, let's move on. So the next few videos are going to be focused on font and text manipulation. So we're going to be working with actually changing how this text looks. First thing I want to talk about is there's actually two parts to this section, text manipulation and font manipulation. And although they sound like the same thing, they're actually very different. So the first part in this video, we're going to be covering text manipulation. Now, there's not that much to look at. But pretty much the difference between the two is that text manipulation is looking at things that you can change no matter the font. So for example, something like sizing would not apply, because the size is going to be based obviously on the font itself. So basically, things like underlining or capitalization are going to be completely regardless of the font, you can change them no matter what they do. But things like bolding
04:29:10
and things like size, bolding, things like that, they are completely dependent on the font, because again, the font decides how it how the font itself is going to look. So it decides the size, the bolding, and just the overall style. So the first part in this video, we're going to be covering text manipulation. And in the next few videos, we're going to be looking at actual font manipulation. So things like external fonts, which is probably the most exciting part of this course, and things like weight and bolding. Alright, let's get started. So the first two things I want to cover are text decoration and text transform. So these are properties that are going to be relating to the style of the text. Now I know I just said that fonts. And mostly styling is dependent on the font. But in this case, these these properties don't actually rely on the font at all. So let's get started.
04:30:11
So the first thing I'm going to talk about is text decoration. So although it sounds like you can do a bunch of cool things with this, the only real thing that you can do is change the lining of the text. So we're going to go ahead and work with this anchor tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually, we can just go ahead and select it. So I'm going to go dot link, like that. And now what I can actually do is change the lining of this right here. So by default, anchor tags have a text decoration of underline, there's actually three more properties that we can use. So that the property to use it, it's called text dash decoration, it's pretty obvious. Now the first one I'm going to look at is none. So this completely removes the line from our links, they're completely gone, you don't have them anymore. The next one, which is the one by default is underlined, like that. So that's our normal link, then you have line through which is line dash through. And it's pretty obvious what that does just
04:31:15
put the line straight through. And then of course, there's the overlying which is the line on the top. So there we go. Now we have a line on the top. Now, although you won't see the the two that we just showed line through and overlap very commonly, it is very common to see underline and text decoration none applied. Because sometimes I'm sure you've seen this in websites all over the place, you can hover over links, and they may be changed color. Again, we'll be learning how to do that in this course. But you know, they might change color and do all sorts of things, but you usually don't see them with an underline. So that's where this property comes into play. So I'm just going to change this back to underline, just to make things a little interesting. Next thing I'm going to do is go ahead and cover the next property, which in this case is text transform. So you can see that we have a bunch of text here. And let's say maybe we're working as a freelancer and our client wants us to capitalize all of our text. How are we going to do that? Now obviously, we're not going to go through and capitalize every single individual word that's going to basically be suicide. Although it is possible, it could take a lot of time. So the easiest way to
04:32:16
do it is using the text transform property. So I'm just going to go ahead and do this on the whole body. For now, the property to this is text dash transform, pretty easy to memorize, or learn these because they don't really require any weird memorization tactics. So now what you can do is go ahead and add our value. So there are three different values that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every single word is capitalized without us having having to actually change the text. You can also go ahead and use the other two, which are lowercase and uppercase. So the next few videos are going to be focused on font and text manipulation. So we're going to be working with actually changing how this text looks. First thing I want to talk about is there's actually two parts to this section, text manipulation and font manipulation. And although they sound like the same thing, they're actually very different. So the first part in this video, we're going to be covering text manipulation. Now, there's not that much
04:33:17
to look at. But pretty much the difference between the two is that text manipulation is looking at things that you can change no matter the font. So for example, something like sizing would not apply, because the size is going to be based obviously on the font itself. So basically, things like underlining or capitalization are going to be completely regardless of the font, you can change them no matter what they do. But things like bolding and things like size, bolding, things like that, they are completely dependent on the font, because again, the font decides how it how the font itself is going to look. So it decides the size, the bolding, and just the overall style. So the first part in this video, we're going to be covering text manipulation. And in the next few videos, we're going to be looking at actual font manipulation. So things like external fonts, which is probably the most exciting part of this course, and things like weight and bolding. Alright, let's get started. So the first two things I want to cover are text decoration and text transform. So these are properties that are going to be relating to the style of the text. Now I know I just said that fonts. And mostly styling is dependent on the font. But in this case, these these properties don't actually rely on the font at all. So let's get started.
04:34:21
So the first thing I'm going to talk about is text decoration. So although it sounds like you can do a bunch of cool things with this, the only real thing that you can do is change the lining of the text. So we're going to go ahead and work with this anchor tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually, we can just go ahead and select it. So I'm going to go dot link, like that. And now what I can actually do is change the lining of this right here. So by default, anchor tags have a text decoration of underline, there's actually three more properties that we can use. So that the property to use it, it's called text dash decoration, it's pretty obvious. Now the first one I'm going to look at is none. So this completely removes the line from our links, they're completely gone, you don't have them anymore. The next one, which
04:35:25
is the one by default is underlined, like that. So that's our normal link, then you have line through which is line dash through. And it's pretty obvious what that does just put the line straight through. And then of course, there's the overlying which is the line on the top. So there we go. Now we have a line on the top. Now, although you won't see the the two that we just showed line through and overlap very commonly, it is very common to see underline and text decoration none applied. Because sometimes I'm sure you've seen this in websites all over the place, you can hover over links, and they may be changed color. Again, we'll be learning how to do that in this course. But you know, they might change color and do all sorts of things, but you usually don't see them with an underline. So that's where this property comes into play. So I'm just going to change this back to underline, just to make things a little interesting. Next thing I'm going to do is go ahead and
04:36:27
cover the next property, which in this case is text transform. So you can see that we have a bunch of text here. And let's say maybe we're working as a freelancer and our client wants us to capitalize all of our text. How are we going to do that? Now obviously, we're not going to go through and capitalize every single individual word that's going to basically be suicide. Although it is possible, it could take a lot of time. So the easiest way to do it is using the text transform property. So I'm just going to go ahead and do this on the whole body. For now, the property to this is text dash transform, pretty easy to memorize, or learn these because they don't really require any weird memorization tactics. So now what you can do is go ahead and add our value. So there are three different values that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every single word is capitalized without us having having to actually change the text. You can
04:37:28
also go ahead and use the other two, which are lowercase and uppercase. And that will obviously put everything in uppercase for you. But now you're starting to see a little bit about why these are text manipulation and not font manipulation. Again, it doesn't matter what font you're using, whether you're using some weird symbol font, or Times New Roman, you can always use these to capitalize it, no matter what the font is. On top of that, you can also move around these lines, it's not dependent on the font at all. So that's just a little bit about our text manipulation properties. So the next feature I want to cover is text align. So this is a little bit different from the other two that we've covered. Because it's not really focused on the styling or decoration of our text. Instead, it's going to be focused on the justification or alignment of it. So if you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like that, you'll know that you can justify your text and align it to your site. So there are four main ones that are included in CSS left, right, center and justify. So I'm going to
04:38:31
breeze through the quick the first three ones, because it's quite easy to use. But then the last one I'm going to talk about a little bit in more detail. So in order to achieve this, you can go ahead and add text align property. And here, I'm just going to go center as an example. And you can see that now everything is aligned. So the list items are a little bit weird, they don't actually move the decoration to the center, when you align it to the center, but other than that all of the text is now aligned to the center. So now let's talk about justify. Now we're not going to go through left and right, because we already know that but what justify actually does, I'm just gonna show you here is pretty much it takes all of the text, and it kind of matches it. So it's all fit in the same way, if you if it
04:39:32
makes sense. So although it might not fit everything, the same length, what happens is all of this text is now stretched out as far as possible. So although you might not be able to see a direct difference, let's just look at this paragraph here, we're going to just end off this property without changing it, you can see that without the justify alignment, all of these are different. So what actually what the justify actually does is it sets all of the lines to the same length. So I'm going to go ahead and add that justify back. So you can see this used a lot in research papers, and, you know, academic papers, essays, things like that. This justification is used a lot. And although it's not very, it's not really used very commonly, it's still a very good feature if you have big bodies of text, if you're trying to you know, make everything look very streamlined. Alright, there we go. So those are the four or sorry, three different types of text manipulation properties that you can use, and along with their respective value. So I encourage you to go ahead and try this out on your own, you can do a lot of things with these three values alone, you can really change how the page looks. Alright, let's move on.
04:40:35
And that will obviously put everything in uppercase for you. But now you're starting to see a little bit about why these are text manipulation and not font manipulation. Again, it doesn't matter what font you're using, whether you're using some weird symbol font, or Times New Roman, you can always use these to capitalize it, no matter what the font is. On top of that, you can also move around these lines, it's not dependent on the font at all. So that's just a little bit about our text manipulation properties. So the next feature I want to cover is text align. So this is a little bit different from the other two that we've covered. Because it's not really focused on the styling or decoration of our text. Instead, it's going to be focused on the justification or alignment of it. So if you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like that, you'll know that you can justify your text and align it to your site. So there are
04:41:38
four main ones that are included in CSS left, right, center and justify. So I'm going to breeze through the quick the first three ones, because it's quite easy to use. But then the last one I'm going to talk about a little bit in more detail. So in order to achieve this, you can go ahead and add text align property. And here, I'm just going to go center as an example. And you can see that now everything is aligned. So the list items are a little bit weird, they don't actually move the decoration to the center, when you align it to the center, but other than that all of the text is now aligned to the center. So now let's talk about justify. Now we're not going to go through left and right, because we already know that but what justify actually does, I'm just gonna show you here is pretty much it takes all of the text, and it kind of matches it. So it's all fit in the same way, if you if it makes sense. So although it might not fit everything, the same length, what happens is all of this text is now stretched out as far as possible. So although you might not be able to see a direct difference, let's just look at this paragraph here, we're going
04:42:41
to just end off this property without changing it, you can see that without the justify alignment, all of these are different. So what actually what the justify actually does is it sets all of the lines to the same length. So I'm going to go ahead and add that justify back. So you can see this used a lot in research papers, and, you know, academic papers, essays, things like that. This justification is used a lot. And although it's not very, it's not really used very commonly, it's still a very good feature if you have big bodies of text, if you're trying to you know, make everything look very streamlined. Alright, there we go. So those are the four or sorry, three different types of text manipulation properties that you can use, and along with their respective value. So I encourage you to go ahead and try this out on your own, you can do a lot of things with these three values alone, you can really change how the page looks. Alright, let's move on.
04:43:41
So in this video, we're going to be talking about the other half of overall text manipulation. And in this case, we're going to be looking at different font properties. So in this video, we're going to be looking at three font size, font weight and font style. So first thing I want to look at is font size. So right now we have our pretty standard text here, right. So I'm just actually going to go ahead and erase our text transform from our previous video. So now we have our text here. And what I want to do is change the size of this. The only problem is I want to use a responsive design. So what I'm going to do is go ahead and first use our font size property. And then I'm going to go ahead and say let's just say 1.25 em. So what happens here is make this 25% more than the standard font size. Now you can see it's a little bit bigger, but it's not as big as doing something like two n. So there we go. Now that we've done that, we can also go ahead and actually use pixel values, if we wanted to 40 pixels for example, the only problem is this is going to set everything consistently. So you can see all of the sizes are the same, it doesn't
04:44:47
matter if they're a header, or while it does actually matter. But because in the CSS defined code, all of these headers actually have to em but if we actually removed all of these, they would be the same. So using something like two e n, would be great, because what actually happens is now everything stays consistent. And it's also a relative unit. So that's always good, because it stays responsive. So there we go. That's pretty much it for font size, I'm going to go ahead and actually change this to one point 15 am, I think that's good. So there we go. That's the first one. Now let's go ahead and talk about font weight. So this is a little bit more complicated. So pretty much what font weight decides is the bolding of a text or a font. So the values for this can range from zero, which is nothing all the way to? Well, pretty much infinity. The only problem is, most fonts only support up to 800, or 900. Because, again, for each value, there is a different bolding stage.
04:45:50
So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher. But in theory, you can make these values as big as you want. The only problem is, it's not really going to show any change if you make them very big. So there we go. That's pretty much it for font weight, let's go ahead and start adding it to our website. So let's say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start with zero and see what happens, you can see that nothing actually happens. But pretty much like I said before, most fonts only support certain values. So for example, 100 would be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font supports. Now usually, the convention for this is you're supposed to go up in hundreds
04:46:51
from 100. That's kind of like the minimum supported font size. So if I go ahead and set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which is usually the highest that you should go realistically, this is kind of the standard for each one. So there you go, you can set it to something like 600, which isn't very commonly seen, like I said, fonts only support certain bolded ness, if that makes sense. But you can go ahead and play around with this. And like I said, depending on the font, it's going to change what the text actually looks like. So there we go. That's pretty much it for font weight, I'm going to go ahead and actually just set this to 400, which is the standard font right there. So 400 is the normal, it's like normal bolding, no bolding and don't make it very thin. So that's kind of what it's the normal range. So there we go. That's it for font weight. Now let's go ahead and look at font style. So just like
04:47:54
font sizes for size and font weight is for bolding font style is for italic sizing. So I'm going to go ahead and actually italicize a small piece of text here. So let's just go ahead into this. And I'm going to take this first part, and actually just cut it out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's an inline day. It's an inline container tag, which allows you to contain a certain pieces of text without you know disrupting the flow or moving them on to their own line. So I'm going to give it a class, I'm just going to say italics, I guess that would work. So then I'm going to go ahead and use the class selector italics. Open this up. Now we're going to go ahead and start working on adding our italicizing. So what you can do for this is called font style. And although most of the selectors these days are quite easy to remember, italics and font style don't usually go hand in hand. So it might be a little hard to remember this
04:48:58
one. So there's three different values they can use for this normal, which is pretty much the same as setting the font weight is 400 doesn't do anything, or it actually will change it back to its normal state. Then you have italic, which is to italicize it, and then you have oblique, which is a little bit more italic size. So let's go ahead and just add the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can see that where it is, there we go. It's right there So in this video, we're going to be talking about the other half of overall text manipulation. And in this case, we're going to be looking at different font properties. So in this video, we're going to be looking at three font size, font weight and font style. So first thing I want to look at is font size. So right now we have our pretty standard text here, right.
04:50:02
So I'm just actually going to go ahead and erase our text transform from our previous video. So now we have our text here. And what I want to do is change the size of this. The only problem is I want to use a responsive design. So what I'm going to do is go ahead and first use our font size property. And then I'm going to go ahead and say let's just say 1.25 em. So what happens here is make this 25% more than the standard font size. Now you can see it's a little bit bigger, but it's not as big as doing something like two n. So there we go. Now that we've done that, we can also go ahead and actually use pixel values, if we wanted to 40 pixels for example, the only problem is this is going to set everything consistently. So you can see all of the sizes are the same, it doesn't matter if they're a header, or while it does actually matter. But because in the CSS defined code, all of these headers actually have to em but if we actually removed all of these, they would be the same. So using something like two e n, would be great, because what
04:51:07
actually happens is now everything stays consistent. And it's also a relative unit. So that's always good, because it stays responsive. So there we go. That's pretty much it for font size, I'm going to go ahead and actually change this to one point 15 am, I think that's good. So there we go. That's the first one. Now let's go ahead and talk about font weight. So this is a little bit more complicated. So pretty much what font weight decides is the bolding of a text or a font. So the values for this can range from zero, which is nothing all the way to? Well, pretty much infinity. The only problem is, most fonts only support up to 800, or 900. Because, again, for each value, there is a different bolding stage. So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher. But in theory, you can make these values as big as you want. The only problem is, it's not really going to show any change if you make them very big. So there we go. That's pretty much it for font weight, let's go ahead and start adding it to our website. So let's say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font
04:52:08
dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start with zero and see what happens, you can see that nothing actually happens. But pretty much like I said before, most fonts only support certain values. So for example, 100 would be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font supports. Now usually, the convention for this is you're supposed to go up in hundreds from 100. That's kind of like the minimum supported font size. So if I go ahead and set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which is usually the highest that you should go realistically, this is kind of the standard for each one. So there you go, you can set it to something like 600, which isn't very commonly seen, like I said, fonts only support certain bolded ness, if that makes sense. But you can go ahead and play around with this. And like I said, depending on the font, it's going to change what the text actually looks like. So there we go. That's pretty much it for font weight, I'm going to go ahead and actually just set this to 400, which is the standard font right there. So 400 is the normal, it's like normal bolding, no bolding and don't make it very thin. So that's kind of what it's the normal range. So there we go. That's it for font weight. Now let's go ahead and look at font style. So just like
04:53:11
font sizes for size and font weight is for bolding font style is for italic sizing. So I'm going to go ahead and actually italicize a small piece of text here. So let's just go ahead into this. And I'm going to take this first part, and actually just cut it out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's an inline day. It's an inline container tag, which allows you to contain a certain pieces of text without you know disrupting the flow or moving them on to their own line. So I'm going to give it a class, I'm just going to say italics, I guess that would work. So then I'm going to go ahead and use the class selector italics. Open this up. Now we're going to go ahead and start working on adding our italicizing. So what you can do for this is called font style. And although most of the selectors these days are quite easy to remember, italics and font style don't usually go hand in hand. So it might be a little hard to remember this
04:54:15
one. So there's three different values they can use for this normal, which is pretty much the same as setting the font weight is 400 doesn't do anything, or it actually will change it back to its normal state. Then you have italic, which is to italicize it, and then you have oblique, which is a little bit more italic size. So let's go ahead and just add the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can see that where it is, there we go. It's right there is a little bit more. The font, the font is a little bit a little bit more italic size. So there we go. Now let's go ahead and set it as the other value which is oblique. And you might notice a little bit of a difference. So it's not immediately obvious, but it's actually just a little bit more italicize. So like I said, it's not very good. noticeable.
04:55:20
But that's just one thing to keep in mind. So there we go, I'm just going to change this back to italic. And that's pretty much it for the three different font manipulation techniques. Now, although I didn't cover font family, which is what I'm going to cover in the next video, these are the pretty much three basic ones that you can use to work with text without changing the font itself. So you can go ahead and work with changing the font weight, you know, make it bolded or italicized, you can also change the size. So you can really do a lot with this. But font family is a little bit more complicated, which is why I want to leave it for its own video. All right, let's move on. is a little bit more. The font, the font is a little bit a little bit more italic size. So there we go. Now let's go ahead and set it as the other value which is oblique. And
04:56:22
you might notice a little bit of a difference. So it's not immediately obvious, but it's actually just a little bit more italicize. So like I said, it's not very good. noticeable. But that's just one thing to keep in mind. So there we go, I'm just going to change this back to italic. And that's pretty much it for the three different font manipulation techniques. Now, although I didn't cover font family, which is what I'm going to cover in the next video, these are the pretty much three basic ones that you can use to work with text without changing the font itself. So you can go ahead and work with changing the font weight, you know, make it bolded or italicized, you can also change the size. So you can really do a lot with this. But font family is a little bit more complicated, which is why I want to leave it for its own video. All right, let's move on. So in this video, we're going to be talking about the last property related to text and fonts. And that is font family. So I'm going to talk a little bit about that. But in the
04:57:25
next few videos, we're going to actually looking at how to include external fonts, which is going to be a very fun activity. And that's going to really change the way that we use CSS. But before we do that, we need to learn about font families. So first of all, if you don't already know, a font family is basically a collection of fonts that have similar features. So there are three main font families that you can use serif, sans serif, and monospace. So first of all, let's talk about serif fonts. So serif fonts have these small lines on the end of some letters, and pretty much every or a lot of the academic papers. And well printed documents use these serif fonts. So right now, for example, our font is a Sarah because you can see these tiny lines at the end of some of the letters. So these are used very commonly on like I said, papers, essays, you know, journals, anything that's pretty much printed out or given to you physically, is usually going to use a serif font. But unfortunately, it makes it very hard to read on the computer. So there's actually a another
04:58:28
group of fonts, that which is the sans serif group. And if you don't know sans serif groups, are basically the fonts that don't have those lines, if it's not obvious enough, from name. So right now, this is a serif font. A sans serif font, on the other hand, would not have those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites that you use today, so for example, pretty much all the news websites, if you've used WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise, Google Facebook, pretty much every website that you see commonly today, the big ones, usually always use Sans Serif fonts, because they're much easier to read. So those are the two main groups. But like I said, there's also a third one, which is called mono space. So mono space is pretty much where all of the characters have the same width. So they all take up kind of the same space each character. Whereas something like this, you can see that each letter kind of takes a different amount of space, depending on what the letter is. So some pretty good examples of a sarafan are Times New Roman, which is probably the
04:59:29
most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then a pretty good example of a monospace font is Korea new if you know what that is. Korea news, one of the monospace fonts but like I said, there's many more out there that you can use. Like I said, it all depends on what family you pick, and what what kind of result you're trying to achieve out of your fonts or you're trying to make it readable Are you making a paper or a journal, it all depends on what you want out of your while document. So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif fonts. So in order to specify a font family, or in specific a font, you're gonna have to use the font family So in this video, we're going to be talking about the last property related to text and fonts. And that is font family. So I'm going to talk a little bit about that. But in the
05:00:34
next few videos, we're going to actually looking at how to include external fonts, which is going to be a very fun activity. And that's going to really change the way that we use CSS. But before we do that, we need to learn about font families. So first of all, if you don't already know, a font family is basically a collection of fonts that have similar features. So there are three main font families that you can use serif, sans serif, and monospace. So first of all, let's talk about serif fonts. So serif fonts have these small lines on the end of some letters, and pretty much every or a lot of the academic papers. And well printed documents use these serif fonts. So right now, for example, our font is a Sarah because you can see these tiny lines at the end of some of the letters. So these are used very commonly on like I said, papers, essays, you know, journals, anything that's pretty much printed out or given to you physically, is usually going to use a serif font. But unfortunately, it makes it very hard to read on the computer. So there's actually a another group of fonts, that which is the sans serif group. And if you don't know sans serif groups, are basically the fonts that don't have those lines, if it's not obvious enough, from name.
05:01:37
So right now, this is a serif font. A sans serif font, on the other hand, would not have those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites that you use today, so for example, pretty much all the news websites, if you've used WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise, Google Facebook, pretty much every website that you see commonly today, the big ones, usually always use Sans Serif fonts, because they're much easier to read. So those are the two main groups. But like I said, there's also a third one, which is called mono space. So mono space is pretty much where all of the characters have the same width. So they all take up kind of the same space each character. Whereas something like this, you can see that each letter kind of takes a different amount of space, depending on what the letter is. So some pretty good examples of a sarafan are Times New Roman, which is probably the
05:02:40
most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then a pretty good example of a monospace font is Korea new if you know what that is. Korea news, one of the monospace fonts but like I said, there's many more out there that you can use. Like I said, it all depends on what family you pick, and what what kind of result you're trying to achieve out of your fonts or you're trying to make it readable Are you making a paper or a journal, it all depends on what you want out of your while document. So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif fonts. So in order to specify a font family, or in specific a font, you're gonna have to use the font family property. So if you go ahead and set font family. Now, this isn't just for setting the family. This is also for spreading the specific fonts. And I'll talk about that in just a second. So I'm going to go ahead and say sans serif. So this is the font family that I want
05:03:50
and watch what happens to our page. Now, you can see that it looks completely different. We can actually read everything and it looks a lot cleaner. So that's why I like san serif fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts, you can see that it just looks a lot easier on the eyes. It's just much easier to read and use. But like I said, you can you don't just have to specify the family you can actually specify the specific font. And you can actually do this using the comma separator. So first of all, I'm basic set times new roman as the main font. And then I'm going to insert a comma, and then serif. So I'll explain this right now, first of all, if a font has more than one word or it's separated by spaces, you're going to need to use quotation marks to contain it. Now, the second thing is this comma here, pretty much what's going to happen is, if Times New Roman is available, use that as the font. But if it isn't available, then fall back to the standard serif font. So you can actually include more than just Times New Roman on here. So you can include three or even for layers sometimes. But for now, we're just going to use two and we'll talk about including very specific fonts in the
05:04:50
next two videos, where we're going to be including these external fonts. So there we go. Pretty much what this is saying is set the font family, in this case, the font, as Times New Roman, but if Times New Roman isn't available, maybe you know, if you're using an external font, maybe this server has crashed, or maybe it's just not available on the browser, then use the serif family, there's the general serif font. So if I actually go ahead and remove this, you're not going to see much of a difference between Times New Roman and Sarath. Like I said, you can see there's not much of a change because it pretty much the same thing. But it is there. And if you use a different Sarah font, such as Georgia, there will be some sort of a difference between the two, you can see that now, although they aren't exactly, they aren't exactly the same, you can see they both contain those lines, things like that. So that's why you commonly use more than more than one fonts, just in case maybe,
05:05:51
if you're using a different browser, maybe someone's using a very old browser, like Internet Explorer six or seven, then you can use some of the older fonts. So there you go. That's pretty much it. For font families, it's really not that hard to grasp. And once you really get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually just change this. But like I was saying, it becomes a very useful tool, once you get into the later parts of web development, because changing the font can completely change the look of your site. So that's just one thing you want to keep in mind. Alright, let's move on. property. So if you go ahead and set font family. Now, this isn't just for setting the family. This is also for spreading the specific fonts. And I'll talk about that in just a second. So I'm going to go ahead and say sans serif. So this is the font family that I want and watch what happens to our page. Now, you can see that it looks completely different.
05:06:52
We can actually read everything and it looks a lot cleaner. So that's why I like san serif fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts, you can see that it just looks a lot easier on the eyes. It's just much easier to read and use. But like I said, you can you don't just have to specify the family you can actually specify the specific font. And you can actually do this using the comma separator. So first of all, I'm basic set times new roman as the main font. And then I'm going to insert a comma, and then serif. So I'll explain this right now, first of all, if a font has more than one word or it's separated by spaces, you're going to need to use quotation marks to contain it. Now, the second thing is this comma here, pretty much what's going to happen is, if Times New Roman is available, use that as the font. But if it isn't available, then fall back to the standard serif font. So you can actually include more than just Times
05:07:53
New Roman on here. So you can include three or even for layers sometimes. But for now, we're just going to use two and we'll talk about including very specific fonts in the next two videos, where we're going to be including these external fonts. So there we go. Pretty much what this is saying is set the font family, in this case, the font, as Times New Roman, but if Times New Roman isn't available, maybe you know, if you're using an external font, maybe this server has crashed, or maybe it's just not available on the browser, then use the serif family, there's the general serif font. So if I actually go ahead and remove this, you're not going to see much of a difference between Times New Roman and Sarath. Like I said, you can see there's not much of a change because it pretty much the same thing. But it is there. And if you use a different Sarah font, such as Georgia, there will be some sort of a difference between the two, you can see that now, although they aren't exactly,
05:08:53
they aren't exactly the same, you can see they both contain those lines, things like that. So that's why you commonly use more than more than one fonts, just in case maybe, if you're using a different browser, maybe someone's using a very old browser, like Internet Explorer six or seven, then you can use some of the older fonts. So there you go. That's pretty much it. For font families, it's really not that hard to grasp. And once you really get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually just change this. But like I was saying, it becomes a very useful tool, once you get into the later parts of web development, because changing the font can completely change the look of your site. So that's just one thing you want to keep in mind. Alright, let's move on. So in this video, we are going to be looking at actually using some external fonts. We've looked at fonts and text, and we know how to manipulate it now. But we don't actually
05:09:54
know the one crucial piece, which is using external fonts. So your computer will most likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word, or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts. And although Google Docs technically isn't on your computer, we'll just leave it in there for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how do we actually know which fonts to use? And what if we don't have the font? I mean, you know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first thing that I would recommend doing is going and getting fonts from the internet. Now, if you don't already know this, most people would think that you know, the fonts that you have are set for life, you can't download anymore. Well, fonts are actually a huge growing industry. And there are so many different fonts out there that you can use, and you can even make your own. So there's obviously a lot more fonts to choose them than what's provided on your computer. So in this video, I'm going to be teaching you how to go and
05:10:56
find your own fonts. And then in the next video, we're going to be including it into our project. So the first source I'm going to recommend here, which is actually only source, but it's called Google fonts, it was put together by Google. And it's a collection of 915 font families. So you can see we have a bunch of different fonts here. And when I say font families, just think fonts default, because So in this video, we are going to be looking at actually using some external fonts. We've looked at fonts and text, and we know how to manipulate it now. But we don't actually know the one crucial piece, which is using external fonts. So your computer will most likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word, or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts. And although Google Docs technically isn't on your computer, we'll just leave it in there for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how do we actually know which fonts to use? And what if we don't have the font? I mean, you
05:11:56
know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first thing that I would recommend doing is going and getting fonts from the internet. Now, if you don't already know this, most people would think that you know, the fonts that you have are set for life, you can't download anymore. Well, fonts are actually a huge growing industry. And there are so many different fonts out there that you can use, and you can even make your own. So there's obviously a lot more fonts to choose them than what's provided on your computer. So in this video, I'm going to be teaching you how to go and find your own fonts. And then in the next video, we're going to be including it into our project. So the first source I'm going to recommend here, which is actually only source, but it's called Google fonts, it was put together by Google. And it's a collection of 915 font families. So you can see we have a bunch of different fonts here. And when
05:13:01
I say font families, just think fonts default, because you know, when you think of it as a family, you think there's multiple fonts, but there's actually only one and then you can change the bolding and other settings, we'll go over that a little bit later in this video. So you can head over to this, I've linked it in the lecture resources, or you can just copy the link here from video. And it's going to take you to this site. So there's actually 915 families on this site, which is a lot to choose from. Now you can see that there are even you know things in different languages. There's all sorts of different styles, maybe from different general families. So this could be from, you know, a sensory family. This could be from a Sarah family. So you can see that there are so many different choices that you can use. And depending on what type of website you want to create, you can actually choose the fonts that you want. So I'm gonna actually go through now and start picking some fonts. So what I would recommend is just
05:14:05
go through and look at the many different fonts you have here. So for example, I think this is a very nice font. So what I'm going to do is just go ahead and click this plus icon And what it's going to do here it says there's one family selected, right? If you open it up, you can see that our font has been selected. Now we're going to work on embedding this in the next video. But for now, I just want to leave it like this. So you can see that we can actually go ahead and customize our font now. So for example, if I wanted to choose some different bolding, so for example, you can see, this is a font weight of 100. And this is a font weight of 900. So you can select as many as you want. But you can see that we actually have a load type here. So the reason that this is given is because we are including this from the internet, obviously. So if you try to pull too many resources from an intranet or from, you know, outside of your local machine, it's
05:15:06
going to really slow down the load time of your website, because obviously, it's not instantaneous, you need to send over requests, and there's a whole lot that goes behind. So while I would recommend is not trying to select every single one of these weights, only select the ones that you think you're going to need. So for example, for now, I'm just going to select the regular and the bolt. Now, I don't want any italics. So I'm just going to exclude this. And you can see that our load time is fast. So we're okay. So you can see that apart from our buildings, we can actually select some of some of the stuff from here. So instead of having to go into our selection, we can actually just go and straight select it. From here, we can also change the size if we wanted to. And then we can click the plus icon. So you can go ahead and play around with those when you include your own fonts. But for now, I think I'm just going to go with the default size
05:16:09
and just add a bolded. So now I'm going to go ahead and actually include a second font, because it's pretty common in web development and web design to include at least two fonts, you know, maybe one for headings, and one for text. So I'm going to go ahead and find something that kind of fits in with the later font that we have here, I'm going to just select it back to the default size. So I'm going to try and find something that kind of matches this. It doesn't have to be obviously exactly the same. It can just be something that you know, kind of fits in the theme, or makes the website look kind of complements the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going to use it, you can see those lines there. I'm looking for a sans serif font. Let me see. So I think this is a pretty good font. So what I'm going to do is go ahead and add this as well just click on that plus icon. And now we can actually customize both fonts. So I'm going to go ahead and add that bold 700 as well, you can see that the load time
05:17:10
is moderate now because of course, we're including more than one font, but we don't need to worry about that too much. So there we go. We have that setup now. So there we go. That's pretty much it for Google fonts. And you know, using all these different fonts, now you can go ahead and customize it. Choose whatever makes your website look good, or maybe whatever you want. But just make sure that you choose a font that really works with your website well and make sure you don't include too many different weights. So you can keep the load time within Bay. So in the next video, we're actually going to go through and start importing this into our website. And I'm going to teach you some really good failsafe tricks in case Google Fonts fails. Alright, let's move on. you know, when you think of it as a family, you think there's multiple fonts, but there's actually only one and then you can change the bolding and other settings, we'll go over that a little bit later in this video. So you can head over to this, I've linked it in the lecture resources, or you can just copy the link here from video. And it's going to take you to this site. So there's actually 915 families on this site, which is a lot
05:18:11
to choose from. Now you can see that there are even you know things in different languages. There's all sorts of different styles, maybe from different general families. So this could be from, you know, a sensory family. This could be from a Sarah family. So you can see that there are so many different choices that you can use. And depending on what type of website you want to create, you can actually choose the fonts that you want. So I'm gonna actually go through now and start picking some fonts. So what I would recommend is just go through and look at the many different fonts you have here. So for example, I think this is a very nice font. So what I'm going to do is just go ahead and click this plus icon And what it's going to do here it says there's one family selected, right? If you open it up, you can see that our font has been selected. Now we're going to work on embedding this in the next video. But for now, I just want to leave it like this. So you can see that we can actually go ahead and customize our font now. So for example, if I wanted to choose some different bolding, so for example, you can see, this is a font weight of 100. And this is a font weight of 900. So you can select as many as you want. But you can see that we actually have a load type here. So the reason that this is given
05:19:15
is because we are including this from the internet, obviously. So if you try to pull too many resources from an intranet or from, you know, outside of your local machine, it's going to really slow down the load time of your website, because obviously, it's not instantaneous, you need to send over requests, and there's a whole lot that goes behind. So while I would recommend is not trying to select every single one of these weights, only select the ones that you think you're going to need. So for example, for now, I'm just going to select the regular and the bolt. Now, I don't want any italics. So I'm just going to exclude this. And you can see that our load time is fast. So we're okay. So you can see that apart from our buildings, we can actually select some of some of the stuff from here. So instead of having to go into our selection, we can actually just go and straight select it. From here, we can also change the size if we wanted to. And then we can click the plus icon. So you can go ahead and play around with those when you
05:20:20
include your own fonts. But for now, I think I'm just going to go with the default size and just add a bolded. So now I'm going to go ahead and actually include a second font, because it's pretty common in web development and web design to include at least two fonts, you know, maybe one for headings, and one for text. So I'm going to go ahead and find something that kind of fits in with the later font that we have here, I'm going to just select it back to the default size. So I'm going to try and find something that kind of matches this. It doesn't have to be obviously exactly the same. It can just be something that you know, kind of fits in the theme, or makes the website look kind of complements the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going to use it, you can see those lines there. I'm looking for a sans serif font. Let me see. So I think this is a pretty good font. So what I'm going to do is go ahead and add
05:21:21
this as well just click on that plus icon. And now we can actually customize both fonts. So I'm going to go ahead and add that bold 700 as well, you can see that the load time is moderate now because of course, we're including more than one font, but we don't need to worry about that too much. So there we go. We have that setup now. So there we go. That's pretty much it for Google fonts. And you know, using all these different fonts, now you can go ahead and customize it. Choose whatever makes your website look good, or maybe whatever you want. But just make sure that you choose a font that really works with your website well and make sure you don't include too many different weights. So you can keep the load time within Bay. So in the next video, we're actually going to go through and start importing this into our website. And I'm going to teach you some really good failsafe tricks in case Google Fonts fails. Alright, let's move on. So in the previous video, we started looking at what type of fonts we can use in our website. Now we're going to go through and actually include them. So first of all, let's just
05:22:22
look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation, ready to go and working on the website. But now what I'm going to do is actually go through and start using these external fonts. So we're not going to use this Arial font anymore, so I'm going to go ahead and erase that. And also for the font weight, I'm also going to go ahead and erase that because there's some issues with it that I'll talk about in just a second. So there we go. Now that we removed, all of the properties will be directly affected by the font. Let's go ahead and work on setting up our website with these external fonts. So the first thing you'll notice here is that when you go over to your Google fonts, it gives you this link tag to include. So this link tag is pretty much going to link to Google fonts and pull them from their servers. So this is what you're going to need to copy right here. You're just going to copy this and up in your HTML document, you're going to paste your link tag above your stylesheet. Now make sure you post it above this above your stylesheet because you want to have the fonts ready so that when your stylesheet comes
05:23:25
along and the compiler is reading it, all of the fonts are already there and ready to go. So there we go. Now that everything's linked and set up, why don't we go ahead and see what happened on our website. Obviously, we removed the font You can see that nothing actually happens. So, by doing this, we don't actually set up our website to use our fonts, we're just bringing them into our website. Now what we need to do is go through in CSS and start utilizing these fonts, so that we can see the changes on the website. So on top of that, this, there's this little text here that allows you to do you know, you can just copy the style straight, but I'm going to go ahead and do it manually. So first of all, let's go ahead and add our body font. So I'm going to go ahead and say, font family. And now we're going to go through and select our font. So we included two fonts, Leto and sorrow boon we're going to go through is go ahead and see which one we want to use. So I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead
05:24:29
and say, Leto, just like that. And now let's go ahead and refresh the page. And you can see how much of a difference that makes. Now using this new font, everything has changed, it makes the website look completely different from what it used to be. So there we go, we've included that. But let's go ahead and include our second font here. So I'm going to go through and actually add it on the title and the subtitle. And remember going back to specificity, the class and Id selectors are going to be more specific than the body selectors. So our font family is going to override the body font family. So let's go ahead and add that. Right there. Just like that. And let's go ahead and add it to our subtitle as well. All right, well, let's go ahead and see what happens. So you can see that, although the difference is quite subtle, it's still changed the font of the titles and subtitles. And you can see why using two fonts on your website makes it look a whole lot better. So there we go. We've added all of our fonts. But the only problem is, we know that what what's happening beside behind the scenes is that this link tag is going to Google servers, pulling these
05:25:34
fonts, and then including them in our website. But what if it fails? What if there's no internet connection, or what if it's down, maybe the Google Fonts servers themselves are down. This is where we need to use the trick we learned in the font families video, in which we can actually add a backup font to this. And if we actually go on Google Fonts right here, you can see they already do this. Now, because the sans serif family is included by default, what's going to happen is, normally it's going to use the font specified. But if there's some problem, and we can't get these fonts, maybe Google servers are down, it's going to go over to the next font. And we know that sans serif is included on every single machine, which means that it's going to work fine. So let's go ahead and do that. Now. If you remember, all we have to do is go ahead and add a comma, and then put the name of the family, which in this case is sans serif. We're going to do this for the
05:26:37
other two as well. So in the previous video, we started looking at what type of fonts we can use in our website. Now we're going to go through and actually include them. So first of all, let's just look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation, ready to go and working on the website. But now what I'm going to do is actually go through and start using these external fonts. So we're not going to use this Arial font anymore, so I'm going to go ahead and erase that. And also for the font weight, I'm also going to go ahead and erase that because there's some issues with it that I'll talk about in just a second. So there we go. Now that we removed, all of the properties will be directly affected by the font. Let's go ahead and work on setting up our website with these external fonts. So the first thing you'll notice here is that when you go over to your Google fonts, it
05:27:38
gives you this link tag to include. So this link tag is pretty much going to link to Google fonts and pull them from their servers. So this is what you're going to need to copy right here. You're just going to copy this and up in your HTML document, you're going to paste your link tag above your stylesheet. Now make sure you post it above this above your stylesheet because you want to have the fonts ready so that when your stylesheet comes along and the compiler is reading it, all of the fonts are already there and ready to go. So there we go. Now that everything's linked and set up, why don't we go ahead and see what happened on our website. Obviously, we removed the font You can see that nothing actually happens. So, by doing this, we don't actually set up our website to use our fonts, we're just bringing them into our website. Now what we need to do is go through in CSS and start utilizing these fonts, so that we can see the changes on the website. So on top of that, this, there's this little text here that allows you to do you know, you can just copy the style straight, but I'm going to go ahead and do it manually. So first of
05:28:46
all, let's go ahead and add our body font. So I'm going to go ahead and say, font family. And now we're going to go through and select our font. So we included two fonts, Leto and sorrow boon we're going to go through is go ahead and see which one we want to use. So I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead and say, Leto, just like that. And now let's go ahead and refresh the page. And you can see how much of a difference that makes. Now using this new font, everything has changed, it makes the website look completely different from what it used to be. So there we go, we've included that. But let's go ahead and include our second font here. So I'm going to go through and actually add it on the title and the subtitle. And remember going back to specificity, the class and Id selectors are going to be more specific than the body selectors. So our font family is going to override the body font family. So let's go ahead and add that. Right
05:29:47
there. Just like that. And let's go ahead and add it to our subtitle as well. All right, well, let's go ahead and see what happens. So you can see that, although the difference is quite subtle, it's still changed the font of the titles and subtitles. And you can see why using two fonts on your website makes it look a whole lot better. So there we go. We've added all of our fonts. But the only problem is, we know that what what's happening beside behind the scenes is that this link tag is going to Google servers, pulling these fonts, and then including them in our website. But what if it fails? What if there's no internet connection, or what if it's down, maybe the Google Fonts servers themselves are down. This is where we need to use the trick we learned in the font families video, in which we can actually add a backup font to this. And if we actually go on Google Fonts right here, you can see they already do this. Now, because the sans serif family is included by default, what's going to happen is, normally it's going to use the font specified. But if there's some problem, and we can't get these fonts, maybe Google servers are down, it's going to go over to the next font. And we know that sans serif is included on every
05:30:58
single machine, which means that it's going to work fine. So let's go ahead and do that. Now. If you remember, all we have to do is go ahead and add a comma, and then put the name of the family, which in this case is sans serif. We're going to do this for the other two as well. And this one as well. Now, of course, this is going to change based on the font that you use. And I'm actually going to show you this right here. Let's remove both of these and add a serif font. So this would be considered a serif font. Let's go ahead and add that. Now if we go ahead and look at the family, well, it's actually not not serif. It's a different family called cursive. But you can see just to prove that point that the family is going to depend on the font itself. So we explained a little bit about font families in that video. And obviously, all of them have different characteristics. So of course, like I said, it depends completely on the type of font. So if I go ahead and see the family there, you can see that that sans serif. But if we use something like this font, it's going to be a different font family. So that's just one thing you need to keep in mind is that you want to make sure your fallback font is both included on every machine. And it's
05:32:01
kind of similar to our font here. Now, if I actually go ahead and erase this, now let's go ahead and see, obviously, there is a visual difference, but it still has that same style. There's no lines, it's clean to read. It's just straightforward. So that's one thing you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going to move on to layout, which is really gonna change the way that this website looks. Alright, let's move on. And this one as well. Now, of course, this is going to change based on the font that you use. And I'm actually going to show you this right here. Let's remove both of these and add a serif font. So this would be considered a serif font. Let's go ahead and add that. Now if we go ahead and look at the family, well, it's actually not not serif. It's a different family called cursive. But you can see just to prove that point that the family is going to depend on the font itself. So we explained a little bit about font families
05:33:05
in that video. And obviously, all of them have different characteristics. So of course, like I said, it depends completely on the type of font. So if I go ahead and see the family there, you can see that that sans serif. But if we use something like this font, it's going to be a different font family. So that's just one thing you need to keep in mind is that you want to make sure your fallback font is both included on every machine. And it's kind of similar to our font here. Now, if I actually go ahead and erase this, now let's go ahead and see, obviously, there is a visual difference, but it still has that same style. There's no lines, it's clean to read. It's just straightforward. So that's one thing you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going to move on to layout, which is really gonna change the way that this website looks. Alright,
05:34:10
let's move on. So the next few videos are going to be focused on CSS layout. So we're pretty much done, at least for now with coloring and text and all of the cool features we can do with them. But now we're gonna actually go through and start using our skills with different well, new skills that we can actually put together and create really, really nice, awesome websites. So layout is probably one of the most powerful tools that you can use in CSS and completely change the way your website looks. But before we move on, we need to learn a little bit of theory behind how CSS works. So there's this concept in CSS called the box model, and it's pretty much the the what happens is every Simple element is surrounded by an invisible box. Now this box has different layers, which we're going to explain in the next video. But all of these boxes are touching together, they're kind of connected, what you can do is actually change the shapes of these boxes and change the shapes of the layers in order to move things around, and position them on a page in a way that makes the website look much better. Now, obviously, this isn't the only way of shaping your website, there are so many different methods, Flexbox, and grid, and we're all going to cover them later in this course. But for now, this is the basic kind of layout features that you need to use,
05:35:18
so that you can move on and start using some of the most complex features. So this is kind of what that invisible box looks like. So at the center is where your content is. Now I'm going to explain this in just a second, all of these little terms, padding, border and margin. But you can see that the center contains the content. But then the other three layers are something completely unknown. And we're going to be going through and explaining what those do. But for now, just understand that you have the content on the center. But