Full transcript of “CSS Tutorial - Zero to Hero (Complete Course)”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0: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
0:47 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
1:34 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
2:19 video for this course, I hope you're a little bit motivated and excited to go forward and start learning about CSS is a pretty exciting topic. And it can really advance your web development if you don't already know it. Alright, let's get straight into it. Hi, welcome to the CSS zero to hero course, in this course, you're going to completely learn how to use CSS from the ground up, we're going to cover every single concept or every major concept in CSS, and really build up our knowledge of it. So before we move on, I just wanted to give you some motivation on what you're going to be doing in this course. So you can, you know, really get excited about the course and start jump, you just jump straight into learning. So first of all, let's look at some of the stuff that we've done over the course. Now we start with a base website. And over time, we style this and change up the website using every technique that we've learned. So you can see that we've created multiple grids, colors, we've changed this completely and transformed the website in every single way. We've also created things like gradients. And we've also styled change our custom fonts, colors, and backgrounds. We cover all of this in depth throughout the course. And we do it step by step so that you don't rush through and forget anything. At the end of the course, there's also a little challenge here, where you try to bring all your skills together and style a website from scratch. Now there is a solution video, if you need it, maybe you just want to see another opinion on it. But pretty much you're going to bring all the skills you learned in this course together and create this nice website. It's responsive, it's got all sorts of layout features. And it also has animations, you can see just like that. So that's some of the actual website stuff we're going to be doing in the course. But why don't we look at some of the code that we've written. So I created this file from the start, I didn't have it at the start of this course. But at the end, you can see that we've written now, well over 100 lines of code here. And I although it may look intimidating. Now, I do explain every single part of it, so that at the end, you can just read this straightaway and understand what's going on in an instant. There's also the styling for our solution video or for the solution to the challenge here. So you can see we've got a bunch of stuff here. And like I said, it may look confusing, but once we move on, this will make a lot more sense. So that's pretty much it for the little achievements video for this course, I hope you're a little bit motivated and excited to go forward and start learning about CSS is a pretty exciting topic. And it can really advance your web development if you don't already know it. Alright, let's get straight into it. So in this video, I'm going to be giving a quick introduction to the syllabus of the course. Now it is quite a long video. So if you don't want to watch it, or if you don't really want to know an in depth analysis on what the course is going to be covering, then you can go ahead and skip this video. All I say is that please make sure that you read
3:05 the prerequisites lecture that came before this. Now, there are some very important details in there and some skills that you need to know to move on with this course. And if you don't know them, you're going to have a very difficult time picking up some of the language. Now there's only one real prerequisite, which is HTML. But you can go ahead and read that. 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.
3:52 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
4:41 straight into it. The first section, which is the section we're in right now is the introductory section. So setting up the course and we also install all the programs and software necessary to set up our working environment. So you can follow along it's not necessary but it is highly recommended. Because if you're using maybe Something else that you're not experienced with, you may have a hard time getting used to the program and things like that. So I recommend you follow along and set up the environment just like I do. So the second question of sorry, the second section is the introduction to CSS. Now, unlike the first section, this is going to be looking at introducing the actual CSS language, we're going to be looking at some theory behind it, where it's used and what kind of a difference it makes,
5:28 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
6:14 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
7:00 CSS concepts related to layout, we'll talk about those when we get to it, then we're going to be applying them to actually change the style or the layout of our page. So we're going to be moving items around, we're going to resize them and do all sorts of things with them once we get to that point. The next section we're going to look at is called Flexbox. Now I'm sure you've heard of this if you've looked into any web development, but pretty much it's an alternate way to mess around with the layout in CSS, and it is quite new. But it is a pretty commonly used concept today, especially for Responsive layouts, making websites that can work on all devices. So it's a pretty important concept there. So we're going to focus on the theory behind Flexbox. First, talking about how it works, how it's set up. And then we're also going to be applying it to real life talking about,
7:48 you know, where it can be used some of the benefits, and then actually using it in our own projects by creating our own Flexbox and messing around with it. So we're going to do that as well. So the next section is pretty similar to Section seven, it's going to be looking at a another alternative to using normal layout features. in CSS. It's called grid. And there are a lot of similarities. But we're also going to be talking about the differences. So along with going over a comprehensive overview of kind of how grid works, we're also going to be going over some of the similarities and differences kind of comparing it to Flexbox. And then we're going to talk about, you know which one you should use in each individual situation. So the next section is probably one of my favorites because it really puts
8:36 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
9:22 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
10:08 be given an HTML document with no styling. And you have to style it yourself based on a list of So in this video, I'm going to be giving a quick introduction to the syllabus of the course. Now it is quite a long video. So if you don't want to watch it, or if you don't really want to know an in depth analysis on what the course is going to be covering, then you can go ahead and skip this video. All I say is that please make sure that you read the prerequisites lecture that came before this. Now, there are some very important details in there and some skills that you need to know to move on with this course. And if you don't know them, you're going to have a very difficult time picking up some of the language. Now there's only one real prerequisite, which is HTML. But you can go ahead and read that. And just make sure that you have all the skills necessary. Alright, so let's get started.
10:55 And the first thing I want to talk about is the section structure. So the section is just a it's a bunch of lectures. So these are video lectures. And they're made in an interactive way. So you can see in this picture here, I am coding along with a nice preview on the side showing what what our progress looks like. So at the end of each section is a 10, a 10 question multiple choice quiz that covers all of the skills learned in that section. So it's really encouraged to go and just try it out and see if you know everything. And then that way you can diagnose yourself and see maybe there's some skills that you're fuzzy on or you need to revisit. And on top of that, I really encourage everyone who is following along in the course, to not just watch and be a passive consumer, you know, really go out and try and use your skills because otherwise you're not going to learn
11:43 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
13:20 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
14:07 cover all of them then. So the next section is where we will kind of take a turn from looking at styling and looking now at layout. So we're going to be learning some more fundamental CSS concepts related to layout, we'll talk about those when we get to it, then we're going to be applying them to actually change the style or the layout of our page. So we're going to be moving items around, we're going to resize them and do all sorts of things with them once we get to that point. The next section we're going to look at is called Flexbox. Now I'm sure you've heard of this if you've looked into any web development, but pretty much it's an alternate way to mess around with the layout in CSS, and it is quite new.
14:53 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
16:24 these animations from scratch using CSS. And then we can kind of change them and change how they look based on what we want. So the last section is a really interesting section, which kind of summarizes everything and test your skills. So it starts with a 30 question final exam, which is a bunch of questions from every single section or topic that we've covered. And it is it is a final exam. So there is like a passing grade and everything like that. But again, if you fail, there's no real consequences to it. It's just kind of a diagnostic tool to test where you are in your CSS knowledge. And after that, it's followed by a really nice challenge, which can help you know, really see where you're at, not from a theoretical standpoint, but from an actual practical standpoint. So this
17:13 challenge is going to be talked about later and when to get to that point, but pretty much you're going to Be styling a website from scratch, you're going to be given a blank HTML document or Well, it's not blank, it's going to have content. But you're going to be given an HTML document with no styling. And you have to style it yourself based on a list of based on a list of tasks given in the document. Now, don't worry too much about that. But pretty much there is a solution video that I created to style it based on how I want the website to look. But again, it's not kind of like an iron fist thing, you can go and be creative with it once you get to that point. Because once you learn all that CSS, what's the point, if you just have to conform to something, you can really unleash your creative freedom through CSS, once you learn all the skills necessary. So again, it will be talked about in a lot more detail once we get to that point. But for now, that's just a quick
18:01 overview of what it's going to look like. From here. Alright, so there's a quick overview of what the course is going to go over some of the topics. Now, again, this isn't a, you know, kind of a strict video on, you know, this is what we're going to learn. And if you don't learn it, that's it. It's just kind of showing you what you're going to be getting out of the course, so that you can really get a view into it before you start working on the course. Alright, let's get started. based on a list of tasks given in the document. Now, don't worry too much about that. But pretty much there is a solution video that I created to style it based on how I want the website to look. But again, it's not kind of like an iron fist thing, you can go and be creative with it once you get to that point. Because once you learn all that CSS, what's the point, if you just have to conform to something, you can really unleash your creative
18:50 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
19:39 stuff we're going to be doing is built straight into CSS and HTML. But we do need a text editor. And if you want to go ahead and use Notepad, go ahead. But I wouldn't really recommend that because it is quite hard to use when you're developing things. So I recommend this text editor right here. It's called Sublime Text, and gives you all of the color coding and formatting that you need, it makes things really easy for you. So you can go ahead to the website. Here, it's attached to the lecture resources, if you go ahead and click in the top left corner, in the bullet list icon, you can go ahead and find the lecture contents and downloadable resources. So go ahead, check out this website. And depending whether you're on Windows or Mac or Linux, you go ahead and download this. And then it should be pretty much it. So this is what its gonna look like when you're inside, I was just typing a little bit of stuff here making things making sure things were working. So there you go, this
20:28 is what it's gonna look like, once you download it, we'll go through and actually set everything up as we go through this course. Alright, let's move on. So before we move on, I just want to talk about finding project files. Now, I do do a lot of code throughout each lecture. And if you want to keep track of those, or maybe have some sort of working reference of what's going on, then I highly recommend that you go and check out the GitHub repository that I created for all the content of this course. Now, if you don't know what Git is, or how to use it, don't worry, I'm going to show an alternative to that in just a second, using this platform. But pretty much this is going to contain all the history of every single lecture. Now, if you know how to use Git, you can download this and check out each state. But if you don't know, then all you have to do is head over to the main page. And right here under commit, it's pretty much going to show every single lecture changes. So for example, I have seven to eight item alignment, so I can click on it. And
21:16 when I click on this, it shows all of the changes I have made to both files or any files that I've changed. So for example, you can see here, it has one changed file. And you can see I've added a bunch of stuff here. So you can kind of review what I've done over the lecture. So you can just go ahead and check it out. I've attached this to the lecture resources, if you want to go and look at it. Now, this does contain all of the history, all of the things that I've done over the course. So you can go review, maybe look at the code. And you can also download it, you can download the actual file or the the repository from here. So you can just download that very easily. And other than that, you can find all of the project files on here, if you ever need them. So if you want to, you know, maybe bookmark this or keep this somewhere or Notepad, just to make sure that you have a reference
22:02 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
22:49 and downloadable resources. So go ahead, check out this website. And depending whether you're on Windows or Mac or Linux, you go ahead and download this. And then it should be pretty much it. So this is what its gonna look like when you're inside, I was just typing a little bit of stuff here making things making sure things were working. So there you go, this is what it's gonna look like, once you download it, we'll go through and actually set everything up as we go through this course. Alright, let's move on. So before we move on, I just want to talk about finding project files. Now, I do do a lot of code throughout each lecture. And if you want to keep track of those, or maybe have some sort of working reference of what's going on, then I highly recommend that you go and check out the GitHub
23:39 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
24:26 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
25:17 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
26:03 sure that you do have a little bit of HTML experience. It's not recommended. Sorry, it's not needed. But it's highly recommended because we're going to be using a lot of HTML in this course. And although we're not going to be writing any directly, it would be really helpful to know some so I do offer a free HTML course. It's really quick one and a half hours, you should be go good to go and up and running in just one or two days. So if you don't know any HTML, you can go and check that out. And if you do know, HTML, continue watching along. So first of all, let's get started, what actually is CSS. So if you don't know what it stands for already, it's called Cascading Style Sheets. So from that name, you can pretty much assume
26:48 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
27:42 the layout options. You can make fonts, font changes, text manipulation, all sorts of things, which we're all going to be doing in this course are learning to do. And this is the website without HTML, sorry, without CSS looks pretty standard, right? Obviously, this looks just like a normal website doesn't have any HTML, apart from some font changes. But you can see that the difference that something like this mix, CSS will completely change the way a website looks if it's used correctly. So the next line is just a little bit of information about CSS, we're going to be going way more in depth into all of these points later. So a CSS file is saved in the dot CSS format, we're going to be doing that in the next few videos. There's some information about selectors and things like that, like I said, you can just read through this, I'm not going to go through it, because we're going to talk about
28:27 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.
29:14 So first of all, let's get started, what actually is CSS. So if you don't know what it stands for already, it's called Cascading Style Sheets. So from that name, you can pretty much assume that this is used to style websites. So unlike HTML, which is used to create structure and actual website content, this is mainly used to give it that visual flair to make the websites look good. So CSS is pretty much what makes a website standout from websites from the early days from the early 2000s, things like that. So that's what really makes a website stand out is the CSS or the styling. So this pretty much goes hand in hand with HTML. As it said, Here, they work almost consistently together. And they're always used all like all the time together. So let's go ahead and check out some pages that look with CSS and without. So you can see here that this is the page with CSS. So you can change all of
30:00 the layout options. You can make fonts, font changes, text manipulation, all sorts of things, which we're all going to be doing in this course are learning to do. And this is the website without HTML, sorry, without CSS looks pretty standard, right? Obviously, this looks just like a normal website doesn't have any HTML, apart from some font changes. But you can see that the difference that something like this mix, CSS will completely change the way a website looks if it's used correctly. So the next line is just a little bit of information about CSS, we're going to be going way more in depth into all of these points later. So a CSS file is saved in the dot CSS format, we're going to be doing that in the next few videos. There's some information about selectors and things like that, like I said, you can just read through this, I'm not going to go through it, because we're going to talk about it way more in detail in the next few sections. But for now, this is just a little bit of
30:50 general information about CSS. Alright, so now that you know what CSS is, why don't we go ahead and get started working with CSS. So in this video, we're going to be creating and linking a CSS stylesheet. So we're not actually going to be doing with anything with it yet, we're just going to be creating it and linking it so that we can get started and actually learn some of the properties in CSS. Alright, let's get started. So the first thing I want to do is go ahead and create my CSS file. So what I'm going to do is go into my Sublime Text or my text editor. Now, if you're not using this, and you know how to use the other text editor that maybe you're using some something else like Visual Studio, go ahead and use that if you know the shortcuts.
31:39 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
32:26 CSS. So dot CSS, D is the file format used to save CSS documents, and style, just kind of the standard name you use when you're saving CSS documents. So once I go ahead, and I'm going to go ahead and save that. Now I have my stylesheet created. But we don't actually have anything yet, because right now our HTML page is blank and our CSS file is blank. So this is where knowing a little bit of HTML comes in handy. First of all, I'm going to go ahead and create my boilerplate. I just typed in HTML and hit tab. Again, I talked all about this in my other courses talking about HTML. But there we go, we're going to go ahead and do that. I'm just going to say my website here. And once that's done, I'm going to go ahead and link it. So how do we actually do this? Well, what you want to do
33:16 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,
34:03 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
34:50 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,
36:29 obvious properties don't make them completely non visible, you want to make sure that you can actually see the difference on the page. And then you want to go ahead and refresh it. And if it's working, you will know that this stylesheet is linked properly. Alright, let's move on. So in this video, we're going to be creating and linking a CSS stylesheet. So we're not actually going to be doing with anything with it yet, we're just going to be creating it and linking it so that we can get started and actually learn some of the properties in CSS. Alright, let's get started. So the first thing I want to do is go ahead and create my CSS file. So what I'm going to do is go into my Sublime Text or my text editor. Now, if you're not using this, and you know how to use the other text editor that maybe you're using some something else like Visual Studio, go ahead and use that if you know the shortcuts.
37:17 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
38:10 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
38:59 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
39:48 going to do is first up move back in directory, because right now we're inside here and there's no CSS. We want to go back to the top level. So Going to go dot dot slash. Now remember, we're up here, I want to go into CSS. So I hit CSS slash, and then style dot CSS, which has our endpoints or final destination. So this is pretty much your basic link tag, this is how it works. You have all of your stuff here and you created it. And from there, you can go ahead and pretty much do whatever you want. So right here, I have my stylesheet linked and everything's working. But we don't actually know if it works yet. So in the next video, we're actually going to be going through and testing our stylesheet, I'm going to show
40:34 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
41:21 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
42:09 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
42:56 an element from an HTML document, and then styling it. So it's kind of like a target in a way. There are many different types of selectors. And they all work in different ways and are used for different purposes. So I'm going to be going through three with you in this video. So the first one is the element selector. The element selector is the most basic of all of them, pretty much, what you do is you find the name of the target that you want to select or target. So in this case, it would be the paragraph tag or the p tag. And then you have the selector here. So pretty much how a selector works is you just type out the selector. And then you have curly braces, and then you have your properties, we'll go that will go with this in much more depth towards the end of this section. So
43:47 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
44:34 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
45:25 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
46:10 nature. So in this video, I'm going to be talking about CSS selectors. I'm also going to be going through what they do and what types of selectors there are. So you're probably wondering what a selector actually is, because we haven't actually talked about this at all. And it's pretty much one half of everything that you do in CSS. So as you know, you have two different documents, you have your HTML document, which is kind of your structure gives all of the different text and content of the page. And then you have your CSS document, which is going to be for all the styling. Now because the two documents are kind of disconnected, you can't just go and type random things and have them appear where you want them, you need a way to actually assign these styles and properties to elements on the page. So we do this with something called selectors. So selectors pretty much a way of grabbing an element from an HTML document, and then styling it. So it's kind of like a target
46:56 in a way. There are many different types of selectors. And they all work in different ways and are used for different purposes. So I'm going to be going through three with you in this video. So the first one is the element selector. The element selector is the most basic of all of them, pretty much, what you do is you find the name of the target that you want to select or target. So in this case, it would be the paragraph tag or the p tag. And then you have the selector here. So pretty much how a selector works is you just type out the selector. And then you have curly braces, and then you have your properties, we'll go that will go with this in much more depth towards the end of this section. So you go through and you select, you type out your tag name. And pretty much what that's
47:45 going to do is select all of the elements on the document with that tag name. So there we go. That is the first one. The next is the class selector. So the class selector is very similar to the element selector, except it goes by class name. So you can see here that we have some class attributes here, we assign the class, don't worry, we'll go through with this in the next video. But you can see we assigned the class to these values. And pretty much all we have to do to references is type dot, which is the class prefix for CSS, and then the name of the class and then again, the properties. So you can actually use this cloud. The reason that we use classes over things like element selectors, is because you can apply this class to specific items, and it's only going to style those specific
48:35 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
49:21 and IDs. And I'm going to talk about some of the differences between them. And although they look very similar, we actually have different very different purposes for them, based on how you use them in your HTML document. So those are some of the basics of selectors, like I said, we're gonna go through and pretty much use this all the time during our course. So we're gonna go through use them and add the properties. So it's pretty good that you get familiar with these now, so that when we move on, this becomes kind of like second nature. So in this video, I am going to be teaching you how to how to add classes in IDs to our document here and actually start using some of these selectors. Now, I'm not going to teach you any of the properties yet, because we're going to cover that in a little bit later in this section and in the next few sections. But I'm just going to be teaching
50:07 you how to get familiar with classes and IDs, because they are by far the most commonly used selectors in CSS, I mean, sometimes very uncommonly, you'd see some elements, selectors, and other types of selectors, which we're going to go over in the next few videos. But the two most common that you're going to see are our classes and IDs. So let's go through and get started. Now I have a bunch of HTML content here, we're actually going to be using this and adding on to it for the rest of the course, we're going to be styling this website fully. But let's actually go through and start adding these classes and IDs. So the first thing you need to note, before we move on, is that classes and IDs are different, you can't just use them interchangeably. And I'm going to explain why in the next video. But for now, let's just pretend that they are the same. And we can use them interchangeably
50:53 because they have almost the same methods of application. So let's go ahead now the first thing you want to do is identify the element that you want to target. So first of all, let's just say I wanted to maybe make the color of this red. Okay, so the color of this title. Now that we know we've targeted it, we want to actually go through and edit it. So first thing, how do you think we would go through and do this now if you're thinking going through and adding an element selector or maybe adding some inline styles, if you know what that is, then you are right, partially, but the only problem is that if there are any other h ones on this page, then it will style all of them as well. And because we
51:39 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
52:27 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,
53:13 all you need to know is that the first thing you need to do is select an element using some method. And then you're going to add the properties. So I'm going to go ahead and refresh the page. And you can see it works just like that. Now to prove to you that this works, I'm actually going to go through and style just this about me right here, blue. So you can see we have more than one h2 on the page, but there's only one h1. But let's say we wanted to only style this the about me and we didn't want to style every single h2, what I would do is go ahead and add a class of subtitle to our target element. And then here I would select it So in this video, I am going to be teaching you how to how to add classes in IDs to our
54:01 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
54:48 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
55:37 of this title. Now that we know we've targeted it, we want to actually go through and edit it. So first thing, how do you think we would go through and do this now if you're thinking going through and adding an element selector or maybe adding some inline styles, if you know what that is, then you are right, partially, but the only problem is that if there are any other h ones on this page, then it will style all of them as well. And because we only want to style this title, that wouldn't be really effective. So the best way to do this would be to use a class or an ID, I'm going to go ahead and use a class. So the way the way you would do this is go through and type in class as your attribute. And you would again, put this into the opening tag of whatever target element you want to style.
56:23 And in here, you're putting, you're gonna put your class name. Now, if this isn't where you put your CSS prefix, this isn't where you put the dots. As I explained in the last video, here, you're just going to type the name of the class. So I'm going to go through and type a title, just like that. And you can name this whatever you want. But I'd recommend keeping it short and sweet. You don't want it to get too long, because then it's going to be really hard to work with. So once you've applied that, and we go ahead and refresh the page, you can see that nothing's actually there, it hasn't started working yet. That's because we haven't applied any styles. So when we go over here, we need to actually select our element. So I'm going to go ahead and add the prefix for a class, which is dot,
…
