CSS Tutorial - Zero to Hero (Complete Course)

Aug 15, 2023

CSS Tutorial - Zero to Hero (Complete Course)

Learn CSS in this full course for beginners. CSS, or Cascading Style Sheet, is responsible for the styling and looks of a website.

In this course, we cover CSS from the ground up. You will learn everything from basic skills, such as coloring and text, to highly advanced skills, like custom animations.

You will learn about:
•Coloring
•Formatting
•Text
•Layout
•Grid
•Flexbox
•Animations
•Transitions
•And more!

💻 Code: https://github.com/Video-Lab/css-cour…

🎥 Course from Jad Khalili. To view more content from this instructor, visit:
https://www.udemy.com/user/jad-khalili/

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Course Achievements \u0026 Results
⌨️ (0:02:36) Introduction to Course
⌨️ (0:11:19) Downloading Necessary Software
⌨️ (0:12:30) Where to Find Project Files

⌨️ (0:14:28) What is CSS?
⌨️ (0:17:09) Creating \u0026 Linking a CSS Stylesheet
⌨️ (0:20:39) How to Test a Stylesheet

⌨️ (0:22:12) What is a Selector?
⌨️ (0:25:54) Classes \u0026 ID’s in HTML
⌨️ (0:31:52) Specificity \u0026 When to use Selectors
⌨️ (0:39:13) Pseudoselectors
⌨️ (0:47:58) Advanced Selectors
⌨️ (0:59:30) Attribute Selectors
⌨️ (0:09:38) What are Properties?
⌨️ (1:12:59) The CSS General Rule

⌨️ (1:17:37) Types of Colors
⌨️ (1:24:53) Coloring Text
⌨️ (1:32:30) Background Colors
⌨️ (1:36:56) Images/URL’s in CSS
⌨️ (1:42:30) Other Background Properties
⌨️ (1:48:59) Opacity/Transparency
⌨️ (1:52:17) Gradients

⌨️ (2:04:12) Introduction to Types of Units
⌨️ (2:15:57) Text Manipulation
⌨️ (2:23:54) Font Size, Bolding \u0026 Style
⌨️ (2:30:33) Font Families
⌨️ (2:37:08) Including External Fonts w/ Google Fonts
⌨️ (2:43:14) Using External Fonts

⌨️ (2:49:07) The CSS Box Model
⌨️ (2:53:18) Changing Content Size
⌨️ (2:59:07) CSS Borders
⌨️ (3:05:51) Margin \u0026 Padding
⌨️ (3:15:17) Float \u0026 Display Types

⌨️ (3:27:47) What is Flexbox?
⌨️ (3:31:35) Creating a Flex Container
⌨️ (3:34:09) Flex Direction \u0026 Wrap
⌨️ (3:38:26) Content Alignment
⌨️ (3:44:45) Flex Item Order
⌨️ (3:49:32) Shrink, Grow, \u0026 Basis
⌨️ (4:00:03) The ‘flex’ Property
⌨️ (4:03:21) Item Alignment

⌨️ (4:08:16) Grid vs Flexbox
⌨️ (4:11:14) Creating a Grid
⌨️ (4:13:30) Template Columns \u0026 Rows
⌨️ (4:21:12) Justify \u0026 Align Grid
⌨️ (4:28:10) Row \u0026 Column Gaps
⌨️ (4:33:13) Column \u0026 Row Lines
⌨️ (4:40:46) Grid Area

⌨️ (4:44:38) The Transition Property
⌨️ (4:58:05) Transformation Functions
⌨️ (5:12:26) Creating Animations w/ Keyframes
⌨️ (5:20:30) Adding an Animation
⌨️ (5:23:23) Animation Properties

⌨️ (5:34:49) Website Transformation Challenge
⌨️ (5:38:22) Website Transformation - SOLUTION
⌨️ (6:13:32) What to Learn Next

—

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://www.freecodecamp.org/news

Content

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

612.94 -> a list of

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1051.659 -> a list of

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

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

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

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

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

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

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

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

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

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

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

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

1106.89 -> on the course. Alright, let's get started.

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

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

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

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

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

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

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

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

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

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

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

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

1167.6 -> on the course. Alright, let's get started.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1715.529 -> go ahead and get started working with CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1856.94 -> go ahead and get started working with CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2200.9 -> let's move on.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2534.68 -> let's move on.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2770.76 -> nature.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2986.39 -> nature.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3233.63 -> then here I would select it

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3481.299 -> then here I would select it

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3787.769 -> And the more powerful they are, the more specific they are. The higher they are, the higher

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4121.65 -> And the more powerful they are, the more specific they are. The higher they are, the higher

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

4130.96 -> selector property. So what we're going to do is actually go through and talk about the

4134.14 -> different powers or specificities, or specifics of each selector and we're going to see which

4137.489 -> one is most powerful. So right now We know that the element selectors are less powerful

4144.409 -> than the class. But there is actually two more that are more powerful than the class

4150.299 -> selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know

4155.19 -> it's not really going to make much sense. So I'm actually just going to rename it to

4161.02 -> subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there

4165.759 -> we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the

4168.409 -> class name. with CSS fun. There we go. So now we have two blue sub titles and one red.

4176.9 -> So you can see that the class will overwrite the header, or sorry, the element tag. But

4185.739 -> there are like I said, there are still two that are more powerful. The next after the

4192.929 -> class is the ID. So I'm going to go over here to services and add an ID of services, oops,

4198.96 -> services. All right. Now, what I'm going to do is go into my CSS file, and use the id

4204.909 -> selector. color green. So I'm going to go ahead and refresh now. And you can see that

4210.01 -> it's right here, it's green. So now that we know the ID is going to overwrite the class,

4216.369 -> and the class is going to overwrite the header. So there is still one more that is more powerful.

4222.55 -> And that is called inline styling. So we don't actually know what inline styling is. But

4228.34 -> pretty much we don't need to use a CSS file to do inline styling. All we need is the element

4235.17 -> and the HTML file. So why don't I go ahead and use services here, because we're kind

4240.52 -> of on a roll, and I want to use this again. So what I'm going to do is a style, which

4247.44 -> is the attribute. And then here, we add all of our CSS properties, no selector nothing.

4253.29 -> So I'm going to say here, that color is still blue. And we don't actually, still blue is

4259.179 -> part of the CSS color collection, we'll explain all of those in future sections. So if I go

4264.94 -> ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class

4272.969 -> and the header here. So pretty much there are, there's an order here that you need to

4279.17 -> take away from this video. headers are the least specific, they kind of applied to everything,

4284.929 -> and they're not that powerful. The class selector is above that, and then the ID and then the

4292.09 -> inline styling, or the style attribute. So if you follow this order, you will pretty

4303.3 -> much you can predict what is going to be the outcome and which styles are going to be followed.

4306.94 -> So this is a pretty useful tool and in CSS, and it pretty much allows you to structure

4311.13 -> your file in a way that makes sense to other people when they're reading it. But there's

4315.929 -> still one more question we need to answer. What's the difference between a class and

4320.16 -> an ID. Apart from the obvious specificity difference, we actually use classes and IDs

4325.76 -> in different situations. And they're pretty simple. Classes are meant to be used multiple

4330.21 -> times. So if you have done any programming before, you'll know that a class is kind of

4334.55 -> like a blueprint, it's made so that you can create multiple objects from it. But the thing

4339.15 -> is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention

4345.119 -> is, you're only supposed to use an ID for one single element. So for example, let's

4348.78 -> take this file we have here we have three sub titles, and one for the about me section.

4352.41 -> In this structure, what we would do is create a sub title class for every sub title on the

4356.17 -> page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple

4360.03 -> h2 is on this page. So we only want to apply it to the subtitles. But then for our bio

4368.11 -> about me here, there's only going to be one of them on this whole document, which means

4373.659 -> we're going to use the ID of about me. And then from there, we can go and apply our styles

4382.83 -> and do all of that. So that's just the main difference between classes and IDs. And now

4389.53 -> that you know how to use them, you can actually go through and apply them properly in real

4393.92 -> world scenarios. So that's just a very important thing to keep in mind. You're only supposed

4399.38 -> to use IDs once and classes can be used multiple times. Alright, let's move on.

4402.84 -> selector property. So what we're going to do is actually go through and talk about the

4405.36 -> different powers or specificities, or specifics of each selector and we're going to see which

4411.07 -> one is most powerful. So right now We know that the element selectors are less powerful

4415.29 -> than the class. But there is actually two more that are more powerful than the class

4416.29 -> selectors. So I'm going to go ahead and apply this about me class to another h2. Now I know

4419.96 -> it's not really going to make much sense. So I'm actually just going to rename it to

4423.31 -> subtitle. Okay, so I'm going to go ahead and add this to services as well. subtitle, there

4426.739 -> we go. Let's go ahead and refresh the page. Oh, whoops, forgot to actually change the

4431.35 -> class name. with CSS fun. There we go. So now we have two blue sub titles and one red.

4437.219 -> So you can see that the class will overwrite the header, or sorry, the element tag. But

4443.6 -> there are like I said, there are still two that are more powerful. The next after the

4448.59 -> class is the ID. So I'm going to go over here to services and add an ID of services, oops,

4454.67 -> services. All right. Now, what I'm going to do is go into my CSS file, and use the id

4461.13 -> selector. color green. So I'm going to go ahead and refresh now. And you can see that

4465.94 -> it's right here, it's green. So now that we know the ID is going to overwrite the class,

4471.35 -> and the class is going to overwrite the header. So there is still one more that is more powerful.

4478.12 -> And that is called inline styling. So we don't actually know what inline styling is. But

4489.56 -> pretty much we don't need to use a CSS file to do inline styling. All we need is the element

4498.409 -> and the HTML file. So why don't I go ahead and use services here, because we're kind

4504.3 -> of on a roll, and I want to use this again. So what I'm going to do is a style, which

4511.27 -> is the attribute. And then here, we add all of our CSS properties, no selector nothing.

4516.449 -> So I'm going to say here, that color is still blue. And we don't actually, still blue is

4522.48 -> part of the CSS color collection, we'll explain all of those in future sections. So if I go

4528.21 -> ahead and refresh, now, you can see that it is blue, and it overrides the ID, the class

4532.04 -> and the header here. So pretty much there are, there's an order here that you need to

4535.4 -> take away from this video. headers are the least specific, they kind of applied to everything,

4540.58 -> and they're not that powerful. The class selector is above that, and then the ID and then the

4545.26 -> inline styling, or the style attribute. So if you follow this order, you will pretty

4548.25 -> much you can predict what is going to be the outcome and which styles are going to be followed.

4553.32 -> So this is a pretty useful tool and in CSS, and it pretty much allows you to structure

4558.08 -> your file in a way that makes sense to other people when they're reading it. But there's

4563.42 -> still one more question we need to answer. What's the difference between a class and

4571.239 -> an ID. Apart from the obvious specificity difference, we actually use classes and IDs

4572.85 -> in different situations. And they're pretty simple. Classes are meant to be used multiple

4575.79 -> times. So if you have done any programming before, you'll know that a class is kind of

4579.61 -> like a blueprint, it's made so that you can create multiple objects from it. But the thing

4583.03 -> is, an ID is supposed to be only for one thing, it'll work for more than one. But the convention

4590.91 -> is, you're only supposed to use an ID for one single element. So for example, let's

4595.82 -> take this file we have here we have three sub titles, and one for the about me section.

4600.949 -> In this structure, what we would do is create a sub title class for every sub title on the

4607.75 -> page, then we'd apply it to it. Now the reason we're doing this is because we can have multiple

4614.719 -> h2 is on this page. So we only want to apply it to the subtitles. But then for our bio

4619.4 -> about me here, there's only going to be one of them on this whole document, which means

4624.199 -> we're going to use the ID of about me. And then from there, we can go and apply our styles

4628.58 -> and do all of that. So that's just the main difference between classes and IDs. And now

4632 -> that you know how to use them, you can actually go through and apply them properly in real

4637.36 -> world scenarios. So that's just a very important thing to keep in mind. You're only supposed

4643.42 -> to use IDs once and classes can be used multiple times. Alright, let's move on.

4648.61 -> So in this video I am we are going to be looking at pseudo selectors. So this is a special

4655.34 -> type of selector that is used commonly in interactivity with your website. So this is

4665.67 -> usually visible only when something is done on the website. So it's a pretty it's pretty

4669.76 -> cool feature. And it's used very commonly throughout CSS. And once we get to the animations

4676.239 -> and transitions part, we're actually going to be used soon as we be we're going to be

4681.23 -> using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors

4686.17 -> I want to cover here. There's a lot of number of only going to be covering the main ones

4691.469 -> that are we're going to be using. So before we go on, I'm just going to show you what

4694.829 -> a pseudo selector actually is. So usually what you would do is, after a selector, you

4698.17 -> would add a colon, and then the name of the pseudo selector. So this is just an example

4703.34 -> of one of them. And then the properties will apply normally. Now watch what happens when

4705.18 -> I hover over our h2 here, you can see that it's working perfectly. And when we hover

4707.1 -> over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the

4710.01 -> services part here. Because again, these are all separate classes. And obviously, with

4713.78 -> specificity and everything like that, they won't apply. So there we go. We have everything

4718.13 -> working here. And that's one of the pseudo selectors, which is hover. So let's move on

4722.61 -> to some of the next ones. Now, there's also two that I'd like to talk about, which is

4728.199 -> first child and last child. So the concept behind child and parent elements is that right

4733.72 -> here, if we look Actually, this is a little bit complicated example, let's look at this

4738.23 -> unordered list here, we have an A ul unordered list, and then we have three allies. Okay,

4743.469 -> so pretty much this is going to be the first child because it's placed inside of the UL,

4749.35 -> the second is going to be the second child, and then this is going to be the third child.

4754.739 -> So you can see here that this is kind of the relationship between child and parent. And

4758.45 -> what we can actually do is specify which one we want to select. So if I go over here and

4764.23 -> select all URLs, and then of course, the colon for the pseudo selector, and select first

4767.81 -> child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm

4771.84 -> gonna refresh the page, and you can see that it's not working. Now, although it might seem

4777.159 -> like you want to put the URL first, obviously, because, again, you're looking for the first

4781.679 -> child of the URL, this isn't actually how you're supposed to write it. Instead, you're

4787.42 -> supposed to write the element that you're trying to select, which in this case is our

4792.719 -> list item, or our Li. So now if I go ahead and refresh the page, you can see that the

4800.1 -> first one here is going to be blue, it's a little bit of a confusing rule to get around.

4810.67 -> But once you get used to it, it becomes very easy. We also change this to last or last

4817.61 -> child like this. And then what's going to happen is it's going to select the last one.

4823.12 -> Now, there's also one more that I'd like to talk about quickly, which is nth child. So

4828.59 -> I'm just going to show you how this thing works and child. And then in brackets, you

4832.94 -> put the number here. So when you're going to put here is pretty much what number of

4838.38 -> the child you want to style. In this case, I want every second Li child to be colored

4842.79 -> steel blue. So throughout the page, every second Li that is inside of a that is the

4847.07 -> child element is going to be styled blue, go ahead and refresh the page, you can see

4851.36 -> that works there. So there's actually one more selector that I want to talk about, at

4855.54 -> least for children, and that is the only child selector. So I think it makes perfect sense,

4859.49 -> pretty much what we're trying to look for is something that there's only one child inside

4862.87 -> of it. So for example, nothing on this page here actually has one child. But why don't

4869.61 -> we go ahead and add that. So under this list, I'm just going to temporarily remove these

4873.67 -> here, just like that. All right, let's go ahead and save, make sure it's working. There

4877.83 -> we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by

4883.889 -> car. And I'm going to say only child. So pretty much what this is saying is for every Li that

4889.161 -> is the only child of its parent. And you can see this, the UL does only has one child.

4897.159 -> So I'm going to go ahead and give it a color of purple, for example. And you can see that

4902.42 -> it works perfectly. But what would happen if I tried this on, let's just say for example,

4907.51 -> the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm

4913.219 -> also going to give this a color of purple.

4916.159 -> So in this video I am we are going to be looking at pseudo selectors. So this is a special

4920.59 -> type of selector that is used commonly in interactivity with your website. So this is

4925.02 -> usually visible only when something is done on the website. So it's a pretty it's pretty

4929.42 -> cool feature. And it's used very commonly throughout CSS. And once we get to the animations

4935.32 -> and transitions part, we're actually going to be used soon as we be we're going to be

4938.76 -> using pseudo selectors a lot. So let's get into it. Now, there's a few pseudo selectors

4942.869 -> I want to cover here. There's a lot of number of only going to be covering the main ones

4950.179 -> that are we're going to be using. So before we go on, I'm just going to show you what

4955.199 -> a pseudo selector actually is. So usually what you would do is, after a selector, you

4960.09 -> would add a colon, and then the name of the pseudo selector. So this is just an example

4966.929 -> of one of them. And then the properties will apply normally. Now watch what happens when

4972.27 -> I hover over our h2 here, you can see that it's working perfectly. And when we hover

4976.73 -> over it, it is turning red. Now, obviously, it doesn't apply to this subtitle, or the

4981.199 -> services part here. Because again, these are all separate classes. And obviously, with

4984.54 -> specificity and everything like that, they won't apply. So there we go. We have everything

4989.79 -> working here. And that's one of the pseudo selectors, which is hover. So let's move on

4995.869 -> to some of the next ones. Now, there's also two that I'd like to talk about, which is

5000.06 -> first child and last child. So the concept behind child and parent elements is that right

5004.52 -> here, if we look Actually, this is a little bit complicated example, let's look at this

5009.58 -> unordered list here, we have an A ul unordered list, and then we have three allies. Okay,

5016.219 -> so pretty much this is going to be the first child because it's placed inside of the UL,

5024.139 -> the second is going to be the second child, and then this is going to be the third child.

5031.52 -> So you can see here that this is kind of the relationship between child and parent. And

5034.719 -> what we can actually do is specify which one we want to select. So if I go over here and

5039.639 -> select all URLs, and then of course, the colon for the pseudo selector, and select first

5044.15 -> child, now, I'm just going to say set the color to steel blue as well. Okay, so I'm

5048.76 -> gonna refresh the page, and you can see that it's not working. Now, although it might seem

5053.59 -> like you want to put the URL first, obviously, because, again, you're looking for the first

5058.969 -> child of the URL, this isn't actually how you're supposed to write it. Instead, you're

5062.71 -> supposed to write the element that you're trying to select, which in this case is our

5066.63 -> list item, or our Li. So now if I go ahead and refresh the page, you can see that the

5076.83 -> first one here is going to be blue, it's a little bit of a confusing rule to get around.

5082.31 -> But once you get used to it, it becomes very easy. We also change this to last or last

5087.88 -> child like this. And then what's going to happen is it's going to select the last one.

5096.08 -> Now, there's also one more that I'd like to talk about quickly, which is nth child. So

5106.29 -> I'm just going to show you how this thing works and child. And then in brackets, you

5109.201 -> put the number here. So when you're going to put here is pretty much what number of

5113.64 -> the child you want to style. In this case, I want every second Li child to be colored

5119.54 -> steel blue. So throughout the page, every second Li that is inside of a that is the

5128.88 -> child element is going to be styled blue, go ahead and refresh the page, you can see

5138.179 -> that works there. So there's actually one more selector that I want to talk about, at

5143.83 -> least for children, and that is the only child selector. So I think it makes perfect sense,

5149.08 -> pretty much what we're trying to look for is something that there's only one child inside

5153.929 -> of it. So for example, nothing on this page here actually has one child. But why don't

5158.28 -> we go ahead and add that. So under this list, I'm just going to temporarily remove these

5163.94 -> here, just like that. All right, let's go ahead and save, make sure it's working. There

5171.03 -> we go. Now, what I'm going to do is go ahead and select this. So I'm going to say Li by

5178.34 -> car. And I'm going to say only child. So pretty much what this is saying is for every Li that

5186.3 -> is the only child of its parent. And you can see this, the UL does only has one child.

5192.54 -> So I'm going to go ahead and give it a color of purple, for example. And you can see that

5194.469 -> it works perfectly. But what would happen if I tried this on, let's just say for example,

5196.8 -> the TD is here. Okay, so I'm going to go ahead and add a new one TD, only child. And I'm

5201.82 -> also going to give this a color of purple.

5203.42 -> Now let's go ahead and refresh and see what's going on. All right. So you can see that that

5207.83 -> TD right here, it's somewhere in this table, nothing's actually happening. That's because

5210.849 -> as we can see here, there is nothing on this page where there's only one TD as a child.

5215.11 -> So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually

5219.58 -> style anything if they don't exist. So there we go. That's pretty much for the basic children

5226.41 -> kind of pseudo selectors. Let's move on to some other students, selectors. Now, there

5232.171 -> are selectors of this type that are actually specific to certain elements, and one of them

5234.56 -> is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag

5242.15 -> under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint

5250.09 -> of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click

5259.44 -> here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There

5265.52 -> we go, we have our link there. So I click on it takes me there, pretty standard stuff.

5272.6 -> Now, we can actually create pseudo selectors for this. So I'm going to be giving you two

5278.75 -> for now. Now, there are many, many more. But these are the two main ones you need to focus

5285.05 -> on. The rest of them are kind of generalized. And these are the main two that you're going

5289.63 -> to be using. So I'm going to create them here. And remember, you're using the element name,

5294.04 -> you can use the class if you want, it's not limited to single element names, actually,

5297.66 -> why don't I go ahead and do that, I'm going to give it an ID, because again, we only have

5302.969 -> one of these on the page, I'm going to give it an ID of Google link, just like that. So

5307.26 -> now I'm gonna go ahead and reference that in here. So remember, it's just the name of

5314.29 -> this electric Google dash link, in this case, and then the colon. So here, I'm going to

5318.409 -> go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also

5320.44 -> a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just

5323.369 -> a second. Alright, so let's look at the first one here, Google link, like, pretty much what

5327.82 -> this is saying is, if you've ever been on a web page, you know that there is a difference

5332.13 -> between before you click on the link and after, there's kind of some stylistic changes. So

5336.35 -> that's where pseudo selectors actually come into play. The website has of those has those

5342.48 -> defined properties. And they actually change the way that the link looks before and after

5347.23 -> it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember,

5350.59 -> so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going

5354.429 -> to go ahead and give it a color of red tie blue there. Remember, usually, the default

5355.81 -> is that it is going to be purple like this color here. Let's go ahead and refresh the

5357.33 -> page, you can see that it's actually read now. Now, obviously, I can't really go back

5358.81 -> in time, and change the link so that it doesn't look clicked. But you can see how powerful

5360.58 -> this the pseudo selectors are, because you can do so many different things. And once

5365.05 -> we learn more properties, you can actually change different parts of the page. And it

5367.49 -> becomes very powerful to use these pseudo selectors. So that's just one thing to keep

5370.77 -> in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm

5377.34 -> actually going to go ahead and add that hover property there back in case anyone wants to

5379.19 -> use the project files. So there we go. We've covered everything here. And we've added all

5382.85 -> of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that

5384.68 -> help you to look at all of the different pseudo selectors. And most of them, you're not really

5390.27 -> going to use very often, they are useful in any way, because they're usually you just

5393.119 -> use some basic pseudo selectors like hover and active, which I haven't actually covered.

5397.25 -> But things like that. So you're not really going to use all of them. But I just wanted

5401.44 -> to give you an introduction to the main ones, so that when it comes time to use them, you

5405.84 -> have the tools to finish the job or create that effect that you've always wanted. Alright,

5410.73 -> let's move on.

5411.73 -> Now let's go ahead and refresh and see what's going on. All right. So you can see that that

5417.591 -> TD right here, it's somewhere in this table, nothing's actually happening. That's because

5421.13 -> as we can see here, there is nothing on this page where there's only one TD as a child.

5426.46 -> So that's just one thing to keep in mind. Sometimes pseudo selectors won't actually

5430.54 -> style anything if they don't exist. So there we go. That's pretty much for the basic children

5435.489 -> kind of pseudo selectors. Let's move on to some other students, selectors. Now, there

5439.64 -> are selectors of this type that are actually specific to certain elements, and one of them

5443.679 -> is the anchor tag or the a tag. So I'm just going to go ahead and create an anchor tag

5448.88 -> under this h2 here. Oh, whoops. Okay, and I'm just going to give it a link or an endpoint

5457.01 -> of Google. So just like that. Okay, there we go. So in here, I'm just going to say Click

5463.39 -> here to go to Google. Pretty simple. At Tag. Hopefully everyone knows how to do this. There

5467.46 -> we go, we have our link there. So I click on it takes me there, pretty standard stuff.

5471.71 -> Now, we can actually create pseudo selectors for this. So I'm going to be giving you two

5475.77 -> for now. Now, there are many, many more. But these are the two main ones you need to focus

5480.3 -> on. The rest of them are kind of generalized. And these are the main two that you're going

5490.119 -> to be using. So I'm going to create them here. And remember, you're using the element name,

5494.8 -> you can use the class if you want, it's not limited to single element names, actually,

5496.55 -> why don't I go ahead and do that, I'm going to give it an ID, because again, we only have

5501.719 -> one of these on the page, I'm going to give it an ID of Google link, just like that. So

5507.36 -> now I'm gonna go ahead and reference that in here. So remember, it's just the name of

5518.25 -> this electric Google dash link, in this case, and then the colon. So here, I'm going to

5520.139 -> go ahead and say, link. Okay, so this is the first pseudo selector. And then there's also

5523.98 -> a second one. Don't worry about what I'm typing for. now. I'll explain both of these in just

5528.01 -> a second. Alright, so let's look at the first one here, Google link, like, pretty much what

5532.159 -> this is saying is, if you've ever been on a web page, you know that there is a difference

5538.3 -> between before you click on the link and after, there's kind of some stylistic changes. So

5541.68 -> that's where pseudo selectors actually come into play. The website has of those has those

5545.099 -> defined properties. And they actually change the way that the link looks before and after

5548.679 -> it is clicked. So I'm going to go ahead and do it here. Link is the unvisited link, remember,

5558.6 -> so I'm going to go ahead and give it a color of blue. And then when it's clicked, I'm going

5565.81 -> to go ahead and give it a color of red tie blue there. Remember, usually, the default

5571.889 -> is that it is going to be purple like this color here. Let's go ahead and refresh the

5583.31 -> page, you can see that it's actually read now. Now, obviously, I can't really go back

5590.54 -> in time, and change the link so that it doesn't look clicked. But you can see how powerful

5597.2 -> this the pseudo selectors are, because you can do so many different things. And once

5601.4 -> we learn more properties, you can actually change different parts of the page. And it

5609.929 -> becomes very powerful to use these pseudo selectors. So that's just one thing to keep

5613.27 -> in mind. All right. So there we go. We've covered most of the pseudo selectors, I'm

5618.59 -> actually going to go ahead and add that hover property there back in case anyone wants to

5624.449 -> use the project files. So there we go. We've covered everything here. And we've added all

5629.1 -> of our pseudo selectors. So like I said, there's many more, I've linked a couple articles that

5634.45 -> help you to look at all of the different pseudo selectors. And most of them, you're not really

5642.33 -> going to use very often, they are useful in any way, because they're usually you just

5647.23 -> use some basic pseudo selectors like hover and active, which I haven't actually covered.

5650.86 -> But things like that. So you're not really going to use all of them. But I just wanted

5655.38 -> to give you an introduction to the main ones, so that when it comes time to use them, you

5660.619 -> have the tools to finish the job or create that effect that you've always wanted. Alright,

5668.54 -> let's move on.

5669.73 -> Today, we're going to be looking at Advanced selectors. So right now, we've looked at our

5675.35 -> basic selectors, or class selectors, element selectors, and Id selectors. And we've also

5679.869 -> looked at some pseudo selectors, which is very useful. But now we're going to look at

5685.3 -> some of the more advanced selectors. Now, you're not going to use these every day. They're

5690.13 -> not used very commonly, but it just shows what you can actually do with these selectors,

5694.94 -> because there is a lot. So there's a bunch of advanced selectors. And I'm actually going

5699.409 -> to be breaking these down into two parts, we're going to be looking first at our basic

5704.8 -> advanced selectors. And I know that sounds a little bit contradictive. But we'll get

5709.88 -> into that in just a second. And then after that, we're going to be talking about attribute

5715.61 -> selectors, which are probably the hardest type of selector to get used to. Alright,

5718.74 -> let's get started. So the first thing I want to talk about is how you actually set up these

5723.31 -> selectors. Now, these sometimes contain one, two, or sometimes even three elements in one

5728.55 -> selector. So I'm going to be going through these and talking about how they all work.

5732.3 -> So the first selector I'm going to be talking about is something called the adjacent sibling

5736.9 -> selector. So pretty much what this does is selects every single element that directly

5739.55 -> follows a different element. So I'll show you how to set this up. Let's first take a

5743.33 -> look at our HTML page every over here, sorry. Now you can see we have our services, which

5746.95 -> is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead

5753.31 -> and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl,

5757.19 -> slash, like that. So if you type control slash comments here with which pretty much just

5762.76 -> renders it useless, it doesn't run or anything like that. Let's get started. So the first

5765.949 -> thing I want to do is go ahead and set this up. So I want to be able to apply styles to

5772.909 -> every a tag or anchor tag that comes directly after an h2. So the way to set this up is

5777.69 -> all you have to do is go the element that you Want to be the first element. So in this

5783.58 -> case, it's going to be our h2. And then afterwards, it's going to be the element that you want

5788.77 -> after, which is our a tag. So you want h2 plus a. So this is pretty much saying every

5795.19 -> anchor tag that follows an h2. So then we can pretty much just set the style however

5800.27 -> we want. So I'm going to say color is red, just like that. Now remember, this isn't any

5804.929 -> there is no pseudo selector on this, if you could add it if you wanted to. Because this

5809.13 -> is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh

5812.63 -> the page. And you can see it turns red again. So that's the first type of selector. Next

5814.84 -> thing I want to look at is the general sibling combinator, or selector. So this is a little

5818.68 -> bit more difficult to understand. But All in good time, it's once you get used to it,

5828.25 -> it becomes much easier to understand. So pretty much what the general sibling selector does,

5832.51 -> is goes for the same kind of idea as this selector here, it looks for elements that

5838.409 -> go directly after one another, except they have to be sharing the same parents, okay.

5842.77 -> So for example, let's see our input here our form, we have an input and a text area, or

5847.599 -> a button followed by a text area, for example. So what we're going to do here is I want to

5853.139 -> style every button that's followed by a text area, except in this case, they have to share

5858.35 -> the same parent. So what we're going to do is go and say, every button, which is going

5863.349 -> to be the next one, or the final one, which is eight here. So sorry, it's actually going

5868.699 -> to be text area. Right, because that's the first element here, which is our text area.

5871.77 -> And then this symbol followed, and then it's going to be a button, like that. So this is

5876.26 -> seeing every button that is followed, or that is after a text area, but they're in the same

5882.58 -> parent. So from here, we can go and style it however we want. So in this case, I'm going

5888.949 -> to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you

5897.28 -> can see that the button color is purple. So like I said, the main difference between these

5902.389 -> two is that the first one is going to be styling elements that follow each other no matter

5904.95 -> where they are on the scale. So if you actually look up here, they don't share any parents,

5908.969 -> they're completely separate elements. Whereas here, they have to follow each other. And

5911.51 -> I'll actually demonstrate that quickly. If we change this to a plus here. and refresh,

5914.9 -> the style is still going to work because they are directly preceded. But the only thing

5919.29 -> is if they aren't. So for example, I'm just going to actually move this button out of

5922.429 -> the form.

5923.429 -> Today, we're going to be looking at Advanced selectors. So right now, we've looked at our

5926.25 -> basic selectors, or class selectors, element selectors, and Id selectors. And we've also

5929.13 -> looked at some pseudo selectors, which is very useful. But now we're going to look at

5934.679 -> some of the more advanced selectors. Now, you're not going to use these every day. They're

5939.49 -> not used very commonly, but it just shows what you can actually do with these selectors,

5942.77 -> because there is a lot. So there's a bunch of advanced selectors. And I'm actually going

5946.69 -> to be breaking these down into two parts, we're going to be looking first at our basic

5951.699 -> advanced selectors. And I know that sounds a little bit contradictive. But we'll get

5955.37 -> into that in just a second. And then after that, we're going to be talking about attribute

5959.52 -> selectors, which are probably the hardest type of selector to get used to. Alright,

5961.88 -> let's get started. So the first thing I want to talk about is how you actually set up these

5964.38 -> selectors. Now, these sometimes contain one, two, or sometimes even three elements in one

5966.42 -> selector. So I'm going to be going through these and talking about how they all work.

5969.79 -> So the first selector I'm going to be talking about is something called the adjacent sibling

5975.77 -> selector. So pretty much what this does is selects every single element that directly

5980.96 -> follows a different element. So I'll show you how to set this up. Let's first take a

5984.11 -> look at our HTML page every over here, sorry. Now you can see we have our services, which

5991.59 -> is an h2, and then we have an a tag. Now first thing I'm going to do is actually go ahead

6000.03 -> and get rid of these two, I'm going to actually comment them out. You can do this with Ctrl,

6007.489 -> slash, like that. So if you type control slash comments here with which pretty much just

6012.409 -> renders it useless, it doesn't run or anything like that. Let's get started. So the first

6018.37 -> thing I want to do is go ahead and set this up. So I want to be able to apply styles to

6027.28 -> every a tag or anchor tag that comes directly after an h2. So the way to set this up is

6034.639 -> all you have to do is go the element that you Want to be the first element. So in this

6041.51 -> case, it's going to be our h2. And then afterwards, it's going to be the element that you want

6050.92 -> after, which is our a tag. So you want h2 plus a. So this is pretty much saying every

6056.07 -> anchor tag that follows an h2. So then we can pretty much just set the style however

6062.01 -> we want. So I'm going to say color is red, just like that. Now remember, this isn't any

6070.13 -> there is no pseudo selector on this, if you could add it if you wanted to. Because this

6082.32 -> is still a selector. Remember, I'm not going to add any. So I'm going to go ahead and refresh

6091.63 -> the page. And you can see it turns red again. So that's the first type of selector. Next

6096.17 -> thing I want to look at is the general sibling combinator, or selector. So this is a little

6099.17 -> bit more difficult to understand. But All in good time, it's once you get used to it,

6102.349 -> it becomes much easier to understand. So pretty much what the general sibling selector does,

6105.889 -> is goes for the same kind of idea as this selector here, it looks for elements that

6110.29 -> go directly after one another, except they have to be sharing the same parents, okay.

6115.05 -> So for example, let's see our input here our form, we have an input and a text area, or

6124.409 -> a button followed by a text area, for example. So what we're going to do here is I want to

6131.79 -> style every button that's followed by a text area, except in this case, they have to share

6136.76 -> the same parent. So what we're going to do is go and say, every button, which is going

6140 -> to be the next one, or the final one, which is eight here. So sorry, it's actually going

6144 -> to be text area. Right, because that's the first element here, which is our text area.

6147.77 -> And then this symbol followed, and then it's going to be a button, like that. So this is

6160.06 -> seeing every button that is followed, or that is after a text area, but they're in the same

6166.08 -> parent. So from here, we can go and style it however we want. So in this case, I'm going

6171.14 -> to go ahead and just say the color is purple. Oops. Now if we go ahead and refresh, you

6174.37 -> can see that the button color is purple. So like I said, the main difference between these

6180.989 -> two is that the first one is going to be styling elements that follow each other no matter

6189.62 -> where they are on the scale. So if you actually look up here, they don't share any parents,

6194.139 -> they're completely separate elements. Whereas here, they have to follow each other. And

6197.84 -> I'll actually demonstrate that quickly. If we change this to a plus here. and refresh,

6204.11 -> the style is still going to work because they are directly preceded. But the only thing

6209.28 -> is if they aren't. So for example, I'm just going to actually move this button out of

6212.61 -> the form.

6213.61 -> Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay,

6217.02 -> so we have the button back. Now I'm going to go ahead and change this back to our symbol

6223.15 -> there. And if we go ahead and refresh, you can see that the button right there, it doesn't

6228.8 -> actually have that styling anymore, because although they directly follow each other,

6234.35 -> they're not under the same parent. So that's just one minor difference. Alright, let's

6238.4 -> move on to the next one. It's called the child selector. So this is probably the most basic

6246.57 -> out of all of these advanced selectors. And pretty much what is saying is every single

6250.86 -> child have a certain element. So I'll give you an example. Here, we have an Li and a

6257.27 -> ul, this is pretty basic, all you have to do is type ul, which is going to be a parent.

6269.199 -> And then this symbol or the greater than symbol, and Li so this is gonna say every single Li

6274.4 -> inside of a ul, open up the brackets. And let's start to color this time to blue. I'm

6282.13 -> just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity

6287.619 -> rules, once you use these advanced selectors get quite complicated. But for example, if

6290.699 -> we actually look at the Li here, the style for this, we can see that the Li with the

6294.219 -> pseudo selector is actually more specific than the this general selector. So I'm going

6306.179 -> to go ahead and comment that out. Now if we refresh the page, you can see that it's blue.

6311.93 -> So that's just one thing to keep in mind with these advanced selectors. They can get pretty

6316.349 -> complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is

6320.08 -> to be able to classify these once we get and start using these advanced selectors. Like

6325.92 -> I said, usually you won't use these in your general use. So I'm not going to go over specificity

6336.04 -> especially because usually, you'll group up all of these styles into one selector. Okay,

6340.86 -> so that's the child selector. The next one is very similar to the child selector, but

6346.4 -> instead of having direct children, there's actually something called a descendant. So

6350.52 -> I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay,

6356.48 -> but then I'm going to create an ordered list inside of the Output training to create an

6362.81 -> Li and put the ordered list inside of that. So pretty much what's going on here is I'm

6368.38 -> creating an ordered list or a numbered list inside of a list item that is inside of a

6373.929 -> ul. So a little bit complicated. But we'll get to that in just a second. So I'm going

6379.61 -> to create an Li inside of this. And I'm going to say, my numbered list item, just like that.

6383.84 -> Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item

6388.56 -> here with our item. All right, so let's get started on using this descendant selector.

6391.61 -> So I'm going to get started, first thing I want to do is actually set this up. So first

6396.76 -> thing we're going to have is the parent. Okay, so in this case, it's going to be our ul,

6402.31 -> remember, because that's the top level. But then I'm going to select the Li here, but

6408.84 -> I'm not going to put our greater than symbol. So that's the big difference. This is the

6413.96 -> descendant selector, and then this is going to be our child selector. So that's just the

6420.349 -> main difference, it's very easy to miss, just make sure that you don't mess that up. So

6427.37 -> now I'm going to select the color and set it to four. Now let's just say green. All

6435.02 -> right, now let's go ahead and refresh the page. And you can see that all of the lies

6441.3 -> inside of there are going to be green, right? Only problem is our ordered list right here

6445.659 -> is actually purple, right? And of course, you know, our list here is getting a little

6451.17 -> bit complicated. So I'm going to go ahead and comment this out. Remember, this is a

6454.74 -> very specific selector. Now, if I go ahead and refresh, both of them are green. All right.

6459.21 -> So what do you need to take away from this, it's pretty much what this is saying is any

6464.38 -> Li that eventually boils back or propagates up if you have done any programming before,

6468.829 -> that goes up to N A ul, okay, so I'll just show you what that means. In this case, the

6474.05 -> Li is a direct child of the UL, right. But then we have another Li in here, which is

6475.81 -> a child of n o l, which is just child of an Li, which is a child of the UL, right. So

6480.81 -> as you move up and up, it eventually comes back to the UL as the parent element. So the

6487.25 -> main difference you need to take away from this is that the child selector is selecting

6491.469 -> any direct children. So anything here would not apply, because we're actually

6495.91 -> Just like that seems like the button disappeared there. Let's go ahead and redo that. Okay,

6499.969 -> so we have the button back. Now I'm going to go ahead and change this back to our symbol

6504.63 -> there. And if we go ahead and refresh, you can see that the button right there, it doesn't

6509.44 -> actually have that styling anymore, because although they directly follow each other,

6512.07 -> they're not under the same parent. So that's just one minor difference. Alright, let's

6516.42 -> move on to the next one. It's called the child selector. So this is probably the most basic

6522.889 -> out of all of these advanced selectors. And pretty much what is saying is every single

6526.02 -> child have a certain element. So I'll give you an example. Here, we have an Li and a

6530.199 -> ul, this is pretty basic, all you have to do is type ul, which is going to be a parent.

6536.32 -> And then this symbol or the greater than symbol, and Li so this is gonna say every single Li

6540.83 -> inside of a ul, open up the brackets. And let's start to color this time to blue. I'm

6549.65 -> just gonna say that. And remember, specificity is at play here. Now, like I said, the specificity

6552.869 -> rules, once you use these advanced selectors get quite complicated. But for example, if

6557.389 -> we actually look at the Li here, the style for this, we can see that the Li with the

6563.139 -> pseudo selector is actually more specific than the this general selector. So I'm going

6568.07 -> to go ahead and comment that out. Now if we refresh the page, you can see that it's blue.

6573.85 -> So that's just one thing to keep in mind with these advanced selectors. They can get pretty

6578.929 -> complicated. And that's why we use the numbers, the zeros, ones, twos, things like that, is

6584.21 -> to be able to classify these once we get and start using these advanced selectors. Like

6589.869 -> I said, usually you won't use these in your general use. So I'm not going to go over specificity

6595.219 -> especially because usually, you'll group up all of these styles into one selector. Okay,

6600.07 -> so that's the child selector. The next one is very similar to the child selector, but

6603.69 -> instead of having direct children, there's actually something called a descendant. So

6606.719 -> I'm just going to go ahead and edit this a little bit. I'm going to have an Li okay,

6612.13 -> but then I'm going to create an ordered list inside of the Output training to create an

6616.559 -> Li and put the ordered list inside of that. So pretty much what's going on here is I'm

6619.55 -> creating an ordered list or a numbered list inside of a list item that is inside of a

6624.389 -> ul. So a little bit complicated. But we'll get to that in just a second. So I'm going

6629.51 -> to create an Li inside of this. And I'm going to say, my numbered list item, just like that.

6634.949 -> Alright, now I'm going to go ahead and refresh the page. And you can see we have a list item

6637.82 -> here with our item. All right, so let's get started on using this descendant selector.

6639.62 -> So I'm going to get started, first thing I want to do is actually set this up. So first

6642.55 -> thing we're going to have is the parent. Okay, so in this case, it's going to be our ul,

6648.03 -> remember, because that's the top level. But then I'm going to select the Li here, but

6652.09 -> I'm not going to put our greater than symbol. So that's the big difference. This is the

6656.98 -> descendant selector, and then this is going to be our child selector. So that's just the

6661.08 -> main difference, it's very easy to miss, just make sure that you don't mess that up. So

6665.78 -> now I'm going to select the color and set it to four. Now let's just say green. All

6669.04 -> right, now let's go ahead and refresh the page. And you can see that all of the lies

6671.74 -> inside of there are going to be green, right? Only problem is our ordered list right here

6676.5 -> is actually purple, right? And of course, you know, our list here is getting a little

6680.32 -> bit complicated. So I'm going to go ahead and comment this out. Remember, this is a

6684.55 -> very specific selector. Now, if I go ahead and refresh, both of them are green. All right.

6690.61 -> So what do you need to take away from this, it's pretty much what this is saying is any

6693.98 -> Li that eventually boils back or propagates up if you have done any programming before,

6695.72 -> that goes up to N A ul, okay, so I'll just show you what that means. In this case, the

6697.661 -> Li is a direct child of the UL, right. But then we have another Li in here, which is

6702.09 -> a child of n o l, which is just child of an Li, which is a child of the UL, right. So

6707.71 -> as you move up and up, it eventually comes back to the UL as the parent element. So the

6710.96 -> main difference you need to take away from this is that the child selector is selecting

6714.77 -> any direct children. So anything here would not apply, because we're actually

6718.03 -> this one wouldn't apply, because the ordered list is actually a child of the Li remember,

6725.13 -> but when you're using the descendant selector, what actually happens is, if it is contained

6729.7 -> inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate

6735.09 -> this. Now. Let's go ahead and actually remove this Li remember, because once you get to

6740.76 -> this point, CSS gets a little bit complicated. This is going to end up styling everything

6749.949 -> inside it. So I'm actually just going to remove this and leave it just the ordered list. So

6757.18 -> right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh.

6761.28 -> And you can see it still stays the same, because we have this style applied. But why don't

6763.449 -> we go ahead and remove this, what do you think's going to happen? Well, you can see here that

6769.079 -> this stays blue, remember, because of our direct child selector, but then this doesn't

6774.21 -> have any style at all. So this Li works perfectly. It is a direct child of the UL, which means

6780.82 -> it's going to be colored with the style specified. The only problem is this Li is a direct child

6787.11 -> have the ordered list, which is completely separate from this one. So the styles aren't

6791.65 -> going to be applied on this one. On the other hand, if we did have our descendant selector

6798.3 -> enabled, it's going to style both of them because remember, the Li is a child of the

6803.619 -> oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference

6810.85 -> between the two, you might be able to miss it, it could really mess up your code. So

6817.949 -> just make sure to keep that in mind. Alright, so those are pretty much the basic advanced

6823.96 -> selectors, those are the four that you're mainly going to use. Again, there's many more,

6827.409 -> but they are quite difficult. And we're not going to cover them because they're not very

6831.07 -> useful. So there we go. Those are the four selectors that you can use. Go ahead and practice

6835.57 -> them as much as you want. You know, try messing them around, open up some HTML files and just

6841.76 -> see what you can do with them. All right, let's move on.

6846.04 -> this one wouldn't apply, because the ordered list is actually a child of the Li remember,

6851.61 -> but when you're using the descendant selector, what actually happens is, if it is contained

6855.449 -> inside of a ul at all, then use or apply the styles. So I'm going to go ahead and demonstrate

6860.809 -> this. Now. Let's go ahead and actually remove this Li remember, because once you get to

6865.44 -> this point, CSS gets a little bit complicated. This is going to end up styling everything

6869.429 -> inside it. So I'm actually just going to remove this and leave it just the ordered list. So

6873.84 -> right now, we have the ordered list as a child of the UL. Now I'm going to go ahead and refresh.

6879.23 -> And you can see it still stays the same, because we have this style applied. But why don't

6887.829 -> we go ahead and remove this, what do you think's going to happen? Well, you can see here that

6896.13 -> this stays blue, remember, because of our direct child selector, but then this doesn't

6900.23 -> have any style at all. So this Li works perfectly. It is a direct child of the UL, which means

6905.21 -> it's going to be colored with the style specified. The only problem is this Li is a direct child

6909.25 -> have the ordered list, which is completely separate from this one. So the styles aren't

6912.29 -> going to be applied on this one. On the other hand, if we did have our descendant selector

6916.84 -> enabled, it's going to style both of them because remember, the Li is a child of the

6920.29 -> oil, and the oil is a child of the UL. So just keep that in mind, there's a big difference

6926.139 -> between the two, you might be able to miss it, it could really mess up your code. So

6930.64 -> just make sure to keep that in mind. Alright, so those are pretty much the basic advanced

6934.869 -> selectors, those are the four that you're mainly going to use. Again, there's many more,

6941.61 -> but they are quite difficult. And we're not going to cover them because they're not very

6947.05 -> useful. So there we go. Those are the four selectors that you can use. Go ahead and practice

6955.34 -> them as much as you want. You know, try messing them around, open up some HTML files and just

6959.88 -> see what you can do with them. All right, let's move on.

6961.639 -> Welcome back. So in this video, I am going to be talking about the last type of selector.

6965.639 -> These are called attribute selectors. They're a little bit complicated once you get started,

6970.07 -> but once we actually start using them, they become very easy to use. So first of all,

6975.44 -> what is an attribute selector? Well, as we know, in HTML, we can actually add attributes

6980.27 -> to all of our elements. So for example, this image here has an attribute of source which

6986.369 -> tells the image tag where the source of the images. But what we can actually do in CSS

6992.61 -> is use these to our advantage, we can select certain elements that for certain attributes

6997.05 -> and their values. So for example, let's go ahead and try and rewrite this subtitle class

7001.199 -> here. So we know if we go over here that all of our, all of our subtitle classes are used

7005.17 -> in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So

7009.809 -> what we do is first start off with our tag name, which is h2. But then inside of some

7015.55 -> square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're

7018.44 -> not going to do it like this, we're going to have to select some sort of attribute.

7020.27 -> What this allows us to do is actually select certain things or certain elements based on

7023.55 -> their attributes. So in this clip, in this case, we want to select everything that has

7027.01 -> the attribute of class, and we want to make sure that the class itself is subtitled. Okay.

7030.77 -> Now, you do not need quotation marks for these, unlike how they were in HTML, you can see

7036.44 -> we do need quotation marks, but in CSS, we don't actually need them. Alright, so there

7041.56 -> we go. We have rewritten our class here. But we've read we've but we've written it in a

7044.78 -> way that allows us to select it based on its act on the attribute of it itself. So let's

7048.01 -> go ahead and refresh the page and see what happens, you can see that this state exactly

7051.739 -> the same. Now nothing has changed. If I go ahead and change this back to dot subtitle,

7055.33 -> just like that, refresh the page, you can see nothing's changed. So that's pretty basic.

7059.57 -> Now, it doesn't just have to be class, we can select it based on many different things.

7066.01 -> So for example, if I wanted to select this image over here, I'm going to go over to the

7071.829 -> bottom, I could say image, image, and then every and then the source has to be equal

7076.739 -> to something. All right. So there we go. Now we've done that. But there's actually more

7080.76 -> than one type of selector. Now, usually, this is the basic one where you just equate one

7085.409 -> side to the other. But there's actually many more types of selectors, which allow you to

7091.199 -> kind of modify the attribute selectors and make them much more powerful than they are

7095.23 -> right now. So how do we do this? Well, I'm going to be covering just a few of them with

7104.28 -> you today, and showing you how you can use them. So we have two images on this page.

7109.659 -> Now both of them are located in this image folder. Is there do you think that there's

7114.219 -> any way that we can select both of them in one go using an attribute selector? Well,

7118.36 -> there actually is. So here's what we have to do. First of all, let's find the common

7123.52 -> factor between these two images. They both are contained inside this folder. So they

7130.059 -> both start definitely start with this path, dot dot slash IMG slash, both of them are

7132.88 -> going to contain this. And if we actually go back and look, you can see that both images

7137.02 -> actually do contain this link here, wherever the other images, there it is. So there we

7142.01 -> go. Now we've done that. But remember that this is direct equating this has to be equal

7145.37 -> to this. And unfortunately, neither of them are equal to that. So how do you think we

7149.19 -> fix this? Well, all we have to do is put a carrot behind the attribute, just like this.

7153.09 -> So what this says is every single image where the source contains or starts with, sorry,

7156.079 -> yeah, starts with this piece of information, what comes after, it doesn't matter. But what

7159.51 -> we're doing is selecting all of the images where the source attribute starts with this

7163.77 -> value right here. So this is you can already see how powerful this is. Now, if we go ahead

7172.89 -> and refresh the page, obviously, we can't see anything because we didn't add any styles.

7180.16 -> But I'm going to go ahead and add a quick style for you. Or you don't need to know how

7187.17 -> to do this,

7188.17 -> Welcome back. So in this video, I am going to be talking about the last type of selector.

7194.3 -> These are called attribute selectors. They're a little bit complicated once you get started,

7199.48 -> but once we actually start using them, they become very easy to use. So first of all,

7202.849 -> what is an attribute selector? Well, as we know, in HTML, we can actually add attributes

7207.969 -> to all of our elements. So for example, this image here has an attribute of source which

7213.13 -> tells the image tag where the source of the images. But what we can actually do in CSS

7219.03 -> is use these to our advantage, we can select certain elements that for certain attributes

7222.26 -> and their values. So for example, let's go ahead and try and rewrite this subtitle class

7232.34 -> here. So we know if we go over here that all of our, all of our subtitle classes are used

7237.89 -> in h2. So what I want to do is actually rewrite this in terms of our attribute selector. So

7241.73 -> what we do is first start off with our tag name, which is h2. But then inside of some

7245.32 -> square brackets, what we do is type attribute is equal to value. Okay, so obviously, we're

7247.619 -> not going to do it like this, we're going to have to select some sort of attribute.

7251.179 -> What this allows us to do is actually select certain things or certain elements based on

7255.54 -> their attributes. So in this clip, in this case, we want to select everything that has

7259.92 -> the attribute of class, and we want to make sure that the class itself is subtitled. Okay.

7266.909 -> Now, you do not need quotation marks for these, unlike how they were in HTML, you can see

7273.61 -> we do need quotation marks, but in CSS, we don't actually need them. Alright, so there

7278.13 -> we go. We have rewritten our class here. But we've read we've but we've written it in a

7283.4 -> way that allows us to select it based on its act on the attribute of it itself. So let's

7291.29 -> go ahead and refresh the page and see what happens, you can see that this state exactly

7296.61 -> the same. Now nothing has changed. If I go ahead and change this back to dot subtitle,

7300.03 -> just like that, refresh the page, you can see nothing's changed. So that's pretty basic.

7304.21 -> Now, it doesn't just have to be class, we can select it based on many different things.

7307 -> So for example, if I wanted to select this image over here, I'm going to go over to the

7312.71 -> bottom, I could say image, image, and then every and then the source has to be equal

7318.449 -> to something. All right. So there we go. Now we've done that. But there's actually more

7319.85 -> than one type of selector. Now, usually, this is the basic one where you just equate one

7323.42 -> side to the other. But there's actually many more types of selectors, which allow you to

7328.37 -> kind of modify the attribute selectors and make them much more powerful than they are

7332.619 -> right now. So how do we do this? Well, I'm going to be covering just a few of them with

7337.849 -> you today, and showing you how you can use them. So we have two images on this page.

7342.409 -> Now both of them are located in this image folder. Is there do you think that there's

7346.23 -> any way that we can select both of them in one go using an attribute selector? Well,

7349.44 -> there actually is. So here's what we have to do. First of all, let's find the common

7354.35 -> factor between these two images. They both are contained inside this folder. So they

7357.11 -> both start definitely start with this path, dot dot slash IMG slash, both of them are

7360.52 -> going to contain this. And if we actually go back and look, you can see that both images

7362.199 -> actually do contain this link here, wherever the other images, there it is. So there we

7366.489 -> go. Now we've done that. But remember that this is direct equating this has to be equal

7374.05 -> to this. And unfortunately, neither of them are equal to that. So how do you think we

7377.82 -> fix this? Well, all we have to do is put a carrot behind the attribute, just like this.

7382.36 -> So what this says is every single image where the source contains or starts with, sorry,

7387.599 -> yeah, starts with this piece of information, what comes after, it doesn't matter. But what

7393.079 -> we're doing is selecting all of the images where the source attribute starts with this

7398.29 -> value right here. So this is you can already see how powerful this is. Now, if we go ahead

7401.73 -> and refresh the page, obviously, we can't see anything because we didn't add any styles.

7404.94 -> But I'm going to go ahead and add a quick style for you. Or you don't need to know how

7411.21 -> to do this,

7412.21 -> I'm actually going to make it a little bit more obvious. So you don't need to know how

7417.719 -> to do this. We're going to cover it later. But you can see now both images are covered

7423.91 -> in black. Okay. So there we go. That's just one way, one of the selectors we can do, we

7426.78 -> can also change this to $1 sign, and in this case, it's going to be make sure that the

7433.191 -> source attribute ends with this value. Okay. So there we go, we can do that. Obviously,

7441.679 -> the style isn't going to work anymore, because this doesn't apply. But there's also another

7445.48 -> one that we can do, which is using a star the multiplication symbol. And pretty much

7450.289 -> what this is, is if it contains it anywhere, anywhere in the the value for beginning and

7457.05 -> middle doesn't matter. As long as it contains this. It's going to be there. So I'm going

7465.21 -> to go ahead and refresh and you can see now that works because both of them do contain

7470.11 -> this. So those are the three basic ones, but there's also some more complicated selectors

7477.19 -> now I'm going to go ahead and cover them. But you don't exactly need to know these,

7483.349 -> because they're a little bit complicated. So I'm just going to go ahead and do them.

7488.699 -> The first one is called a whitespace attribute selector. So pretty much, if you don't know

7496.21 -> this already, you can actually add multiple classes to something in HTML. So I'm actually

7502.5 -> going to go ahead and add another class to the subtitles. And I'm just going to call

7505.989 -> it just something random particle subtitle. Obviously, it's a little bit confusing, but

7508.969 -> just bear with me. So you can actually add multiple classes or multiple arguments separated

7514.03 -> by white spaces or spaces, inside these inside these attributes. Now, obviously, this is

7518.969 -> specific to some very small, a very small number of attributes, where you can do this

7525.739 -> now just keep that in mind. For now, what we're going to do is go forward and start

7534.989 -> using this. So I'm going to go ahead and select anything that contains this, this class specifically.

7543.88 -> Now I couldn't do you know, maybe the attribute selector where it ends in this or contains

7552.949 -> it, but there is another selector that we can use. So I'm going to go ahead and say

7557.349 -> h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol,

7560.67 -> okay, and then equals, and then our value in this in this case, it's going to be our

7565.53 -> class, which is article subtitle. All right. So now we can go ahead and add whatever you

7570.51 -> want. So I'm actually going to go ahead and give it a background. Now, again, you do not

7576.01 -> need to know what this is yet. I'm just trying to vary up the properties a little bit here.

7581.79 -> So let's go ahead and refresh the page and see what happens, you can see that a green

7585.25 -> background has been added to this, I'm not going to try hovering over that it's a little

7592.69 -> bit different compensate, but you can see that a green background has been added to

7598.82 -> it. Now, this could be used for a using a contain attribute selector. But this is a

7603.82 -> little bit more specific. And it only works for things that are separated by whitespace.

7608.909 -> So if you want to isolate certain elements that contain a certain class x, for example,

7614.719 -> you can do it with these class attributes. And that would work perfectly. So the next

7619.719 -> selector I'm going to talk about is a little bit more complicated. And it's very similar

7625.489 -> to the first step, the first one that we talked about, which was the general attribute selector,

7631.159 -> the one where, where it's exactly quality. But there's a little bit of a difference here.

7635.05 -> There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here.

7640.179 -> Okay. So pretty much what this is saying is fine, every h2, where the class is equal either

7644.62 -> equal to directly article dash subtitle, or article dash subtitle with a dash. So, again,

7647.909 -> it does have to start with this. So it can't just be containing followed by a dash, it

7653.28 -> does have to start with this. So why would you want to use something like this? Why can't

7658.449 -> you just use the exact equality? Well, this is a pretty basic site right here. Now, we're

7663.559 -> not really doing anything complicated, or any multiple stylesheets or anything like

7667.36 -> that. But sometimes when you have want to have multiple elements, or you want to build

7672.8 -> libraries, you can create multiple elements that are followed by an ID. So for example,

7676.76 -> just list them here. I'm gonna actually put this in a comment. So I could have subtitle,

7681.26 -> dash, and then some Id like that subtitle, dash, and then again, some ID. So you can

7683.59 -> see why we would use something like this, pretty much. What you want to do is select

7687.48 -> everything that

7688.48 -> I'm actually going to make it a little bit more obvious. So you don't need to know how

7693.599 -> to do this. We're going to cover it later. But you can see now both images are covered

7698.57 -> in black. Okay. So there we go. That's just one way, one of the selectors we can do, we

7703.849 -> can also change this to $1 sign, and in this case, it's going to be make sure that the

7709.53 -> source attribute ends with this value. Okay. So there we go, we can do that. Obviously,

7714.92 -> the style isn't going to work anymore, because this doesn't apply. But there's also another

7719.449 -> one that we can do, which is using a star the multiplication symbol. And pretty much

7724.4 -> what this is, is if it contains it anywhere, anywhere in the the value for beginning and

7730.5 -> middle doesn't matter. As long as it contains this. It's going to be there. So I'm going

7735.67 -> to go ahead and refresh and you can see now that works because both of them do contain

7743.159 -> this. So those are the three basic ones, but there's also some more complicated selectors

7747.98 -> now I'm going to go ahead and cover them. But you don't exactly need to know these,

7753.449 -> because they're a little bit complicated. So I'm just going to go ahead and do them.

7755.389 -> The first one is called a whitespace attribute selector. So pretty much, if you don't know

7759.36 -> this already, you can actually add multiple classes to something in HTML. So I'm actually

7764.01 -> going to go ahead and add another class to the subtitles. And I'm just going to call

7768.599 -> it just something random particle subtitle. Obviously, it's a little bit confusing, but

7771.719 -> just bear with me. So you can actually add multiple classes or multiple arguments separated

7773.25 -> by white spaces or spaces, inside these inside these attributes. Now, obviously, this is

7774.25 -> specific to some very small, a very small number of attributes, where you can do this

7778.489 -> now just keep that in mind. For now, what we're going to do is go forward and start

7784.38 -> using this. So I'm going to go ahead and select anything that contains this, this class specifically.

7790.159 -> Now I couldn't do you know, maybe the attribute selector where it ends in this or contains

7794.23 -> it, but there is another selector that we can use. So I'm going to go ahead and say

7798.21 -> h2. And of course, the attribute is class. And it's this symbol, whoops, it's this symbol,

7801.849 -> okay, and then equals, and then our value in this in this case, it's going to be our

7805.06 -> class, which is article subtitle. All right. So now we can go ahead and add whatever you

7807.65 -> want. So I'm actually going to go ahead and give it a background. Now, again, you do not

7811.139 -> need to know what this is yet. I'm just trying to vary up the properties a little bit here.

7815.929 -> So let's go ahead and refresh the page and see what happens, you can see that a green

7819.73 -> background has been added to this, I'm not going to try hovering over that it's a little

7820.75 -> bit different compensate, but you can see that a green background has been added to

7825.409 -> it. Now, this could be used for a using a contain attribute selector. But this is a

7828.719 -> little bit more specific. And it only works for things that are separated by whitespace.

7830.909 -> So if you want to isolate certain elements that contain a certain class x, for example,

7835.489 -> you can do it with these class attributes. And that would work perfectly. So the next

7840.23 -> selector I'm going to talk about is a little bit more complicated. And it's very similar

7846.159 -> to the first step, the first one that we talked about, which was the general attribute selector,

7852.51 -> the one where, where it's exactly quality. But there's a little bit of a difference here.

7862.039 -> There's actually one exception to this. Now, I'm going to go ahead and demonstrate it here.

7866.57 -> Okay. So pretty much what this is saying is fine, every h2, where the class is equal either

7872.44 -> equal to directly article dash subtitle, or article dash subtitle with a dash. So, again,

7878.29 -> it does have to start with this. So it can't just be containing followed by a dash, it

7885.51 -> does have to start with this. So why would you want to use something like this? Why can't

7893.349 -> you just use the exact equality? Well, this is a pretty basic site right here. Now, we're

7901.579 -> not really doing anything complicated, or any multiple stylesheets or anything like

7905.409 -> that. But sometimes when you have want to have multiple elements, or you want to build

7910.159 -> libraries, you can create multiple elements that are followed by an ID. So for example,

7915.63 -> just list them here. I'm gonna actually put this in a comment. So I could have subtitle,

7922.75 -> dash, and then some Id like that subtitle, dash, and then again, some ID. So you can

7930.01 -> see why we would use something like this, pretty much. What you want to do is select

7935.639 -> everything that

7936.639 -> has subtitle and then the dash in it. And you're probably also wondering, okay, why

7940.489 -> can't you just use one or the other selectors like something that starts with it? Well,

7946.96 -> sometimes this is contained in a chain, or sometimes there's multiple dashes. And on

7954.31 -> top of that, some sometimes it may change, you know, maybe this could be in the middle

7960.03 -> of 15 other classes. So you can see why you'd want to use something like this. And although

7965.34 -> it's not used very commonly, it's still very important to know. Alright, so those are pretty

7969.039 -> much all of the advanced Arctic attribute selectors. Like I said, You aren't going to

7971.96 -> use these very commonly. But again, it is good to know they are very powerful selectors.

7976.05 -> So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice,

7978.73 -> and just try using the selectors on your own. All of the project files are available on

7982.69 -> GitHub, the they the link to the repository was posted at the beginning of the course.

7987.45 -> So you can go ahead and check that out if you want to download the files and work with

7990.66 -> them. But other than that, there we go. That's pretty much it for selectors now we can actually

7994.809 -> move on and start using CSS. Alright, let's move on.

7996.78 -> has subtitle and then the dash in it. And you're probably also wondering, okay, why

8000.8 -> can't you just use one or the other selectors like something that starts with it? Well,

8005.5 -> sometimes this is contained in a chain, or sometimes there's multiple dashes. And on

8009.78 -> top of that, some sometimes it may change, you know, maybe this could be in the middle

8013.8 -> of 15 other classes. So you can see why you'd want to use something like this. And although

8018.349 -> it's not used very commonly, it's still very important to know. Alright, so those are pretty

8022.969 -> much all of the advanced Arctic attribute selectors. Like I said, You aren't going to

8028.65 -> use these very commonly. But again, it is good to know they are very powerful selectors.

8034.13 -> So yeah, that's pretty much it. Go ahead. Like I said, with every single video practice,

8039.61 -> and just try using the selectors on your own. All of the project files are available on

8045.4 -> GitHub, the they the link to the repository was posted at the beginning of the course.

8055.719 -> So you can go ahead and check that out if you want to download the files and work with

8059.96 -> them. But other than that, there we go. That's pretty much it for selectors now we can actually

8065.21 -> move on and start using CSS. Alright, let's move on.

8068.13 -> I'm not really going to talk a lot in this video because there's not really much to talk

8073.32 -> about, but this video and the next are very important because right now you're probably

8078.77 -> just piecing things together about the whole way that we use CSS. And we've had to use

8085.159 -> a couple properties here and there, but you Probably don't actually know what these brackets

8087.989 -> do, or how selectors work or how any of this is actually put together. So that's what I'm

8090.849 -> going to be doing in the next few videos is explaining how all of this comes together.

8096.719 -> And once we learn that, we can actually move on to the fun part, which is using CSS and

8101.84 -> styling this website. So first thing I want to explain is properties. Now, we've talked

8106 -> a little bit about properties here and there, because we've needed them to demonstrate points

8110.969 -> on how selectors work. Now, obviously, it might have been better if we use properties

8114.849 -> first. But in my opinion, it's better that you learn selectors before you learn properties.

8119.119 -> Because if you learn selectors First, you'll be able to understand the premise or the theory

8123.94 -> behind CSS, and how things work. Whereas if you just learn properties first, then most

8128.659 -> of your focus will be on how the properties work and not the selectors. And I feel that

8135.08 -> it's much more important that you learn the selectors before the properties so that you

8138.34 -> can actually understand CSS and how it works as a whole. So that aside, let's move on to

8145.79 -> properties. Now, like I said, we've used these a little bit in the past, we haven't actually

8149.849 -> talked about them in detail. So this is a property. Now, they're contained within selectors.

8153.639 -> And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector

8164.21 -> is going to target the element. But the actual properties are what give it its change. And

8171.429 -> what make it what it is, without the or without properties than the selectors would be completely

8176.21 -> useless. So let's go ahead and talk about the parts of properties. Now first of all,

8180.53 -> a colon is always needed, you cannot use a property without a colon and a semi colon,

8185.25 -> the colon comes after the property. Now the property is pretty much defining what is going

8189.71 -> to change the color, the background, the positioning, the height, the width, there are so many properties

8194.38 -> out there. And they are all used in different ways. And then next is the value. Now, most

8197.29 -> of the time, you can actually use multiple types of values. But for something like color,

8201.63 -> there are very specific rules that you need to use for them. And we're actually going

8205.939 -> to be learning those rules and how to use colors in the next section. But for now, the

8210.439 -> just think of the value as a key or Well, not a key, the value is sort of the guideline

8217.809 -> towards the property, the value is like the value to the attribute that actually defines

8222.719 -> what's changing. and the value actually gives it that change. So just keep that in mind.

8228.229 -> So that's pretty much it for properties, it's very simple. And we're going to get lots of

8232.189 -> exposure to them as we move through the course. But for now, all you need to keep in mind

8234.849 -> is that properties have two components, the actual property itself, which is kind of the

8238.7 -> guideline on what's changing, followed by a colon, and then the value itself, which

8241.51 -> is going to be the change or the type of change that happens in our our element. So what happens

8248.219 -> through our selector, and at the end of it all, you always put a semi colon, if we remove

8255.34 -> the semi colon, it's not going to work. So yeah, that's pretty much it for properties.

8262.09 -> Let's move on. So this is going to be the final video on or in this section, we're not

8269.729 -> really going to be doing anything or styling the website. But for now, I just want to talk

8276.229 -> a little bit about a very important part of CSS. Now, this is pretty much going to define

8281.219 -> the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really

8285.7 -> looking at properties yet. But we've covered a lot of different selectors and how they

8289.63 -> work. But now we need to put the two together, we know what properties are. And we definitely

8298.37 -> know what selectors are. So we need to know how these two work together. Now, I've talked

8305.309 -> a little bit about this in the past, but we haven't actually gone through it in detail.

8313.219 -> So that's what I'm going to be doing in this video. So first of all, if you look at all

8317.429 -> of the CSS code, we can see a pattern involved here. First of all, in every single one of

8324.46 -> these there are these curly braces. And on top of that in every single one, there is

8332.029 -> some italicized text, which is due to the development tool that we're using, but there's

8337.83 -> some italicized text, and then some other text here, and there's always a colon and

8344.14 -> a semi colon. And on top of that before every first curly brace, there's always going to

8353.79 -> be some form of text here, which is our selectors. But how do these actually work together? So

8361.019 -> this is very important for something called the CSS a general rule. And it's pretty much

8366.29 -> going to teach you how all CSS is supposed to look. So first of all, there's always three

8371.519 -> parts to your

8372.55 -> I'm not really going to talk a lot in this video because there's not really much to talk

8377.38 -> about, but this video and the next are very important because right now you're probably

8380.29 -> just piecing things together about the whole way that we use CSS. And we've had to use

8383.64 -> a couple properties here and there, but you Probably don't actually know what these brackets

8388.21 -> do, or how selectors work or how any of this is actually put together. So that's what I'm

8393.811 -> going to be doing in the next few videos is explaining how all of this comes together.

8398.74 -> And once we learn that, we can actually move on to the fun part, which is using CSS and

8402.45 -> styling this website. So first thing I want to explain is properties. Now, we've talked

8406.8 -> a little bit about properties here and there, because we've needed them to demonstrate points

8410.15 -> on how selectors work. Now, obviously, it might have been better if we use properties

8412.93 -> first. But in my opinion, it's better that you learn selectors before you learn properties.

8415.26 -> Because if you learn selectors First, you'll be able to understand the premise or the theory

8419.04 -> behind CSS, and how things work. Whereas if you just learn properties first, then most

8422.46 -> of your focus will be on how the properties work and not the selectors. And I feel that

8428.05 -> it's much more important that you learn the selectors before the properties so that you

8432.6 -> can actually understand CSS and how it works as a whole. So that aside, let's move on to

8438.229 -> properties. Now, like I said, we've used these a little bit in the past, we haven't actually

8442.779 -> talked about them in detail. So this is a property. Now, they're contained within selectors.

8450.24 -> And they pretty much define the way that CSS is used on what goes into the CSS. Now a selector

8458.33 -> is going to target the element. But the actual properties are what give it its change. And

8463.72 -> what make it what it is, without the or without properties than the selectors would be completely

8470.07 -> useless. So let's go ahead and talk about the parts of properties. Now first of all,

8475.521 -> a colon is always needed, you cannot use a property without a colon and a semi colon,

8481.33 -> the colon comes after the property. Now the property is pretty much defining what is going

8487.59 -> to change the color, the background, the positioning, the height, the width, there are so many properties

8492.521 -> out there. And they are all used in different ways. And then next is the value. Now, most

8498.939 -> of the time, you can actually use multiple types of values. But for something like color,

8505.21 -> there are very specific rules that you need to use for them. And we're actually going

8510.021 -> to be learning those rules and how to use colors in the next section. But for now, the

8514.54 -> just think of the value as a key or Well, not a key, the value is sort of the guideline

8519.939 -> towards the property, the value is like the value to the attribute that actually defines

8524.62 -> what's changing. and the value actually gives it that change. So just keep that in mind.

8528.43 -> So that's pretty much it for properties, it's very simple. And we're going to get lots of

8533.311 -> exposure to them as we move through the course. But for now, all you need to keep in mind

8537.2 -> is that properties have two components, the actual property itself, which is kind of the

8540.77 -> guideline on what's changing, followed by a colon, and then the value itself, which

8544.84 -> is going to be the change or the type of change that happens in our our element. So what happens

8550.649 -> through our selector, and at the end of it all, you always put a semi colon, if we remove

8556.63 -> the semi colon, it's not going to work. So yeah, that's pretty much it for properties.

8561.41 -> Let's move on. So this is going to be the final video on or in this section, we're not

8567.22 -> really going to be doing anything or styling the website. But for now, I just want to talk

8573.12 -> a little bit about a very important part of CSS. Now, this is pretty much going to define

8578.77 -> the way that you look at CSS. And we've written a lot of CSS code here. Well, we're not really

8585.74 -> looking at properties yet. But we've covered a lot of different selectors and how they

8593.53 -> work. But now we need to put the two together, we know what properties are. And we definitely

8598.76 -> know what selectors are. So we need to know how these two work together. Now, I've talked

8604.649 -> a little bit about this in the past, but we haven't actually gone through it in detail.

8610.029 -> So that's what I'm going to be doing in this video. So first of all, if you look at all

8615.41 -> of the CSS code, we can see a pattern involved here. First of all, in every single one of

8622.39 -> these there are these curly braces. And on top of that in every single one, there is

8630.05 -> some italicized text, which is due to the development tool that we're using, but there's

8634.319 -> some italicized text, and then some other text here, and there's always a colon and

8638.24 -> a semi colon. And on top of that before every first curly brace, there's always going to

8647.16 -> be some form of text here, which is our selectors. But how do these actually work together? So

8654.88 -> this is very important for something called the CSS a general rule. And it's pretty much

8659.021 -> going to teach you how all CSS is supposed to look. So first of all, there's always three

8664.17 -> parts to your

8665.17 -> to your selector here, there is the selector itself. There's the curly braces, which actually

8669.71 -> represents something called a CSS block. And then there's the properties. So first of all,

8673.14 -> let's talk about the selector. Now, we all know that selector defines what elements you're

8676.45 -> trying to collect or target on your HTML page. A selector can look any different way it can

8681.06 -> look like this with some weird symbols. It could have colons and pseudo selectors or

8685.109 -> it can just It looks something very plain like this. But we all know that they do something

8692.729 -> different. And over the last few videos, we've been covering what selectors actually do.

8698.64 -> So now what we're going to do is go through, and I'm going to teach you how this selector

8703.37 -> plays in with everything else. So we have our selector over here, this could be anything,

8707.41 -> an element selectors, pseudo selector attribute selector like one of these. But for now, we

8711.3 -> have our selector. So this is going to target some element on a page. Now, the part we haven't

8715.8 -> talked about is something called the CSS block. So pretty much once you select something,

8720.16 -> you need to define all of your styles. And as we know, all of your styles have to go

8726.479 -> in between these two curly braces. So that's what we call a CSS block. The curly braces

8733.58 -> define the beginning and end of this block. And it can be empty, it doesn't need to have

8738.63 -> anything inside it. But what's going on here is this block is going to contain all of the

8743.029 -> styles that are then going to be targeted towards our selector. And then of course,

8747.06 -> we have the properties. So all of these have only had one property where you can actually

8751.88 -> do more than one property. So a property looks like this property, a colon, and then a value,

8755.54 -> and a semicolon. So the property is going to be the name of the actual style, this can

8763.32 -> be color background, and we're going to learn a bunch of these throughout this course. But

8768.609 -> this could be anything. On the other hand, the value has to be sort of targeted or matching

8773.79 -> the style of the property. So for example, if this was a color, we can use pixels, because

8778.029 -> pixels are for size. So there are many different ways that you can use these different values.

8781.101 -> And they all depend on your property. So what I didn't show you is you can actually have

8783.681 -> more than one property. Now these can be in any style, as long as they have the semi colon

8788.05 -> and the colon. And they come inside the block. So this can be property to add value to. And

8792.79 -> you can put pretty much as many styles as you want in here. So for example, if you wanted

8796.29 -> to style a subtitle, and you wanted to change the font size, the color, and the background

8801.1 -> all at the same time, you don't need to create three separate CSS blocks, you can do it all

8804.41 -> in one. And that's the real power of CSS is that you don't have you can keep your code

8808.83 -> concise and clean, without having to create all of these different blocks. So this is

8810.71 -> pretty much the general rule, you have to follow this pretty much for all of the CSS

8817.109 -> you write using a selector and then different properties contained inside of a block. So

8820.1 -> like I said, we're going to get much more experience with actually using CSS, as we

8822.18 -> delve more into CSS and learning all of the different features it has to offer. Alright,

8823.84 -> let's move on.

8824.84 -> to your selector here, there is the selector itself. There's the curly braces, which actually

8828.42 -> represents something called a CSS block. And then there's the properties. So first of all,

8832.37 -> let's talk about the selector. Now, we all know that selector defines what elements you're

8836.439 -> trying to collect or target on your HTML page. A selector can look any different way it can

8841.08 -> look like this with some weird symbols. It could have colons and pseudo selectors or

8845.149 -> it can just It looks something very plain like this. But we all know that they do something

8855.479 -> different. And over the last few videos, we've been covering what selectors actually do.

8858.479 -> So now what we're going to do is go through, and I'm going to teach you how this selector

8863.96 -> plays in with everything else. So we have our selector over here, this could be anything,

8867.5 -> an element selectors, pseudo selector attribute selector like one of these. But for now, we

8872.09 -> have our selector. So this is going to target some element on a page. Now, the part we haven't

8876.99 -> talked about is something called the CSS block. So pretty much once you select something,

8883.41 -> you need to define all of your styles. And as we know, all of your styles have to go

8890.72 -> in between these two curly braces. So that's what we call a CSS block. The curly braces

8897.109 -> define the beginning and end of this block. And it can be empty, it doesn't need to have

8904.22 -> anything inside it. But what's going on here is this block is going to contain all of the

8908.899 -> styles that are then going to be targeted towards our selector. And then of course,

8913.899 -> we have the properties. So all of these have only had one property where you can actually

8919.24 -> do more than one property. So a property looks like this property, a colon, and then a value,

8925.27 -> and a semicolon. So the property is going to be the name of the actual style, this can

8931.48 -> be color background, and we're going to learn a bunch of these throughout this course. But

8937.14 -> this could be anything. On the other hand, the value has to be sort of targeted or matching

8943.2 -> the style of the property. So for example, if this was a color, we can use pixels, because

8948.149 -> pixels are for size. So there are many different ways that you can use these different values.

8951.44 -> And they all depend on your property. So what I didn't show you is you can actually have

8957.67 -> more than one property. Now these can be in any style, as long as they have the semi colon

8963.7 -> and the colon. And they come inside the block. So this can be property to add value to. And

8969.72 -> you can put pretty much as many styles as you want in here. So for example, if you wanted

8974.939 -> to style a subtitle, and you wanted to change the font size, the color, and the background

8982.67 -> all at the same time, you don't need to create three separate CSS blocks, you can do it all

8986.92 -> in one. And that's the real power of CSS is that you don't have you can keep your code

8992.12 -> concise and clean, without having to create all of these different blocks. So this is

8994.21 -> pretty much the general rule, you have to follow this pretty much for all of the CSS

8995.49 -> you write using a selector and then different properties contained inside of a block. So

8999.779 -> like I said, we're going to get much more experience with actually using CSS, as we

9003.26 -> delve more into CSS and learning all of the different features it has to offer. Alright,

9006.1 -> let's move on.

9007.109 -> So this is the start of a new section. And now that we've learned all we need to know

9013.75 -> about selectors, we're going to actually start styling up our website and making it look

9018.01 -> good. So first of all, let's just talk about coloring. In general, I mean, what is coloring?

9023.34 -> And what are we supposed to do with it. So as we know, we already have a bunch of colors

9029.8 -> here. And they all look fine. But what we're actually trying to do here is color our website

9034.76 -> in a way that makes it look modern, and appealing to users. So we're going to be learning a

9048.3 -> bunch of different techniques that you can use to color your website. Now we've already

9054.439 -> used one in the past, and it's a very common one. And that is, of course, the color property.

9059.46 -> Now we're going to be talking more about this in the next video and using it in depth. But

9064 -> first thing I want to talk about is the different types of colors, because there's actually

9068.21 -> more than one. So first of all, we've all used and while you've at least seen me use

9072.979 -> the colors have given by name so for example, red, green, blue, and purple. But there's

9079.35 -> actually more than that there's so much more to colors than just those names, because as

9084.63 -> you know, they're actually quite limiting, you can't really change the color and choose

9089.67 -> as you want. So what I'm here to teach you about is the three different types of colors

9096.68 -> and how they work. So the first one is obviously the CSS color codes or names. And what they

9102.47 -> do is is pretty much given a name, and they each have a designated color. So this is a

9108.84 -> really easy way for testing colors. For example, if you want to test if a property works, as

9115.24 -> we saw at the beginning of this course. And you can also use them for you know, maybe

9120.25 -> quick fixes or trying to just try out different colors. But once you get into the really specific

9126.21 -> detailed web design, and once you start producing your website properly, you're going to want

9131.09 -> more than just the color CSS gives you. So I've actually attached to the lecture resources,

9138.83 -> this website here, you have a bunch of different CSS color codes. And you can see that there's

9145.97 -> actually a huge range of them, we only use the basic ones that are quite vibrant and

9151.3 -> they really hit the eyes very hard. But you can see there's actually a lot more than what

9157.49 -> we just use. The only problem is nobody wants to memorize all of these different names.

9162.06 -> So what we're actually going to be doing is learning how to use these two, which are the

9167.51 -> ones I'm going to be talking about in this video. So first of all, let's talk a little

9170.13 -> bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate

9175.39 -> how this whole thing works. We actually don't need this for now. So I'm going to discipline

9181.77 -> full screen. So this is a color picker that I found on Google, you can go ahead and search

9186.859 -> it anywhere. But I like using Google's provided one, because it provides you with both the

9190.32 -> hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first

9193.609 -> of all, you can slide up and down this thing and choose whichever color you want. And you

9199.42 -> can see that these two codes change. So what do they actually mean? Well, first, let's

9204.46 -> talk about the hex code. So we all know that when you're normally using numbers, you range

9210.29 -> from zero to nine. So any given number in this new in that numeral system can be made

9216.12 -> up of 012, and all the way up to nine. So in that case, there's 10 possible combinations.

9217.41 -> But in hex code, there's actually 16 different possible combinations, you can go from zero

9220.64 -> to nine, and then A to F. So for example, let's just take this right here, this could

9225.49 -> actually be converted into a number if we wanted to, suppose B, actually stands for

9229.54 -> 12, because it goes zero to nine, and then a B, so 12. And you can actually convert this

9236.54 -> into a number, which is very interesting. So I'm not really going to be talking about

9242.62 -> the applications of hex code in this in this video, because that goes all the way down

9250.34 -> into computer science. And we're not really looking at that now. But one thing we can

9256.319 -> do is actually create colors based on this. So first of all, you'll notice that our code

9260.02 -> here starts off with a hashtag. And then you have six digits. So each one can have 16 possible

9263.36 -> combinations. But as we know, color any color is made up of either red, green, or blue,

9268.18 -> at least on the computer for the standard color palette. So it's made up of red, green,

9273.561 -> and blue. Now basically, this hex code is split up into three two digit pairs. So the

9276.33 -> first pair of numbers is meant to represent the amount of red in the color, the second,

9280.46 -> the amount of green, and the third, the amount of blue, RGB. And these parents can range

9283.14 -> from 00, which means none of that color to F F, which is the highest value. Remember,

9286.06 -> hexadecimal goes from zero to f. So I'm just going to choose something very basic here,

9291.43 -> like a standard blue. You can see here that this is the purest blue that you can get.

9296.51 -> Pretty much what this is saying is the first two is 00, which means there's no red, the

9300.23 -> second pair, or Yeah, the second pair is also 00, which means no green. But then the third

9307.88 -> is F F, which means all blue. So this is pretty easy. So if we go to something like white,

9314.27 -> for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which

9320.69 -> actually creates white. And if we chose black, you can see that that's zero. So this is a

9326.74 -> pretty hard thing to understand. Once you get into some of these more complicated colors.

9332.95 -> Again, we don't really use hexadecimal in normal in normal use, when we're creating

9335.63 -> colors or writing code, we don't really use these numbers. So it's actually much easier

9339.26 -> to work with RGB codes. So RGB is a little bit different in the style that it's written.

9345.45 -> But it all represents the same concept. Pretty much there are three numbers here. And these

9350.31 -> aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the

9353.16 -> first for red, the second for green, and the third for blue, just like this one, except

9357.46 -> in this case, the numbers can go from zero to 255, zero being the minimum and 255 being

9362.72 -> the maximum. So this is actually much easier to read. Let's go back to our blue here. And

9368.94 -> I'm actually just going to write the code here. So you can see that there's zero red,

9375.8 -> zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum.

9388.729 -> And obviously, you can see that once we go back to those complicated colors. When you

9392.31 -> look here, it's quite complicated to understand. But when we look at the RGB code, we can see

9395.79 -> that there's a moderate amount of red, a large amount of green and large amounts of blue,

9401.939 -> and therefore it should theoretically be a cold color. Now again, you don't really need

9405.84 -> to know how to construct these QR codes from your head, they're quite hard to understand.

9410.59 -> So what I would recommend is when you're designing these colors, or designing these, these websites,

9415.34 -> I would recommend you just go and use a color picker, too much easy too much, much easier

9420.58 -> to decide. And you can also get a lot more experience hands on experience with these

9424.359 -> colors rather than memorizing all the theory behind them. So both of these will work fine

9427.399 -> and in the next video I'm going to show you how to actually use these codes in our in

9431.279 -> our website and actually use them to style and color text. Alright, let's move on.

9440.67 -> So this is the start of a new section. And now that we've learned all we need to know

9447.02 -> about selectors, we're going to actually start styling up our website and making it look

9449.01 -> good. So first of all, let's just talk about coloring. In general, I mean, what is coloring?

9454.76 -> And what are we supposed to do with it. So as we know, we already have a bunch of colors

9462.46 -> here. And they all look fine. But what we're actually trying to do here is color our website

9467.31 -> in a way that makes it look modern, and appealing to users. So we're going to be learning a

9471.189 -> bunch of different techniques that you can use to color your website. Now we've already

9472.43 -> used one in the past, and it's a very common one. And that is, of course, the color property.

9475.63 -> Now we're going to be talking more about this in the next video and using it in depth. But

9483.97 -> first thing I want to talk about is the different types of colors, because there's actually

9487.74 -> more than one. So first of all, we've all used and while you've at least seen me use

9491.609 -> the colors have given by name so for example, red, green, blue, and purple. But there's

9495.71 -> actually more than that there's so much more to colors than just those names, because as

9500.66 -> you know, they're actually quite limiting, you can't really change the color and choose

9505.01 -> as you want. So what I'm here to teach you about is the three different types of colors

9514.92 -> and how they work. So the first one is obviously the CSS color codes or names. And what they

9521.56 -> do is is pretty much given a name, and they each have a designated color. So this is a

9525.569 -> really easy way for testing colors. For example, if you want to test if a property works, as

9529.6 -> we saw at the beginning of this course. And you can also use them for you know, maybe

9534.561 -> quick fixes or trying to just try out different colors. But once you get into the really specific

9540.53 -> detailed web design, and once you start producing your website properly, you're going to want

9545.03 -> more than just the color CSS gives you. So I've actually attached to the lecture resources,

9549.58 -> this website here, you have a bunch of different CSS color codes. And you can see that there's

9557.1 -> actually a huge range of them, we only use the basic ones that are quite vibrant and

9564.96 -> they really hit the eyes very hard. But you can see there's actually a lot more than what

9571.39 -> we just use. The only problem is nobody wants to memorize all of these different names.

9575.779 -> So what we're actually going to be doing is learning how to use these two, which are the

9582.14 -> ones I'm going to be talking about in this video. So first of all, let's talk a little

9587.92 -> bit about hex code. Okay. So first of all, I have a color picker over here just to demonstrate

9591.51 -> how this whole thing works. We actually don't need this for now. So I'm going to discipline

9595.399 -> full screen. So this is a color picker that I found on Google, you can go ahead and search

9601.74 -> it anywhere. But I like using Google's provided one, because it provides you with both the

9606.33 -> hex code and the RGB code. Don't worry, we'll talk about those in just a second. So first

9611.16 -> of all, you can slide up and down this thing and choose whichever color you want. And you

9615.003 -> can see that these two codes change. So what do they actually mean? Well, first, let's

9617.72 -> talk about the hex code. So we all know that when you're normally using numbers, you range

9623.729 -> from zero to nine. So any given number in this new in that numeral system can be made

9628.939 -> up of 012, and all the way up to nine. So in that case, there's 10 possible combinations.

9636.311 -> But in hex code, there's actually 16 different possible combinations, you can go from zero

9642.56 -> to nine, and then A to F. So for example, let's just take this right here, this could

9650.18 -> actually be converted into a number if we wanted to, suppose B, actually stands for

9653.73 -> 12, because it goes zero to nine, and then a B, so 12. And you can actually convert this

9660.83 -> into a number, which is very interesting. So I'm not really going to be talking about

9665.67 -> the applications of hex code in this in this video, because that goes all the way down

9671.939 -> into computer science. And we're not really looking at that now. But one thing we can

9676.939 -> do is actually create colors based on this. So first of all, you'll notice that our code

9685.86 -> here starts off with a hashtag. And then you have six digits. So each one can have 16 possible

9692.57 -> combinations. But as we know, color any color is made up of either red, green, or blue,

9697.229 -> at least on the computer for the standard color palette. So it's made up of red, green,

9702.829 -> and blue. Now basically, this hex code is split up into three two digit pairs. So the

9707.149 -> first pair of numbers is meant to represent the amount of red in the color, the second,

9711.7 -> the amount of green, and the third, the amount of blue, RGB. And these parents can range

9715.43 -> from 00, which means none of that color to F F, which is the highest value. Remember,

9719.45 -> hexadecimal goes from zero to f. So I'm just going to choose something very basic here,

9723.86 -> like a standard blue. You can see here that this is the purest blue that you can get.

9733.56 -> Pretty much what this is saying is the first two is 00, which means there's no red, the

9739.2 -> second pair, or Yeah, the second pair is also 00, which means no green. But then the third

9744.99 -> is F F, which means all blue. So this is pretty easy. So if we go to something like white,

9749.54 -> for example, this would have f, f, f, f, f f, which is all red, or green, or blue, which

9753.8 -> actually creates white. And if we chose black, you can see that that's zero. So this is a

9758.95 -> pretty hard thing to understand. Once you get into some of these more complicated colors.

9761.96 -> Again, we don't really use hexadecimal in normal in normal use, when we're creating

9763.72 -> colors or writing code, we don't really use these numbers. So it's actually much easier

9766.49 -> to work with RGB codes. So RGB is a little bit different in the style that it's written.

9768.279 -> But it all represents the same concept. Pretty much there are three numbers here. And these

9773.96 -> aren't hexadecimal numbers, these are just normal numbers, you have three numbers, the

9778.07 -> first for red, the second for green, and the third for blue, just like this one, except

9783.02 -> in this case, the numbers can go from zero to 255, zero being the minimum and 255 being

9788.47 -> the maximum. So this is actually much easier to read. Let's go back to our blue here. And

9795.859 -> I'm actually just going to write the code here. So you can see that there's zero red,

9801.34 -> zero blue, and 255. Sorry, is your red zero green, and 255 blue, which is the maximum.

9808.73 -> And obviously, you can see that once we go back to those complicated colors. When you

9813.72 -> look here, it's quite complicated to understand. But when we look at the RGB code, we can see

9817.85 -> that there's a moderate amount of red, a large amount of green and large amounts of blue,

9822.55 -> and therefore it should theoretically be a cold color. Now again, you don't really need

9829.39 -> to know how to construct these QR codes from your head, they're quite hard to understand.

9834.14 -> So what I would recommend is when you're designing these colors, or designing these, these websites,

9839.68 -> I would recommend you just go and use a color picker, too much easy too much, much easier

9845.72 -> to decide. And you can also get a lot more experience hands on experience with these

9853.37 -> colors rather than memorizing all the theory behind them. So both of these will work fine

9857.21 -> and in the next video I'm going to show you how to actually use these codes in our in

9863.069 -> our website and actually use them to style and color text. Alright, let's move on.

9869.14 -> So in this video, I am going to be starting to color and style our website. So we're going

9872.69 -> to go through and use the selector skills that we've learned in the previous section

9878.18 -> to actually go through and start adding some color. On top of that, we're going to be using

9884.399 -> the skills we learned about hex code and RGB color codes to vary up our style or method

9890.97 -> of coloring things. Because in the past, like I've said, we've just used some basic techniques

9895.689 -> with CSS color codes. And now we're going to be working with our own custom colors.

9900.31 -> So first of all, let's go ahead and start adding some classes to this website to get

9905.069 -> it set up for our styling. So first thing I did is actually started from a clean slate

9909.41 -> because it was getting quite messy before and I thought that it would be better if we

9914.689 -> started from scratch. So the first thing I'm going to do is go ahead and add a class or

9921.78 -> an ID actually, I think would be better to our title, since there's only one of them.

9927.36 -> So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from

9931.89 -> the skills you learned in the last section. Let's also go ahead and add some classes for

9936.27 -> our paragraph text. And because of course, we have more than one paragraph, we're actually

9940.351 -> going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph.

9948.819 -> Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class

9958.989 -> on to our other paragraphs, instead of writing it down. There we go. So the next thing I

9965.51 -> want to do is go ahead and add some classes to this list here just for convenience. So

9970.38 -> I'm going to go ahead and add a class for a list item. Now, obviously, we're not going

9974.91 -> to use all of these in one go. But I was just considering to add them so that when we get

9980.71 -> into it, we can actually go ahead and use them without having to go ahead and add these

9986.83 -> classes every single time. So there we go, we did that. Let's also go ahead and add a

9993.05 -> class to our link, link. And now we have our table items. We're going to leave this for

9999.81 -> now because it might take a long time. Oh, we'll we'll style this when we get later into

10009.09 -> our section. So there we go, we did that. Now the last thing I want to do is just go

10015.11 -> ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some

10023.84 -> classes. So class is form input. And this is actually quite commonplace to add, or write

10030.689 -> class names and Id names with these. So with dashes, instead of you know snake case, which

10036.03 -> is using capital letters in like that. It's just a convention in CSS. So let's go ahead

10041.56 -> and add the same class here. Just like that. There we go. And we'll also we're also going

10047.21 -> to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that.

10053.18 -> There we go. Just copy that. And over to our other subtitles. And once we're done with

10058.76 -> that, we'll move on and start coloring our text. Right, there we go. So everything's

10062.07 -> looking good. That means nothing has gone wrong. Let's go ahead and start styling our

10065.89 -> text. So first thing I want to do is style our header here. So obviously, you don't really

10067.359 -> want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment

10068.359 -> a little bit for this video with some of our colors. So first of all, I'm going to need

10074 -> to select it. This is the first part of our general rule. So because it's an ID, I'm going

10081.14 -> to go hash, and then title, open up our block with our curly braces. And now we're going

10083.75 -> to start writing our property. So if you don't know this already, the property is going to

10088.939 -> be color. This is the text of the the color of the text. And I know it doesn't look like

10094.569 -> it since it doesn't say tech stash color, similar to a bunch of other properties. But

10100.021 -> this is the way to color your text. So here, we can go ahead and type a property or sorry,

10107.51 -> our value. Now before we've used colors, like steel blue, which is a CSS color code. But

10111.279 -> now let's go ahead and challenge ourselves and start actually messing with these colors

10115.649 -> using our own color picker. So first of all, I want to choose a color that I really like.

10122.31 -> And I'm going to go for a sort of deep orange. So we don't want to go for something too dark.

10126.279 -> But we also don't want to go for something too light so that it's hard on the eyes. Now

10130.57 -> I think a color like this is good. Now how would we actually implement this? Well, we

10135.58 -> just copy and paste it. And if you're thinking that that's the right way, well, then you're

10140.1 -> right, it's actually very easy. All you have to do is copy your hex or RGB code and paste

10145.56 -> it into

10146.56 -> So in this video, I am going to be starting to color and style our website. So we're going

10150.479 -> to go through and use the selector skills that we've learned in the previous section

10153.45 -> to actually go through and start adding some color. On top of that, we're going to be using

10160.31 -> the skills we learned about hex code and RGB color codes to vary up our style or method

10165.899 -> of coloring things. Because in the past, like I've said, we've just used some basic techniques

10169.43 -> with CSS color codes. And now we're going to be working with our own custom colors.

10175.13 -> So first of all, let's go ahead and start adding some classes to this website to get

10180.319 -> it set up for our styling. So first thing I did is actually started from a clean slate

10185.899 -> because it was getting quite messy before and I thought that it would be better if we

10191.88 -> started from scratch. So the first thing I'm going to do is go ahead and add a class or

10198.25 -> an ID actually, I think would be better to our title, since there's only one of them.

10205.54 -> So we're gonna go ahead and add an ID of title. And hopefully, you know how to do this from

10210.979 -> the skills you learned in the last section. Let's also go ahead and add some classes for

10216.989 -> our paragraph text. And because of course, we have more than one paragraph, we're actually

10220.399 -> going to go ahead and use a class. So I'm going to use this. And I'm going to say, paragraph.

10225.58 -> Or I'm just going to say para shortening text. So I'm going to go ahead and copy this class

10231.819 -> on to our other paragraphs, instead of writing it down. There we go. So the next thing I

10235.49 -> want to do is go ahead and add some classes to this list here just for convenience. So

10238.359 -> I'm going to go ahead and add a class for a list item. Now, obviously, we're not going

10242.74 -> to use all of these in one go. But I was just considering to add them so that when we get

10248.72 -> into it, we can actually go ahead and use them without having to go ahead and add these

10253.75 -> classes every single time. So there we go, we did that. Let's also go ahead and add a

10258.79 -> class to our link, link. And now we have our table items. We're going to leave this for

10262.029 -> now because it might take a long time. Oh, we'll we'll style this when we get later into

10264.72 -> our section. So there we go, we did that. Now the last thing I want to do is just go

10269.01 -> ahead and add a couple classes to our inputs here. So I'm going to go ahead and add some

10273.56 -> classes. So class is form input. And this is actually quite commonplace to add, or write

10278.069 -> class names and Id names with these. So with dashes, instead of you know snake case, which

10282.37 -> is using capital letters in like that. It's just a convention in CSS. So let's go ahead

10286.739 -> and add the same class here. Just like that. There we go. And we'll also we're also going

10292.39 -> to go ahead and add a subtitle class to our subtitles, I'm gonna go ahead and do that.

10299.22 -> There we go. Just copy that. And over to our other subtitles. And once we're done with

10304.85 -> that, we'll move on and start coloring our text. Right, there we go. So everything's

10309.62 -> looking good. That means nothing has gone wrong. Let's go ahead and start styling our

10314.25 -> text. So first thing I want to do is style our header here. So obviously, you don't really

10320.53 -> want to go crazy with text colors. It's more for backgrounds. But I think we'll just experiment

10325.26 -> a little bit for this video with some of our colors. So first of all, I'm going to need

10328.779 -> to select it. This is the first part of our general rule. So because it's an ID, I'm going

10333.22 -> to go hash, and then title, open up our block with our curly braces. And now we're going

10339.35 -> to start writing our property. So if you don't know this already, the property is going to

10344.49 -> be color. This is the text of the the color of the text. And I know it doesn't look like

10350.689 -> it since it doesn't say tech stash color, similar to a bunch of other properties. But

10355.96 -> this is the way to color your text. So here, we can go ahead and type a property or sorry,

10361.649 -> our value. Now before we've used colors, like steel blue, which is a CSS color code. But

10367.609 -> now let's go ahead and challenge ourselves and start actually messing with these colors

10370.355 -> using our own color picker. So first of all, I want to choose a color that I really like.

10377.14 -> And I'm going to go for a sort of deep orange. So we don't want to go for something too dark.

10382.83 -> But we also don't want to go for something too light so that it's hard on the eyes. Now

10387.529 -> I think a color like this is good. Now how would we actually implement this? Well, we

10390.92 -> just copy and paste it. And if you're thinking that that's the right way, well, then you're

10394.93 -> right, it's actually very easy. All you have to do is copy your hex or RGB code and paste

10399.46 -> it into

10400.46 -> into here just like that. Now if I go ahead and refresh the page, you can see that that

10403.91 -> color is being reflected on our title. Now I would recommend instead of using your hex

10413.39 -> code, go ahead and add an RGB code. And I'll tell you why later in this section, but for

10419.979 -> now, just think that this is better because it's a little bit more flexible, and you can

10426.89 -> change it easily. So on top of that, use an RGB color code really allows you to mess around

10429.14 -> with the colors in a way that if you didn't know hex code you wouldn't be able to. So

10432.91 -> for example, let's say I wanted to increase the amount of blue in this, all they would

10438.649 -> have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you

10442.189 -> can see that that color has completely changed by adding more blue. By doing it, we've kind

10447.97 -> of mixed around the colors and created this pinkish color. Imagine you're working with

10452.63 -> a color palette, instead of a digital kind of weird color mixer. Think of you have a

10457.029 -> giant pile of red, green and blue. And what you're doing here is changing all of the proportions

10460.6 -> to get just the color you want. So let's go ahead and change this color back to nine.

10466.3 -> There we go. Now we have our orange color there. So let's go ahead and also style up

10472.489 -> our, our subtitles here. And one common thing that you do with hierarchies of text. So for

10478.3 -> example, titles and then sub titles and paragraph is usually your titles or your high up on

10484.58 -> the hierarchy are going to have very dark colors. And then your sub titles are things

10489.42 -> that are lower on the hierarchy are going to have around the same color scheme, but

10494.94 -> they're going to be a little lighter. So what I'm going to do is just go ahead to my color

10500.97 -> picker and drag this up a little bit. Of course, you could do this by just increasing all of

10504.67 -> the values. But I actually prefer to use the color picker because I could really see what's

10509.65 -> going on. So I'm going to choose something a little bit lighter, maybe something around

10513.89 -> here. Again, we don't want it to be too light, because then it's going to be too hard on

10518.3 -> the eyes. So I think I'm going to go something around here. So we're going to go ahead and

10525.26 -> copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle,

10530.989 -> because remember, it's a class, then I'm going to use my property color and paste in our

10536.89 -> RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles

10545.521 -> have been colored down. So there we know everything is working really well for now. And we're

10549.2 -> starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again,

10555.31 -> the whole point is to be styling a website as you go along. So I recommend you go ahead

10560.99 -> and mess around with your own colors. Again, you can just find this color picker by going

10565.91 -> to Google, if you don't really like it, you could always go to another color picker on

10570.37 -> search for one. But you can go ahead choose your own colors. If you don't like orange,

10573.64 -> you can go with blue, maybe something a little colder. It's totally up to you just get some

10580.5 -> practice with using colors on different types of texts, and get some more practice using

10585.72 -> CSS on your own. Alright, let's move on.

10588.51 -> into here just like that. Now if I go ahead and refresh the page, you can see that that

10593.16 -> color is being reflected on our title. Now I would recommend instead of using your hex

10598.91 -> code, go ahead and add an RGB code. And I'll tell you why later in this section, but for

10602.08 -> now, just think that this is better because it's a little bit more flexible, and you can

10603.67 -> change it easily. So on top of that, use an RGB color code really allows you to mess around

10606.08 -> with the colors in a way that if you didn't know hex code you wouldn't be able to. So

10609.47 -> for example, let's say I wanted to increase the amount of blue in this, all they would

10612.649 -> have to do is go ahead and just change it. Let's say I wanted to go with 150. Blue, you

10619.729 -> can see that that color has completely changed by adding more blue. By doing it, we've kind

10623.67 -> of mixed around the colors and created this pinkish color. Imagine you're working with

10624.739 -> a color palette, instead of a digital kind of weird color mixer. Think of you have a

10630.359 -> giant pile of red, green and blue. And what you're doing here is changing all of the proportions

10634.24 -> to get just the color you want. So let's go ahead and change this color back to nine.

10638.31 -> There we go. Now we have our orange color there. So let's go ahead and also style up

10642.08 -> our, our subtitles here. And one common thing that you do with hierarchies of text. So for

10647.26 -> example, titles and then sub titles and paragraph is usually your titles or your high up on

10652.529 -> the hierarchy are going to have very dark colors. And then your sub titles are things

10657.69 -> that are lower on the hierarchy are going to have around the same color scheme, but

10661.39 -> they're going to be a little lighter. So what I'm going to do is just go ahead to my color

10666.58 -> picker and drag this up a little bit. Of course, you could do this by just increasing all of

10672.38 -> the values. But I actually prefer to use the color picker because I could really see what's

10678.66 -> going on. So I'm going to choose something a little bit lighter, maybe something around

10684.029 -> here. Again, we don't want it to be too light, because then it's going to be too hard on

10688.239 -> the eyes. So I think I'm going to go something around here. So we're going to go ahead and

10693.16 -> copy the code. Now let's go ahead and add our selector. So I'm going to go dot subtitle,

10697.34 -> because remember, it's a class, then I'm going to use my property color and paste in our

10701.57 -> RGB color code. Let's go ahead and refresh the page. And you can see that our subtitles

10706.979 -> have been colored down. So there we know everything is working really well for now. And we're

10711.92 -> starting to get the hang of this. Now I recommend you go ahead and try this on your own. Again,

10721.779 -> the whole point is to be styling a website as you go along. So I recommend you go ahead

10729.16 -> and mess around with your own colors. Again, you can just find this color picker by going

10733.979 -> to Google, if you don't really like it, you could always go to another color picker on

10738.97 -> search for one. But you can go ahead choose your own colors. If you don't like orange,

10743.34 -> you can go with blue, maybe something a little colder. It's totally up to you just get some

10747.96 -> practice with using colors on different types of texts, and get some more practice using

10752.29 -> CSS on your own. Alright, let's move on.

10760.55 -> So in this video, we are going to be covering background colors. Now, I know it's a little

10769.1 -> bit intimidating considering we've never actually done backgrounds before. But it's very similar

10775.27 -> to colors in the values that he uses. The only difference is is what it's actually styling.

10782.67 -> So I'm going to be teaching you how to create backgrounds on your website. Now, obviously,

10790.029 -> we're not going to go all crazy and start creating backgrounds for everything. Because

10793.351 -> we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds

10797.319 -> aren't really usable. Because sometimes, especially with colors, it just doesn't really look that

10802.01 -> good. So what we're actually going to do is go through and just practice with our background

10803.99 -> for now. So the first thing I need to do is actually look for something to create a background

10809.49 -> on. And we all know what a background on text looked like. Now, we don't actually know why

10814.71 -> the background goes all the way to the edge yet. We haven't gotten we haven't gotten into

10819.609 -> layout yet. Once we do, you'll know how to change that. For now though, I think it's

10824.66 -> really fitting to go through and style this whole page. So firstly, what selector Do we

10830.649 -> need to use? Considering that we're trying to select everything? How are we supposed

10835.07 -> to create a background on every single item? Do we go through and select everything and

10840.1 -> add that background? Well, we actually look at a look at our HTML page, you can see that

10848.59 -> all of our text here is contained inside of our body tag. So the easiest way to select

10854.989 -> this, because again, there's only one of our body, we can just use an element selector.

10859.939 -> So I'm going to go ahead and select it with body. So usually, you would actually put tags,

10864.29 -> elements selectors at the top. So I'm going to go ahead and do that now. Open up our block

10871.149 -> using those curly braces. And now we can add our background. So first of all, the property

10874.859 -> used to Select and Color background is called background color. But we're not actually going

10878.96 -> to use that because background is much easier considering that you can actually go and also

10883.79 -> select images and URLs instead of colors. It's much more flexible, and I prefer using

10887.88 -> it over background color. So I'm going to go ahead and select that as my property. So

10892.771 -> from now, you can just go ahead and add your value. Similarly to color. You can use an

10899.149 -> RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set

10904.99 -> it as red And just worn your eyes because it's quite puffing. So you can see that now

10910.391 -> our entire site has been styled red. Now, obviously, I don't want this, this doesn't

10913.979 -> really look very good. So I'm going to go ahead and erase this property for now. And

10917.739 -> we're going to go through and choose a color. So I would recommend choosing something a

10921.271 -> little bit light. So I'm going to go for about a light turquoise or light blue, something

10924.15 -> like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go

10928.17 -> ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh

10930.75 -> the page, you can see we have this really nice light blue, which kind of fits in with

10936.04 -> our oranges. Now, because it's a little bit, it doesn't really look that good on this light

10941.68 -> orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with

10952.082 -> RGB is to just go ahead and drop all of the values this way, you stay in the same proportions,

10958.33 -> but you're just darkening everything. So I'm going to go ahead and darken our subtitles.

10963.41 -> So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And

10969.28 -> this becomes 148. And obviously, these don't have to be exact, and this can become 30.

10974.84 -> So these don't have to be exact, like I said, we're just darkening the titles, you can see,

10982.021 -> you can see that they got a little bit darker, and it looks better on this color. Alright,

10987.31 -> there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and

10992.689 -> apply this to pretty much anything you want. So if I actually go ahead and style our subtitles

10997.39 -> with our blue background, obviously, it won't look that good, but it works perfectly fine.

11002.97 -> So there we go. That's pretty much how to add color to backgrounds. And in the next

11006.489 -> video, I'm going to be teaching you how to actually change the type of background that

11008.73 -> you're using. Because obviously, sometimes you want to actually change the background

11012.14 -> and use maybe a custom image, or you want to link to an image online. So I'm going to

11019.069 -> be teaching you how to do that in the next video. So let's just go and refresh the page.

11026.67 -> Keep that normal. Alright, let's move on.

11029.47 -> So in this video, we are going to be covering background colors. Now, I know it's a little

11034.64 -> bit intimidating considering we've never actually done backgrounds before. But it's very similar

11040.08 -> to colors in the values that he uses. The only difference is is what it's actually styling.

11045.92 -> So I'm going to be teaching you how to create backgrounds on your website. Now, obviously,

11051.68 -> we're not going to go all crazy and start creating backgrounds for everything. Because

11056.24 -> we haven't gotten into we haven't gotten into layout yet. And without layout backgrounds

11060.79 -> aren't really usable. Because sometimes, especially with colors, it just doesn't really look that

11064.59 -> good. So what we're actually going to do is go through and just practice with our background

11067.92 -> for now. So the first thing I need to do is actually look for something to create a background

11072.78 -> on. And we all know what a background on text looked like. Now, we don't actually know why

11077.71 -> the background goes all the way to the edge yet. We haven't gotten we haven't gotten into

11083.49 -> layout yet. Once we do, you'll know how to change that. For now though, I think it's

11090.76 -> really fitting to go through and style this whole page. So firstly, what selector Do we

11095.56 -> need to use? Considering that we're trying to select everything? How are we supposed

11098.56 -> to create a background on every single item? Do we go through and select everything and

11103.27 -> add that background? Well, we actually look at a look at our HTML page, you can see that

11109.26 -> all of our text here is contained inside of our body tag. So the easiest way to select

11115.78 -> this, because again, there's only one of our body, we can just use an element selector.

11120.84 -> So I'm going to go ahead and select it with body. So usually, you would actually put tags,

11127.18 -> elements selectors at the top. So I'm going to go ahead and do that now. Open up our block

11134.43 -> using those curly braces. And now we can add our background. So first of all, the property

11139.029 -> used to Select and Color background is called background color. But we're not actually going

11143.24 -> to use that because background is much easier considering that you can actually go and also

11148.7 -> select images and URLs instead of colors. It's much more flexible, and I prefer using

11152.43 -> it over background color. So I'm going to go ahead and select that as my property. So

11159.021 -> from now, you can just go ahead and add your value. Similarly to color. You can use an

11168.13 -> RGB code, hex code or a CSS color even if you want so I'm going to go ahead and set

11173.89 -> it as red And just worn your eyes because it's quite puffing. So you can see that now

11177.73 -> our entire site has been styled red. Now, obviously, I don't want this, this doesn't

11182 -> really look very good. So I'm going to go ahead and erase this property for now. And

11187.989 -> we're going to go through and choose a color. So I would recommend choosing something a

11195.33 -> little bit light. So I'm going to go for about a light turquoise or light blue, something

11198.7 -> like this. So now I'm going to go ahead and copy my RGB code. And here, I'm going to go

11202.33 -> ahead and add my background property and paste in my RGB code. Now if we go ahead and refresh

11208.56 -> the page, you can see we have this really nice light blue, which kind of fits in with

11214 -> our oranges. Now, because it's a little bit, it doesn't really look that good on this light

11221.31 -> orange, I'm going to go ahead and dampen it a little bit. So the easy way to do this with

11232.46 -> RGB is to just go ahead and drop all of the values this way, you stay in the same proportions,

11240.05 -> but you're just darkening everything. So I'm going to go ahead and darken our subtitles.

11244.04 -> So I'm going to reduce everything by 20 or so. So this becomes let's just say 200. And

11248.1 -> this becomes 148. And obviously, these don't have to be exact, and this can become 30.

11252.42 -> So these don't have to be exact, like I said, we're just darkening the titles, you can see,

11258.979 -> you can see that they got a little bit darker, and it looks better on this color. Alright,

11263.35 -> there we go. So that's pretty much how to style backgrounds. Now, you can go ahead and

11269.1 -> apply this to pretty much anything you want. So if I actually go ahead and style our subtitles

11276.27 -> with our blue background, obviously, it won't look that good, but it works perfectly fine.

11280.45 -> So there we go. That's pretty much how to add color to backgrounds. And in the next

11285.18 -> video, I'm going to be teaching you how to actually change the type of background that

11288.27 -> you're using. Because obviously, sometimes you want to actually change the background

11291.33 -> and use maybe a custom image, or you want to link to an image online. So I'm going to

11299.78 -> be teaching you how to do that in the next video. So let's just go and refresh the page.

11306.59 -> Keep that normal. Alright, let's move on.

11308.739 -> So in this video, we're going to be looking at a different type of background in CSS.

11313.97 -> So now that we've covered basic color types, and we've also covered a little bit of background,

11319.2 -> and using background tracks, we're going to move on to an alternate way of creating backgrounds.

11323.29 -> And that's through background images. So right now we know the basics of coloring, so we

11327.46 -> were able to call it a text. Now with our own custom colors using a color picker, we

11333.09 -> can also go ahead and use our own, you know, backgrounds and things like that with our

11337.23 -> own colors. But now what I want to cover is looking at different types of backgrounds

11343.68 -> themselves. So in this case, we're going to be looking at images. So first of all, when

11350.38 -> we want to set the background to an image, we can just go ahead and add an RGB color

11357.62 -> code, we're going to need to go and actually link to an image. So I'm going to show you

11365.29 -> a really easy way of doing this, the first thing we're going to need is an image. And

11370.939 -> for this method, you can actually use images with from the internet without having to download

11374.899 -> them using URLs. So show you how to do that now. So if I go ahead and search for a landscape

11382.12 -> image, just like this. And now we want to look for a sort of low resolution one, we

11387.96 -> don't want to do too big, I think this will be pretty good, it's going to look a little

11393.979 -> bit weird, but just for this purpose, we're going to use it. So now what we need to do

11397.06 -> is get the URL link to this image. So you can do this by right clicking on it. And then

11402.01 -> you're going to go ahead and click on copy image address. Okay, so what this is going

11404.63 -> to do is get the actual link to the image itself. Right now this link is going to Google

11409.52 -> Images. But what we actually need is the link to the image itself. So there we go, we have

11414.43 -> that set up. Now we need to go ahead and add the image to the page. So under here, I'm

11420.479 -> going to just erase this color code for now. And I'm going to show you how to add our image.

11426.09 -> So there's this thing in CSS, they're called functions. Now, we're not really going to

11429.649 -> go very in depth about them. But pretty much what they do is they take a few inputs, they

11433.31 -> process them, and they give an output. So the first example of a function that we've

11437.24 -> already used is this right here, it takes three inputs A red, a green, and a blue, does

11442.32 -> some magic behind the scenes, and then gives us a color back. So what we're going to do

11446.699 -> here is use another function called URL. So what this is going to do is take in the link

11449.67 -> or to the URL, and then it's going to find that image and set it. So in quotations, it

11457.43 -> doesn't have to be in quotations, just remember that you're going to paste in your image.

11462.39 -> So remember, I just copied this from the image address. And now we have it here. So we have

11464.92 -> the image. Let's go ahead and check it out on our website. So there we go. You can see

11471.33 -> that whoops, you can see that our image is set here. Now there's a few issues, obviously

11477.05 -> with the repetition and everything, but we're not going to be covering those until maybe

11482.37 -> in a few videos. Where we talk about some other background properties. But there we

11485.68 -> go for now, we've actually set our image and now it is set on our website. So when you

11493.13 -> think of a URL, you're most likely thinking of linking to google images or some sort of

11502.92 -> web URL. But that's not the only type of URL that we can use a URL is just a link to an

11509.64 -> endpoint. This right here is a URL, it's just not linking to a website, it's instead linking

11514.819 -> to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually

11519.949 -> going to show you is that we can use these local URLs in here. So I'm going to erase

11525.56 -> this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh

11529.13 -> the page. And now you can see that it still works perfectly. Because again, it's linking

11532.39 -> to an endpoint, it's just not on our website, it's instead stored on our local machine.

11537.01 -> So there we go, we have that set up now. But there's actually another way that you can

11541.83 -> set background images. And this goes the same for background colors. So why I like to use

11546.529 -> the background property is because you can set anything you want in one go. You can set

11551.92 -> it as a color as an image, and he do many other things. But instead, you can actually

11555.77 -> use very specific properties that work for specific value. So for example, in this case,

11560.72 -> we can use background image. And from here, we can go ahead and copy paste the URL, like

11565.8 -> that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show

11571.35 -> you that it still works perfectly fine. So you see I refresh the page, and it's still

11576.649 -> working. And this goes the same for for background colors, you can go ahead and add a background

11579.729 -> color, and then add some random RGB value just going to go for a full black for now.

11583.13 -> And you can see that it still works. The only problem is if I go ahead and paste in that

11586.979 -> URL here. Oh, what if I go ahead and paste in that URL here,

11590.53 -> So in this video, we're going to be looking at a different type of background in CSS.

11594.399 -> So now that we've covered basic color types, and we've also covered a little bit of background,

11603.22 -> and using background tracks, we're going to move on to an alternate way of creating backgrounds.

11610.56 -> And that's through background images. So right now we know the basics of coloring, so we

11616.75 -> were able to call it a text. Now with our own custom colors using a color picker, we

11621.949 -> can also go ahead and use our own, you know, backgrounds and things like that with our

11627.449 -> own colors. But now what I want to cover is looking at different types of backgrounds

11633.029 -> themselves. So in this case, we're going to be looking at images. So first of all, when

11638.37 -> we want to set the background to an image, we can just go ahead and add an RGB color

11644.979 -> code, we're going to need to go and actually link to an image. So I'm going to show you

11650.229 -> a really easy way of doing this, the first thing we're going to need is an image. And

11655.1 -> for this method, you can actually use images with from the internet without having to download

11662.649 -> them using URLs. So show you how to do that now. So if I go ahead and search for a landscape

11672.38 -> image, just like this. And now we want to look for a sort of low resolution one, we

11677.939 -> don't want to do too big, I think this will be pretty good, it's going to look a little

11683.199 -> bit weird, but just for this purpose, we're going to use it. So now what we need to do

11689.97 -> is get the URL link to this image. So you can do this by right clicking on it. And then

11694.25 -> you're going to go ahead and click on copy image address. Okay, so what this is going

11699.35 -> to do is get the actual link to the image itself. Right now this link is going to Google

11705.569 -> Images. But what we actually need is the link to the image itself. So there we go, we have

11710.68 -> that set up. Now we need to go ahead and add the image to the page. So under here, I'm

11715.43 -> going to just erase this color code for now. And I'm going to show you how to add our image.

11732.06 -> So there's this thing in CSS, they're called functions. Now, we're not really going to

11737.31 -> go very in depth about them. But pretty much what they do is they take a few inputs, they

11742.86 -> process them, and they give an output. So the first example of a function that we've

11745.25 -> already used is this right here, it takes three inputs A red, a green, and a blue, does

11750.11 -> some magic behind the scenes, and then gives us a color back. So what we're going to do

11755.46 -> here is use another function called URL. So what this is going to do is take in the link

11761.11 -> or to the URL, and then it's going to find that image and set it. So in quotations, it

11767.6 -> doesn't have to be in quotations, just remember that you're going to paste in your image.

11772.18 -> So remember, I just copied this from the image address. And now we have it here. So we have

11779.399 -> the image. Let's go ahead and check it out on our website. So there we go. You can see

11786.54 -> that whoops, you can see that our image is set here. Now there's a few issues, obviously

11792.46 -> with the repetition and everything, but we're not going to be covering those until maybe

11797.61 -> in a few videos. Where we talk about some other background properties. But there we

11800.48 -> go for now, we've actually set our image and now it is set on our website. So when you

11804.58 -> think of a URL, you're most likely thinking of linking to google images or some sort of

11808.67 -> web URL. But that's not the only type of URL that we can use a URL is just a link to an

11813.729 -> endpoint. This right here is a URL, it's just not linking to a website, it's instead linking

11819.689 -> to a local picture, or stylesheet, or whatever you're trying to link to. So what I'm actually

11825.01 -> going to show you is that we can use these local URLs in here. So I'm going to erase

11830.99 -> this a little bit longer. Now, I'm going to paste in our new URL here, go ahead and refresh

11836.29 -> the page. And now you can see that it still works perfectly. Because again, it's linking

11841.17 -> to an endpoint, it's just not on our website, it's instead stored on our local machine.

11845.68 -> So there we go, we have that set up now. But there's actually another way that you can

11850.76 -> set background images. And this goes the same for background colors. So why I like to use

11856.22 -> the background property is because you can set anything you want in one go. You can set

11861.85 -> it as a color as an image, and he do many other things. But instead, you can actually

11866.88 -> use very specific properties that work for specific value. So for example, in this case,

11871.71 -> we can use background image. And from here, we can go ahead and copy paste the URL, like

11879.64 -> that, make sure to add your semicolon. Now I'm going to go ahead and erase this and show

11886.95 -> you that it still works perfectly fine. So you see I refresh the page, and it's still

11892.5 -> working. And this goes the same for for background colors, you can go ahead and add a background

11897.77 -> color, and then add some random RGB value just going to go for a full black for now.

11902.22 -> And you can see that it still works. The only problem is if I go ahead and paste in that

11907.59 -> URL here. Oh, what if I go ahead and paste in that URL here,

11912.12 -> just gonna link to it straight. So if I go ahead and add the URL to the color, it's not

11918.46 -> going to work, because this is specifically for colors. Alright, so there we go. That's

11922.64 -> pretty much it. For background images, it's quite easy to use, all you have to do is make

11925.7 -> sure that you have a working URL, you can just test it by putting it in and seeing the

11929.89 -> backroads loading properly. And from there, just use your URL function and a suitable

11934.97 -> property, such as background or background image, and you should be good to go. Alright,

11939.83 -> let's move on. So in this video, we're going to be looking at some more background properties.

11942.439 -> Now we're not going to be looking at all of them. Because most of these aren't really

11948.85 -> useful. And they're not really used in everyday life. But what I'm going to be doing is showing

11950.439 -> you the main properties that you can use with backgrounds that can really change how your

11953.38 -> backgrounds look. So we're actually going to be covering covering only two in this video.

11956.68 -> So that's background size, and background repeat. So the first thing I want to cover

11961.3 -> is background repeat, because I think it's the most important. So you can see we have

11966.75 -> our background there, I already set the height and width, don't worry about these values

11970.09 -> or the properties or anything. Again, we'll talk about those later in this in this course.

11973.02 -> But for now, you can see that we have our background here, which is actually inside

11976.37 -> of a div. So I set the div height and width. And now there's a background here. So I want

11982.43 -> to mess around with this background and see what I can do. So first of all, you'll notice

11986.84 -> that we can see here that we have so for example, two or three or four of the same image. And

11992.359 -> pretty much what's happening is the image is being repeated, so that it can fill up

11996.63 -> all of the content space. Now this is done by default, because again, all of the values

12000.93 -> and pixels and the dimensions are absolute. They're not like other programs where you

12006.069 -> can just throw a picture on there, and it'll automatically resize. When you're working

12010.439 -> with web development. It takes those raw dimensions, it just plugs them straight into the website.

12015.39 -> So that's why we need to do a little bit of styling. So you can see that this image is

12023.449 -> big enough. And remember, because this is a direct image, what's happening here is we

12027.3 -> have an image tag, and then the image is just being plugged straight in there. Whereas with

12031.67 -> here, we don't actually have an image tag, what we have is an empty div, which is just

12041.12 -> think of it if you don't know what that is think of it as a container. It has a width

12051.11 -> and height of this much. But then this is an empty box. All we're doing is filling it

12056.89 -> with this image. So instead of plugging the image straight in, we're just filling an empty

12063.59 -> box with these images. And of course, the image isn't big enough to fill it. So what

12068.17 -> we have to do is or what HTML actually does by default is repeat this. So if you don't

12072.2 -> want that there is an easy way to fix it. Now it's probably not going to give you the

12075.08 -> result that you expected. But what you're going to do is go ahead and say background

12079.09 -> background, dash repeat Pretty much you can either set this to no repeat, which is the

12084.39 -> default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the

12091.34 -> default value. But if you want to set it to no repeat, this is pretty much going to remove

12097.45 -> that repeating property. Now, although it might look like now this image is going to

12104.899 -> cover the whole thing, watch what happens, you can see that it only takes up that small

12109.96 -> box. And this might look like it just resized everything. But if I go ahead and add a background

12115.84 -> color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page,

12123.23 -> you can see what's actually happening here is that we have the image, and it's not taking

12133.189 -> up the full image if I go ahead and set this to repeat.

12143.52 -> just gonna link to it straight. So if I go ahead and add the URL to the color, it's not

12158.439 -> going to work, because this is specifically for colors. Alright, so there we go. That's

12160.54 -> pretty much it. For background images, it's quite easy to use, all you have to do is make

12165.76 -> sure that you have a working URL, you can just test it by putting it in and seeing the

12175.26 -> backroads loading properly. And from there, just use your URL function and a suitable

12180.66 -> property, such as background or background image, and you should be good to go. Alright,

12185.77 -> let's move on. So in this video, we're going to be looking at some more background properties.

12191.56 -> Now we're not going to be looking at all of them. Because most of these aren't really

12199.08 -> useful. And they're not really used in everyday life. But what I'm going to be doing is showing

12205.73 -> you the main properties that you can use with backgrounds that can really change how your

12209.55 -> backgrounds look. So we're actually going to be covering covering only two in this video.

12214.479 -> So that's background size, and background repeat. So the first thing I want to cover

12218.43 -> is background repeat, because I think it's the most important. So you can see we have

12224.62 -> our background there, I already set the height and width, don't worry about these values

12229.59 -> or the properties or anything. Again, we'll talk about those later in this in this course.

12233.53 -> But for now, you can see that we have our background here, which is actually inside

12239.77 -> of a div. So I set the div height and width. And now there's a background here. So I want

12249.189 -> to mess around with this background and see what I can do. So first of all, you'll notice

12254.08 -> that we can see here that we have so for example, two or three or four of the same image. And

12260.609 -> pretty much what's happening is the image is being repeated, so that it can fill up

12266.8 -> all of the content space. Now this is done by default, because again, all of the values

12270.85 -> and pixels and the dimensions are absolute. They're not like other programs where you

12274.199 -> can just throw a picture on there, and it'll automatically resize. When you're working

12279.25 -> with web development. It takes those raw dimensions, it just plugs them straight into the website.

12286.3 -> So that's why we need to do a little bit of styling. So you can see that this image is

12293.12 -> big enough. And remember, because this is a direct image, what's happening here is we

12296.54 -> have an image tag, and then the image is just being plugged straight in there. Whereas with

12300.68 -> here, we don't actually have an image tag, what we have is an empty div, which is just

12305.13 -> think of it if you don't know what that is think of it as a container. It has a width

12309.92 -> and height of this much. But then this is an empty box. All we're doing is filling it

12316.479 -> with this image. So instead of plugging the image straight in, we're just filling an empty

12321.17 -> box with these images. And of course, the image isn't big enough to fill it. So what

12329.33 -> we have to do is or what HTML actually does by default is repeat this. So if you don't

12331.92 -> want that there is an easy way to fix it. Now it's probably not going to give you the

12337.95 -> result that you expected. But what you're going to do is go ahead and say background

12344.689 -> background, dash repeat Pretty much you can either set this to no repeat, which is the

12351.739 -> default. Or you Oh, sorry, no repeat is the default. Yeah. So repeat is going to be the

12355.46 -> default value. But if you want to set it to no repeat, this is pretty much going to remove

12361.22 -> that repeating property. Now, although it might look like now this image is going to

12367.31 -> cover the whole thing, watch what happens, you can see that it only takes up that small

12372.13 -> box. And this might look like it just resized everything. But if I go ahead and add a background

12378.399 -> color to this, like that, and I'm just gonna say red. And I go ahead and refresh the page,

12383.62 -> you can see what's actually happening here is that we have the image, and it's not taking

12388.64 -> up the full image if I go ahead and set this to repeat.

12392.17 -> Now the background is taking up the full image. So I'm actually just going to go ahead and

12404.01 -> set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there

12414.81 -> we go. Now that we know how to adjust the repet repetition of these backgrounds, why

12421.729 -> don't we go ahead and actually talk about background size, because that's the important

12424.84 -> one, that's going to allow us to fill this whole container. So first of all, now that

12430.06 -> we know the background repeat just changes, if it repeats or not, we need to know how

12435.91 -> to alter the size, we can do this using a property called background size. So I'm going

12441 -> to go ahead and actually erase this, we don't need it for now, just like that. So you can

12445.041 -> actually go ahead and set the size of the background. And remember, depending on whether

12452.32 -> you set it to repeat or not, this is going to change your effect. So right now, it's

12458.63 -> still on repeat since we removed that property. But pretty much the way to manipulate this

12463.149 -> is the first value is going to be the height. So for example, let's say I wanted to take

12468.55 -> up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter

12472.67 -> the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can

12478.46 -> see that because our repeat is actually off. Sorry, our repeat is on, we can see that it

12482.68 -> just keeps repeating until this whole space is filled up. Now, obviously, it's going to

12484.72 -> be pretty hard to get this exactly at the dimensions. If I actually go ahead and set

12491.17 -> this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's

12493.97 -> still repeating. So it's very hard to get this working in the way that you want it to

12498.359 -> cover the whole thing exactly, even if you use the direct values. So there's actually

12501.12 -> a keyword that you can use to fix this up. All you have to do is type cover here. So

12504.47 -> if I go ahead and refresh, you can see now the image takes up the full width. And although

12509.369 -> it sacrifices the quality, pretty much what's happening here is this cover value is going

12512.57 -> to resize the image based on the dimensions just right to that it fits this whole thing.

12515.71 -> There's also one more keyword that you can use, which is called contain. But the only

12521.3 -> problem is with contain is it's going to resize it as much as possible. The only problem is

12527.85 -> it trying to resize it without messing with the proportions. So let's say that this is

12533.21 -> maybe a two to one ratio. So for every two widths, there's one height. So let's just

12541.48 -> use that as an example. Basically, what's happening here is that no matter how much

12546.87 -> you stretch this, you cannot go the full way without stretching it off the screen. So contain

12551.37 -> doesn't do that. Instead, it just repeats the image. Now if we actually change this

12553.21 -> back to cover, you can see that it does cut off part of that image because it just stretches

12559.83 -> it out the full way until the image color or the background covers the full width. So

12568.399 -> there you go. That's pretty much it for background size. Now I would recommend going instead

12571.54 -> not with the sizing option pixels, but instead using the cover keyword or the contain keyword,

12575.6 -> if you know that your proportions are right, or if you need it for some other purpose.

12578.88 -> So yeah, pretty much those are the two main other background properties that you're going

12583.02 -> to be using. Obviously, there's many more, but they're not as useful. And they don't

12590.39 -> really make as much of a difference as these two. Alright, let's move on.

12597.05 -> Now the background is taking up the full image. So I'm actually just going to go ahead and

12604.89 -> set this to a basic steel blue, I think that's one of my favorite CSS named colors. So there

12610.82 -> we go. Now that we know how to adjust the repet repetition of these backgrounds, why

12615.649 -> don't we go ahead and actually talk about background size, because that's the important

12620.38 -> one, that's going to allow us to fill this whole container. So first of all, now that

12624.982 -> we know the background repeat just changes, if it repeats or not, we need to know how

12629.569 -> to alter the size, we can do this using a property called background size. So I'm going

12637.06 -> to go ahead and actually erase this, we don't need it for now, just like that. So you can

12643.23 -> actually go ahead and set the size of the background. And remember, depending on whether

12645.1 -> you set it to repeat or not, this is going to change your effect. So right now, it's

12649.989 -> still on repeat since we removed that property. But pretty much the way to manipulate this

12653.779 -> is the first value is going to be the height. So for example, let's say I wanted to take

12658.2 -> up 50 pixels, then with a direct space, remember, no commas nothing, you're going to then enter

12661.1 -> the width. So I'm going to say maybe 100 pixels. Let's go ahead and refresh now. And you can

12665.14 -> see that because our repeat is actually off. Sorry, our repeat is on, we can see that it

12671.279 -> just keeps repeating until this whole space is filled up. Now, obviously, it's going to

12675.319 -> be pretty hard to get this exactly at the dimensions. If I actually go ahead and set

12680.199 -> this to 400 pixels. And 70%, we didn't really talk about percentages much, you can see it's

12685.529 -> still repeating. So it's very hard to get this working in the way that you want it to

12689.53 -> cover the whole thing exactly, even if you use the direct values. So there's actually

12693.95 -> a keyword that you can use to fix this up. All you have to do is type cover here. So

12698.833 -> if I go ahead and refresh, you can see now the image takes up the full width. And although

12702.529 -> it sacrifices the quality, pretty much what's happening here is this cover value is going

12712.3 -> to resize the image based on the dimensions just right to that it fits this whole thing.

12718.479 -> There's also one more keyword that you can use, which is called contain. But the only

12724.1 -> problem is with contain is it's going to resize it as much as possible. The only problem is

12732.18 -> it trying to resize it without messing with the proportions. So let's say that this is

12736.229 -> maybe a two to one ratio. So for every two widths, there's one height. So let's just

12743.489 -> use that as an example. Basically, what's happening here is that no matter how much

12749.46 -> you stretch this, you cannot go the full way without stretching it off the screen. So contain

12755.45 -> doesn't do that. Instead, it just repeats the image. Now if we actually change this

12761.29 -> back to cover, you can see that it does cut off part of that image because it just stretches

12767.83 -> it out the full way until the image color or the background covers the full width. So

12774.949 -> there you go. That's pretty much it for background size. Now I would recommend going instead

12779.56 -> not with the sizing option pixels, but instead using the cover keyword or the contain keyword,

12784.811 -> if you know that your proportions are right, or if you need it for some other purpose.

12791.41 -> So yeah, pretty much those are the two main other background properties that you're going

12794.51 -> to be using. Obviously, there's many more, but they're not as useful. And they don't

12799.569 -> really make as much of a difference as these two. Alright, let's move on.

12807.06 -> So in this video, we're going to be talking a little bit more about RGB colors. But we're

12812.899 -> actually going to be adding one more feature to this. So right now we've talked about RGB,

12817.04 -> which is our basic color set. We have a red, a green and a blue. There's actually one more

12821.66 -> that we're missing out on the can really improve the quality of our colors. And that's a or

12825.42 -> alpha. So right now you can see we have an RGB color code. But what if we wanted to add

12829.979 -> this mysterious alpha component? What will we do? So I'm actually going to go ahead and

12833.89 -> use it as the background. Well, the first thing you need to do is change the RGB name

12837.18 -> to RGB a. And in this way, we've completely changed the way the color looks. Now if we

12840.54 -> go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha

12845.061 -> value. So all we have to do is after green Sorry, blue, keep getting those two mixed

12848.819 -> up. After the final value, you're gonna add another comma. And here is where you can put

12853.17 -> any value between zero and one. So now that you know what you can do with it, alpha is

12857.27 -> pretty much the transparency or opacity of a color zero, meaning it's completely transparent,

12861.5 -> you can't see it at all. And one, meaning it's fully visible. Think of this in percentages.

12868.5 -> For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way,

12874.319 -> you can really think about opacity in a much easier way. So I'm going to go ahead and actually

12878.101 -> set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you

12883.479 -> can see that the color is still there, it's just a lot lighter. Now, you're probably asking

12887.97 -> like, why don't you just go and maybe make the color lighter? Well, it's actually much

12893.52 -> easier to control it this way. And on top of that, if you want things like maybe fading,

12900.25 -> or you want to maybe change a color fade into a different one, you can't really just change

12906.08 -> the color every time, because in animation, it's much easier to just change the opacity,

12911.351 -> reduce it or increase it, then change the color every time. So it's also much easier

12914.98 -> to use RGB a colors when you're trying to just control the overall look of a color.

12919.58 -> So usually, when you're using just simply RGB colors, you can only get a certain look.

12925.03 -> But once you add opacity into the mix, you can completely change the way that it looks.

12929.189 -> So pretty much here's the takeaway they're supposed to take from this video, you can

12934.54 -> have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now

12941.899 -> this a value stands for alpha, or opacity or transparency, whatever you want to call

12948.061 -> it, then this value isn't like just from zero to 255. Instead, you have to set a value between

12954.2 -> zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero

12959.6 -> being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent.

12963.229 -> And then one being when it's completely visible. Alright, so that's pretty much it for this

12966.33 -> RGBA color scheme, it's very easy to use, you don't really need to use a color picker.

12970.29 -> For that, you can just think about how opaque you want it. And from there, you can set your

12974.83 -> value. All right, let's move on.

12975.87 -> So in this video, we're going to be talking a little bit more about RGB colors. But we're

12978.55 -> actually going to be adding one more feature to this. So right now we've talked about RGB,

12982.87 -> which is our basic color set. We have a red, a green and a blue. There's actually one more

12987.859 -> that we're missing out on the can really improve the quality of our colors. And that's a or

12994.359 -> alpha. So right now you can see we have an RGB color code. But what if we wanted to add

12997.949 -> this mysterious alpha component? What will we do? So I'm actually going to go ahead and

13000 -> use it as the background. Well, the first thing you need to do is change the RGB name

13003.16 -> to RGB a. And in this way, we've completely changed the way the color looks. Now if we

13008.739 -> go ahead and refresh the page, nothing's changed. But now we can actually manipulate that alpha

13011.37 -> value. So all we have to do is after green Sorry, blue, keep getting those two mixed

13017.97 -> up. After the final value, you're gonna add another comma. And here is where you can put

13023.16 -> any value between zero and one. So now that you know what you can do with it, alpha is

13027.41 -> pretty much the transparency or opacity of a color zero, meaning it's completely transparent,

13029.899 -> you can't see it at all. And one, meaning it's fully visible. Think of this in percentages.

13033.78 -> For example, zero is 0%, and one is 100% 0.5, would be 50%. So if you think of it that way,

13041 -> you can really think about opacity in a much easier way. So I'm going to go ahead and actually

13046.82 -> set 0.4. So right now we're at zero or 40% opacity. Now, if we refresh the page, you

13050.109 -> can see that the color is still there, it's just a lot lighter. Now, you're probably asking

13058.26 -> like, why don't you just go and maybe make the color lighter? Well, it's actually much

13064.6 -> easier to control it this way. And on top of that, if you want things like maybe fading,

13072.33 -> or you want to maybe change a color fade into a different one, you can't really just change

13078.03 -> the color every time, because in animation, it's much easier to just change the opacity,

13083.811 -> reduce it or increase it, then change the color every time. So it's also much easier

13090.18 -> to use RGB a colors when you're trying to just control the overall look of a color.

13095.08 -> So usually, when you're using just simply RGB colors, you can only get a certain look.

13099.939 -> But once you add opacity into the mix, you can completely change the way that it looks.

13109.649 -> So pretty much here's the takeaway they're supposed to take from this video, you can

13114.529 -> have a fourth component to an RGB color, which is a now this becomes an RGB a color. Now

13124.29 -> this a value stands for alpha, or opacity or transparency, whatever you want to call

13128.87 -> it, then this value isn't like just from zero to 255. Instead, you have to set a value between

13136.34 -> zero and one. If you think of it in terms of percentages, it becomes a lot easier, zero

13142.51 -> being the no or zero, when there's no transparency, sorry, when they're when it's fully transparent.

13147.649 -> And then one being when it's completely visible. Alright, so that's pretty much it for this

13152.979 -> RGBA color scheme, it's very easy to use, you don't really need to use a color picker.

13158.76 -> For that, you can just think about how opaque you want it. And from there, you can set your

13165.779 -> value. All right, let's move on.

13167.64 -> So in this video, this is going to be talking about the last feature with using colors.

13172.92 -> And it's a little bit hard to grasp at first. But once you start using it, you can really

13180.3 -> get used to it. So we're going to be working with gradients in this video on for now, I'm

13187.64 -> just going to go ahead and erase this background. And I'm just going to have a single color.

13194.8 -> So I'm just going to say steel blue. And I'm going to also erase this color property. So

13199.159 -> now we have a background of the steel blue color. There we go. So now it's working. So

13201.98 -> pretty much if you don't know what a gradient is already, it's kind of a transition between

13206.56 -> two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you

13212.609 -> know, moves or diffuses from through the colors. So for example, you start just completely

13217.819 -> red. And then you move up along and as as you go up, it gets more and more blue. So

13224.77 -> you're sort of mixing between the two colors. So if you've ever done any painting before,

13230.12 -> you're used, maybe coloring pencils, if you kind of use paint and draw between the two

13235.989 -> colors, depending on the proportions between them, it's going to make sort of a purple

13240.479 -> ish, and then it transitions like that. So pretty much that's what's going on here without

13245.81 -> gradients is we're transitioning between two colors. Now of course, you can do more than

13251.439 -> two, you can put three, four, you can put as many colors as you want. But pretty much

13258.189 -> what you have to take away from this is that a gradient is just a transition between a

13263.27 -> number of colors. Okay, so now that we know what a gradient is, let's go ahead and get

13268.93 -> started adding them. So there are actually two types of gradients, radial and linear.

13270.63 -> So radial gradients are circular, they kind of move outwards from a center. And depending

13275.06 -> on the percentages or how much you want of each color, it's going to change the way the

13282.739 -> gradient looks. A linear gradient on the other hand is the one that I described earlier,

13288.67 -> a smooth red transition to blue, it could go from left to right, top to bottom and even

13294.39 -> diagonally depending on how we define the direction later in this video when we start

13300.279 -> creating our gradients, alright, let's get started. So the first thing I want to work

13303.979 -> with is linear gradients. So the way to do this just with our RGBA or a URL, all we have

13311.08 -> to do is type linear dash gradient. Just like that. And from here, we can start defining

13316.65 -> our directions. So if you don't already know about directions already, pretty much there

13321.899 -> are four different positions top, bottom, left and right. And you can also combine the

13328.85 -> two to create corners. So for example, top right would be the top right corner. So first

13334.59 -> of all, what you're going to want to do is type two. And then you're going to say the

13341.359 -> name of the direction. So in this case, I'm just going to say two, right. So what this

13346.699 -> is going to be saying is you want the grid to move to the right side. So it's going to

13354.09 -> be going this way. Now, there's also another way to do this I'll talk about in just a second.

13358.8 -> But for now, let's leave it like this. And then after your comma, you're going to add

13362.909 -> as many colors as you want. So in this case, I'm going to add red, and blue. And remember

13367.229 -> to separate them also by a comma. Let's go ahead and refresh and see what's happening,

13371.83 -> you can see that we have a red slowly transitioning into a blue to the right side. So remember,

13378.62 -> it starts with the first color and moves on. Let's go ahead and add a green in there, and

13386.521 -> then a steel blue, and then a blue. Now we have four colors that are slowly transitioning,

13391.62 -> we have a red, that slowly transition into a green, and then a steel blue, you can sort

13404.27 -> of see it there and then a blue. And just saying we don't actually have to use these

13412.92 -> name colors, I just wanted to use them because it looked it was quite easy to look at. So

13418.55 -> what we can actually do and here's your first use for Opacity is you can go ahead and let's

13426.52 -> just take a random color here. So to write Remember, this is starting here, we're going

13430.689 -> to paste in that color. But then we're going to finish it with an RGB a color,

13434.61 -> So in this video, this is going to be talking about the last feature with using colors.

13440.77 -> And it's a little bit hard to grasp at first. But once you start using it, you can really

13445.38 -> get used to it. So we're going to be working with gradients in this video on for now, I'm

13451.55 -> just going to go ahead and erase this background. And I'm just going to have a single color.

13456.83 -> So I'm just going to say steel blue. And I'm going to also erase this color property. So

13461.69 -> now we have a background of the steel blue color. There we go. So now it's working. So

13467.09 -> pretty much if you don't know what a gradient is already, it's kind of a transition between

13474.12 -> two colors. So it's not just a sharp, red to blue in one go. It smoothly green, you

13479.06 -> know, moves or diffuses from through the colors. So for example, you start just completely

13483.399 -> red. And then you move up along and as as you go up, it gets more and more blue. So

13489.8 -> you're sort of mixing between the two colors. So if you've ever done any painting before,

13494.29 -> you're used, maybe coloring pencils, if you kind of use paint and draw between the two

13502.33 -> colors, depending on the proportions between them, it's going to make sort of a purple

13506.5 -> ish, and then it transitions like that. So pretty much that's what's going on here without

13513.08 -> gradients is we're transitioning between two colors. Now of course, you can do more than

13518.25 -> two, you can put three, four, you can put as many colors as you want. But pretty much

13526.02 -> what you have to take away from this is that a gradient is just a transition between a

13530.25 -> number of colors. Okay, so now that we know what a gradient is, let's go ahead and get

13536.38 -> started adding them. So there are actually two types of gradients, radial and linear.

13542.18 -> So radial gradients are circular, they kind of move outwards from a center. And depending

13546.54 -> on the percentages or how much you want of each color, it's going to change the way the

13551.28 -> gradient looks. A linear gradient on the other hand is the one that I described earlier,

13557.87 -> a smooth red transition to blue, it could go from left to right, top to bottom and even

13563.521 -> diagonally depending on how we define the direction later in this video when we start

13568.83 -> creating our gradients, alright, let's get started. So the first thing I want to work

13576 -> with is linear gradients. So the way to do this just with our RGBA or a URL, all we have

13582.83 -> to do is type linear dash gradient. Just like that. And from here, we can start defining

13592.699 -> our directions. So if you don't already know about directions already, pretty much there

13595.52 -> are four different positions top, bottom, left and right. And you can also combine the

13599.5 -> two to create corners. So for example, top right would be the top right corner. So first

13604.2 -> of all, what you're going to want to do is type two. And then you're going to say the

13608.94 -> name of the direction. So in this case, I'm just going to say two, right. So what this

13613.819 -> is going to be saying is you want the grid to move to the right side. So it's going to

13622.84 -> be going this way. Now, there's also another way to do this I'll talk about in just a second.

13629.449 -> But for now, let's leave it like this. And then after your comma, you're going to add

13635.899 -> as many colors as you want. So in this case, I'm going to add red, and blue. And remember

13643.83 -> to separate them also by a comma. Let's go ahead and refresh and see what's happening,

13651.699 -> you can see that we have a red slowly transitioning into a blue to the right side. So remember,

13660.859 -> it starts with the first color and moves on. Let's go ahead and add a green in there, and

13666.01 -> then a steel blue, and then a blue. Now we have four colors that are slowly transitioning,

13672.85 -> we have a red, that slowly transition into a green, and then a steel blue, you can sort

13679.33 -> of see it there and then a blue. And just saying we don't actually have to use these

13688.1 -> name colors, I just wanted to use them because it looked it was quite easy to look at. So

13696.729 -> what we can actually do and here's your first use for Opacity is you can go ahead and let's

13702.81 -> just take a random color here. So to write Remember, this is starting here, we're going

13707.64 -> to paste in that color. But then we're going to finish it with an RGB a color,

13713.24 -> like that. And pretty much what's what's going to happen is this is going to be a slowly

13718.64 -> fading out color, just like this. So you can see what's happening is we start with a fully

13722.36 -> functional color, which has a full track or a has no transparency at all. And we slowly

13727.47 -> slowly make it fade more and more out until we can't see the picture at all, or the color

13734.71 -> in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty

13738.92 -> much it for linear gradients. Let's talk about actually making diagonal gradients now. So

13743.18 -> we know that we can have to write, we can also have to top for example, if you wanted

13748.189 -> to start from the start from the bottom, just like that. And you can see now it goes up.

13753.64 -> But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom

13757.66 -> right corner, what you would do is just type it out like this to bottom right. Now if we

13762.01 -> refresh the page, you can see that it slowly goes down and fades out just at the bottom

13764.68 -> right. So there we go. That's pretty much it for positioning. But there's actually another

13767.91 -> way to do this, and it's through angles. So if you don't already know how to use angles,

13770.3 -> then you can pretty much skip this step because it's quite hard to get the use of it. But

13772.71 -> once you learn how to actually work with angles, and you know how to, you know, move them around

13780.479 -> things like that, it becomes very easy to work with them. So let's say you wanted them

13794.77 -> to go in a very specific direction. So for example, you wanted it to end somewhere here.

13801.51 -> Now, obviously, you can't use words for positioning, because they only work at certain places such

13808.35 -> as the corners. So if you wanted to do this, you're going to have to go ahead and use angles.

13816.069 -> So first thing I'm going to do is go ahead and erase this part because we're not using

13822.319 -> positioning, and then we're going to go ahead and type our angle. So the first thing I'm

13831.439 -> going to do is define the place that I wanted to end. So let's say this time I wanted to

13839.54 -> add on the left here. So what I'm going to do is go ahead and say minus 90, because remember

13846 -> what's happening here is we want it to just flip completely around. So let's say this

13857.43 -> is our starting angle is zero, and we go all the way down minus 90. So if you don't already

13864.582 -> know 90 is kind of a quarter turn. And what's going to happen is from here, we can type

13869.96 -> D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead

13875.819 -> and refresh the page. You can see that now it goes from right to left. Now this is a

13879.949 -> pretty bad example considering we can just do this normally, by typing to left. Well,

13884.33 -> why don't we go ahead and choose something a little bit more specific. So I'm going to

13890.04 -> go 146 degrees. So just remember that pointing upwards is kind of the starting position.

13893.859 -> And then we turn 90 degrees, and then just a little bit over halfway. And I think that's

13901.439 -> not a very good example. So I'm going to go with 160. Now you can see once I refresh the

13908.71 -> page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead

13913.59 -> and add something like maybe 215 or something like that, go ahead and refresh, you can see

13921.359 -> that they are ending in different places, it's a lot more specific. Now, it's not very

13923.55 -> obvious with this kind of fading color. But what's happening here is we can directly control

13926.684 -> where we want our gradient to end. So that's one way of using linear gradients. Now let's

13931.75 -> go ahead and talk about the next type of gradient, which are radial gradients. So first of all,

13937.18 -> I'm just going to erase this whole thing here because I don't really need it. Now, radial

13942.35 -> gradients don't work in the same way that linear ones do instead of having a specified

13947.47 -> direction. So for example, you want to go from Right to left or from top to bottom,

13952.109 -> instead, what happens is we can actually define the percentages or proportions of each color

13956.21 -> that we want. The next thing I'm going to talk about is actually this background size.

13962.73 -> So one thing you need to note is that you cannot specify the cover, background size

13969.659 -> or anything like that for these radial gradients, because they just won't work. So what we're

13975.2 -> gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our

13979.67 -> radial gradient. So I'm going to go ahead and type radio dash gradient,

13983.489 -> like that. And pretty much what's what's going to happen is this is going to be a slowly

13992.13 -> fading out color, just like this. So you can see what's happening is we start with a fully

14000.07 -> functional color, which has a full track or a has no transparency at all. And we slowly

14004.14 -> slowly make it fade more and more out until we can't see the picture at all, or the color

14008.689 -> in this case. So yeah, that's pretty much a great way of looking at it. And that's pretty

14014.51 -> much it for linear gradients. Let's talk about actually making diagonal gradients now. So

14019.34 -> we know that we can have to write, we can also have to top for example, if you wanted

14025.029 -> to start from the start from the bottom, just like that. And you can see now it goes up.

14030.63 -> But what if we wanted to make it diagonal. So let's say we wanted to finish in the bottom

14033.1 -> right corner, what you would do is just type it out like this to bottom right. Now if we

14039.56 -> refresh the page, you can see that it slowly goes down and fades out just at the bottom

14045.92 -> right. So there we go. That's pretty much it for positioning. But there's actually another

14054.39 -> way to do this, and it's through angles. So if you don't already know how to use angles,

14059.72 -> then you can pretty much skip this step because it's quite hard to get the use of it. But

14064.02 -> once you learn how to actually work with angles, and you know how to, you know, move them around

14067.5 -> things like that, it becomes very easy to work with them. So let's say you wanted them

14071.67 -> to go in a very specific direction. So for example, you wanted it to end somewhere here.

14075.76 -> Now, obviously, you can't use words for positioning, because they only work at certain places such

14080.33 -> as the corners. So if you wanted to do this, you're going to have to go ahead and use angles.

14086.5 -> So first thing I'm going to do is go ahead and erase this part because we're not using

14091.03 -> positioning, and then we're going to go ahead and type our angle. So the first thing I'm

14095.63 -> going to do is define the place that I wanted to end. So let's say this time I wanted to

14101.16 -> add on the left here. So what I'm going to do is go ahead and say minus 90, because remember

14106.87 -> what's happening here is we want it to just flip completely around. So let's say this

14112.11 -> is our starting angle is zero, and we go all the way down minus 90. So if you don't already

14119.18 -> know 90 is kind of a quarter turn. And what's going to happen is from here, we can type

14126.08 -> D, G, or degrees. And this is going to set the angle that we wanted. So let's go ahead

14134.13 -> and refresh the page. You can see that now it goes from right to left. Now this is a

14140.43 -> pretty bad example considering we can just do this normally, by typing to left. Well,

14146.689 -> why don't we go ahead and choose something a little bit more specific. So I'm going to

14151.56 -> go 146 degrees. So just remember that pointing upwards is kind of the starting position.

14155.5 -> And then we turn 90 degrees, and then just a little bit over halfway. And I think that's

14158.82 -> not a very good example. So I'm going to go with 160. Now you can see once I refresh the

14163.229 -> page that it ends, sort of around the corner, but not exactly on. And if I actually go ahead

14165.78 -> and add something like maybe 215 or something like that, go ahead and refresh, you can see

14172.479 -> that they are ending in different places, it's a lot more specific. Now, it's not very

14176.979 -> obvious with this kind of fading color. But what's happening here is we can directly control

14183.5 -> where we want our gradient to end. So that's one way of using linear gradients. Now let's

14190.069 -> go ahead and talk about the next type of gradient, which are radial gradients. So first of all,

14195.64 -> I'm just going to erase this whole thing here because I don't really need it. Now, radial

14203.19 -> gradients don't work in the same way that linear ones do instead of having a specified

14208.38 -> direction. So for example, you want to go from Right to left or from top to bottom,

14213.6 -> instead, what happens is we can actually define the percentages or proportions of each color

14220.5 -> that we want. The next thing I'm going to talk about is actually this background size.

14226.33 -> So one thing you need to note is that you cannot specify the cover, background size

14230.31 -> or anything like that for these radial gradients, because they just won't work. So what we're

14235.42 -> gonna have to do is go ahead and remove this. There we go. Now let's go ahead and add our

14240.76 -> radial gradient. So I'm going to go ahead and type radio dash gradient,

14243.23 -> just like that. And now what we can do is specify a certain amount of colors. So for

14247.33 -> example, I'm just going to start out with red and blue. Now if we refresh the page,

14250.36 -> you can see it starts off red, and ends and blue. But we can actually add more than two

14252.55 -> colors, just like with our, our linear gradient there, what we can actually do is go ahead

14256.54 -> and type in let's For example, let's just say green as an example. Now if we refresh

14262.75 -> the page, you can see that we've added a third color. Now, if we wanted to change the proportions,

14267.39 -> so for example, let's pretend that this blue is taking up too much space, we don't want

14273.62 -> that much, we can actually specify how much we want of each. So let's change the proportions,

14278.674 -> what we can do is go ahead and add percentages. So what I'm going to do first is go and specify

14287.29 -> what I want here. Now one thing to note is that these have to be in order, you have to

14291.11 -> have the minimum percentage, or the smallest percentage at the start, and then the largest

14295.979 -> at the finish. So I'm going to go ahead and start off with something small, like 20%,

14302.029 -> then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead and refresh

14309.25 -> the page, you can see that there is a lot more green and a lot less blue, and red. So

14321.451 -> the final thing I want to cover for radial gradients is the shape. Now you can actually

14325.659 -> specify the shape that you want. Now right now I have an ellipse or sort of oval shape,

14330.18 -> we can actually change it, all we have to do is type the name of the shape. Now there

14334.77 -> are two values, you can put here ellipse, which is the default, and circle, I'm going

14340.89 -> to go ahead and type circle. Now if I go ahead and refresh, you can see that this is in a

14350.46 -> much more circular shape, rather than the previous oval. And although it's not a perfect

14354.149 -> circle, obviously, our proportions aren't going to change what it looks like. Alright,

14357.84 -> so that's pretty much it for gradients. There's quite a lot to learn about these. And there's

14363.04 -> a lot more features that you can cover. But for now, I think this is great. Now what I'm

14367.43 -> going to do is go ahead and just create another gradient, another linear gradient right under

14372.42 -> this one, just so you can see what it looks like. So for example, I'm going to go ahead,

14377.41 -> and maybe let's just go for the body background for now, I'm going to go ahead and actually

14388.11 -> add a linear gradient gradient here. And I'm going to say, let's just say to bottom, because

14396.38 -> again, we wanted this kind of stretch from top to bottom. So now what we're going to

14401.92 -> do is start off very strong. So we're going to have our main RGBA color, or RGB, whoops,

14408.229 -> our main color here. So I'm going to copy this. So this is going to be a fully, fully

14415.88 -> visible color, starting from the top, and then we're going to end with a much less visible

14423.4 -> color. So there you go. Now let's go ahead and refresh the page. And you can see that

14428.99 -> maybe there's a little bit of an error there. Oh, yeah, forgot to spell it. There we go.

14435.26 -> Now we can go ahead and refresh. And you can see it's still not working so much errors,

14438.989 -> you're probably Yep, forgot the got the parentheses there. Just make sure that you're doing this,

14444.55 -> right, because sometimes you can make some silly errors. So for example, if you look

14451.359 -> here, we were actually we were missing a bracket. So now if we go ahead and refresh, there we

14459.71 -> go. It's a lot better now. So we start off with a nice, fully visible color, and we end

14467.62 -> off with a less visible color. Alright, so there we go. That's pretty much it for gradients,

14472.25 -> you can go ahead and download this file from the project, you can go ahead and look at

14475.739 -> how everything works here, mess around with it, see what you can do, because there is

14479.659 -> a lot to gradients and although they're not used everyday, they're still very useful tools,

14482.52 -> and they can really help you out in your web development careers. Alright, let's move on.

14486.83 -> just like that. And now what we can do is specify a certain amount of colors. So for

14492.28 -> example, I'm just going to start out with red and blue. Now if we refresh the page,

14497.949 -> you can see it starts off red, and ends and blue. But we can actually add more than two

14503.92 -> colors, just like with our, our linear gradient there, what we can actually do is go ahead

14507.239 -> and type in let's For example, let's just say green as an example. Now if we refresh

14517.35 -> the page, you can see that we've added a third color. Now, if we wanted to change the proportions,

14522.67 -> so for example, let's pretend that this blue is taking up too much space, we don't want

14526.739 -> that much, we can actually specify how much we want of each. So let's change the proportions,

14532.1 -> what we can do is go ahead and add percentages. So what I'm going to do first is go and specify

14538.27 -> what I want here. Now one thing to note is that these have to be in order, you have to

14548.939 -> have the minimum percentage, or the smallest percentage at the start, and then the largest

14557.1 -> at the finish. So I'm going to go ahead and start off with something small,

14567.31 -> like 20%, then I'm going to have let's say 40%, blue, and 55% green. So now if I go ahead

14577.01 -> and refresh the page, you can see that there is a lot more green and a lot less blue, and

14584.02 -> red. So the final thing I want to cover for radial gradients is the shape. Now you can

14590.45 -> actually specify the shape that you want. Now right now I have an ellipse or sort of

14601.96 -> oval shape, we can actually change it, all we have to do is type the name of the shape.

14607.09 -> Now there are two values, you can put here ellipse, which is the default, and circle,

14618.529 -> I'm going to go ahead and type circle. Now if I go ahead and refresh, you can see that

14626.77 -> this is in a much more circular shape, rather than the previous oval. And although it's

14632.34 -> not a perfect circle, obviously, our proportions aren't going to change what it looks like.

14637.5 -> Alright, so that's pretty much it for gradients. There's quite a lot to learn about these.

14641.74 -> And there's a lot more features that you can cover. But for now, I think this is great.

14648.94 -> Now what I'm going to do is go ahead and just create another gradient, another linear gradient

14656.72 -> right under this one, just so you can see what it looks like. So for example, I'm going

14664.25 -> to go ahead, and maybe let's just go for the body background for now, I'm going to go ahead

14671.56 -> and actually add a linear gradient gradient here. And I'm going to say, let's just say

14675.149 -> to bottom, because again, we wanted this kind of stretch from top to bottom. So now what

14679.069 -> we're going to do is start off very strong. So we're going to have our main RGBA color,

14683.36 -> or RGB, whoops, our main color here. So I'm going to copy this. So this is going to be

14690.38 -> a fully, fully visible color, starting from the top, and then we're going to end with

14696.66 -> a much less visible color. So there you go. Now let's go ahead and refresh the page. And

14702.18 -> you can see that maybe there's a little bit of an error there. Oh, yeah, forgot to spell

14706.939 -> it. There we go. Now we can go ahead and refresh. And you can see it's still not working so

14711.06 -> much errors, you're probably Yep, forgot the got the parentheses there. Just make sure

14714.71 -> that you're doing this, right, because sometimes you can make some silly errors. So for example,

14718.88 -> if you look here, we were actually we were missing a bracket. So now if we go ahead and

14723.5 -> refresh, there we go. It's a lot better now. So we start off with a nice, fully visible

14727.27 -> color, and we end off with a less visible color. Alright, so there we go. That's pretty

14731.34 -> much it for gradients, you can go ahead and download this file from the project, you can

14735.87 -> go ahead and look at how everything works here, mess around with it, see what you can

14742.609 -> do, because there is a lot to gradients and although they're not used everyday, they're

14747.04 -> still very useful tools, and they can really help you out in your web development careers.

14751.239 -> Alright, let's move on.

14752.319 -> So in this video, we're going to be talking about some of the different types of units

14756.609 -> in CSS. So so far, we've been working with some basic coloring techniques, we've learned

14761.25 -> about selectors, and then different properties. And then we've learned about some of these

14765.58 -> different values, but we haven't actually learned what all of these different things

14770.17 -> mean this this PX this percentage, and we don't actually know how they work. So what

14773.73 -> I'm going to be doing today is talking about some of the different types of units and how

14781.72 -> you can identify which one to use. So first thing I want to talk about is the difference

14785.39 -> between the two types of units which are absolute units, and rarely have units. So firstly,

14789.54 -> we have to talk about some of the units we've already been using, for example, pixels. Now

14794.12 -> pixels is a little bit special, I'll explain you. I'll explain it to you in just a second.

14797.72 -> But pretty much the commonly used absolute units are things like centimeters, millimeters

14801.51 -> and inches, which are absolute, they it's not dependent on anything else. If you set

14806.67 -> it as one inch, it's going to be one inch long, no matter if you're doing it on a phone,

14808.439 -> or an ultra wide TV. So that's what absolute units are, they aren't affected by anything

14812.43 -> around them. The second group are relative units. And these are a little bit different.

14817.439 -> Relative units are usually dependent on something. So for example, our percentage unit here is

14823.26 -> dependent on the parent elements while unit. So for example, if this service image here

14826.779 -> or here, has a width of 70%, that means that the parent element of this service image or

14830.7 -> this service image right here, which in this case is our body, take 70% of its width of

14836.98 -> its total width. So the whole way through of the body is 100%. And 70% is going to be

14841.68 -> somewhere around here, because that's what we set it as now notice that when I start

14846.409 -> resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't

14852.29 -> work because I haven't refreshed the page. But you can see, no matter how small I make

14856.739 -> it, it's only going to take up 70% of the total body width. So this is really good for

14862.5 -> something like a responsive design. Because what happens is when you're using absolute

14864.99 -> units in a responsive design, let's say you set this width as 200 pixels on a phone, it's

14869.28 -> going to appear very large, whereas on an ultra wide TV, it's going to appear too small.

14876.13 -> So using something like percentages would be very useful, because then you could resize

14880.92 -> your window here, however you like it and still have that look that you want. So that's

14886.729 -> pretty much it for percentages. But there's also a lot of different relative values that

14890.369 -> we can use. And I'm going to go through all of these in just a second. But the first thing

14897.71 -> I want to talk about is this special unit, which is pixels. Now pixels is a little bit

14901.659 -> different. Now, although it is considered an absolute unit, it is actually relatively

14904.1 -> scale based on what device you're on. So if you don't already know your screen right now

14907.659 -> that you're watching this video on is made up of a bunch of little tiny pixels. Now there's

14915.33 -> this concept in computing, it's called DPI, it's pretty much used to calculate the resolution

14919.29 -> of your screen. And depending on the number of pixels you have, the resolution is going

14923.39 -> to change. So on low DPI, tablets or things like that, anything that has a very low resolution.

14928.22 -> So for example, if you're on YouTube, and you've changed your resolution to four ADP,

14932.34 -> what's going to happen is then the video is going to sort of adjust how many pixels are

14938.29 -> in that video. Now, I'm not going to get too deep into how pixels are changed and things

14944.64 -> like that. But pretty much what happens is on high resolution devices, these pixels aren't

14950.64 -> going to appear the same as on low resolution devices, because obviously, this is taking

14954.22 -> up only 400 pixels of height. And if you have an ultra high display a very high definition

14957.89 -> TV 400 pixels is only going to be about half of what it is here. So what actually happens

14962.59 -> in this is on these high DPI displays, each pixel in this unit is actually taking up multiple

14968.199 -> pixels relative to the resolution of the display. So for example, on a TV, every pixel, according

14977 -> to this height would actually take up something like four pixels. So this is to give it that

14981.95 -> absolute illusion. Now although it is in theory, or at its core relative, when you're when

14989.029 -> you're actually using it, it is an absolute value. So that's just one thing you need to

14994.21 -> keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like

14998.739 -> that. But we're not focusing on that. For now, we're just focusing on how we can use

15005.08 -> different values for different things. So let's go ahead and cover some of the different

15011.52 -> units that we can use for absolute unit. So the easiest way to do this is through changing

15018.91 -> the size of the text. Now again, we're going to cover this much later in this section.

15024.239 -> So don't worry about that too much. So the first one we can use is centimeters. So I

15030.609 -> can see the font size is two centimeters. Now, if I refresh the page, you can see that

15034.199 -> it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you

15040.53 -> would get two centimeters. There's also many more such as millimeters and inches and pretty

15044.01 -> much everything in between. So you can see that's also a lot smaller. So we have our

15048.43 -> standard pixels here, but there's actually a few more that we can use. Now they're not

15052.939 -> very they're not used that commonly so I'm not really going to go over them that much.

15059.62 -> But there Is he there, there are some other units that you can use instead of pixels that

15065.76 -> kind of follow that same formula. So there is something called PT, which are points,

15068.359 -> and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can

15072.489 -> see that that actually gets a little bit taller. Go ahead and change that back to pixels, you

15077.92 -> can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar

15085.38 -> to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger

15097.06 -> it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it

15103.35 -> is. So there we go. That's just a little bit of some of the other absolute values. Now

15113.45 -> let's cover relative values. So the first one, the first one that we actually already

15118.93 -> covered was percentage. So we already looked at, you know, our percent symbol over here,

15124.4 -> which pretty much takes up, again, a certain size or whatever value of its parent element.

15130.17 -> But there's actually many more that I want to cover. The first one I'm going to look

15136.779 -> at is E M. So pretty much what if what I do here is it's going to represent the size relative

15143.39 -> to the current standard font size. So let's just pretend that we know that this font size

15148.199 -> is value, let's just call it F, what's going to happen is if we set the body font size

15154.92 -> to two, em, you're going to double everything or double it based on F, which is our font

15159.92 -> size. So if I set to em here, just like that, and go ahead and refresh the page, you can

15169.14 -> see that all of the text is double the standard font size. So again, this is completely relative

15175.58 -> to the standard font size. So I'm actually going to go ahead and erase this here and

15181.31 -> start using style tags. Instead, I feel like it's just going to be a lot easier to you

15186.24 -> know, move around and easy, easily move that around. So now we've covered percent an EM

15190.529 -> so those are the two main types of relative units. But there's actually two more that

15196.08 -> I want to cover, which is view width and view height. So in web design, and in development,

15201.12 -> in general, there's this thing called the viewport, which is pretty much the dimensions

15206.55 -> of whatever you're viewing it on. So in this case, our viewport would be the bodies width,

15210.619 -> and then the bodies height. So VW and VH, view, view width and view height actually

15214.34 -> allow you to work with

15215.54 -> So in this video, we're going to be talking about some of the different types of units

15222.79 -> in CSS. So so far, we've been working with some basic coloring techniques, we've learned

15231.46 -> about selectors, and then different properties. And then we've learned about some of these

15235.949 -> different values, but we haven't actually learned what all of these different things

15238.47 -> mean this this PX this percentage, and we don't actually know how they work. So what

15240.189 -> I'm going to be doing today is talking about some of the different types of units and how

15244.53 -> you can identify which one to use. So first thing I want to talk about is the difference

15251.439 -> between the two types of units which are absolute units, and rarely have units. So firstly,

15255.279 -> we have to talk about some of the units we've already been using, for example, pixels. Now

15260.5 -> pixels is a little bit special, I'll explain you. I'll explain it to you in just a second.

15263.71 -> But pretty much the commonly used absolute units are things like centimeters, millimeters

15266.34 -> and inches, which are absolute, they it's not dependent on anything else. If you set

15267.38 -> it as one inch, it's going to be one inch long, no matter if you're doing it on a phone,

15271.26 -> or an ultra wide TV. So that's what absolute units are, they aren't affected by anything

15276.52 -> around them. The second group are relative units. And these are a little bit different.

15280.21 -> Relative units are usually dependent on something. So for example, our percentage unit here is

15284.3 -> dependent on the parent elements while unit. So for example, if this service image here

15288.38 -> or here, has a width of 70%, that means that the parent element of this service image or

15293.89 -> this service image right here, which in this case is our body, take 70% of its width of

15301.72 -> its total width. So the whole way through of the body is 100%. And 70% is going to be

15310.97 -> somewhere around here, because that's what we set it as now notice that when I start

15317.22 -> resizing this, you can see that it still takes up 70%. And obviously, right now it doesn't

15322.58 -> work because I haven't refreshed the page. But you can see, no matter how small I make

15328.37 -> it, it's only going to take up 70% of the total body width. So this is really good for

15339.62 -> something like a responsive design. Because what happens is when you're using absolute

15343.949 -> units in a responsive design, let's say you set this width as 200 pixels on a phone, it's

15349.949 -> going to appear very large, whereas on an ultra wide TV, it's going to appear too small.

15354.41 -> So using something like percentages would be very useful, because then you could resize

15358.39 -> your window here, however you like it and still have that look that you want. So that's

15363.43 -> pretty much it for percentages. But there's also a lot of different relative values that

15366.979 -> we can use. And I'm going to go through all of these in just a second. But the first thing

15374.3 -> I want to talk about is this special unit, which is pixels. Now pixels is a little bit

15378.409 -> different. Now, although it is considered an absolute unit, it is actually relatively

15382.1 -> scale based on what device you're on. So if you don't already know your screen right now

15386.92 -> that you're watching this video on is made up of a bunch of little tiny pixels. Now there's

15392.04 -> this concept in computing, it's called DPI, it's pretty much used to calculate the resolution

15394.319 -> of your screen. And depending on the number of pixels you have, the resolution is going

15397.43 -> to change. So on low DPI, tablets or things like that, anything that has a very low resolution.

15402.6 -> So for example, if you're on YouTube, and you've changed your resolution to four ADP,

15404.89 -> what's going to happen is then the video is going to sort of adjust how many pixels are

15410.18 -> in that video. Now, I'm not going to get too deep into how pixels are changed and things

15414.58 -> like that. But pretty much what happens is on high resolution devices, these pixels aren't

15417.43 -> going to appear the same as on low resolution devices, because obviously, this is taking

15419.069 -> up only 400 pixels of height. And if you have an ultra high display a very high definition

15422.479 -> TV 400 pixels is only going to be about half of what it is here. So what actually happens

15426.4 -> in this is on these high DPI displays, each pixel in this unit is actually taking up multiple

15431.92 -> pixels relative to the resolution of the display. So for example, on a TV, every pixel, according

15437.119 -> to this height would actually take up something like four pixels. So this is to give it that

15443.29 -> absolute illusion. Now although it is in theory, or at its core relative, when you're when

15447.609 -> you're actually using it, it is an absolute value. So that's just one thing you need to

15452.79 -> keep in mind. Now don't worry too much about pixels, you know, redefinitions, things like

15457.92 -> that. But we're not focusing on that. For now, we're just focusing on how we can use

15463.729 -> different values for different things. So let's go ahead and cover some of the different

15468.029 -> units that we can use for absolute unit. So the easiest way to do this is through changing

15476.989 -> the size of the text. Now again, we're going to cover this much later in this section.

15480.08 -> So don't worry about that too much. So the first one we can use is centimeters. So I

15482.16 -> can see the font size is two centimeters. Now, if I refresh the page, you can see that

15484.05 -> it is a lot bigger. Remember, if you actually took a ruler and measured the font size, you

15487.89 -> would get two centimeters. There's also many more such as millimeters and inches and pretty

15490.79 -> much everything in between. So you can see that's also a lot smaller. So we have our

15494.47 -> standard pixels here, but there's actually a few more that we can use. Now they're not

15499.56 -> very they're not used that commonly so I'm not really going to go over them that much.

15504.34 -> But there Is he there, there are some other units that you can use instead of pixels that

15513.17 -> kind of follow that same formula. So there is something called PT, which are points,

15518.14 -> and it's a little bit bigger than a pixel. So if I go ahead and refresh that, you can

15520.95 -> see that that actually gets a little bit taller. Go ahead and change that back to pixels, you

15523.779 -> can see that does get quite a little bit taller. And there's also PC. Again, it's quite similar

15528.439 -> to px and PT. But in this case, a PC is a lot bigger. So you can see how much bigger

15534.6 -> it actually is. Actually, one PC is 12 points. So that's just shows you how much bigger it

15538.39 -> is. So there we go. That's just a little bit of some of the other absolute values. Now

15542.39 -> let's cover relative values. So the first one, the first one that we actually already

15547.13 -> covered was percentage. So we already looked at, you know, our percent symbol over here,

15550.6 -> which pretty much takes up, again, a certain size or whatever value of its parent element.

15555.93 -> But there's actually many more that I want to cover. The first one I'm going to look

15560.64 -> at is E M. So pretty much what if what I do here is it's going to represent the size relative

15567.85 -> to the current standard font size. So let's just pretend that we know that this font size

15572.5 -> is value, let's just call it F, what's going to happen is if we set the body font size

15577.97 -> to two, em, you're going to double everything or double it based on F, which is our font

15582.63 -> size. So if I set to em here, just like that, and go ahead and refresh the page, you can

15588.29 -> see that all of the text is double the standard font size. So again, this is completely relative

15596.26 -> to the standard font size. So I'm actually going to go ahead and erase this here and

15598.68 -> start using style tags. Instead, I feel like it's just going to be a lot easier to you

15610.659 -> know, move around and easy, easily move that around. So now we've covered percent an EM

15615.04 -> so those are the two main types of relative units. But there's actually two more that

15619.66 -> I want to cover, which is view width and view height. So in web design, and in development,

15626.14 -> in general, there's this thing called the viewport, which is pretty much the dimensions

15630.02 -> of whatever you're viewing it on. So in this case, our viewport would be the bodies width,

15635.22 -> and then the bodies height. So VW and VH, view, view width and view height actually

15639.5 -> allow you to work with

15640.88 -> work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total

15647.529 -> body width or body height. So remember, this isn't based on the parent element, this is

15652.63 -> based on the total viewport, this could be the HTML document the body tag, it depends

15657.02 -> on what you're viewing it on. So for example, if I go ahead and change the width here to

15663.43 -> 70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously,

15667.6 -> if I go ahead and refresh the page, you can see it gets just a little bit bigger because

15672.52 -> there's actually a viewport itself is bigger than the body tag, which is the parent element.

15676.52 -> Now we'll talk about that later in the course, because it's quite advanced. But what you

15684.64 -> can see here is that right here, it doesn't actually affect it because the body is almost

15693.279 -> completely equivalent to the viewport. But for example, if we wanted to set the font

15699.47 -> size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would

15707.18 -> actually look completely different from 70 v w, which is 70% of the total viewport. So

15712.81 -> that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't

15718.04 -> have to be completely set in stone. So if I actually wanted to say VH. So 400 times

15723.369 -> 1% of the view height, what would happen here is that this image would become four times

15731.869 -> the total height of the viewport. So that's just also one thing to keep in mind. So I'm

15740.27 -> going to go ahead and change this back to pixels. We'll just keep that with the same

15745.859 -> because it doesn't really make that much of an impact. Okay, so there we go. Those are

15751.79 -> some of the different units in CSS, I've actually attached a little reference sheet that you

15756.08 -> can use, you can refer to, to this to this lecture, you can go ahead click on it. And

15760.149 -> if you want to revise any of these you can, but just a fair warning, you're not really

15764.87 -> going to be using a lot of these units, the main ones you're going to use, you're most

15772.529 -> likely pixels and percent. But for some cases, you're going to want to use some other units.

15777.439 -> So although absolute units are still useful in some cases, so for example, if you want

15781.46 -> a very specific dimensions or viewport on your screen, so for example, if you only want

15786.93 -> users to access something on the phone, then or a very specific phone, then you can go

15793.279 -> ahead and use pixels because it's going to look the same no matter what phone people

15798.01 -> use, because it's all going to be the same. The only problem is is when people start using

15803.939 -> different devices using absolute values are going to look very different based on On what

15807.87 -> device you're using. And that's why you should kind of stick to using these, these relative

15813.569 -> units instead of using things like pixels, centimeters and millimeters. So things like

15816.77 -> em percent view width and view height would be very, very useful, because then you can

15820.08 -> scale it based on whatever device you want. So for example, it's going to look the same,

15825.39 -> or at least this width, whether you're using it on a phone, or a desktop computer, because

15827.81 -> again, it takes up 70% of the width no matter what it is. So that's just some of the basics

15832.17 -> about some of these units. Now, like I said, you don't need to know these by heart, you

15837.93 -> can just go ahead and keep them at the back of your head. And once we start using them

15846.1 -> and start using them in our, you know, font layout, things like that, we'll actually start

15850.869 -> using these units a lot more, and they will make a lot more sense. So this is just a quick

15855.62 -> introduction to these units and why we should use them. And you're not supposed to be going

15859.76 -> ahead and you know, completely mastering every single one by now. Alright, let's move on.

15864.029 -> work with this viewport in a very easy way. So one v w or v h is equal to 1% of the total

15869.58 -> body width or body height. So remember, this isn't based on the parent element, this is

15873.22 -> based on the total viewport, this could be the HTML document the body tag, it depends

15879.45 -> on what you're viewing it on. So for example, if I go ahead and change the width here to

15883.619 -> 70 v w, this is pretty much equivalent to 70 times 1% of the total viewport. And obviously,

15889.37 -> if I go ahead and refresh the page, you can see it gets just a little bit bigger because

15894.21 -> there's actually a viewport itself is bigger than the body tag, which is the parent element.

15902.159 -> Now we'll talk about that later in the course, because it's quite advanced. But what you

15913.78 -> can see here is that right here, it doesn't actually affect it because the body is almost

15918.26 -> completely equivalent to the viewport. But for example, if we wanted to set the font

15924.68 -> size of one of these TDs to 70% would be which we, which would be 70% of this T row, it would

15931.53 -> actually look completely different from 70 v w, which is 70% of the total viewport. So

15936.38 -> that's just one thing I want to keep in mind, you can also set more than 100%, it doesn't

15939.08 -> have to be completely set in stone. So if I actually wanted to say VH. So 400 times

15944.05 -> 1% of the view height, what would happen here is that this image would become four times

15950.939 -> the total height of the viewport. So that's just also one thing to keep in mind. So I'm

15957.39 -> going to go ahead and change this back to pixels. We'll just keep that with the same

15959.51 -> because it doesn't really make that much of an impact. Okay, so there we go. Those are

15964.76 -> some of the different units in CSS, I've actually attached a little reference sheet that you

15969.699 -> can use, you can refer to, to this to this lecture, you can go ahead click on it. And

15974.21 -> if you want to revise any of these you can, but just a fair warning, you're not really

15980.859 -> going to be using a lot of these units, the main ones you're going to use, you're most

15986.199 -> likely pixels and percent. But for some cases, you're going to want to use some other units.

15991.909 -> So although absolute units are still useful in some cases, so for example, if you want

15998.18 -> a very specific dimensions or viewport on your screen, so for example, if you only want

16002.89 -> users to access something on the phone, then or a very specific phone, then you can go

16007.979 -> ahead and use pixels because it's going to look the same no matter what phone people

16017.18 -> use, because it's all going to be the same. The only problem is is when people start using

16025.59 -> different devices using absolute values are going to look very different based on On what

16030.3 -> device you're using. And that's why you should kind of stick to using these, these relative

16035.659 -> units instead of using things like pixels, centimeters and millimeters. So things like

16041.729 -> em percent view width and view height would be very, very useful, because then you can

16047.56 -> scale it based on whatever device you want. So for example, it's going to look the same,

16052.64 -> or at least this width, whether you're using it on a phone, or a desktop computer, because

16059.13 -> again, it takes up 70% of the width no matter what it is. So that's just some of the basics

16066.979 -> about some of these units. Now, like I said, you don't need to know these by heart, you

16071.72 -> can just go ahead and keep them at the back of your head. And once we start using them

16077.71 -> and start using them in our, you know, font layout, things like that, we'll actually start

16083.659 -> using these units a lot more, and they will make a lot more sense. So this is just a quick

16089.2 -> introduction to these units and why we should use them. And you're not supposed to be going

16093.369 -> ahead and you know, completely mastering every single one by now. Alright, let's move on.

16097.05 -> So the next few videos are going to be focused on font and text manipulation. So we're going

16110.25 -> to be working with actually changing how this text looks. First thing I want to talk about

16114.64 -> is there's actually two parts to this section, text manipulation and font manipulation. And

16118.109 -> although they sound like the same thing, they're actually very different. So the first part

16122.819 -> in this video, we're going to be covering text manipulation. Now, there's not that much

16125.94 -> to look at. But pretty much the difference between the two is that text manipulation

16131.75 -> is looking at things that you can change no matter the font. So for example, something

16136.439 -> like sizing would not apply, because the size is going to be based obviously on the font

16141.42 -> itself. So basically, things like underlining or capitalization are going to be completely

16144.91 -> regardless of the font, you can change them no matter what they do. But things like bolding

16150.439 -> and things like size, bolding, things like that, they are completely dependent on the

16155.189 -> font, because again, the font decides how it how the font itself is going to look. So

16160.1 -> it decides the size, the bolding, and just the overall style. So the first part in this

16167.409 -> video, we're going to be covering text manipulation. And in the next few videos, we're going to

16174.77 -> be looking at actual font manipulation. So things like external fonts, which is probably

16177.939 -> the most exciting part of this course, and things like weight and bolding. Alright, let's

16181.99 -> get started. So the first two things I want to cover are text decoration and text transform.

16187.409 -> So these are properties that are going to be relating to the style of the text. Now

16195.42 -> I know I just said that fonts. And mostly styling is dependent on the font. But in this

16201.87 -> case, these these properties don't actually rely on the font at all. So let's get started.

16211.199 -> So the first thing I'm going to talk about is text decoration. So although it sounds

16214.59 -> like you can do a bunch of cool things with this, the only real thing that you can do

16221.069 -> is change the lining of the text. So we're going to go ahead and work with this anchor

16228.28 -> tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually,

16232.739 -> we can just go ahead and select it. So I'm going to go dot link, like that. And now what

16238.029 -> I can actually do is change the lining of this right here. So by default, anchor tags

16243.04 -> have a text decoration of underline, there's actually three more properties that we can

16246.949 -> use. So that the property to use it, it's called text dash decoration, it's pretty obvious.

16253.99 -> Now the first one I'm going to look at is none. So this completely removes the line

16258.84 -> from our links, they're completely gone, you don't have them anymore. The next one, which

16267.06 -> is the one by default is underlined, like that. So that's our normal link, then you

16271.03 -> have line through which is line dash through. And it's pretty obvious what that does just

16275.659 -> put the line straight through. And then of course, there's the overlying which is the

16280.01 -> line on the top. So there we go. Now we have a line on the top. Now, although you won't

16285.77 -> see the the two that we just showed line through and overlap very commonly, it is very common

16290.76 -> to see underline and text decoration none applied. Because sometimes I'm sure you've

16293.71 -> seen this in websites all over the place, you can hover over links, and they may be

16297.319 -> changed color. Again, we'll be learning how to do that in this course. But you know, they

16300.949 -> might change color and do all sorts of things, but you usually don't see them with an underline.

16306.359 -> So that's where this property comes into play. So I'm just going to change this back to underline,

16310.279 -> just to make things a little interesting. Next thing I'm going to do is go ahead and

16313.89 -> cover the next property, which in this case is text transform. So you can see that we

16320.58 -> have a bunch of text here. And let's say maybe we're working as a freelancer and our client

16324.479 -> wants us to capitalize all of our text. How are we going to do that? Now obviously, we're

16330.13 -> not going to go through and capitalize every single individual word that's going to basically

16332.17 -> be suicide. Although it is possible, it could take a lot of time. So the easiest way to

16336.119 -> do it is using the text transform property. So I'm just going to go ahead and do this

16342.07 -> on the whole body. For now, the property to this is text dash transform, pretty easy to

16348.38 -> memorize, or learn these because they don't really require any weird memorization tactics.

16353.11 -> So now what you can do is go ahead and add our value. So there are three different values

16358.79 -> that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize

16359.79 -> everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every

16362.359 -> single word is capitalized without us having having to actually change the text. You can

16366.96 -> also go ahead and use the other two, which are lowercase and uppercase.

16371.399 -> So the next few videos are going to be focused on font and text manipulation. So we're going

16375.88 -> to be working with actually changing how this text looks. First thing I want to talk about

16383.029 -> is there's actually two parts to this section, text manipulation and font manipulation. And

16388.951 -> although they sound like the same thing, they're actually very different. So the first part

16394.092 -> in this video, we're going to be covering text manipulation. Now, there's not that much

16397.271 -> to look at. But pretty much the difference between the two is that text manipulation

16399.771 -> is looking at things that you can change no matter the font. So for example, something

16406.881 -> like sizing would not apply, because the size is going to be based obviously on the font

16417.191 -> itself. So basically, things like underlining or capitalization are going to be completely

16420.34 -> regardless of the font, you can change them no matter what they do. But things like bolding

16423.201 -> and things like size, bolding, things like that, they are completely dependent on the

16425.41 -> font, because again, the font decides how it how the font itself is going to look. So

16429 -> it decides the size, the bolding, and just the overall style. So the first part in this

16433.551 -> video, we're going to be covering text manipulation. And in the next few videos, we're going to

16437.871 -> be looking at actual font manipulation. So things like external fonts, which is probably

16440.15 -> the most exciting part of this course, and things like weight and bolding. Alright, let's

16441.15 -> get started. So the first two things I want to cover are text decoration and text transform.

16446.141 -> So these are properties that are going to be relating to the style of the text. Now

16449.08 -> I know I just said that fonts. And mostly styling is dependent on the font. But in this

16454.99 -> case, these these properties don't actually rely on the font at all. So let's get started.

16461.82 -> So the first thing I'm going to talk about is text decoration. So although it sounds

16464.422 -> like you can do a bunch of cool things with this, the only real thing that you can do

16470.461 -> is change the lining of the text. So we're going to go ahead and work with this anchor

16477.941 -> tag here. So I'm going to go ahead and add a cloud, there's already a class there, actually,

16487.691 -> we can just go ahead and select it. So I'm going to go dot link, like that. And now what

16500.9 -> I can actually do is change the lining of this right here. So by default, anchor tags

16508.59 -> have a text decoration of underline, there's actually three more properties that we can

16514.281 -> use. So that the property to use it, it's called text dash decoration, it's pretty obvious.

16516.141 -> Now the first one I'm going to look at is none. So this completely removes the line

16520.141 -> from our links, they're completely gone, you don't have them anymore. The next one, which

16525.91 -> is the one by default is underlined, like that. So that's our normal link, then you

16531.852 -> have line through which is line dash through. And it's pretty obvious what that does just

16537.25 -> put the line straight through. And then of course, there's the overlying which is the

16541.262 -> line on the top. So there we go. Now we have a line on the top. Now, although you won't

16550.23 -> see the the two that we just showed line through and overlap very commonly, it is very common

16555.66 -> to see underline and text decoration none applied. Because sometimes I'm sure you've

16560.082 -> seen this in websites all over the place, you can hover over links, and they may be

16565.311 -> changed color. Again, we'll be learning how to do that in this course. But you know, they

16570.891 -> might change color and do all sorts of things, but you usually don't see them with an underline.

16576.811 -> So that's where this property comes into play. So I'm just going to change this back to underline,

16581.311 -> just to make things a little interesting. Next thing I'm going to do is go ahead and

16587.5 -> cover the next property, which in this case is text transform. So you can see that we

16594.26 -> have a bunch of text here. And let's say maybe we're working as a freelancer and our client

16596.57 -> wants us to capitalize all of our text. How are we going to do that? Now obviously, we're

16599.48 -> not going to go through and capitalize every single individual word that's going to basically

16603.551 -> be suicide. Although it is possible, it could take a lot of time. So the easiest way to

16608.381 -> do it is using the text transform property. So I'm just going to go ahead and do this

16616.951 -> on the whole body. For now, the property to this is text dash transform, pretty easy to

16624.131 -> memorize, or learn these because they don't really require any weird memorization tactics.

16628.871 -> So now what you can do is go ahead and add our value. So there are three different values

16636.01 -> that you can use for this uppercase, lowercase and capitalize. So because we want to capitalize

16640.891 -> everything, we can go ahead and type capitalize. Now if we refresh the page, you can see every

16645.09 -> single word is capitalized without us having having to actually change the text. You can

16648.602 -> also go ahead and use the other two, which are lowercase and uppercase.

16651.811 -> And that will obviously put everything in uppercase for you. But now you're starting

16655.641 -> to see a little bit about why these are text manipulation and not font manipulation. Again,

16661.15 -> it doesn't matter what font you're using, whether you're using some weird symbol font,

16666.18 -> or Times New Roman, you can always use these to capitalize it, no matter what the font

16670.9 -> is. On top of that, you can also move around these lines, it's not dependent on the font

16675.881 -> at all. So that's just a little bit about our text manipulation properties. So the next

16681.852 -> feature I want to cover is text align. So this is a little bit different from the other

16687.66 -> two that we've covered. Because it's not really focused on the styling or decoration of our

16692.91 -> text. Instead, it's going to be focused on the justification or alignment of it. So if

16697.441 -> you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like

16702.451 -> that, you'll know that you can justify your text and align it to your site. So there are

16707.822 -> four main ones that are included in CSS left, right, center and justify. So I'm going to

16711.1 -> breeze through the quick the first three ones, because it's quite easy to use. But then the

16719.061 -> last one I'm going to talk about a little bit in more detail. So in order to achieve

16726.311 -> this, you can go ahead and add text align property. And here, I'm just going to go center

16729.57 -> as an example. And you can see that now everything is aligned. So the list items are a little

16735.74 -> bit weird, they don't actually move the decoration to the center, when you align it to the center,

16747.111 -> but other than that all of the text is now aligned to the center. So now let's talk about

16753.9 -> justify. Now we're not going to go through left and right, because we already know that

16759.461 -> but what justify actually does, I'm just gonna show you here is pretty much it takes all

16765.561 -> of the text, and it kind of matches it. So it's all fit in the same way, if you if it

16772.32 -> makes sense. So although it might not fit everything, the same length, what happens

16775.25 -> is all of this text is now stretched out as far as possible. So although you might not

16776.911 -> be able to see a direct difference, let's just look at this paragraph here, we're going

16779.692 -> to just end off this property without changing it, you can see that without the justify alignment,

16783.862 -> all of these are different. So what actually what the justify actually does is it sets

16791.542 -> all of the lines to the same length. So I'm going to go ahead and add that justify back.

16796.81 -> So you can see this used a lot in research papers, and, you know, academic papers, essays,

16801.942 -> things like that. This justification is used a lot. And although it's not very, it's not

16807.13 -> really used very commonly, it's still a very good feature if you have big bodies of text,

16813.17 -> if you're trying to you know, make everything look very streamlined. Alright, there we go.

16815.67 -> So those are the four or sorry, three different types of text manipulation properties that

16821.07 -> you can use, and along with their respective value. So I encourage you to go ahead and

16824.74 -> try this out on your own, you can do a lot of things with these three values alone, you

16829.83 -> can really change how the page looks. Alright, let's move on.

16835.75 -> And that will obviously put everything in uppercase for you. But now you're starting

16839.55 -> to see a little bit about why these are text manipulation and not font manipulation. Again,

16843.93 -> it doesn't matter what font you're using, whether you're using some weird symbol font,

16847.702 -> or Times New Roman, you can always use these to capitalize it, no matter what the font

16852.73 -> is. On top of that, you can also move around these lines, it's not dependent on the font

16860.98 -> at all. So that's just a little bit about our text manipulation properties. So the next

16869.612 -> feature I want to cover is text align. So this is a little bit different from the other

16875.47 -> two that we've covered. Because it's not really focused on the styling or decoration of our

16880.58 -> text. Instead, it's going to be focused on the justification or alignment of it. So if

16885.352 -> you've ever used any text editor, for example, Microsoft Word, or Google Docs, anything like

16891.162 -> that, you'll know that you can justify your text and align it to your site. So there are

16898.952 -> four main ones that are included in CSS left, right, center and justify. So I'm going to

16903.56 -> breeze through the quick the first three ones, because it's quite easy to use. But then the

16910.102 -> last one I'm going to talk about a little bit in more detail. So in order to achieve

16917.01 -> this, you can go ahead and add text align property. And here, I'm just going to go center

16919.91 -> as an example. And you can see that now everything is aligned. So the list items are a little

16923.75 -> bit weird, they don't actually move the decoration to the center, when you align it to the center,

16928.622 -> but other than that all of the text is now aligned to the center. So now let's talk about

16935.372 -> justify. Now we're not going to go through left and right, because we already know that

16939.58 -> but what justify actually does, I'm just gonna show you here is pretty much it takes all

16943.63 -> of the text, and it kind of matches it. So it's all fit in the same way, if you if it

16948.252 -> makes sense. So although it might not fit everything, the same length, what happens

16951.112 -> is all of this text is now stretched out as far as possible. So although you might not

16955.92 -> be able to see a direct difference, let's just look at this paragraph here, we're going

16961.092 -> to just end off this property without changing it, you can see that without the justify alignment,

16967.08 -> all of these are different. So what actually what the justify actually does is it sets

16970.922 -> all of the lines to the same length. So I'm going to go ahead and add that justify back.

16975.82 -> So you can see this used a lot in research papers, and, you know, academic papers, essays,

16980.272 -> things like that. This justification is used a lot. And although it's not very, it's not

16984.81 -> really used very commonly, it's still a very good feature if you have big bodies of text,

16990.24 -> if you're trying to you know, make everything look very streamlined. Alright, there we go.

16996.852 -> So those are the four or sorry, three different types of text manipulation properties that

17000.76 -> you can use, and along with their respective value. So I encourage you to go ahead and

17006.192 -> try this out on your own, you can do a lot of things with these three values alone, you

17015.22 -> can really change how the page looks. Alright, let's move on.

17021.112 -> So in this video, we're going to be talking about the other half of overall text manipulation.

17024.542 -> And in this case, we're going to be looking at different font properties. So in this video,

17029.67 -> we're going to be looking at three font size, font weight and font style. So first thing

17034.46 -> I want to look at is font size. So right now we have our pretty standard text here, right.

17040.17 -> So I'm just actually going to go ahead and erase our text transform from our previous

17045.362 -> video. So now we have our text here. And what I want to do is change the size of this. The

17049.92 -> only problem is I want to use a responsive design. So what I'm going to do is go ahead

17052.772 -> and first use our font size property. And then I'm going to go ahead and say let's just

17058.07 -> say 1.25 em. So what happens here is make this 25% more than the standard font size.

17064.512 -> Now you can see it's a little bit bigger, but it's not as big as doing something like

17070.06 -> two n. So there we go. Now that we've done that, we can also go ahead and actually use

17075.57 -> pixel values, if we wanted to 40 pixels for example, the only problem is this is going

17079.06 -> to set everything consistently. So you can see all of the sizes are the same, it doesn't

17087.97 -> matter if they're a header, or while it does actually matter. But because in the CSS defined

17096.032 -> code, all of these headers actually have to em but if we actually removed all of these,

17102.332 -> they would be the same. So using something like two e n, would be great, because what

17107.122 -> actually happens is now everything stays consistent. And it's also a relative unit. So that's always

17112.32 -> good, because it stays responsive. So there we go. That's pretty much it for font size,

17117.66 -> I'm going to go ahead and actually change this to one point 15 am, I think that's good.

17125.942 -> So there we go. That's the first one. Now let's go ahead and talk about font weight.

17132.772 -> So this is a little bit more complicated. So pretty much what font weight decides is

17136.91 -> the bolding of a text or a font. So the values for this can range from zero, which is nothing

17141.47 -> all the way to? Well, pretty much infinity. The only problem is, most fonts only support

17144.72 -> up to 800, or 900. Because, again, for each value, there is a different bolding stage.

17150.122 -> So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher.

17156.872 -> But in theory, you can make these values as big as you want. The only problem is, it's

17163.42 -> not really going to show any change if you make them very big. So there we go. That's

17168.64 -> pretty much it for font weight, let's go ahead and start adding it to our website. So let's

17173.39 -> say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font

17181.07 -> dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start

17187.292 -> with zero and see what happens, you can see that nothing actually happens. But pretty

17192.89 -> much like I said before, most fonts only support certain values. So for example, 100 would

17198.26 -> be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font

17204.872 -> supports. Now usually, the convention for this is you're supposed to go up in hundreds

17211.782 -> from 100. That's kind of like the minimum supported font size. So if I go ahead and

17219.38 -> set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which

17225.092 -> is usually the highest that you should go realistically, this is kind of the standard

17232.542 -> for each one. So there you go, you can set it to something like 600, which isn't very

17241.522 -> commonly seen, like I said, fonts only support certain bolded ness, if that makes sense.

17246.84 -> But you can go ahead and play around with this. And like I said, depending on the font,

17251.49 -> it's going to change what the text actually looks like. So there we go. That's pretty

17256.21 -> much it for font weight, I'm going to go ahead and actually just set this to 400, which is

17262.292 -> the standard font right there. So 400 is the normal, it's like normal bolding, no bolding

17264.862 -> and don't make it very thin. So that's kind of what it's the normal range. So there we

17269.33 -> go. That's it for font weight. Now let's go ahead and look at font style. So just like

17274.292 -> font sizes for size and font weight is for bolding font style is for italic sizing. So

17280.07 -> I'm going to go ahead and actually italicize a small piece of text here. So let's just

17285.752 -> go ahead into this. And I'm going to take this first part, and actually just cut it

17291.452 -> out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's

17298.21 -> an inline day. It's an inline container tag, which allows you to contain a certain pieces

17302.5 -> of text without you know disrupting the flow or moving them on to their own line. So I'm

17308.9 -> going to give it a class, I'm just going to say italics, I guess that would work. So then

17314.4 -> I'm going to go ahead and use the class selector italics. Open this up. Now we're going to

17320.89 -> go ahead and start working on adding our italicizing. So what you can do for this is called font

17325.58 -> style. And although most of the selectors these days are quite easy to remember, italics

17330.452 -> and font style don't usually go hand in hand. So it might be a little hard to remember this

17338.23 -> one. So there's three different values they can use for this normal, which is pretty much

17344.05 -> the same as setting the font weight is 400 doesn't do anything, or it actually will change

17348.47 -> it back to its normal state. Then you have italic, which is to italicize it, and then

17355.082 -> you have oblique, which is a little bit more italic size. So let's go ahead and just add

17362.41 -> the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can

17367.612 -> see that where it is, there we go. It's right there

17372.862 -> So in this video, we're going to be talking about the other half of overall text manipulation.

17380.81 -> And in this case, we're going to be looking at different font properties. So in this video,

17386.55 -> we're going to be looking at three font size, font weight and font style. So first thing

17394.23 -> I want to look at is font size. So right now we have our pretty standard text here, right.

17402.59 -> So I'm just actually going to go ahead and erase our text transform from our previous

17406.73 -> video. So now we have our text here. And what I want to do is change the size of this. The

17411.91 -> only problem is I want to use a responsive design. So what I'm going to do is go ahead

17419.702 -> and first use our font size property. And then I'm going to go ahead and say let's just

17426.372 -> say 1.25 em. So what happens here is make this 25% more than the standard font size.

17430.82 -> Now you can see it's a little bit bigger, but it's not as big as doing something like

17438.08 -> two n. So there we go. Now that we've done that, we can also go ahead and actually use

17442.55 -> pixel values, if we wanted to 40 pixels for example, the only problem is this is going

17450.14 -> to set everything consistently. So you can see all of the sizes are the same, it doesn't

17455.362 -> matter if they're a header, or while it does actually matter. But because in the CSS defined

17456.98 -> code, all of these headers actually have to em but if we actually removed all of these,

17460.55 -> they would be the same. So using something like two e n, would be great, because what

17467.72 -> actually happens is now everything stays consistent. And it's also a relative unit. So that's always

17473.08 -> good, because it stays responsive. So there we go. That's pretty much it for font size,

17479.41 -> I'm going to go ahead and actually change this to one point 15 am, I think that's good.

17483.46 -> So there we go. That's the first one. Now let's go ahead and talk about font weight.

17487.272 -> So this is a little bit more complicated. So pretty much what font weight decides is

17491.89 -> the bolding of a text or a font. So the values for this can range from zero, which is nothing

17495.862 -> all the way to? Well, pretty much infinity. The only problem is, most fonts only support

17501.592 -> up to 800, or 900. Because, again, for each value, there is a different bolding stage.

17506.602 -> So most fonts are only going to go up to maybe 100, or 900, some of them can go even higher.

17510.88 -> But in theory, you can make these values as big as you want. The only problem is, it's

17518.51 -> not really going to show any change if you make them very big. So there we go. That's

17521.612 -> pretty much it for font weight, let's go ahead and start adding it to our website. So let's

17526.33 -> say I wanted to make our title a little bit bolded. So I'm going to go ahead and say font

17528.25 -> dash weight. And now I'm going to go ahead and specify a value. Let's go ahead and start

17534.18 -> with zero and see what happens, you can see that nothing actually happens. But pretty

17537.83 -> much like I said before, most fonts only support certain values. So for example, 100 would

17544.202 -> be a very specific kind of bolding, 200 300 400 and all the way up to as much as the font

17547.442 -> supports. Now usually, the convention for this is you're supposed to go up in hundreds

17550.56 -> from 100. That's kind of like the minimum supported font size. So if I go ahead and

17553.872 -> set 100. Here, you can see it's very thin. And if I go ahead and set it as 800, which

17556.952 -> is usually the highest that you should go realistically, this is kind of the standard

17558.17 -> for each one. So there you go, you can set it to something like 600, which isn't very

17559.17 -> commonly seen, like I said, fonts only support certain bolded ness, if that makes sense.

17560.362 -> But you can go ahead and play around with this. And like I said, depending on the font,

17565.01 -> it's going to change what the text actually looks like. So there we go. That's pretty

17572.262 -> much it for font weight, I'm going to go ahead and actually just set this to 400, which is

17578.96 -> the standard font right there. So 400 is the normal, it's like normal bolding, no bolding

17584.5 -> and don't make it very thin. So that's kind of what it's the normal range. So there we

17587.64 -> go. That's it for font weight. Now let's go ahead and look at font style. So just like

17591.66 -> font sizes for size and font weight is for bolding font style is for italic sizing. So

17598.162 -> I'm going to go ahead and actually italicize a small piece of text here. So let's just

17600.58 -> go ahead into this. And I'm going to take this first part, and actually just cut it

17605.81 -> out. I'm going to create a span tag. So a span tag is sort of an if you don't know it's

17613.372 -> an inline day. It's an inline container tag, which allows you to contain a certain pieces

17617 -> of text without you know disrupting the flow or moving them on to their own line. So I'm

17623.93 -> going to give it a class, I'm just going to say italics, I guess that would work. So then

17628.032 -> I'm going to go ahead and use the class selector italics. Open this up. Now we're going to

17633.99 -> go ahead and start working on adding our italicizing. So what you can do for this is called font

17642.96 -> style. And although most of the selectors these days are quite easy to remember, italics

17650.27 -> and font style don't usually go hand in hand. So it might be a little hard to remember this

17655.56 -> one. So there's three different values they can use for this normal, which is pretty much

17663.55 -> the same as setting the font weight is 400 doesn't do anything, or it actually will change

17671.91 -> it back to its normal state. Then you have italic, which is to italicize it, and then

17675.31 -> you have oblique, which is a little bit more italic size. So let's go ahead and just add

17680.24 -> the basic one. I'm gonna go and type metalic here. Now if we refresh the page, you can

17684.21 -> see that where it is, there we go. It's right there

17690.032 -> is a little bit more. The font, the font is a little bit a little bit more italic size.

17700.352 -> So there we go. Now let's go ahead and set it as the other value which is oblique. And

17707.002 -> you might notice a little bit of a difference. So it's not immediately obvious, but it's

17713.38 -> actually just a little bit more italicize. So like I said, it's not very good. noticeable.

17720.22 -> But that's just one thing to keep in mind. So there we go, I'm just going to change this

17727.432 -> back to italic. And that's pretty much it for the three different font manipulation

17732.24 -> techniques. Now, although I didn't cover font family, which is what I'm going to cover in

17737.17 -> the next video, these are the pretty much three basic ones that you can use to work

17748.012 -> with text without changing the font itself. So you can go ahead and work with changing

17752.59 -> the font weight, you know, make it bolded or italicized, you can also change the size.

17758.042 -> So you can really do a lot with this. But font family is a little bit more complicated,

17764.872 -> which is why I want to leave it for its own video. All right, let's move on.

17769.622 -> is a little bit more. The font, the font is a little bit a little bit more italic size.

17776.542 -> So there we go. Now let's go ahead and set it as the other value which is oblique. And

17782.81 -> you might notice a little bit of a difference. So it's not immediately obvious, but it's

17789.24 -> actually just a little bit more italicize. So like I said, it's not very good. noticeable.

17796.342 -> But that's just one thing to keep in mind. So there we go, I'm just going to change this

17805.022 -> back to italic. And that's pretty much it for the three different font manipulation

17810.202 -> techniques. Now, although I didn't cover font family, which is what I'm going to cover in

17814.56 -> the next video, these are the pretty much three basic ones that you can use to work

17820.172 -> with text without changing the font itself. So you can go ahead and work with changing

17824.6 -> the font weight, you know, make it bolded or italicized, you can also change the size.

17828.47 -> So you can really do a lot with this. But font family is a little bit more complicated,

17831.35 -> which is why I want to leave it for its own video. All right, let's move on.

17834.442 -> So in this video, we're going to be talking about the last property related to text and

17838.3 -> fonts. And that is font family. So I'm going to talk a little bit about that. But in the

17845.55 -> next few videos, we're going to actually looking at how to include external fonts, which is

17850.17 -> going to be a very fun activity. And that's going to really change the way that we use

17854.99 -> CSS. But before we do that, we need to learn about font families. So first of all, if you

17861.67 -> don't already know, a font family is basically a collection of fonts that have similar features.

17865.702 -> So there are three main font families that you can use serif, sans serif, and monospace.

17870.532 -> So first of all, let's talk about serif fonts. So serif fonts have these small lines on the

17875.692 -> end of some letters, and pretty much every or a lot of the academic papers. And well

17878.032 -> printed documents use these serif fonts. So right now, for example, our font is a Sarah

17881.372 -> because you can see these tiny lines at the end of some of the letters. So these are used

17887.43 -> very commonly on like I said, papers, essays, you know, journals, anything that's pretty

17892.05 -> much printed out or given to you physically, is usually going to use a serif font. But

17898.67 -> unfortunately, it makes it very hard to read on the computer. So there's actually a another

17908.4 -> group of fonts, that which is the sans serif group. And if you don't know sans serif groups,

17914.31 -> are basically the fonts that don't have those lines, if it's not obvious enough, from name.

17920.09 -> So right now, this is a serif font. A sans serif font, on the other hand, would not have

17925.862 -> those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites

17931.3 -> that you use today, so for example, pretty much all the news websites, if you've used

17936.63 -> WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise,

17940.942 -> Google Facebook, pretty much every website that you see commonly today, the big ones,

17944.3 -> usually always use Sans Serif fonts, because they're much easier to read. So those are

17947.582 -> the two main groups. But like I said, there's also a third one, which is called mono space.

17951.57 -> So mono space is pretty much where all of the characters have the same width. So they

17956.05 -> all take up kind of the same space each character. Whereas something like this, you can see that

17960.352 -> each letter kind of takes a different amount of space, depending on what the letter is.

17965.122 -> So some pretty good examples of a sarafan are Times New Roman, which is probably the

17969.122 -> most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and

17973.752 -> Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then

17981.322 -> a pretty good example of a monospace font is Korea new if you know what that is. Korea

17987.32 -> news, one of the monospace fonts but like I said, there's many more out there that you

17993.952 -> can use. Like I said, it all depends on what family you pick, and what what kind of result

17998.612 -> you're trying to achieve out of your fonts or you're trying to make it readable Are you

18003.72 -> making a paper or a journal, it all depends on what you want out of your while document.

18010.37 -> So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif

18014.99 -> fonts. So in order to specify a font family, or in specific a font, you're gonna have to

18021.282 -> use the font family

18023.032 -> So in this video, we're going to be talking about the last property related to text and

18028.692 -> fonts. And that is font family. So I'm going to talk a little bit about that. But in the

18034.692 -> next few videos, we're going to actually looking at how to include external fonts, which is

18040.452 -> going to be a very fun activity. And that's going to really change the way that we use

18044.81 -> CSS. But before we do that, we need to learn about font families. So first of all, if you

18046.58 -> don't already know, a font family is basically a collection of fonts that have similar features.

18053.21 -> So there are three main font families that you can use serif, sans serif, and monospace.

18055.782 -> So first of all, let's talk about serif fonts. So serif fonts have these small lines on the

18059.72 -> end of some letters, and pretty much every or a lot of the academic papers. And well

18064.442 -> printed documents use these serif fonts. So right now, for example, our font is a Sarah

18068.47 -> because you can see these tiny lines at the end of some of the letters. So these are used

18073.26 -> very commonly on like I said, papers, essays, you know, journals, anything that's pretty

18076.782 -> much printed out or given to you physically, is usually going to use a serif font. But

18081.442 -> unfortunately, it makes it very hard to read on the computer. So there's actually a another

18086.24 -> group of fonts, that which is the sans serif group. And if you don't know sans serif groups,

18091.782 -> are basically the fonts that don't have those lines, if it's not obvious enough, from name.

18097 -> So right now, this is a serif font. A sans serif font, on the other hand, would not have

18102.58 -> those lines, it would look a lot cleaner, and easier to read. Now, a lot of the websites

18107.71 -> that you use today, so for example, pretty much all the news websites, if you've used

18111.772 -> WordPress before that also uses Sarah sorry, sans serif fonts unless you specify otherwise,

18115.67 -> Google Facebook, pretty much every website that you see commonly today, the big ones,

18119.102 -> usually always use Sans Serif fonts, because they're much easier to read. So those are

18125.1 -> the two main groups. But like I said, there's also a third one, which is called mono space.

18133.23 -> So mono space is pretty much where all of the characters have the same width. So they

18139.592 -> all take up kind of the same space each character. Whereas something like this, you can see that

18147.42 -> each letter kind of takes a different amount of space, depending on what the letter is.

18154.442 -> So some pretty good examples of a sarafan are Times New Roman, which is probably the

18160.16 -> most famous, and Georgia. Some pretty good examples of Sans Serif fonts are Arial and

18165.16 -> Calibri. If you've ever used Google Docs before, Calibri is a pretty common font. And then

18173.42 -> a pretty good example of a monospace font is Korea new if you know what that is. Korea

18177.612 -> news, one of the monospace fonts but like I said, there's many more out there that you

18182.1 -> can use. Like I said, it all depends on what family you pick, and what what kind of result

18187.39 -> you're trying to achieve out of your fonts or you're trying to make it readable Are you

18192.081 -> making a paper or a journal, it all depends on what you want out of your while document.

18195.99 -> So in this case, because we're doing or creating a website, we're gonna want to use Sans Serif

18201.112 -> fonts. So in order to specify a font family, or in specific a font, you're gonna have to

18206.042 -> use the font family

18207.8 -> property. So if you go ahead and set font family. Now, this isn't just for setting the

18214.51 -> family. This is also for spreading the specific fonts. And I'll talk about that in just a

18219.782 -> second. So I'm going to go ahead and say sans serif. So this is the font family that I want

18230 -> and watch what happens to our page. Now, you can see that it looks completely different.

18234.282 -> We can actually read everything and it looks a lot cleaner. So that's why I like san serif

18239.55 -> fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts,

18243.65 -> you can see that it just looks a lot easier on the eyes. It's just much easier to read

18249.602 -> and use. But like I said, you can you don't just have to specify the family you can actually

18255.38 -> specify the specific font. And you can actually do this using the comma separator. So first

18256.71 -> of all, I'm basic set times new roman as the main font. And then I'm going to insert a

18259.342 -> comma, and then serif. So I'll explain this right now, first of all, if a font has more

18261.582 -> than one word or it's separated by spaces, you're going to need to use quotation marks

18264.862 -> to contain it. Now, the second thing is this comma here, pretty much what's going to happen

18269.22 -> is, if Times New Roman is available, use that as the font. But if it isn't available, then

18275.442 -> fall back to the standard serif font. So you can actually include more than just Times

18281.31 -> New Roman on here. So you can include three or even for layers sometimes. But for now,

18286.75 -> we're just going to use two and we'll talk about including very specific fonts in the

18290.41 -> next two videos, where we're going to be including these external fonts. So there we go. Pretty

18296.63 -> much what this is saying is set the font family, in this case, the font, as Times New Roman,

18304.432 -> but if Times New Roman isn't available, maybe you know, if you're using an external font,

18310.122 -> maybe this server has crashed, or maybe it's just not available on the browser, then use

18314.98 -> the serif family, there's the general serif font. So if I actually go ahead and remove

18319.362 -> this, you're not going to see much of a difference between Times New Roman and Sarath. Like I

18324.772 -> said, you can see there's not much of a change because it pretty much the same thing. But

18331.112 -> it is there. And if you use a different Sarah font, such as Georgia, there will be some

18335.51 -> sort of a difference between the two, you can see that now, although they aren't exactly,

18340.33 -> they aren't exactly the same, you can see they both contain those lines, things like

18345.372 -> that. So that's why you commonly use more than more than one fonts, just in case maybe,

18351.372 -> if you're using a different browser, maybe someone's using a very old browser, like Internet

18356.9 -> Explorer six or seven, then you can use some of the older fonts. So there you go. That's

18364.55 -> pretty much it. For font families, it's really not that hard to grasp. And once you really

18369.782 -> get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually

18374.91 -> just change this. But like I was saying, it becomes a very useful tool, once you get into

18378.92 -> the later parts of web development, because changing the font can completely change the

18383.38 -> look of your site. So that's just one thing you want to keep in mind. Alright, let's move

18389.452 -> on.

18390.452 -> property. So if you go ahead and set font family. Now, this isn't just for setting the

18396.241 -> family. This is also for spreading the specific fonts. And I'll talk about that in just a

18400.88 -> second. So I'm going to go ahead and say sans serif. So this is the font family that I want

18409.04 -> and watch what happens to our page. Now, you can see that it looks completely different.

18412.35 -> We can actually read everything and it looks a lot cleaner. So that's why I like san serif

18416.922 -> fonts. And that's why most developers much prefer Sans Serif fonts over serif fonts,

18420.282 -> you can see that it just looks a lot easier on the eyes. It's just much easier to read

18425.372 -> and use. But like I said, you can you don't just have to specify the family you can actually

18431.13 -> specify the specific font. And you can actually do this using the comma separator. So first

18435.59 -> of all, I'm basic set times new roman as the main font. And then I'm going to insert a

18443.13 -> comma, and then serif. So I'll explain this right now, first of all, if a font has more

18448.762 -> than one word or it's separated by spaces, you're going to need to use quotation marks

18453.4 -> to contain it. Now, the second thing is this comma here, pretty much what's going to happen

18459.522 -> is, if Times New Roman is available, use that as the font. But if it isn't available, then

18468.292 -> fall back to the standard serif font. So you can actually include more than just Times

18473.442 -> New Roman on here. So you can include three or even for layers sometimes. But for now,

18477.5 -> we're just going to use two and we'll talk about including very specific fonts in the

18480.9 -> next two videos, where we're going to be including these external fonts. So there we go. Pretty

18486.3 -> much what this is saying is set the font family, in this case, the font, as Times New Roman,

18493.14 -> but if Times New Roman isn't available, maybe you know, if you're using an external font,

18498.01 -> maybe this server has crashed, or maybe it's just not available on the browser, then use

18502.25 -> the serif family, there's the general serif font. So if I actually go ahead and remove

18508.22 -> this, you're not going to see much of a difference between Times New Roman and Sarath. Like I

18514.352 -> said, you can see there's not much of a change because it pretty much the same thing. But

18523.83 -> it is there. And if you use a different Sarah font, such as Georgia, there will be some

18528.83 -> sort of a difference between the two, you can see that now, although they aren't exactly,

18533.76 -> they aren't exactly the same, you can see they both contain those lines, things like

18539.042 -> that. So that's why you commonly use more than more than one fonts, just in case maybe,

18545.01 -> if you're using a different browser, maybe someone's using a very old browser, like Internet

18549.01 -> Explorer six or seven, then you can use some of the older fonts. So there you go. That's

18555.31 -> pretty much it. For font families, it's really not that hard to grasp. And once you really

18560.66 -> get into it, it becomes a very, very useful tool. So I'm going to go ahead and actually

18564.942 -> just change this. But like I was saying, it becomes a very useful tool, once you get into

18571.832 -> the later parts of web development, because changing the font can completely change the

18577.47 -> look of your site. So that's just one thing you want to keep in mind. Alright, let's move

18582.91 -> on.

18583.91 -> So in this video, we are going to be looking at actually using some external fonts. We've

18589.112 -> looked at fonts and text, and we know how to manipulate it now. But we don't actually

18594.752 -> know the one crucial piece, which is using external fonts. So your computer will most

18599.322 -> likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word,

18602.76 -> or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts.

18607.452 -> And although Google Docs technically isn't on your computer, we'll just leave it in there

18611.97 -> for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how

18617.98 -> do we actually know which fonts to use? And what if we don't have the font? I mean, you

18623.67 -> know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first

18627.91 -> thing that I would recommend doing is going and getting fonts from the internet. Now,

18631.32 -> if you don't already know this, most people would think that you know, the fonts that

18639.522 -> you have are set for life, you can't download anymore. Well, fonts are actually a huge growing

18645.35 -> industry. And there are so many different fonts out there that you can use, and you

18648.46 -> can even make your own. So there's obviously a lot more fonts to choose them than what's

18651.012 -> provided on your computer. So in this video, I'm going to be teaching you how to go and

18656.64 -> find your own fonts. And then in the next video, we're going to be including it into

18663.542 -> our project. So the first source I'm going to recommend here, which is actually only

18669.1 -> source, but it's called Google fonts, it was put together by Google. And it's a collection

18673.22 -> of 915 font families. So you can see we have a bunch of different fonts here. And when

18677.67 -> I say font families, just think fonts default, because

18680.292 -> So in this video, we are going to be looking at actually using some external fonts. We've

18683.71 -> looked at fonts and text, and we know how to manipulate it now. But we don't actually

18687.452 -> know the one crucial piece, which is using external fonts. So your computer will most

18691.822 -> likely come preloaded with a bunch of different fonts. If you use things like Microsoft Word,

18696.47 -> or, you know, maybe Google Docs, things like that. They all come with pre loaded fonts.

18701.112 -> And although Google Docs technically isn't on your computer, we'll just leave it in there

18704.97 -> for now. So obviously, we have a lot of fonts to choose from in CSS. But first of all, how

18710.66 -> do we actually know which fonts to use? And what if we don't have the font? I mean, you

18716.942 -> know, maybe it doesn't come with our computer, how are we supposed to get it? Well, the first

18722.18 -> thing that I would recommend doing is going and getting fonts from the internet. Now,

18726.16 -> if you don't already know this, most people would think that you know, the fonts that

18734.91 -> you have are set for life, you can't download anymore. Well, fonts are actually a huge growing

18741.022 -> industry. And there are so many different fonts out there that you can use, and you

18745.21 -> can even make your own. So there's obviously a lot more fonts to choose them than what's

18751.43 -> provided on your computer. So in this video, I'm going to be teaching you how to go and

18756.64 -> find your own fonts. And then in the next video, we're going to be including it into

18765.84 -> our project. So the first source I'm going to recommend here, which is actually only

18770.362 -> source, but it's called Google fonts, it was put together by Google. And it's a collection

18773.872 -> of 915 font families. So you can see we have a bunch of different fonts here. And when

18781.01 -> I say font families, just think fonts default, because

18784.032 -> you know, when you think of it as a family, you think there's multiple fonts, but there's

18789.74 -> actually only one and then you can change the bolding and other settings, we'll go over

18797.65 -> that a little bit later in this video. So you can head over to this, I've linked it

18804.372 -> in the lecture resources, or you can just copy the link here from video. And it's going

18808.88 -> to take you to this site. So there's actually 915 families on this site, which is a lot

18812.41 -> to choose from. Now you can see that there are even you know things in different languages.

18816.49 -> There's all sorts of different styles, maybe from different general families. So this could

18819.75 -> be from, you know, a sensory family. This could be from a Sarah family. So you can see

18824.122 -> that there are so many different choices that you can use. And depending on what type of

18829.862 -> website you want to create, you can actually choose the fonts that you want. So I'm gonna

18835.18 -> actually go through now and start picking some fonts. So what I would recommend is just

18845.71 -> go through and look at the many different fonts you have here. So for example, I think

18850.772 -> this is a very nice font. So what I'm going to do is just go ahead and click this plus

18859.75 -> icon And what it's going to do here it says there's one family selected, right? If you

18863.741 -> open it up, you can see that our font has been selected. Now we're going to work on

18867.422 -> embedding this in the next video. But for now, I just want to leave it like this. So

18872.56 -> you can see that we can actually go ahead and customize our font now. So for example,

18877.48 -> if I wanted to choose some different bolding, so for example, you can see, this is a font

18885.08 -> weight of 100. And this is a font weight of 900. So you can select as many as you want.

18889.65 -> But you can see that we actually have a load type here. So the reason that this is given

18895.922 -> is because we are including this from the internet, obviously. So if you try to pull

18903.14 -> too many resources from an intranet or from, you know, outside of your local machine, it's

18906.512 -> going to really slow down the load time of your website, because obviously, it's not

18914.35 -> instantaneous, you need to send over requests, and there's a whole lot that goes behind.

18919.942 -> So while I would recommend is not trying to select every single one of these weights,

18923.47 -> only select the ones that you think you're going to need. So for example, for now, I'm

18929.71 -> just going to select the regular and the bolt. Now, I don't want any italics. So I'm just

18936.942 -> going to exclude this. And you can see that our load time is fast. So we're okay. So you

18943.58 -> can see that apart from our buildings, we can actually select some of some of the stuff

18948.23 -> from here. So instead of having to go into our selection, we can actually just go and

18953.282 -> straight select it. From here, we can also change the size if we wanted to. And then

18959.542 -> we can click the plus icon. So you can go ahead and play around with those when you

18964.43 -> include your own fonts. But for now, I think I'm just going to go with the default size

18969.05 -> and just add a bolded. So now I'm going to go ahead and actually include a second font,

18975.512 -> because it's pretty common in web development and web design to include at least two fonts,

18981.8 -> you know, maybe one for headings, and one for text. So I'm going to go ahead and find

18987.71 -> something that kind of fits in with the later font that we have here, I'm going to just

18992.122 -> select it back to the default size. So I'm going to try and find something that kind

19003.64 -> of matches this. It doesn't have to be obviously exactly the same. It can just be something

19007.872 -> that you know, kind of fits in the theme, or makes the website look kind of complements

19011.402 -> the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going

19015.48 -> to use it, you can see those lines there. I'm looking for a sans serif font. Let me

19018.072 -> see. So I think this is a pretty good font. So what I'm going to do is go ahead and add

19022.372 -> this as well just click on that plus icon. And now we can actually customize both fonts.

19027.002 -> So I'm going to go ahead and add that bold 700 as well, you can see that the load time

19030.942 -> is moderate now because of course, we're including more than one font, but we don't need to worry

19033.792 -> about that too much. So there we go. We have that setup now. So there we go. That's pretty

19037.502 -> much it for Google fonts. And you know, using all these different fonts, now you can go

19042.25 -> ahead and customize it. Choose whatever makes your website look good, or maybe whatever

19044.82 -> you want. But just make sure that you choose a font that really works with your website

19050.07 -> well and make sure you don't include too many different weights. So you can keep the load

19052.13 -> time within Bay. So in the next video, we're actually going to go through and start importing

19056.782 -> this into our website. And I'm going to teach you some really good failsafe tricks in case

19065.06 -> Google Fonts fails. Alright, let's move on.

19067.532 -> you know, when you think of it as a family, you think there's multiple fonts, but there's

19073.542 -> actually only one and then you can change the bolding and other settings, we'll go over

19078.792 -> that a little bit later in this video. So you can head over to this, I've linked it

19084.08 -> in the lecture resources, or you can just copy the link here from video. And it's going

19086.792 -> to take you to this site. So there's actually 915 families on this site, which is a lot

19091.82 -> to choose from. Now you can see that there are even you know things in different languages.

19094.332 -> There's all sorts of different styles, maybe from different general families. So this could

19097.362 -> be from, you know, a sensory family. This could be from a Sarah family. So you can see

19101.272 -> that there are so many different choices that you can use. And depending on what type of

19103.48 -> website you want to create, you can actually choose the fonts that you want. So I'm gonna

19109.042 -> actually go through now and start picking some fonts. So what I would recommend is just

19112.82 -> go through and look at the many different fonts you have here. So for example, I think

19118.112 -> this is a very nice font. So what I'm going to do is just go ahead and click this plus

19122.92 -> icon And what it's going to do here it says there's one family selected, right? If you

19125.4 -> open it up, you can see that our font has been selected. Now we're going to work on

19129.22 -> embedding this in the next video. But for now, I just want to leave it like this. So

19134.91 -> you can see that we can actually go ahead and customize our font now. So for example,

19137.51 -> if I wanted to choose some different bolding, so for example, you can see, this is a font

19142.58 -> weight of 100. And this is a font weight of 900. So you can select as many as you want.

19147.3 -> But you can see that we actually have a load type here. So the reason that this is given

19155.692 -> is because we are including this from the internet, obviously. So if you try to pull

19162.39 -> too many resources from an intranet or from, you know, outside of your local machine, it's

19167.752 -> going to really slow down the load time of your website, because obviously, it's not

19172.952 -> instantaneous, you need to send over requests, and there's a whole lot that goes behind.

19178.82 -> So while I would recommend is not trying to select every single one of these weights,

19183.23 -> only select the ones that you think you're going to need. So for example, for now, I'm

19188 -> just going to select the regular and the bolt. Now, I don't want any italics. So I'm just

19195.362 -> going to exclude this. And you can see that our load time is fast. So we're okay. So you

19201.292 -> can see that apart from our buildings, we can actually select some of some of the stuff

19205.64 -> from here. So instead of having to go into our selection, we can actually just go and

19211.172 -> straight select it. From here, we can also change the size if we wanted to. And then

19215.202 -> we can click the plus icon. So you can go ahead and play around with those when you

19220.13 -> include your own fonts. But for now, I think I'm just going to go with the default size

19224.622 -> and just add a bolded. So now I'm going to go ahead and actually include a second font,

19229.3 -> because it's pretty common in web development and web design to include at least two fonts,

19233.18 -> you know, maybe one for headings, and one for text. So I'm going to go ahead and find

19241.422 -> something that kind of fits in with the later font that we have here, I'm going to just

19246.47 -> select it back to the default size. So I'm going to try and find something that kind

19256.34 -> of matches this. It doesn't have to be obviously exactly the same. It can just be something

19261.74 -> that you know, kind of fits in the theme, or makes the website look kind of complements

19267.58 -> the other font. So I think this is good. It's actually Sarah serif. So I don't I'm not going

19273.9 -> to use it, you can see those lines there. I'm looking for a sans serif font. Let me

19277.97 -> see. So I think this is a pretty good font. So what I'm going to do is go ahead and add

19281.76 -> this as well just click on that plus icon. And now we can actually customize both fonts.

19286.07 -> So I'm going to go ahead and add that bold 700 as well, you can see that the load time

19291.18 -> is moderate now because of course, we're including more than one font, but we don't need to worry

19295.9 -> about that too much. So there we go. We have that setup now. So there we go. That's pretty

19300.74 -> much it for Google fonts. And you know, using all these different fonts, now you can go

19306.31 -> ahead and customize it. Choose whatever makes your website look good, or maybe whatever

19309.32 -> you want. But just make sure that you choose a font that really works with your website

19312.97 -> well and make sure you don't include too many different weights. So you can keep the load

19319.49 -> time within Bay. So in the next video, we're actually going to go through and start importing

19326.782 -> this into our website. And I'm going to teach you some really good failsafe tricks in case

19331.46 -> Google Fonts fails. Alright, let's move on.

19333.032 -> So in the previous video, we started looking at what type of fonts we can use in our website.

19338.17 -> Now we're going to go through and actually include them. So first of all, let's just

19342.43 -> look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation,

19348.01 -> ready to go and working on the website. But now what I'm going to do is actually go through

19352.42 -> and start using these external fonts. So we're not going to use this Arial font anymore,

19353.679 -> so I'm going to go ahead and erase that. And also for the font weight, I'm also going to

19361.16 -> go ahead and erase that because there's some issues with it that I'll talk about in just

19366.97 -> a second. So there we go. Now that we removed, all of the properties will be directly affected

19372.172 -> by the font. Let's go ahead and work on setting up our website with these external fonts.

19377.862 -> So the first thing you'll notice here is that when you go over to your Google fonts, it

19383.71 -> gives you this link tag to include. So this link tag is pretty much going to link to Google

19390.372 -> fonts and pull them from their servers. So this is what you're going to need to copy

19394.64 -> right here. You're just going to copy this and up in your HTML document, you're going

19396.97 -> to paste your link tag above your stylesheet. Now make sure you post it above this above

19400.38 -> your stylesheet because you want to have the fonts ready so that when your stylesheet comes

19405.8 -> along and the compiler is reading it, all of the fonts are already there and ready to

19409.502 -> go. So there we go. Now that everything's linked and set up, why don't we go ahead and

19413.17 -> see what happened on our website. Obviously, we removed the font You can see that nothing

19415.372 -> actually happens. So, by doing this, we don't actually set up our website to use our fonts,

19421.032 -> we're just bringing them into our website. Now what we need to do is go through in CSS

19428.22 -> and start utilizing these fonts, so that we can see the changes on the website. So on

19432.952 -> top of that, this, there's this little text here that allows you to do you know, you can

19437.662 -> just copy the style straight, but I'm going to go ahead and do it manually. So first of

19442.24 -> all, let's go ahead and add our body font. So I'm going to go ahead and say, font family.

19450.46 -> And now we're going to go through and select our font. So we included two fonts, Leto and

19457.38 -> sorrow boon we're going to go through is go ahead and see which one we want to use. So

19463.83 -> I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead

19469.42 -> and say, Leto, just like that. And now let's go ahead and refresh the page. And you can

19475.4 -> see how much of a difference that makes. Now using this new font, everything has changed,

19480.532 -> it makes the website look completely different from what it used to be. So there we go, we've

19484.99 -> included that. But let's go ahead and include our second font here. So I'm going to go through

19491.468 -> and actually add it on the title and the subtitle. And remember going back to specificity, the

19498.05 -> class and Id selectors are going to be more specific than the body selectors. So our font

19503.342 -> family is going to override the body font family. So let's go ahead and add that. Right

19508.602 -> there. Just like that. And let's go ahead and add it to our subtitle as well. All right,

19514.582 -> well, let's go ahead and see what happens. So you can see that, although the difference

19518.1 -> is quite subtle, it's still changed the font of the titles and subtitles. And you can see

19522.042 -> why using two fonts on your website makes it look a whole lot better. So there we go.

19526.71 -> We've added all of our fonts. But the only problem is, we know that what what's happening

19529.38 -> beside behind the scenes is that this link tag is going to Google servers, pulling these

19534.492 -> fonts, and then including them in our website. But what if it fails? What if there's no internet

19539.85 -> connection, or what if it's down, maybe the Google Fonts servers themselves are down.

19543.452 -> This is where we need to use the trick we learned in the font families video, in which

19550.532 -> we can actually add a backup font to this. And if we actually go on Google Fonts right

19557.18 -> here, you can see they already do this. Now, because the sans serif family is included

19562.122 -> by default, what's going to happen is, normally it's going to use the font specified. But

19569.13 -> if there's some problem, and we can't get these fonts, maybe Google servers are down,

19573.542 -> it's going to go over to the next font. And we know that sans serif is included on every

19577.454 -> single machine, which means that it's going to work fine. So let's go ahead and do that.

19581.59 -> Now. If you remember, all we have to do is go ahead and add a comma, and then put the

19588.112 -> name of the family, which in this case is sans serif. We're going to do this for the

19597.71 -> other two as well.

19599.3 -> So in the previous video, we started looking at what type of fonts we can use in our website.

19608.3 -> Now we're going to go through and actually include them. So first of all, let's just

19613 -> look at our website. For now we have all of our fonts setup, we have a bunch of text manipulation,

19620.35 -> ready to go and working on the website. But now what I'm going to do is actually go through

19626.582 -> and start using these external fonts. So we're not going to use this Arial font anymore,

19631.332 -> so I'm going to go ahead and erase that. And also for the font weight, I'm also going to

19638.932 -> go ahead and erase that because there's some issues with it that I'll talk about in just

19643.05 -> a second. So there we go. Now that we removed, all of the properties will be directly affected

19650.33 -> by the font. Let's go ahead and work on setting up our website with these external fonts.

19654.82 -> So the first thing you'll notice here is that when you go over to your Google fonts, it

19658.66 -> gives you this link tag to include. So this link tag is pretty much going to link to Google

19663.13 -> fonts and pull them from their servers. So this is what you're going to need to copy

19665.612 -> right here. You're just going to copy this and up in your HTML document, you're going

19670.24 -> to paste your link tag above your stylesheet. Now make sure you post it above this above

19675.18 -> your stylesheet because you want to have the fonts ready so that when your stylesheet comes

19680.192 -> along and the compiler is reading it, all of the fonts are already there and ready to

19686.352 -> go. So there we go. Now that everything's linked and set up, why don't we go ahead and

19689.92 -> see what happened on our website. Obviously, we removed the font You can see that nothing

19692.84 -> actually happens. So, by doing this, we don't actually set up our website to use our fonts,

19697.73 -> we're just bringing them into our website. Now what we need to do is go through in CSS

19702.92 -> and start utilizing these fonts, so that we can see the changes on the website. So on

19708.282 -> top of that, this, there's this little text here that allows you to do you know, you can

19717.06 -> just copy the style straight, but I'm going to go ahead and do it manually. So first of

19726.07 -> all, let's go ahead and add our body font. So I'm going to go ahead and say, font family.

19729.59 -> And now we're going to go through and select our font. So we included two fonts, Leto and

19736.77 -> sorrow boon we're going to go through is go ahead and see which one we want to use. So

19741.603 -> I'm going to use Leto for the body text. So right here in quotes, I'm going to go ahead

19750.442 -> and say, Leto, just like that. And now let's go ahead and refresh the page. And you can

19757.09 -> see how much of a difference that makes. Now using this new font, everything has changed,

19761.782 -> it makes the website look completely different from what it used to be. So there we go, we've

19767.91 -> included that. But let's go ahead and include our second font here. So I'm going to go through

19775.01 -> and actually add it on the title and the subtitle. And remember going back to specificity, the

19779.452 -> class and Id selectors are going to be more specific than the body selectors. So our font

19783.102 -> family is going to override the body font family. So let's go ahead and add that. Right

19787.792 -> there. Just like that. And let's go ahead and add it to our subtitle as well. All right,

19792.46 -> well, let's go ahead and see what happens. So you can see that, although the difference

19797.442 -> is quite subtle, it's still changed the font of the titles and subtitles. And you can see

19801.4 -> why using two fonts on your website makes it look a whole lot better. So there we go.

19806.32 -> We've added all of our fonts. But the only problem is, we know that what what's happening

19810.59 -> beside behind the scenes is that this link tag is going to Google servers, pulling these

19814.16 -> fonts, and then including them in our website. But what if it fails? What if there's no internet

19816.8 -> connection, or what if it's down, maybe the Google Fonts servers themselves are down.

19820.032 -> This is where we need to use the trick we learned in the font families video, in which

19827.092 -> we can actually add a backup font to this. And if we actually go on Google Fonts right

19834.05 -> here, you can see they already do this. Now, because the sans serif family is included

19839.77 -> by default, what's going to happen is, normally it's going to use the font specified. But

19844.012 -> if there's some problem, and we can't get these fonts, maybe Google servers are down,

19847.442 -> it's going to go over to the next font. And we know that sans serif is included on every

19858.58 -> single machine, which means that it's going to work fine. So let's go ahead and do that.

19863.352 -> Now. If you remember, all we have to do is go ahead and add a comma, and then put the

19867.5 -> name of the family, which in this case is sans serif. We're going to do this for the

19871.782 -> other two as well.

19872.782 -> And this one as well. Now, of course, this is going to change based on the font that

19878.23 -> you use. And I'm actually going to show you this right here. Let's remove both of these

19879.952 -> and add a serif font. So this would be considered a serif font. Let's go ahead and add that.

19883.67 -> Now if we go ahead and look at the family, well, it's actually not not serif. It's a

19887.022 -> different family called cursive. But you can see just to prove that point that the family

19891.5 -> is going to depend on the font itself. So we explained a little bit about font families

19897.122 -> in that video. And obviously, all of them have different characteristics. So of course,

19901.65 -> like I said, it depends completely on the type of font. So if I go ahead and see the

19907.23 -> family there, you can see that that sans serif. But if we use something like this font, it's

19911.98 -> going to be a different font family. So that's just one thing you need to keep in mind is

19916.39 -> that you want to make sure your fallback font is both included on every machine. And it's

19921.63 -> kind of similar to our font here. Now, if I actually go ahead and erase this, now let's

19928.71 -> go ahead and see, obviously, there is a visual difference, but it still has that same style.

19934.39 -> There's no lines, it's clean to read. It's just straightforward. So that's one thing

19940.14 -> you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going

19943.99 -> to move on to layout, which is really gonna change the way that this website looks. Alright,

19952.262 -> let's move on.

19953.262 -> And this one as well. Now, of course, this is going to change based on the font that

19959.18 -> you use. And I'm actually going to show you this right here. Let's remove both of these

19963.16 -> and add a serif font. So this would be considered a serif font. Let's go ahead and add that.

19966.02 -> Now if we go ahead and look at the family, well, it's actually not not serif. It's a

19971.15 -> different family called cursive. But you can see just to prove that point that the family

19977.5 -> is going to depend on the font itself. So we explained a little bit about font families

19985.21 -> in that video. And obviously, all of them have different characteristics. So of course,

19990.93 -> like I said, it depends completely on the type of font. So if I go ahead and see the

19996.91 -> family there, you can see that that sans serif. But if we use something like this font, it's

20007.862 -> going to be a different font family. So that's just one thing you need to keep in mind is

20014.96 -> that you want to make sure your fallback font is both included on every machine. And it's

20022.71 -> kind of similar to our font here. Now, if I actually go ahead and erase this, now let's

20030.55 -> go ahead and see, obviously, there is a visual difference, but it still has that same style.

20037.16 -> There's no lines, it's clean to read. It's just straightforward. So that's one thing

20042.72 -> you want to make sure of. Alright, so that's pretty much it for fonts. Next, we're going

20044.872 -> to move on to layout, which is really gonna change the way that this website looks. Alright,

20050.332 -> let's move on.

20051.332 -> So the next few videos are going to be focused on CSS layout. So we're pretty much done,

20057.352 -> at least for now with coloring and text and all of the cool features we can do with them.

20061.272 -> But now we're gonna actually go through and start using our skills with different well,

20065.21 -> new skills that we can actually put together and create really, really nice, awesome websites.

20068.8 -> So layout is probably one of the most powerful tools that you can use in CSS and completely

20072.772 -> change the way your website looks. But before we move on, we need to learn a little bit

20077.59 -> of theory behind how CSS works. So there's this concept in CSS called the box model,

20080.141 -> and it's pretty much the the what happens is every Simple element is surrounded by an

20083.192 -> invisible box. Now this box has different layers, which we're going to explain in the

20086.47 -> next video. But all of these boxes are touching together, they're kind of connected, what

20089.922 -> you can do is actually change the shapes of these boxes and change the shapes of the layers

20094.47 -> in order to move things around, and position them on a page in a way that makes the website

20098.74 -> look much better. Now, obviously, this isn't the only way of shaping your website, there

20102.21 -> are so many different methods, Flexbox, and grid, and we're all going to cover them later

20109.022 -> in this course. But for now, this is the basic kind of layout features that you need to use,

20118.21 -> so that you can move on and start using some of the most complex features. So this is kind

20130.43 -> of what that invisible box looks like. So at the center is where your content is. Now

20135.59 -> I'm going to explain this in just a second, all of these little terms, padding, border

20142.08 -> and margin. But you can see that the center contains the content. But then the other three

20146.91 -> layers are something completely unknown. And we're going to be going through and explaining

20150.152 -> what those do. But for now, just understand that you have the content on the center. But

20154.372 -> then there's this invisible box around it, that is split up into three layers. So let's

20158.952 -> go over the first one, which is the padding. Now the padding represents the space between

20163.58 -> the content and the border of the content. Now you can see up in this model, we have

20168.88 -> this padding section, and then we have a border. So pretty much what the border does is it

20175.622 -> separates the content and the padding from the margin. But pretty much let's just assume

20176.77 -> for now that the margin kind of move things around, and it doesn't actually move the content

20181.242 -> around, what padding is supposed to do is it's basically supposed to give more room

20186.932 -> around the content itself, it's not really meant to move the content around. So it'll

20191.67 -> make some more sense when I go over margin if you don't understand it now, but let's

20196.1 -> move on to the next layer. The border is pretty much the divide, or the separation line between

20199.942 -> the content, the padding and the margin. So borders can be styled and changed. And by

20203.93 -> default, they're invisible. But we can actually go through and change how they look which

20208.06 -> we're going to be going through in a couple videos time. So the border doesn't actually

20213.05 -> create any spacing or anything itself, unless you wanted to. But pretty much what the border

20219.17 -> is supposed to be is kind of that division line. So the last layer that I want to talk

20228.272 -> about is the margin. So just like how the padding is supposed to give spacing, or well

20231.31 -> padding around the content, the margin is supposed to move the content around and give

20234.292 -> it space between other elements. So while the padding is used for internal space, the

20238.862 -> margin is used for external space and is made. So that to give room and spacing around external

20243.99 -> elements. So for example, if you have an image and then some text under it, you can use the

20248.442 -> margin of the text to kind of push it down from the image, whereas the padding will just

20256.412 -> kind of make internal space. Now, although it's not the best example, as we go on and

20263.872 -> start using it, you'll get this a lot more if you don't already. Alright, so that's pretty

20269.922 -> much it for the box model. It's a very, very simple concept. But it can be really used

20274.542 -> to a very high potential, and it does contain a lot of features that we're going to be going

20279.71 -> over in the next few videos. Alright, let's move on.

20282.192 -> So the next few videos are going to be focused on CSS layout. So we're pretty much done,

20287.55 -> at least for now with coloring and text and all of the cool features we can do with them.

20292.31 -> But now we're gonna actually go through and start using our skills with different well,

20297.47 -> new skills that we can actually put together and create really, really nice, awesome websites.

20303.372 -> So layout is probably one of the most powerful tools that you can use in CSS and completely

20307.49 -> change the way your website looks. But before we move on, we need to learn a little bit

20310.39 -> of theory behind how CSS works. So there's this concept in CSS called the box model,

20316.8 -> and it's pretty much the the what happens is every Simple element is surrounded by an

20323.21 -> invisible box. Now this box has different layers, which we're going to explain in the

20328.09 -> next video. But all of these boxes are touching together, they're kind of connected, what

20332.292 -> you can do is actually change the shapes of these boxes and change the shapes of the layers

20338.842 -> in order to move things around, and position them on a page in a way that makes the website

20342.912 -> look much better. Now, obviously, this isn't the only way of shaping your website, there

20347.39 -> are so many different methods, Flexbox, and grid, and we're all going to cover them later

20352.05 -> in this course. But for now, this is the basic kind of layout features that you need to use,

20358.67 -> so that you can move on and start using some of the most complex features. So this is kind

20366.24 -> of what that invisible box looks like. So at the center is where your content is. Now

20372.13 -> I'm going to explain this in just a second, all of these little terms, padding, border

20377.922 -> and margin. But you can see that the center contains the content. But then the other three

20384.15 -> layers are something completely unknown. And we're going to be going through and explaining

20386.532 -> what those do. But for now, just understand that you have the content on the center. But

20388.88 -> then there's this invisible box around it, that is split up into three layers. So let's

20392.75 -> go over the first one, which is the padding. Now the padding represents the space between

20396.42 -> the content and the border of the content. Now you can see up in this model, we have

20401.032 -> this padding section, and then we have a border. So pretty much what the border does is it

20406.56 -> separates the content and the padding from the margin. But pretty much let's just assume

20411.942 -> for now that the margin kind of move things around, and it doesn't actually move the content

20423.5 -> around, what padding is supposed to do is it's basically supposed to give more room

20426.98 -> around the content itself, it's not really meant to move the content around. So it'll

20431.25 -> make some more sense when I go over margin if you don't understand it now, but let's

20435.622 -> move on to the next layer. The border is pretty much the divide, or the separation line between

20438.43 -> the content, the padding and the margin. So borders can be styled and changed. And by

20441.26 -> default, they're invisible. But we can actually go through and change how they look which

20445.43 -> we're going to be going through in a couple videos time. So the border doesn't actually

20449.172 -> create any spacing or anything itself, unless you wanted to. But pretty much what the border

20453.3 -> is supposed to be is kind of that division line. So the last layer that I want to talk

20459.73 -> about is the margin. So just like how the padding is supposed to give spacing, or well

20465.192 -> padding around the content, the margin is supposed to move the content around and give

20469.81 -> it space between other elements. So while the padding is used for internal space, the

20473 -> margin is used for external space and is made. So that to give room and spacing around external

20479.23 -> elements. So for example, if you have an image and then some text under it, you can use the

20484.59 -> margin of the text to kind of push it down from the image, whereas the padding will just

20489.13 -> kind of make internal space. Now, although it's not the best example, as we go on and

20492.872 -> start using it, you'll get this a lot more if you don't already. Alright, so that's pretty

20495.24 -> much it for the box model. It's a very, very simple concept. But it can be really used

20499.952 -> to a very high potential, and it does contain a lot of features that we're going to be going

20505.13 -> over in the next few videos. Alright, let's move on.

20508.252 -> So now what we're going to be doing is going through and starting to use the first layer

20511.3 -> of the box model, which in this case is the content itself. So although not technically

20516.3 -> a layer of this invisible box, it's still a big part of layout, and the shaping of things

20522.52 -> on your document, because the way you shape and while style, your content is going to

20528.24 -> completely change how the rest of the box models affected your padding and your margin.

20532.68 -> So what we're going to be doing is going through and using some of these. And if you actually

20536.122 -> remember, right here, we have already used the two main features of shaping content,

20540.72 -> height and width. So we've already pretty much learned these properties. But I'm going

20546.17 -> to go through and do a couple more examples just so you can get the shape of things and

20551.8 -> how to use them. So first thing I want to talk about is the units that you should use.

20558.702 -> So usually on a page, the best way to do this is using pixels or some absolute unit for

20563.55 -> height. But then for width, use a relative units such as v w, or percentage. Now we do

20567.18 -> this because although height is very, very hard to determine responsively at least, they

20568.18 -> kind of stay the same as you move down so the height is going to kind of stay consistent.

20571.8 -> The only problem is the width completely changes everything. So the width of devices is very

20577.452 -> different from place to place. So a phone would be quite a small width whereas you know

20582.24 -> full screen TV would be very wide width. So that's why you use relative units for width

20588.25 -> is that you can keep it consistent. Or still, you can keep both of the values consistent

20592.742 -> while still using different units. So let's go through and actually use it on this image

20596.48 -> here. So the first thing I want to do is go ahead and give this a class, we're actually

20601.43 -> I'm going to give it an ID. So I'm going to give it an ID of about us image, just like

20606.752 -> that. All right, now, let's go ahead and select it here, I'm going to go hash about us image.

20614.14 -> Remember the id selector. And now what we're going to do is go through and start adding

20618.34 -> our, our properties. So the first thing I'm going to add is the height. So I'm just going

20622.05 -> to make this a cool 300 pixels, just to see how it is. And most of this is very experimental,

20628.99 -> you're not supposed to go through and change everything. And, you know, well, well you

20631.25 -> are, but you're not supposed to go through and set everything to a constant value. So

20632.271 -> you're supposed to, you know, play around, see what works. And then once you're familiar

20634.14 -> with it, and once you know what you want, you can leave it as it is. So there we go,

20638.52 -> we set the height. Now, obviously, this with the width of the image itself is always relative,

20641.77 -> but I'm going to go ahead and change it anyways, I'm going to go ahead and say the width is

20646.332 -> 60 v w. Now, you could always say 60%, it would pretty much be the same thing. But I'm

20651.11 -> going to go ahead and use v w here just to

20653.112 -> So now what we're going to be doing is going through and starting to use the first layer

20656.182 -> of the box model, which in this case is the content itself. So although not technically

20660.622 -> a layer of this invisible box, it's still a big part of layout, and the shaping of things

20666 -> on your document, because the way you shape and while style, your content is going to

20671.862 -> completely change how the rest of the box models affected your padding and your margin.

20675.64 -> So what we're going to be doing is going through and using some of these. And if you actually

20681.4 -> remember, right here, we have already used the two main features of shaping content,

20684.43 -> height and width. So we've already pretty much learned these properties. But I'm going

20689.47 -> to go through and do a couple more examples just so you can get the shape of things and

20696.38 -> how to use them. So first thing I want to talk about is the units that you should use.

20699.412 -> So usually on a page, the best way to do this is using pixels or some absolute unit for

20703.67 -> height. But then for width, use a relative units such as v w, or percentage. Now we do

20707.93 -> this because although height is very, very hard to determine responsively at least, they

20712.242 -> kind of stay the same as you move down so the height is going to kind of stay consistent.

20716.66 -> The only problem is the width completely changes everything. So the width of devices is very

20723.082 -> different from place to place. So a phone would be quite a small width whereas you know

20727.21 -> full screen TV would be very wide width. So that's why you use relative units for width

20733.01 -> is that you can keep it consistent. Or still, you can keep both of the values consistent

20737.372 -> while still using different units. So let's go through and actually use it on this image

20741.542 -> here. So the first thing I want to do is go ahead and give this a class, we're actually

20752.773 -> I'm going to give it an ID. So I'm going to give it an ID of about us image, just like

20758.782 -> that. All right, now, let's go ahead and select it here, I'm going to go hash about us image.

20768.55 -> Remember the id selector. And now what we're going to do is go through and start adding

20773.372 -> our, our properties. So the first thing I'm going to add is the height. So I'm just going

20781.792 -> to make this a cool 300 pixels, just to see how it is. And most of this is very experimental,

20786.532 -> you're not supposed to go through and change everything. And, you know, well, well you

20790.751 -> are, but you're not supposed to go through and set everything to a constant value. So

20795.292 -> you're supposed to, you know, play around, see what works. And then once you're familiar

20800.73 -> with it, and once you know what you want, you can leave it as it is. So there we go,

20810.89 -> we set the height. Now, obviously, this with the width of the image itself is always relative,

20815.622 -> but I'm going to go ahead and change it anyways, I'm going to go ahead and say the width is

20822.48 -> 60 v w. Now, you could always say 60%, it would pretty much be the same thing. But I'm

20828.73 -> going to go ahead and use v w here just to

20832.26 -> actually, you know what, we have V w here already, so I'm going to go ahead and add

20837.56 -> percentage, there we go. Now, of course, you could use whichever unit you want, they're

20838.93 -> gonna mean pretty much the same thing. Obviously, apart from the different viewports, and things

20840.17 -> like that, but they're pretty much the same for our purposes. So you can use whichever

20847.83 -> one you want. So there we go, we've changed it. Now if we go ahead and resize of most,

20853.15 -> you can actually go ahead and see that the width is going to be pretty much the same,

20859.26 -> well, the height stays constant. So one thing I want to talk about is a really cool feature

20863.64 -> that we can use in Chrome. And you can see that's a little bit weird there. But we'll

20870.1 -> worry about it, we'll worry about that later, is a really cool feature that allows you to

20877.96 -> actually change the viewport of your Chrome window without actually having to use different

20881.952 -> devices. So if you go ahead and click on the icon, just right click anywhere on the page,

20887.08 -> click on Inspect, and it's going to bring you here to this page. And you can actually

20889.91 -> select any device you want from the drop down menu and see how it would look on that on

20894.782 -> that device. So I can pretty much do whatever I want here. If I wanted to select an iPad,

20898.702 -> even an iPad Pro, you can actually see what it would look like on the device. So this

20903.41 -> is a really useful feature that you can use to make sure that your website works everywhere,

20908.21 -> instead of having to go and upload it somewhere and then view it on all those different devices.

20921.582 -> You can also set select this responsive design, which I really liked, because then you can

20926.452 -> change the size however you want. Just like that you can see, and it will work perfectly.

20934.31 -> So yeah, that's great. And you know, if maybe if you don't want to use these devices from

20937.71 -> this drop down menu, you can actually go through and change the size here, which is really

20942.952 -> useful. So I'm going to go ahead and close this off now. And you can see that our website

20948.872 -> is looking good. Obviously, our image here, it looks quite weird. But like I said, it's

20953.18 -> all about experimentation, you're supposed to go through and see what works. And obviously,

20956.602 -> you don't have to use an absolute value. It's not set in stone, but you're supposed to go

20961.4 -> through and see what works for you. And from there, you can set the value. So this is just

20969.342 -> kind of a little experimental thing to teach you how to use these features. But like I

20973.442 -> said, this website's all about what this course is all about practicing and getting experienced

20978.72 -> with this. So you can go through, check out the project files and play around with these

20986.21 -> values yourself, really get a feel for how this works. So that's pretty much it for content

20991.96 -> resizing, it's very easy, there's only two properties you need to know. And pretty much

20995.872 -> the rest of the box model is also quite easy. But it's good that we learn it step by step

21000.932 -> so that we master every stage and by the end of it, we'll really know how to master the

21006.502 -> layout and really manipulate our page in the best possible way. Alright, let's move on.

21010.06 -> actually, you know what, we have V w here already, so I'm going to go ahead and add

21018.22 -> percentage, there we go. Now, of course, you could use whichever unit you want, they're

21025.043 -> gonna mean pretty much the same thing. Obviously, apart from the different viewports, and things

21029.282 -> like that, but they're pretty much the same for our purposes. So you can use whichever

21032.452 -> one you want. So there we go, we've changed it. Now if we go ahead and resize of most,

21038.15 -> you can actually go ahead and see that the width is going to be pretty much the same,

21043.372 -> well, the height stays constant. So one thing I want to talk about is a really cool feature

21044.942 -> that we can use in Chrome. And you can see that's a little bit weird there. But we'll

21048.782 -> worry about it, we'll worry about that later, is a really cool feature that allows you to

21053.01 -> actually change the viewport of your Chrome window without actually having to use different

21060.002 -> devices. So if you go ahead and click on the icon, just right click anywhere on the page,

21065.02 -> click on Inspect, and it's going to bring you here to this page. And you can actually

21070.452 -> select any device you want from the drop down menu and see how it would look on that on

21075.55 -> that device. So I can pretty much do whatever I want here. If I wanted to select an iPad,

21080.292 -> even an iPad Pro, you can actually see what it would look like on the device. So this

21086.93 -> is a really useful feature that you can use to make sure that your website works everywhere,

21092.77 -> instead of having to go and upload it somewhere and then view it on all those different devices.

21098.242 -> You can also set select this responsive design, which I really liked, because then you can

21103.05 -> change the size however you want. Just like that you can see, and it will work perfectly.

21107.272 -> So yeah, that's great. And you know, if maybe if you don't want to use these devices from

21112.76 -> this drop down menu, you can actually go through and change the size here, which is really

21116.672 -> useful. So I'm going to go ahead and close this off now. And you can see that our website

21121.3 -> is looking good. Obviously, our image here, it looks quite weird. But like I said, it's

21125.74 -> all about experimentation, you're supposed to go through and see what works. And obviously,

21127.99 -> you don't have to use an absolute value. It's not set in stone, but you're supposed to go

21134.31 -> through and see what works for you. And from there, you can set the value. So this is just

21142.05 -> kind of a little experimental thing to teach you how to use these features. But like I

21148.792 -> said, this website's all about what this course is all about practicing and getting experienced

21153.772 -> with this. So you can go through, check out the project files and play around with these

21159.282 -> values yourself, really get a feel for how this works. So that's pretty much it for content

21165.76 -> resizing, it's very easy, there's only two properties you need to know. And pretty much

21172.43 -> the rest of the box model is also quite easy. But it's good that we learn it step by step

21178.192 -> so that we master every stage and by the end of it, we'll really know how to master the

21185.8 -> layout and really manipulate our page in the best possible way. Alright, let's move on.

21190.282 -> So in this video, we're going to be focusing on one of the parts of the box model, which

21195.65 -> are mortars. So in the previous video, I talked a little bit about some of the different layers

21201.042 -> of the box model and how they work. But in this video, we're actually going to be focusing

21207.612 -> on manipulating one of those layers, which is the border. And although it's not the really

21214.42 -> the main part of the whole box model idea, it's still a pretty useful skill to know and

21221.39 -> it really helps you understand how the box model comes together. Alright, let's get started.

21227.75 -> So for the next few videos, we're mainly going to be working with the images simply because

21232.17 -> they're just easier to manipulate and set the layout over something working with something

21236.56 -> like that. text or titles, things like that. So we're going to be working with our circular

21242.102 -> gray here that we created in a previous video, as well as this custom image. So let's get

21247.59 -> started. So now there are many different styles that you can use to style the borders. But

21251.622 -> we're going to be using the main shorthand that allows us to style everything all at

21255.942 -> once. So the property is similar to our background property here, all you need to type is border,

21259.852 -> whoops, you do on the image. So I'm going to go here on our radial gradients. And I'm

21264.81 -> going to start adding our border. So let's go ahead and get started. So what I'm going

21271.98 -> to do is just type border. And remember, every single element has a box around it has this

21276.52 -> box model or invisible box. So it doesn't matter what you choose, you can always style

21280.202 -> these elements, it might look weird on some elements like this text here, but you can

21285.412 -> do it with everything. So there are three main parts to this element here. First is

21291.31 -> going to be the size. So we'll talk about that in a second, then you're going to have

21297.92 -> the style, which is probably the main part. And then finally, you're going to have the

21303.16 -> color. So now that we have this, we can go ahead and start talking about this. So size

21306.05 -> is pretty similar to you know, changing the size of an image, for example, yeah, it can

21307.592 -> be in pixels percent or em, it doesn't matter, I'm going to go with pixels for now. Now,

21310.262 -> the usual range for a border is somewhere between, you know, one and three or four pixels,

21313.77 -> we can go much thicker than that, depending on what you need. So I'm going to go ahead

21318.32 -> and show you want to pixels looked like. So remember separated by a space. Now we're going

21323.3 -> to go over the style. So there are many different styles you can use on your borders. But there's

21328.46 -> three main ones that we're going to talk about, or sorry, four main ones, we're going to talk

21334.08 -> about dotted, dashed, solid and double. Now normally, you're going to see solid, that's

21338.172 -> pretty much the most common one, I'll show you the other versions of this in just a second.

21344.88 -> So I'm going to go ahead and type solid, and now come to the color. So as we learned refer

21350.49 -> before this can be a named color, this can be an RGB code, or even a hex code, I'm going

21354.76 -> to go ahead and just choose a darkish blue, I think that will fit in really well with

21359.442 -> the page. And in fact, you know what, let's not, let's not use the color picker, let's

21363.82 -> just use our RGB color skills. And take the color of the background, which is here. So

21368.81 -> we're going to take those four. And I'm going to go back to our image here and paste it

21376.362 -> in. And now what I'm going to do is just darken everything. And if you remember, the darker

21382.042 -> it gets the higher oak sorry, the lower all of these values get. So I'm just going to

21384.84 -> lower them all by about 50. So here, I'm just going to go 154. Now, again, this doesn't

21389.1 -> have to be exact, or anything you can, you can put really, whatever you want here, but

21393.41 -> I'm just trying to darken everything, I'm just gonna make this 200. Let's go ahead and

21397.692 -> refresh the page and see how our border looks. Now. Let's scroll down. So there's the problem,

21402.202 -> we actually forgot a semicolon here on the end of the background. So that's one thing

21408.762 -> you need to keep in mind. There we go. Now it's working. And you can see and I did actually

21412.81 -> change the color there just to test it out. And you can see, there we go, we have our

21415.97 -> background. So obviously, it's pretty obvious here with our bright red color there. But

21416.97 -> what I'm actually going to do is go ahead and just play around with some of these and

21420.16 -> see if we can change the features. So first thing I'm going to do is go ahead and change

21426.42 -> the height. So I'm going to go ahead and set it as 10 pixels. For example, you can see

21433.412 -> that they open up the height sorry, the size, you can see that that gets a lot thicker,

21439.84 -> so you can change it depending on how you want your border to look like. So now let's

21446.612 -> go ahead and change the style. So let's go ahead and try out some of these other styles.

21453.06 -> So first, I'm going to try dotted. So you can see now we have a dotted border. Now let's

21458.75 -> go ahead and try dashed.

21460.192 -> So in this video, we're going to be focusing on one of the parts of the box model, which

21465.88 -> are mortars. So in the previous video, I talked a little bit about some of the different layers

21472.952 -> of the box model and how they work. But in this video, we're actually going to be focusing

21480.48 -> on manipulating one of those layers, which is the border. And although it's not the really

21488.05 -> the main part of the whole box model idea, it's still a pretty useful skill to know and

21495.23 -> it really helps you understand how the box model comes together. Alright, let's get started.

21500.13 -> So for the next few videos, we're mainly going to be working with the images simply because

21504.88 -> they're just easier to manipulate and set the layout over something working with something

21511.432 -> like that. text or titles, things like that. So we're going to be working with our circular

21516.542 -> gray here that we created in a previous video, as well as this custom image. So let's get

21522.012 -> started. So now there are many different styles that you can use to style the borders. But

21526.07 -> we're going to be using the main shorthand that allows us to style everything all at

21530.63 -> once. So the property is similar to our background property here, all you need to type is border,

21538.71 -> whoops, you do on the image. So I'm going to go here on our radial gradients. And I'm

21544.29 -> going to start adding our border. So let's go ahead and get started. So what I'm going

21550.42 -> to do is just type border. And remember, every single element has a box around it has this

21553.952 -> box model or invisible box. So it doesn't matter what you choose, you can always style

21559.862 -> these elements, it might look weird on some elements like this text here, but you can

21565.272 -> do it with everything. So there are three main parts to this element here. First is

21568.14 -> going to be the size. So we'll talk about that in a second, then you're going to have

21571.46 -> the style, which is probably the main part. And then finally, you're going to have the

21574.52 -> color. So now that we have this, we can go ahead and start talking about this. So size

21580.73 -> is pretty similar to you know, changing the size of an image, for example, yeah, it can

21584.47 -> be in pixels percent or em, it doesn't matter, I'm going to go with pixels for now. Now,

21588.49 -> the usual range for a border is somewhere between, you know, one and three or four pixels,

21591.81 -> we can go much thicker than that, depending on what you need. So I'm going to go ahead

21595.332 -> and show you want to pixels looked like. So remember separated by a space. Now we're going

21599.43 -> to go over the style. So there are many different styles you can use on your borders. But there's

21604.782 -> three main ones that we're going to talk about, or sorry, four main ones, we're going to talk

21609.442 -> about dotted, dashed, solid and double. Now normally, you're going to see solid, that's

21613.21 -> pretty much the most common one, I'll show you the other versions of this in just a second.

21618.38 -> So I'm going to go ahead and type solid, and now come to the color. So as we learned refer

21624.532 -> before this can be a named color, this can be an RGB code, or even a hex code, I'm going

21631.64 -> to go ahead and just choose a darkish blue, I think that will fit in really well with

21637.01 -> the page. And in fact, you know what, let's not, let's not use the color picker, let's

21642.59 -> just use our RGB color skills. And take the color of the background, which is here. So

21646.365 -> we're going to take those four. And I'm going to go back to our image here and paste it

21658.542 -> in. And now what I'm going to do is just darken everything. And if you remember, the darker

21663.442 -> it gets the higher oak sorry, the lower all of these values get. So I'm just going to

21668 -> lower them all by about 50. So here, I'm just going to go 154. Now, again, this doesn't

21673.202 -> have to be exact, or anything you can, you can put really, whatever you want here, but

21678.112 -> I'm just trying to darken everything, I'm just gonna make this 200. Let's go ahead and

21680.872 -> refresh the page and see how our border looks. Now. Let's scroll down. So there's the problem,

21689.39 -> we actually forgot a semicolon here on the end of the background. So that's one thing

21693.362 -> you need to keep in mind. There we go. Now it's working. And you can see and I did actually

21699.06 -> change the color there just to test it out. And you can see, there we go, we have our

21705.56 -> background. So obviously, it's pretty obvious here with our bright red color there. But

21710 -> what I'm actually going to do is go ahead and just play around with some of these and

21717.35 -> see if we can change the features. So first thing I'm going to do is go ahead and change

21729.452 -> the height. So I'm going to go ahead and set it as 10 pixels. For example, you can see

21736.872 -> that they open up the height sorry, the size, you can see that that gets a lot thicker,

21740.872 -> so you can change it depending on how you want your border to look like. So now let's

21745.862 -> go ahead and change the style. So let's go ahead and try out some of these other styles.

21749.432 -> So first, I'm going to try dotted. So you can see now we have a dotted border. Now let's

21757.39 -> go ahead and try dashed.

21758.77 -> And you're kind of getting the idea of how this works. Let's see doubled, I think or

21763.38 -> double actually, I think that's probably the best other than solid. Yeah, you can see that

21769.292 -> that looks pretty nice. Here, we have that double border. It's pretty useful in styling,

21775.51 -> but it's not really used very commonly. So the last thing I want to go ahead and change

21782.67 -> is the color. So I'm going to go ahead and just take a color from the color picker, I

21790.262 -> don't really feel like going through the whole RGB process again, let's go ahead and just

21795.042 -> take this color, it's quite dark. Let's go ahead and refresh our page and see what it

21796.63 -> looks like. And now you can see the color has changed. So you can see the borders are

21801.46 -> not only useful for just changing the style of this of an image or a box or any box in

21807.202 -> that for that matter. They're also useful for showing how the box model works. So I'm

21811.702 -> going to go ahead and change this back to solid so you can get a better view. So if

21817 -> you remember in the last video we talked about the different layers of the wall model, and

21823.032 -> we remembered that the padding was used to separate or create spacing between the content

21829.3 -> and the border. In this case, you can see that the border and the content are directly

21841.352 -> touching, which means there is pretty much no padding at all, because there's no space

21847.6 -> in between them. On top of that, you can see that this border is also touching also elements

21853.41 -> on the page or other elements on the page. So like, for example, this table, there's

21859.9 -> a little bit of space between the header and the image. But that's due to other margins.

21866.942 -> We'll talk about that when we get later in this section. And so you can see that this

21871.41 -> doesn't have much margin either. So you can start to see here how this whole box model

21875.98 -> comes together and how you can see what's going on. So yeah, that's a pretty useful

21879.55 -> way to kind of look at the box model and see how everything comes together. In the next

21884.192 -> few videos, we're going to be looking at the other layers of the box model. And then we're

21888.38 -> going to bring it all together and start really changing up this the way this website looks.

21893.162 -> Alright, let's move on.

21894.692 -> And you're kind of getting the idea of how this works. Let's see doubled, I think or

21901.202 -> double actually, I think that's probably the best other than solid. Yeah, you can see that

21907.332 -> that looks pretty nice. Here, we have that double border. It's pretty useful in styling,

21913.072 -> but it's not really used very commonly. So the last thing I want to go ahead and change

21920.442 -> is the color. So I'm going to go ahead and just take a color from the color picker, I

21925.3 -> don't really feel like going through the whole RGB process again, let's go ahead and just

21931.692 -> take this color, it's quite dark. Let's go ahead and refresh our page and see what it

21942.73 -> looks like. And now you can see the color has changed. So you can see the borders are

21947.75 -> not only useful for just changing the style of this of an image or a box or any box in

21953.741 -> that for that matter. They're also useful for showing how the box model works. So I'm

21959.98 -> going to go ahead and change this back to solid so you can get a better view. So if

21965.442 -> you remember in the last video we talked about the different layers of the wall model, and

21970.9 -> we remembered that the padding was used to separate or create spacing between the content

21975.56 -> and the border. In this case, you can see that the border and the content are directly

21978.592 -> touching, which means there is pretty much no padding at all, because there's no space

21981.692 -> in between them. On top of that, you can see that this border is also touching also elements

21986.032 -> on the page or other elements on the page. So like, for example, this table, there's

21991.39 -> a little bit of space between the header and the image. But that's due to other margins.

21996.422 -> We'll talk about that when we get later in this section. And so you can see that this

22000.47 -> doesn't have much margin either. So you can start to see here how this whole box model

22003.97 -> comes together and how you can see what's going on. So yeah, that's a pretty useful

22012.002 -> way to kind of look at the box model and see how everything comes together. In the next

22021.432 -> few videos, we're going to be looking at the other layers of the box model. And then we're

22028.262 -> going to bring it all together and start really changing up this the way this website looks.

22033 -> Alright, let's move on.

22034.702 -> So in this video, we're going to be moving on to the next two main layers of our box

22039.5 -> model. And in this video, we're going to be talking about margin and padding. So you kind

22043.542 -> of already have an idea of what these two are, we've talked about them. In the first

22046.792 -> video, we've talked about what they do, we haven't actually talked about how to manipulate

22051.5 -> them. So in this video, what I'm going to be doing, what I'm going to be doing is going

22059.32 -> through and working with these two properties to actually manipulate our layout. And that's

22063.282 -> when the real power of the box model shows. So let's go ahead and get started. The first

22066.57 -> thing I want to do is go ahead and choose the right thing to manipulate. And in this

22069.672 -> case, the best thing to work with is an image right here, because it's very easy to see

22073.92 -> and see the changes when you when you do these margin padding changes. And it's also very

22080.71 -> useful to have a border here, which I added, you can really see the difference between

22087.752 -> margin and padding and see which one is responsible for what. So let's get started. Now similar

22092.782 -> to the rest of the properties, the naming is pretty straightforward. In this case, we're

22098.532 -> going to go ahead and use the shorthand margin property. But I'm also going to be showing

22102.952 -> you a few other ways, which I didn't show you with the border. Because these are a little

22105.89 -> bit easier. And they're kind of hard to understand if you just use the shorthand property, so

22110.032 -> I'm going to be just building it from the ground up. So the first property I'm going

22115.112 -> to look at is, of course, the shorthand margin property, and how to add margin and padding

22122.82 -> to all sides at the same time. So in case you didn't know, this is called top, this

22129.1 -> is called bottom, this is left and this is right. But I'm sure you know that especially

22133.22 -> with working with multiple backgrounds, things like that. And pretty much the same throughout

22135.76 -> all of CSS. So let's get started. So the first thing I'm going to do is go ahead and find

22139.16 -> my image. And then I'm going to choose which box model layer I want to manipulate. I'm

22146.9 -> going to go ahead and work with padding first, because it's a little bit easier to understand.

22154.702 -> And we're going to go and work with margin. So we're just going to type out cutting here.

22159.202 -> And now what we're going to do is go and start adding whatever we want. So remember, if you

22166.07 -> add just one value, it's going to add it the same value to all sides. So I'm going to say

22170.782 -> for example, right now 20 pixels. Now if I go ahead and refresh the page, you can see

22178.73 -> that there is 20 pixels of space in between all sides of our image. So you can see 20

22184.89 -> pixels on the left on the right on the top and on the bottom. So you can see what's going

22192.22 -> on here with our padding free increase this value, for example, it's going to it's going

22196.4 -> to almost double and now we have 40 pixels on each side. So that's just a little bit

22200.992 -> of information about padding, you can see the spacing between the content, and the border

22205.56 -> is getting a lot bigger. Now let's go ahead and change this to margin and see what happens.

22214.96 -> So I'm actually just going to completely remove this and refresh the page. So now let's go

22218.412 -> ahead and add our 40 pixel margin, we'll just say for now, so you can really see the difference.

22226.07 -> So now you can see that the content or the space between the content and the border is

22233.91 -> still the same. There's no spacing at all. But you can see that everything around it

22240.352 -> has kind of been pushed down. And remember, it's adding margin to all sides, there's 40

22245.88 -> pixels between the border and the left side of the page, the border and the top side,

22250.73 -> the border on the right and the border and the bottom. So you can see that margin is

22253.21 -> moving the image itself around the page, whereas the padding is just adding space inside the

22258.96 -> image. So now let's go ahead and talk about some of the more specific properties in case

22265.89 -> you wanted to maybe style specific sides. So I'm going to go ahead and change this back

22271.772 -> to padding, just like this. And now we can go ahead and see our differences a lot more

22273.792 -> clear. So what you can actually do is add a dash and then the name of the side to it.

22281.112 -> To actually specify which side you want the padding to be added to. So let's just say

22282.112 -> I wanted to add it to the right side. Now if I refresh the page, you can see that all

22290.831 -> of this still stays the same. But on the right side, there is 40 pixels of padding. You can

22293.32 -> do this with as many as you want. So you can go padding top, for example. And I want 100

22300.24 -> pixels on the top, and let's just say on the bottom. And remember, always with the dash,

22304.622 -> I just want only five pixels. Now if we go ahead and refresh the page, you can see it

22309.682 -> looks quite unbalanced, but you have 100 pixels on the top, we have 40 pixels on the right

22315.272 -> and five on the bottom. Now obviously, this gets a little bit tedious after a while, after

22319.832 -> you keep you know doing padding right top bottom left, top right, top right, bottom

22323.14 -> left, and it gets quite irritating after a while. So what I'm going to do is show you

22326.64 -> a really cool shorthand that you can use to style them all at the same time. So we're

22331.99 -> going to go back to using our shorthand property.

22333.74 -> So in this video, we're going to be moving on to the next two main layers of our box

22338.82 -> model. And in this video, we're going to be talking about margin and padding. So you kind

22343.272 -> of already have an idea of what these two are, we've talked about them. In the first

22348.71 -> video, we've talked about what they do, we haven't actually talked about how to manipulate

22353.5 -> them. So in this video, what I'm going to be doing, what I'm going to be doing is going

22359.672 -> through and working with these two properties to actually manipulate our layout. And that's

22363.282 -> when the real power of the box model shows. So let's go ahead and get started. The first

22366.52 -> thing I want to do is go ahead and choose the right thing to manipulate. And in this

22370.582 -> case, the best thing to work with is an image right here, because it's very easy to see

22376.912 -> and see the changes when you when you do these margin padding changes. And it's also very

22382.33 -> useful to have a border here, which I added, you can really see the difference between

22385.09 -> margin and padding and see which one is responsible for what. So let's get started. Now similar

22391.292 -> to the rest of the properties, the naming is pretty straightforward. In this case, we're

22395.85 -> going to go ahead and use the shorthand margin property. But I'm also going to be showing

22399.73 -> you a few other ways, which I didn't show you with the border. Because these are a little

22404.93 -> bit easier. And they're kind of hard to understand if you just use the shorthand property, so

22409.26 -> I'm going to be just building it from the ground up. So the first property I'm going

22413.992 -> to look at is, of course, the shorthand margin property, and how to add margin and padding

22418.72 -> to all sides at the same time. So in case you didn't know, this is called top, this

22421.63 -> is called bottom, this is left and this is right. But I'm sure you know that especially

22425.74 -> with working with multiple backgrounds, things like that. And pretty much the same throughout

22433.952 -> all of CSS. So let's get started. So the first thing I'm going to do is go ahead and find

22441.31 -> my image. And then I'm going to choose which box model layer I want to manipulate. I'm

22445.73 -> going to go ahead and work with padding first, because it's a little bit easier to understand.

22449.73 -> And we're going to go and work with margin. So we're just going to type out cutting here.

22455.81 -> And now what we're going to do is go and start adding whatever we want. So remember, if you

22461.612 -> add just one value, it's going to add it the same value to all sides. So I'm going to say

22474.51 -> for example, right now 20 pixels. Now if I go ahead and refresh the page, you can see

22484.17 -> that there is 20 pixels of space in between all sides of our image. So you can see 20

22489.15 -> pixels on the left on the right on the top and on the bottom. So you can see what's going

22496.51 -> on here with our padding free increase this value, for example, it's going to it's going

22504.38 -> to almost double and now we have 40 pixels on each side. So that's just a little bit

22510.19 -> of information about padding, you can see the spacing between the content, and the border

22513.71 -> is getting a lot bigger. Now let's go ahead and change this to margin and see what happens.

22518.91 -> So I'm actually just going to completely remove this and refresh the page. So now let's go

22523.74 -> ahead and add our 40 pixel margin, we'll just say for now, so you can really see the difference.

22528.75 -> So now you can see that the content or the space between the content and the border is

22535.692 -> still the same. There's no spacing at all. But you can see that everything around it

22540.452 -> has kind of been pushed down. And remember, it's adding margin to all sides, there's 40

22545.512 -> pixels between the border and the left side of the page, the border and the top side,

22552.112 -> the border on the right and the border and the bottom. So you can see that margin is

22557.55 -> moving the image itself around the page, whereas the padding is just adding space inside the

22562.422 -> image. So now let's go ahead and talk about some of the more specific properties in case

22566.292 -> you wanted to maybe style specific sides. So I'm going to go ahead and change this back

22568.672 -> to padding, just like this. And now we can go ahead and see our differences a lot more

22572.182 -> clear. So what you can actually do is add a dash and then the name of the side to it.

22575.68 -> To actually specify which side you want the padding to be added to. So let's just say

22579.76 -> I wanted to add it to the right side. Now if I refresh the page, you can see that all

22583.65 -> of this still stays the same. But on the right side, there is 40 pixels of padding. You can

22586.72 -> do this with as many as you want. So you can go padding top, for example. And I want 100

22590.57 -> pixels on the top, and let's just say on the bottom. And remember, always with the dash,

22592.51 -> I just want only five pixels. Now if we go ahead and refresh the page, you can see it

22595.24 -> looks quite unbalanced, but you have 100 pixels on the top, we have 40 pixels on the right

22597.14 -> and five on the bottom. Now obviously, this gets a little bit tedious after a while, after

22598.92 -> you keep you know doing padding right top bottom left, top right, top right, bottom

22599.92 -> left, and it gets quite irritating after a while. So what I'm going to do is show you

22601.872 -> a really cool shorthand that you can use to style them all at the same time. So we're

22603.952 -> going to go back to using our shorthand property.

22606.83 -> And now we're going to go ahead and add four values separated by spaces, but it's a little

22609.31 -> bit confusing at first, okay, so just bear with me. Now, what I'm going to do is for

22610.31 -> the left, I don't want anything. So let's just start from the start from the top. So

22613.292 -> on the top, I want 100 pixels, like that. On the right, I want 40 pixels. On the left,

22614.292 -> I don't want anything, so I'm just going to say zero. Now, you could say zero pixels.

22615.292 -> But in this case, we don't want anything at all. So it doesn't really matter which one

22616.692 -> you choose, I just prefer to put a zero there. And then of course, on the right, or sorry,

22619.282 -> on the bottom, we want five pixels. Now let's go ahead and refresh and see what happens.

22620.68 -> It stays pretty much it looks must have confused, confused, something over there. So 100. On

22625.68 -> the top, we have 40 on the right, and on the bottom of the so there's the problem. On the

22628.792 -> bottom, we want five pixels, and on the left, we want zero. So you can see it gets quite

22634.06 -> confusing after some time. So you can see that now it's exactly the same. So here's

22638.282 -> what you have to kind of remember, the first one is the top, the second is the right, then

22642.92 -> the bottom and left. So an easy way to remember this is by looking at the pieces of the border,

22648.782 -> if you draw a diagonal line straight in half, you style the top on the right first, and

22653.692 -> then the bottom on the left. So just keep that in mind and you'll be fine. So if you

22657.21 -> if you ever forget, you can always go and check online, there's a lot of references

22659.31 -> talking about these different values here. And I'm actually just going to go ahead and

22661.032 -> change it to margin for a second. So you can see what's going on. Now you can see if I

22665.692 -> change the margin, actually, it stays in the same position. But instead of adding internal

22668.99 -> space, it's adding external space. So that's just one thing to keep in mind. But like I

22673.31 -> said, if you want to go ahead and review this, you can always find some resources online,

22676.532 -> there's a lot going on there. Now let's talk about shortening this into actually only two

22678.112 -> sections, because let's just say on the top and bottom, you want a certain margin, but

22680.772 -> then on the left hand, right you want another this is a pretty common thing that you you're

22682.23 -> going to want to do in CSS. So I'm going to show you how to do that, all you have to do

22683.23 -> is go ahead and shorten it to two values, I'm actually going to go ahead Yeah, I'll

22684.23 -> go with margin. The first two values are going to be for the top and bottom at the same time.

22685.23 -> So I'm going to go ahead and add 80 pixels of padding, Oh, whoops, 80 pixels. There we

22686.23 -> go. And now for ourselves whoops, now for our second value, it's going to be our left

22687.23 -> and right values at the same time. So I'm going to go ahead and add 40 pixels doesn't

22688.23 -> matter the order, because this is always going to be for the top and bottom, this is always

22689.23 -> going to be 40, left and right. So just make sure that they are equal. So let's go ahead

22690.23 -> and refresh. And now you can see the left and right have kind of stayed a little bit

22691.23 -> shorter. Whereas the top and bottom are very the margin is very big. As you can see here,

22692.23 -> the top and bottom is double the left and right. So that's a nice shorthand that you

22693.23 -> can use to style to different or Well, two different sides. So for example, now, if you

22694.23 -> split, if you can just take this part and this part style, the style and at the same

22695.23 -> time, and then you take the left and right and do the same thing with them. So I know

22696.23 -> that's a lot to take in. And there's a lot of different ways. But just remember, if you

22697.23 -> ever get confused, you can either use the internet, or just use margin dash and then

22698.23 -> the position. But other than that, all you need to know for now is the concept. You just

22699.23 -> need to know how margin and padding work and how you can actually manipulate them what

22700.23 -> they do. I mean, what do you do when you say the margin left is 10 pixels. So just make

22701.23 -> sure that you know that, you know when you add a certain space to a position, you're

22702.23 -> basically changing the spacing between something and another thing based on what whichever

22703.23 -> layer you chose. So for example, if you chose padding, you're going to be changing the spacing

22704.23 -> between the content and the border. So that's pretty much it for margin and padding. Now

22705.23 -> we're going to get a lot more experience with this as we go through the course and style

22706.23 -> more things. But for now, just make sure you know how to use the shorthand properties,

22707.23 -> you know how to use all these different shortcuts. Now you don't need to memorize them, you just

22708.23 -> need to know kind of how they work. Obviously, memorizing them is good. But if you, if you

22709.23 -> forget them, don't worry too much about that. Just make sure you know how to use these properly.

22710.23 -> And that's pretty much it. Let's move on.

22711.23 -> And now we're going to go ahead and add four values separated by spaces, but it's a little

22712.23 -> bit confusing at first, okay, so just bear with me. Now, what I'm going to do is for

22713.23 -> the left, I don't want anything. So let's just start from the start from the top. So

22714.23 -> on the top, I want 100 pixels, like that. On the right, I want 40 pixels. On the left,

22715.23 -> I don't want anything, so I'm just going to say zero. Now, you could say zero pixels.

22716.23 -> But in this case, we don't want anything at all. So it doesn't really matter which one

22717.23 -> you choose, I just prefer to put a zero there. And then of course, on the right, or sorry,

22718.23 -> on the bottom, we want five pixels. Now let's go ahead and refresh and see what happens.

22719.23 -> It stays pretty much it looks must have confused, confused, something over there. So 100. On

22720.23 -> the top, we have 40 on the right, and on the bottom of the so there's the problem. On the

22721.23 -> bottom, we want five pixels, and on the left, we want zero. So you can see it gets quite

22722.23 -> confusing after some time. So you can see that now it's exactly the same. So here's

22723.23 -> what you have to kind of remember, the first one is the top, the second is the right, then

22724.23 -> the bottom and left. So an easy way to remember this is by looking at the pieces of the border,

22725.23 -> if you draw a diagonal line straight in half, you style the top on the right first, and

22726.23 -> then the bottom on the left. So just keep that in mind and you'll be fine. So if you

22727.23 -> if you ever forget, you can always go and check online, there's a lot of references

22728.23 -> talking about these different values here. And I'm actually just going to go ahead and

22729.23 -> change it to margin for a second. So you can see what's going on. Now you can see if I

22730.23 -> change the margin, actually, it stays in the same position. But instead of adding internal

22731.23 -> space, it's adding external space. So that's just one thing to keep in mind. But like I

22732.23 -> said, if you want to go ahead and review this, you can always find some resources online,

22733.23 -> there's a lot going on there. Now let's talk about shortening this into actually only two

22734.23 -> sections, because let's just say on the top and bottom, you want a certain margin, but

22735.23 -> then on the left hand, right you want another this is a pretty common thing that you you're

22736.23 -> going to want to do in CSS. So I'm going to show you how to do that, all you have to do

22737.23 -> is go ahead and shorten it to two values, I'm actually going to go ahead Yeah, I'll

22738.23 -> go with margin. The first two values are going to be for the top and bottom at the same time.

22739.23 -> So I'm going to go ahead and add 80 pixels of padding, Oh, whoops, 80 pixels. There we

22740.23 -> go. And now for ourselves whoops, now for our second value, it's going to be our left

22741.23 -> and right values at the same time. So I'm going to go ahead and add 40 pixels doesn't

22742.23 -> matter the order, because this is always going to be for the top and bottom, this is always

22743.23 -> going to be 40, left and right. So just make sure that they are equal. So let's go ahead

22744.23 -> and refresh. And now you can see the left and right have kind of stayed a little bit

22745.23 -> shorter. Whereas the top and bottom are very the margin is very big. As you can see here,

22746.23 -> the top and bottom is double the left and right. So that's a nice shorthand that you

22747.23 -> can use to style to different or Well, two different sides. So for example, now, if you

22748.23 -> split, if you can just take this part and this part style, the style and at the same

22749.23 -> time, and then you take the left and right and do the same thing with them. So I know

22750.23 -> that's a lot to take in. And there's a lot of different ways. But just remember, if you

22751.23 -> ever get confused, you can either use the internet, or just use margin dash and then

22752.23 -> the position. But other than that, all you need to know for now is the concept. You just

22753.23 -> need to know how margin and padding work and how you can actually manipulate them what

22754.23 -> they do. I mean, what do you do when you say the margin left is 10 pixels. So just make

22755.23 -> sure that you know that, you know when you add a certain space to a position, you're

22756.23 -> basically changing the spacing between something and another thing based on what whichever

22757.23 -> layer you chose. So for example, if you chose padding, you're going to be changing the spacing

22758.23 -> between the content and the border. So that's pretty much it for margin and padding. Now

22759.23 -> we're going to get a lot more experience with this as we go through the course and style

22760.23 -> more things. But for now, just make sure you know how to use the shorthand properties,

22761.23 -> you know how to use all these different shortcuts. Now you don't need to memorize them, you just

22762.23 -> need to know kind of how they work. Obviously, memorizing them is good. But if you, if you

22763.23 -> forget them, don't worry too much about that. Just make sure you know how to use these properly.

22764.23 -> And that's pretty much it. Let's move on.

22765.23 -> So this is a pretty important video, because we're talking about a concept that is going

22766.23 -> to be used constantly in the next few sections. And it's a very, very important part of CSS,

22767.23 -> and kind of defines the way that you look at documents. So the two properties that we're

22768.23 -> going to be looking at are float, which is the less important one and display, which

22769.23 -> is the very important properties that we need to learn. So let's cover float first, because

22770.23 -> it's an easier thing to approach. But before we start for both of these elements, you need

22771.23 -> to understand the concept of inline and block level elements. So first of all elements have

22772.23 -> a certain display type, which we're going to be manipulating in the next property. This

22773.23 -> display type pretty much defines the behavior of the elements. So there are two main display

22774.23 -> types block and inline. So pretty much if we look at our HTML document, here we go through

22775.23 -> and you can see all of these tags, creating these tags create a sort of a sort of display

22776.23 -> behavior for the content inside them. So the block level element, what it basically does

22777.23 -> is move moves everything onto its own section, its own while block. So an example of one

22778.23 -> of these elements would be a p tag, you can see that if this was an inline element would

22779.23 -> be flowing with the rest of the things. But you can see here, despite the margin, this

22780.23 -> is moved on to its own section, it's not playing or moving after the image, it's moved on to

22781.23 -> its own section, and everything after it comes after Well, the block. On the other hand,

22782.23 -> an inline element is something that won't really move anything onto its own section,

22783.23 -> it's going to keep it keep it intact, it's not going to move it or change it in any way,

22784.23 -> it's just going to leave it how it naturally occurs on the page. So an example, a very

22785.23 -> good example of one of these would be a span tag, because what a span tag pretty much does

22786.23 -> is it's used to contain some piece of content in an inline style. So for example, this italics

22787.23 -> class would be a perfect representation of an inline tag, what we're trying to do is

22788.23 -> I telesign, some text. And if the span was a block level element, this text here, this

22789.23 -> italic size, text would be moved on to its own section, so everything preceding it would

22790.23 -> come before it. And then there would be a new line with the text. And then after it

22791.23 -> would come the rest of the text. So you can see there that the inline and block level

22792.23 -> tags really make a difference depending on what you want to use it for. So what we're

22793.23 -> going to be doing in this video is going through and learning how to change the display type

22794.23 -> of these different elements. But first, let's talk about float. So again, these tags come

22795.23 -> with a natural display type and how they are placed on the page is how they naturally occur.

22796.23 -> But there's actually a way to change the way that they look. And this is done using float.

22797.23 -> So if you just listen to the name there, what element pretty much does is change how the

22798.23 -> element will float on the page. So I'll go ahead and do do some examples here. For example,

22799.23 -> let's just take this gradient here, this div. So I'm going to go and look for it the service

22800.23 -> image, I'm going to say set the float and I'm going to say it float to the right and

22801.23 -> watch what happens. You can see that now what happens is pretty much this just flows over

22802.23 -> to the right side of the page. And it also changes all the content after it. So you can

22803.23 -> see that this content here has now been pushed up. So this kind of shows how a little bit

22804.23 -> of how flow works. And this doesn't just have to be with images, we can do it with text

22805.23 -> as well. So if I go through and choose something like this element over here, this some link

22806.23 -> here, so I'm going to go ahead on this link. And I'm going to say it float to the right.

22807.23 -> Now let's go ahead and refresh the page. And you can see that that kind of flows over to

22808.23 -> the right and everything before it is now kind of pushed up where it was. So you can

22809.23 -> think of this as kind of a kind of a Tetris puzzle block. When you're moving something

22810.23 -> over, everything is going to be pushed up or moved around as well. So to fit the page

22811.23 -> so you can kind of think of it in that way. Now obviously, once you start getting some

22812.23 -> really a lot of experience with float, you can kind of predict where everything is going

22813.23 -> to move on the page. But floats are really useful for laying out documents. Especially

22814.23 -> if you want to kind of Have position images next to text or move things around in a way

22815.23 -> that looks more like a proper document. So I'm going to remove that float. And I'm just

22816.23 -> going to do it with our image over here, which with our image, our about us image. So I'm

22817.23 -> going to go ahead and say it floats over to the right.

22818.23 -> So this is a pretty important video, because we're talking about a concept that is going

22819.23 -> to be used constantly in the next few sections. And it's a very, very important part of CSS,

22820.23 -> and kind of defines the way that you look at documents. So the two properties that we're

22821.23 -> going to be looking at are float, which is the less important one and display, which

22822.23 -> is the very important properties that we need to learn. So let's cover float first, because

22823.23 -> it's an easier thing to approach. But before we start for both of these elements, you need

22824.23 -> to understand the concept of inline and block level elements. So first of all elements have

22825.23 -> a certain display type, which we're going to be manipulating in the next property. This

22826.23 -> display type pretty much defines the behavior of the elements. So there are two main display

22827.23 -> types block and inline. So pretty much if we look at our HTML document, here we go through

22828.23 -> and you can see all of these tags, creating these tags create a sort of a sort of display

22829.23 -> behavior for the content inside them. So the block level element, what it basically does

22830.23 -> is move moves everything onto its own section, its own while block. So an example of one

22831.23 -> of these elements would be a p tag, you can see that if this was an inline element would

22832.23 -> be flowing with the rest of the things. But you can see here, despite the margin, this

22833.23 -> is moved on to its own section, it's not playing or moving after the image, it's moved on to

22834.23 -> its own section, and everything after it comes after Well, the block. On the other hand,

22835.23 -> an inline element is something that won't really move anything onto its own section,

22836.23 -> it's going to keep it keep it intact, it's not going to move it or change it in any way,

22837.23 -> it's just going to leave it how it naturally occurs on the page. So an example, a very

22838.23 -> good example of one of these would be a span tag, because what a span tag pretty much does

22839.23 -> is it's used to contain some piece of content in an inline style. So for example, this italics

22840.23 -> class would be a perfect representation of an inline tag, what we're trying to do is

22841.23 -> I telesign, some text. And if the span was a block level element, this text here, this

22842.23 -> italic size, text would be moved on to its own section, so everything preceding it would

22843.23 -> come before it. And then there would be a new line with the text. And then after it

22844.23 -> would come the rest of the text. So you can see there that the inline and block level

22845.23 -> tags really make a difference depending on what you want to use it for. So what we're

22846.23 -> going to be doing in this video is going through and learning how to change the display type

22847.23 -> of these different elements. But first, let's talk about float. So again, these tags come

22848.23 -> with a natural display type and how they are placed on the page is how they naturally occur.

22849.23 -> But there's actually a way to change the way that they look. And this is done using float.

22850.23 -> So if you just listen to the name there, what element pretty much does is change how the

22851.23 -> element will float on the page. So I'll go ahead and do do some examples here. For example,

22852.23 -> let's just take this gradient here, this div. So I'm going to go and look for it the service

22853.23 -> image, I'm going to say set the float and I'm going to say it float to the right and

22854.23 -> watch what happens. You can see that now what happens is pretty much this just flows over

22855.23 -> to the right side of the page. And it also changes all the content after it. So you can

22856.23 -> see that this content here has now been pushed up. So this kind of shows how a little bit

22857.23 -> of how flow works. And this doesn't just have to be with images, we can do it with text

22858.23 -> as well. So if I go through and choose something like this element over here, this some link

22859.23 -> here, so I'm going to go ahead on this link. And I'm going to say it float to the right.

22860.23 -> Now let's go ahead and refresh the page. And you can see that that kind of flows over to

22861.23 -> the right and everything before it is now kind of pushed up where it was. So you can

22862.23 -> think of this as kind of a kind of a Tetris puzzle block. When you're moving something

22863.23 -> over, everything is going to be pushed up or moved around as well. So to fit the page

22864.23 -> so you can kind of think of it in that way. Now obviously, once you start getting some

22865.23 -> really a lot of experience with float, you can kind of predict where everything is going

22866.23 -> to move on the page. But floats are really useful for laying out documents. Especially

22867.23 -> if you want to kind of Have position images next to text or move things around in a way

22868.23 -> that looks more like a proper document. So I'm going to remove that float. And I'm just

22869.23 -> going to do it with our image over here, which with our image, our about us image. So I'm

22870.23 -> going to go ahead and say it floats over to the right.

22871.23 -> See that. So now you can see that it floats over to the right. And now everything before

22872.23 -> it has kind of been pushed up onto this section here. So there we go. Now it's working, and

22873.23 -> everything is looking great. Now let's look at the next property, which is display. So

22874.23 -> display is pretty much a way of changing the display property of an element that it naturally

22875.23 -> comes with. So of course, we know things like a div or a paragraph tag come as a block level

22876.23 -> element, whereas something like a span or a bolding tag would come as an inline element.

22877.23 -> So what we're going to be doing is going through and changing these properties. Now, I didn't

22878.23 -> actually cover the properties of float, which I'm going to go over in just a second. But

22879.23 -> what I'm going to talk about is the different properties of display. So of course, you have

22880.23 -> the standard inline and block, which is pretty obvious, but then you have a few others. So

22881.23 -> the one that I'm going to be covering here is none now. So what the display none property

22882.23 -> does is pretty much just completely, almost remove the element from the page. Now it doesn't

22883.23 -> actually remove it. But what happens is the entire that invisible box that contains everything

22884.23 -> just suddenly disappears, you can't see it anymore, it doesn't take up any space. It's

22885.23 -> just completely gone from the page. So I'm going to show you what that looks like right

22886.23 -> now. Let's go ahead. And for example, let's just say that this table is kind of annoying,

22887.23 -> we don't really want it here. So what I'm going to do over here in my table is given

22888.23 -> a class of site table. Now I'm going to go ahead and select it here, dot site dash table,

22889.23 -> and I'm going to say display is none. Now watch what happens, you can see that that

22890.23 -> table completely disappears. And it doesn't even take up the space anymore. It's not like

22891.23 -> the table. It's just invisible or not, not what not visible, but it's completely gone.

22892.23 -> Now, this is very, very commonly used once you start using JavaScript. And would you

22893.23 -> start making your site's interactive to maybe create web games or hide something, maybe

22894.23 -> create some sort of hidden token, it can be used for all sorts of things. So this is a

22895.23 -> very useful display property. So I'm going to go ahead and remove that. Now the next

22896.23 -> one I want to talk about, I'm actually going to, I'll just keep it there, if we decide

22897.23 -> to use it later. The next one I'm going to talk about is inline block. So we know that

22898.23 -> we have two different display types, inline, and block. But there's actually a combination

22899.23 -> of the two, which is a little bit hard to understand. But once we start using it, you

22900.23 -> can see how useful it is. So inline block is a little bit Well, like I said, it's a

22901.23 -> little bit hard to understand. But pretty much what it does is take features from both

22902.23 -> inline and block level elements and combines them together. So we know that inline elements

22903.23 -> do not move anything onto their own line, we know that they stay in their place, they

22904.23 -> don't touch anything or move anything around. Whereas block level elements, move them onto

22905.23 -> the new line. Now, what happens is that in light, or this inline block element takes

22906.23 -> that new sticks that sort of new line feature and removes it completely, it does not move

22907.23 -> anything onto its own new line. But what the block level elements do is they actually create

22908.23 -> some spacing around the element once it's moved on to its new block. So the inline block

22909.23 -> element then takes this and puts it into itself. So the inline block element pretty much keeps

22910.23 -> everything in the same line, but creates that block level spacing that can be found in other

22911.23 -> block level elements. So let's go through and actually demonstrate how this works. I'm

22912.23 -> going to go back to my table and add our inline block display property here, inline block.

22913.23 -> See that. So now you can see that it floats over to the right. And now everything before

22914.23 -> it has kind of been pushed up onto this section here. So there we go. Now it's working, and

22915.23 -> everything is looking great. Now let's look at the next property, which is display. So

22916.23 -> display is pretty much a way of changing the display property of an element that it naturally

22917.23 -> comes with. So of course, we know things like a div or a paragraph tag come as a block level

22918.23 -> element, whereas something like a span or a bolding tag would come as an inline element.

22919.23 -> So what we're going to be doing is going through and changing these properties. Now, I didn't

22920.23 -> actually cover the properties of float, which I'm going to go over in just a second. But

22921.23 -> what I'm going to talk about is the different properties of display. So of course, you have

22922.23 -> the standard inline and block, which is pretty obvious, but then you have a few others. So

22923.23 -> the one that I'm going to be covering here is none now. So what the display none property

22924.23 -> does is pretty much just completely, almost remove the element from the page. Now it doesn't

22925.23 -> actually remove it. But what happens is the entire that invisible box that contains everything

22926.23 -> just suddenly disappears, you can't see it anymore, it doesn't take up any space. It's

22927.23 -> just completely gone from the page. So I'm going to show you what that looks like right

22928.23 -> now. Let's go ahead. And for example, let's just say that this table is kind of annoying,

22929.23 -> we don't really want it here. So what I'm going to do over here in my table is given

22930.23 -> a class of site table. Now I'm going to go ahead and select it here, dot site dash table,

22931.23 -> and I'm going to say display is none. Now watch what happens, you can see that that

22932.23 -> table completely disappears. And it doesn't even take up the space anymore. It's not like

22933.23 -> the table. It's just invisible or not, not what not visible, but it's completely gone.

22934.23 -> Now, this is very, very commonly used once you start using JavaScript. And would you

22935.23 -> start making your site's interactive to maybe create web games or hide something, maybe

22936.23 -> create some sort of hidden token, it can be used for all sorts of things. So this is a

22937.23 -> very useful display property. So I'm going to go ahead and remove that. Now the next

22938.23 -> one I want to talk about, I'm actually going to, I'll just keep it there, if we decide

22939.23 -> to use it later. The next one I'm going to talk about is inline block. So we know that

22940.23 -> we have two different display types, inline, and block. But there's actually a combination

22941.23 -> of the two, which is a little bit hard to understand. But once we start using it, you

22942.23 -> can see how useful it is. So inline block is a little bit Well, like I said, it's a

22943.23 -> little bit hard to understand. But pretty much what it does is take features from both

22944.23 -> inline and block level elements and combines them together. So we know that inline elements

22945.23 -> do not move anything onto their own line, we know that they stay in their place, they

22946.23 -> don't touch anything or move anything around. Whereas block level elements, move them onto

22947.23 -> the new line. Now, what happens is that in light, or this inline block element takes

22948.23 -> that new sticks that sort of new line feature and removes it completely, it does not move

22949.23 -> anything onto its own new line. But what the block level elements do is they actually create

22950.23 -> some spacing around the element once it's moved on to its new block. So the inline block

22951.23 -> element then takes this and puts it into itself. So the inline block element pretty much keeps

22952.23 -> everything in the same line, but creates that block level spacing that can be found in other

22953.23 -> block level elements. So let's go through and actually demonstrate how this works. I'm

22954.23 -> going to go back to my table and add our inline block display property here, inline block.

22955.23 -> Now I'm going to go ahead and refresh the page and see what happens. So you can see

22956.23 -> that it's kind of kept on the same line. But it's given that sort of spacing or well block

22957.23 -> level spacing that you can't really find with a normal inline element. If I actually go

22958.23 -> ahead and change this to inline here, you'll see this very apparent, you can see that that

22959.23 -> click here to Google text has now moved around. It's a little bit of a weird box here. So

22960.23 -> you can see the difference between an inline element and an inline block element. So there

22961.23 -> you go. inline block is a very useful display property. You can use it a lot in your website

22962.23 -> to maybe layout grids, and all sorts of things like that. And we're actually going to be

22963.23 -> using some very special display properties later in this course called flex and grid,

22964.23 -> which are really going to help us create these beautiful grids and layouts that can transform

22965.23 -> our website. Everywhere. So that's pretty much it for display. Now let's go on to talk

22966.23 -> about some of the other float properties, because I kind of wanted to save it for last.

22967.23 -> So we already know that there are two main float properties, which are left and right.

22968.23 -> But there's actually a few more that we can use that are sort of different. And they're

22969.23 -> not very conventional, but they're still apparent. And they can well change the way that while

22970.23 -> a palette, an element floats on the page. So the first one is the most interesting one

22971.23 -> is the one that is, well, the only real floating element, which is called inherit. So you can

22972.23 -> see here that we have Child Elements and parent elements. Now, what's really interesting is,

22973.23 -> what can happen is if we have, let's say, a div with an h2 and an image in it, what

22974.23 -> we can do is pretty much set the divs float as right. And we can set the one of the child

22975.23 -> elements such as the h2, we can set its float as inherit, what's going to happen is it's

22976.23 -> going to take the float property of the parent element. Now, you're probably asking why this

22977.23 -> would be useful at hoc at all? Well, pretty much, what you can do is you can actually

22978.23 -> lay out multiple elements without having to specify their float as long as their children

22979.23 -> and parents. So for example, if you have an element that's maybe four or five levels deep,

22980.23 -> and you don't want to specify the float every time, you can just use an inherit element

22981.23 -> to move everything to the right side, with only specifying the float once to the last

22982.23 -> value I want to talk about is the is the non value. So this is kind of the default value

22983.23 -> that you're going to see if you don't specify anything. And it's pretty much just going

22984.23 -> to keep the item in its place. It's not going to change its float or display, and it's pretty

22985.23 -> much not going to move it around at all. It's not the same as display none, though, it doesn't

22986.23 -> really remove anything, what float none pretty much does, it's just leaves it where it naturally

22987.23 -> occurs in the text. So for example, if you have a block level, div tag, and you've set

22988.23 -> its float to none, then it's just going to appear as a block level elements is not going

22989.23 -> to move around or do anything similar. So there you go. That's pretty much it for floats,

22990.23 -> and displays. We're going to be working with these a lot throughout the rest of this course.

22991.23 -> And they're very important property. So I recommend you get some practice with them,

22992.23 -> and start using them. So you can see all of the different ways that you can use the display

22993.23 -> and flow properties in your website. Now, apart from the box model, and a few other

22994.23 -> ways displays and floats are a very common way or at least a word of manipulating your

22995.23 -> website and making it look really good. So without it, the website is just kind of everywhere,

22996.23 -> all the elements are scattered around. But if you want to really make the website, look

22997.23 -> how you want it to look, you need to use this in combination with a few other features that

22998.23 -> we are going to learn in the future in order to make your website look great. Alright,

22999.23 -> let's move on.

23000.23 -> Now I'm going to go ahead and refresh the page and see what happens. So you can see

23001.23 -> that it's kind of kept on the same line. But it's given that sort of spacing or well block

23002.23 -> level spacing that you can't really find with a normal inline element. If I actually go

23003.23 -> ahead and change this to inline here, you'll see this very apparent, you can see that that

23004.23 -> click here to Google text has now moved around. It's a little bit of a weird box here. So

23005.23 -> you can see the difference between an inline element and an inline block element. So there

23006.23 -> you go. inline block is a very useful display property. You can use it a lot in your website

23007.23 -> to maybe layout grids, and all sorts of things like that. And we're actually going to be

23008.23 -> using some very special display properties later in this course called flex and grid,

23009.23 -> which are really going to help us create these beautiful grids and layouts that can transform

23010.23 -> our website. Everywhere. So that's pretty much it for display. Now let's go on to talk

23011.23 -> about some of the other float properties, because I kind of wanted to save it for last.

23012.23 -> So we already know that there are two main float properties, which are left and right.

23013.23 -> But there's actually a few more that we can use that are sort of different. And they're

23014.23 -> not very conventional, but they're still apparent. And they can well change the way that while

23015.23 -> a palette, an element floats on the page. So the first one is the most interesting one

23016.23 -> is the one that is, well, the only real floating element, which is called inherit. So you can

23017.23 -> see here that we have Child Elements and parent elements. Now, what's really interesting is,

23018.23 -> what can happen is if we have, let's say, a div with an h2 and an image in it, what

23019.23 -> we can do is pretty much set the divs float as right. And we can set the one of the child

23020.23 -> elements such as the h2, we can set its float as inherit, what's going to happen is it's

23021.23 -> going to take the float property of the parent element. Now, you're probably asking why this

23022.23 -> would be useful at hoc at all? Well, pretty much, what you can do is you can actually

23023.23 -> lay out multiple elements without having to specify their float as long as their children

23024.23 -> and parents. So for example, if you have an element that's maybe four or five levels deep,

23025.23 -> and you don't want to specify the float every time, you can just use an inherit element

23026.23 -> to move everything to the right side, with only specifying the float once to the last

23027.23 -> value I want to talk about is the is the non value. So this is kind of the default value

23028.23 -> that you're going to see if you don't specify anything. And it's pretty much just going

23029.23 -> to keep the item in its place. It's not going to change its float or display, and it's pretty

23030.23 -> much not going to move it around at all. It's not the same as display none, though, it doesn't

23031.23 -> really remove anything, what float none pretty much does, it's just leaves it where it naturally

23032.23 -> occurs in the text. So for example, if you have a block level, div tag, and you've set

23033.23 -> its float to none, then it's just going to appear as a block level elements is not going

23034.23 -> to move around or do anything similar. So there you go. That's pretty much it for floats,

23035.23 -> and displays. We're going to be working with these a lot throughout the rest of this course.

23036.23 -> And they're very important property. So I recommend you get some practice with them,

23037.23 -> and start using them. So you can see all of the different ways that you can use the display

23038.23 -> and flow properties in your website. Now, apart from the box model, and a few other

23039.23 -> ways displays and floats are a very common way or at least a word of manipulating your

23040.23 -> website and making it look really good. So without it, the website is just kind of everywhere,

23041.23 -> all the elements are scattered around. But if you want to really make the website, look

23042.23 -> how you want it to look, you need to use this in combination with a few other features that

23043.23 -> we are going to learn in the future in order to make your website look great. Alright,

23044.23 -> let's move on.

23045.23 -> So today we're going to get started with a new topic in CSS. And this is a very exciting

23046.23 -> one, because we're going to start learning more about very advanced layout techniques.

23047.23 -> So in the past, we've learned about two pretty basic layout to learn about floats and displays

23048.23 -> and the box model, but they're not really enough to create the best websites possible.

23049.23 -> To do that, we're going to need some extra advanced techniques, which is what we're going

23050.23 -> to be covering in the next three sections. In this first section, we're going to be looking

23051.23 -> at CSS Flexbox. Now we're going to give a quick or I'm going to give a quick introduction

23052.23 -> to it. In this video, we'll be talking a little bit about what it is, how it works, and how

23053.23 -> you can apply it and what you can do with it. But for now, we're just going to go ahead

23054.23 -> and get started with it. So first of all, what actually is Flexbox. So if you don't

23055.23 -> know already, Flexbox stands for flexible box. And similar to the box model. It's a

23056.23 -> concept in CSS, or a feature that allows you to create and arrange items or elements very

23057.23 -> easily. So it's a great alternative to using something like the box model or floats or

23058.23 -> displays if you want to create very responsive websites or lay out your items in a way that

23059.23 -> makes it look great. So this is an alternative to using those traditional techniques that

23060.23 -> were using earlier versions of CSS. So the Flexbox or the main Flexbox is split into

23061.23 -> two different components. You have the container and the flex items. So the container is the

23062.23 -> parent element, it's what is going to become the container for all of the items now. Usually

23063.23 -> what you would do is use this on a div or some other form of container element. And

23064.23 -> then use some special properties which we're going to be covering in the next video to

23065.23 -> create the flex container. But then the next part is the flex items. So this can be pretty

23066.23 -> much anything you want images, links, spans whatever you want, you can add them as flex

23067.23 -> items and this is what makes up the flex box. Now What you can do with these two components

23068.23 -> is actually use different properties to manipulate them and create really nice layout like this

23069.23 -> one that we have here. And that's what we're actually going to be covering in the next

23070.23 -> few videos is learning how to manipulate the container as well as the items inside. So

23071.23 -> what can you actually do with Flexbox? Well, you know that you can create these nice responsive

23072.23 -> grids, but what would you actually use them for? Well, although it might not be apparent,

23073.23 -> pretty much all pages these days use some form of CSS layout, whether it be the box

23074.23 -> model, or Flexbox, or CSS Grid, which we're going to be covering in the next section,

23075.23 -> there are so many ways that it can be used. Flexbox is mainly used to layout a website

23076.23 -> or create different components. So for example, the top of the page is going to contain your

23077.23 -> sidebar, that's one flex item. And then you have the right side of your page, which takes

23078.23 -> up maybe 30% of the page. And that's your or Yeah, so the top is your menu, for example.

23079.23 -> And then the side on the right is your sidebar, and you have the rest is content and you have

23080.23 -> little widgets everywhere. And you can start to see how this all connects together, you

23081.23 -> can create really good looking websites by creating one huge flex container, and then

23082.23 -> creating a bunch of separate items, putting all of your different things in those items.

23083.23 -> So it's pretty much just a way to layout your website. Now in the past, we've used floats

23084.23 -> to move images around. And we've used also margin and padding to push things up and down.

23085.23 -> But that's not a really efficient way, it's more of a kind of hack to move things around.

23086.23 -> And using something like Flexbox pretty much lets you do all of this naturally. Alright,

23087.23 -> so there we go. That's a little introduction to Flexbox. And how it works. Now what we're

23088.23 -> going to do is go ahead and go onto our machine and start creating some flex containers. Alright,

23089.23 -> let's move on.

23090.23 -> So today we're going to get started with a new topic in CSS. And this is a very exciting

23091.23 -> one, because we're going to start learning more about very advanced layout techniques.

23092.23 -> So in the past, we've learned about two pretty basic layout to learn about floats and displays

23093.23 -> and the box model, but they're not really enough to create the best websites possible.

23094.23 -> To do that, we're going to need some extra advanced techniques, which is what we're going

23095.23 -> to be covering in the next three sections. In this first section, we're going to be looking

23096.23 -> at CSS Flexbox. Now we're going to give a quick or I'm going to give a quick introduction

23097.23 -> to it. In this video, we'll be talking a little bit about what it is, how it works, and how

23098.23 -> you can apply it and what you can do with it. But for now, we're just going to go ahead

23099.23 -> and get started with it. So first of all, what actually is Flexbox. So if you don't

23100.23 -> know already, Flexbox stands for flexible box. And similar to the box model. It's a

23101.23 -> concept in CSS, or a feature that allows you to create and arrange items or elements very

23102.23 -> easily. So it's a great alternative to using something like the box model or floats or

23103.23 -> displays if you want to create very responsive websites or lay out your items in a way that

23104.23 -> makes it look great. So this is an alternative to using those traditional techniques that

23105.23 -> were using earlier versions of CSS. So the Flexbox or the main Flexbox is split into

23106.23 -> two different components. You have the container and the flex items. So the container is the

23107.23 -> parent element, it's what is going to become the container for all of the items now. Usually

23108.23 -> what you would do is use this on a div or some other form of container element. And

23109.23 -> then use some special properties which we're going to be covering in the next video to

23110.23 -> create the flex container. But then the next part is the flex items. So this can be pretty

23111.23 -> much anything you want images, links, spans whatever you want, you can add them as flex

23112.23 -> items and this is what makes up the flex box. Now What you can do with these two components

23113.23 -> is actually use different properties to manipulate them and create really nice layout like this

23114.23 -> one that we have here. And that's what we're actually going to be covering in the next

23115.23 -> few videos is learning how to manipulate the container as well as the items inside. So

23116.23 -> what can you actually do with Flexbox? Well, you know that you can create these nice responsive

23117.23 -> grids, but what would you actually use them for? Well, although it might not be apparent,

23118.23 -> pretty much all pages these days use some form of CSS layout, whether it be the box

23119.23 -> model, or Flexbox, or CSS Grid, which we're going to be covering in the next section,

23120.23 -> there are so many ways that it can be used. Flexbox is mainly used to layout a website

23121.23 -> or create different components. So for example, the top of the page is going to contain your

23122.23 -> sidebar, that's one flex item. And then you have the right side of your page, which takes

23123.23 -> up maybe 30% of the page. And that's your or Yeah, so the top is your menu, for example.

23124.23 -> And then the side on the right is your sidebar, and you have the rest is content and you have

23125.23 -> little widgets everywhere. And you can start to see how this all connects together, you

23126.23 -> can create really good looking websites by creating one huge flex container, and then

23127.23 -> creating a bunch of separate items, putting all of your different things in those items.

23128.23 -> So it's pretty much just a way to layout your website. Now in the past, we've used floats

23129.23 -> to move images around. And we've used also margin and padding to push things up and down.

23130.23 -> But that's not a really efficient way, it's more of a kind of hack to move things around.

23131.23 -> And using something like Flexbox pretty much lets you do all of this naturally. Alright,

23132.23 -> so there we go. That's a little introduction to Flexbox. And how it works. Now what we're

23133.23 -> going to do is go ahead and go onto our machine and start creating some flex containers. Alright,

23134.23 -> let's move on.

23135.23 -> So in this video, we're going to be going ahead and creating our first flex container

23136.23 -> or Flexbox. Now, I already have some apparatus set up here so that we can get started straight

23137.23 -> away without having to go and do anything with any of the styling. And this is the best

23138.23 -> way to really see how Flexbox works. Because without it, you know, it's just kind of look,

23139.23 -> it's gonna look kind of weird, all the invisible backgrounds and things. So I think this is

23140.23 -> the best way to really see demonstrate how Flexbox works. Alright, let's get started.

23141.23 -> So well, it's actually quite easy to set up a flex container, the hard part is creating

23142.23 -> how you want, but it uses the display property just like any other item on this page. So

23143.23 -> when we set the display to block or inline, block or inline, we do all of that. But we

23144.23 -> can actually set it to flex. And what that's going to do is create our flex container.

23145.23 -> So all we have to do is go ahead and find our parent element, the container that we

23146.23 -> want, and I already have the class set up here. If you want to go ahead and do this

23147.23 -> on your own, you can, like I said, if maybe if you want to copy these styles, for example,

23148.23 -> you can go ahead and check out the project files. But like I said, you can just go ahead

23149.23 -> and create your own setup so that you can start working with it. So first of all, we're

23150.23 -> going to go ahead and find our parent element. So in this case, these are going to be our

23151.23 -> items in the future. And then this div is our main element. So I'm going to go over

23152.23 -> here. And I will go into go ahead and give it the display property of flex. Now, instead

23153.23 -> of doing something like block or inline block, instead, we set it to flex. And what this

23154.23 -> is going to do is create our flex container. Now watch what happens. You can see now that

23155.23 -> instead of having it just in a row, all of these items have been spaced out accordingly.

23156.23 -> Now all of the default values of all of the flex properties have now been set up now that

23157.23 -> our display mode has been activated. Now in the next few videos, we're actually going

23158.23 -> to be going through and manipulating these properties. For example, changing the order,

23159.23 -> we're going to change the size and width of these. And we're going to go ahead and justify

23160.23 -> and align the content. But that's for a future video. For now, all you need to know is that

23161.23 -> by setting the display property to flex on a parent container, it's going to set up all

23162.23 -> the default values of the flex properties and create the flex container that we want

23163.23 -> to work with in the next few videos. Alright, let's move on.

23164.23 -> So in this video, we're going to be going ahead and creating our first flex container

23165.23 -> or Flexbox. Now, I already have some apparatus set up here so that we can get started straight

23166.23 -> away without having to go and do anything with any of the styling. And this is the best

23167.23 -> way to really see how Flexbox works. Because without it, you know, it's just kind of look,

23168.23 -> it's gonna look kind of weird, all the invisible backgrounds and things. So I think this is

23169.23 -> the best way to really see demonstrate how Flexbox works. Alright, let's get started.

23170.23 -> So well, it's actually quite easy to set up a flex container, the hard part is creating

23171.23 -> how you want, but it uses the display property just like any other item on this page. So

23172.23 -> when we set the display to block or inline, block or inline, we do all of that. But we

23173.23 -> can actually set it to flex. And what that's going to do is create our flex container.

23174.23 -> So all we have to do is go ahead and find our parent element, the container that we

23175.23 -> want, and I already have the class set up here. If you want to go ahead and do this

23176.23 -> on your own, you can, like I said, if maybe if you want to copy these styles, for example,

23177.23 -> you can go ahead and check out the project files. But like I said, you can just go ahead

23178.23 -> and create your own setup so that you can start working with it. So first of all, we're

23179.23 -> going to go ahead and find our parent element. So in this case, these are going to be our

23180.23 -> items in the future. And then this div is our main element. So I'm going to go over

23181.23 -> here. And I will go into go ahead and give it the display property of flex. Now, instead

23182.23 -> of doing something like block or inline block, instead, we set it to flex. And what this

23183.23 -> is going to do is create our flex container. Now watch what happens. You can see now that

23184.23 -> instead of having it just in a row, all of these items have been spaced out accordingly.

23185.23 -> Now all of the default values of all of the flex properties have now been set up now that

23186.23 -> our display mode has been activated. Now in the next few videos, we're actually going

23187.23 -> to be going through and manipulating these properties. For example, changing the order,

23188.23 -> we're going to change the size and width of these. And we're going to go ahead and justify

23189.23 -> and align the content. But that's for a future video. For now, all you need to know is that

23190.23 -> by setting the display property to flex on a parent container, it's going to set up all

23191.23 -> the default values of the flex properties and create the flex container that we want

23192.23 -> to work with in the next few videos. Alright, let's move on.

23193.23 -> So in this video, we're going to be covering two of the properties of our flex container,

23194.23 -> direction and wrap. So right now we have everything set up. We have five flex items here labeled

23195.23 -> A to E, and then we also have our container. But now we're going to go through and start

23196.23 -> manipulating it. So the first thing I want to talk about is flex direction. So pretty

23197.23 -> much right now it's laid out in a row here, but what we can actually do is specify the

23198.23 -> direction that we want our items to go in. We can also reverse the order using a special

23199.23 -> suffix. Let's get started. So the property that we're going to use is flex direction,

23200.23 -> flex dash direction. And you add this to the container to the flex container. So here we're

23201.23 -> going to specify either row or column row is the default value, and it's going to be

23202.23 -> going in a direction to the right side of the container. We also have column, which

23203.23 -> is what we kind of saw before. And you can see it's a little bit better spaced out. And

23204.23 -> you can see it goes A to E, except it goes in a column. Now, that's pretty easy to understand.

23205.23 -> But we can also go reverse. So instead of A to E, it goes eat a, all we have to do is

23206.23 -> add dash reverse to column a row, and it's going to flip the direction that our item

23207.23 -> is going in. Let's refresh. And now you can see it's going in reverse. We can also do

23208.23 -> the same thing with row or pretty much any other value for this property here. You can

23209.23 -> see now it goes E to a, and it also goes in the opposite way to the left side of the page

23210.23 -> instead of to the right side. So that's it for flex direction, it's very easy to understand,

23211.23 -> I'm just going to go ahead and set it back to wrote the default. The next item I want

23212.23 -> to talk about is flex wrap. So this is a little bit more complicated to understand. But once

23213.23 -> we start using it, it gets quite easy. Pretty much when you wrap an item, it's going to

23214.23 -> move it to a new row or column to avoid the exceeding the maximum length. So for example,

23215.23 -> if we had more than the specified amount of items here, so if we had a, b, c, d, e, and

23216.23 -> then F, G, H, I and all the ways to K or L, we don't want it to keep going on forever.

23217.23 -> So what we want to do is once it gets to a certain length, rump length, wrap it around

23218.23 -> and move it to a new line. So I'm actually going to go ahead and do that here. I'm going

23219.23 -> to go ahead and copy all of these items, pretty much double it. And then I'm going to say

23220.23 -> f, g, h, i and j. And now let's go ahead and refresh the page and see how this looks. You

23221.23 -> can see we have now abcdefg H I J. And of course it's not going past the page yet, but

23222.23 -> we can actually wrap this around and see how it looks. So all we have to do is add the

23223.23 -> flex dash wrap property. And now we can either specify we can specify one of two values,

23224.23 -> wrap and no rap. So I'm going to go ahead and say rap. Now if we go ahead and refresh

23225.23 -> the page, you can see that instead of kind of squeezing in the space or changing the

23226.23 -> spacing, it just moves this to a new row, we can also go ahead and use rock reverse,

23227.23 -> which pretty much revolves, it does the exact same thing, but it reverses the order. So

23228.23 -> now if we go ahead and refresh, you can see that this whole thing is kind of flipped.

23229.23 -> Now normally, you won't see rapper verse used. So I would just go ahead and learn how to

23230.23 -> use rap and no rap. Now, of course, if you're going to go ahead and use no rap, it's usually

23231.23 -> because of some inherited value, because again, no rap is the default value that's used, so

23232.23 -> you won't really see it commonly in CSS. Let's go ahead and set the property back to wrap.

23233.23 -> So those are the two main properties that we're going to cover in this video is wrap

23234.23 -> and flex direction. Now, of course, these are two very basic properties, but they're

23235.23 -> still very useful. And you can really see how this can be used commonly inside our website

23236.23 -> and inside web development as a whole. Alright, so that's pretty much it for these two properties.

23237.23 -> Let's move on to some of the other properties that we can use on our flex container in CSS.

23238.23 -> So in this video, we're going to be covering two of the properties of our flex container,

23239.23 -> direction and wrap. So right now we have everything set up. We have five flex items here labeled

23240.23 -> A to E, and then we also have our container. But now we're going to go through and start

23241.23 -> manipulating it. So the first thing I want to talk about is flex direction. So pretty

23242.23 -> much right now it's laid out in a row here, but what we can actually do is specify the

23243.23 -> direction that we want our items to go in. We can also reverse the order using a special

23244.23 -> suffix. Let's get started. So the property that we're going to use is flex direction,

23245.23 -> flex dash direction. And you add this to the container to the flex container. So here we're

23246.23 -> going to specify either row or column row is the default value, and it's going to be

23247.23 -> going in a direction to the right side of the container. We also have column, which

23248.23 -> is what we kind of saw before. And you can see it's a little bit better spaced out. And

23249.23 -> you can see it goes A to E, except it goes in a column. Now, that's pretty easy to understand.

23250.23 -> But we can also go reverse. So instead of A to E, it goes eat a, all we have to do is

23251.23 -> add dash reverse to column a row, and it's going to flip the direction that our item

23252.23 -> is going in. Let's refresh. And now you can see it's going in reverse. We can also do

23253.23 -> the same thing with row or pretty much any other value for this property here. You can

23254.23 -> see now it goes E to a, and it also goes in the opposite way to the left side of the page

23255.23 -> instead of to the right side. So that's it for flex direction, it's very easy to understand,

23256.23 -> I'm just going to go ahead and set it back to wrote the default. The next item I want

23257.23 -> to talk about is flex wrap. So this is a little bit more complicated to understand. But once

23258.23 -> we start using it, it gets quite easy. Pretty much when you wrap an item, it's going to

23259.23 -> move it to a new row or column to avoid the exceeding the maximum length. So for example,

23260.23 -> if we had more than the specified amount of items here, so if we had a, b, c, d, e, and

23261.23 -> then F, G, H, I and all the ways to K or L, we don't want it to keep going on forever.

23262.23 -> So what we want to do is once it gets to a certain length, rump length, wrap it around

23263.23 -> and move it to a new line. So I'm actually going to go ahead and do that here. I'm going

23264.23 -> to go ahead and copy all of these items, pretty much double it. And then I'm going to say

23265.23 -> f, g, h, i and j. And now let's go ahead and refresh the page and see how this looks. You

23266.23 -> can see we have now abcdefg H I J. And of course it's not going past the page yet, but

23267.23 -> we can actually wrap this around and see how it looks. So all we have to do is add the

23268.23 -> flex dash wrap property. And now we can either specify we can specify one of two values,

23269.23 -> wrap and no rap. So I'm going to go ahead and say rap. Now if we go ahead and refresh

23270.23 -> the page, you can see that instead of kind of squeezing in the space or changing the

23271.23 -> spacing, it just moves this to a new row, we can also go ahead and use rock reverse,

23272.23 -> which pretty much revolves, it does the exact same thing, but it reverses the order. So

23273.23 -> now if we go ahead and refresh, you can see that this whole thing is kind of flipped.

23274.23 -> Now normally, you won't see rapper verse used. So I would just go ahead and learn how to

23275.23 -> use rap and no rap. Now, of course, if you're going to go ahead and use no rap, it's usually

23276.23 -> because of some inherited value, because again, no rap is the default value that's used, so

23277.23 -> you won't really see it commonly in CSS. Let's go ahead and set the property back to wrap.

23278.23 -> So those are the two main properties that we're going to cover in this video is wrap

23279.23 -> and flex direction. Now, of course, these are two very basic properties, but they're

23280.23 -> still very useful. And you can really see how this can be used commonly inside our website

23281.23 -> and inside web development as a whole. Alright, so that's pretty much it for these two properties.

23282.23 -> Let's move on to some of the other properties that we can use on our flex container in CSS.

23283.23 -> So in this video, we're going to be talking about two very important elements or what

23284.23 -> properties that can be used to justify and align flex items inside of container. So we're

23285.23 -> going to be talking about two main properties, one of them is going to be responsible for

23286.23 -> the horizontal alignment, and the other for the vertical alignment. So let's talk about

23287.23 -> them. The first one which is for horizontal alignment is called justify content. Now,

23288.23 -> both of these ello, both of these properties actually contained three main values which

23289.23 -> are shared between the two of them. And then each of them can take two special values,

23290.23 -> which actually align them in a pretty different way than you would expect. So let's talk about

23291.23 -> justify content. Now first of all, you'll notice that these are a little bit stretched

23292.23 -> out, don't worry about that for now, that's just because of the added height to the container

23293.23 -> will talk about that in just a second. But let's get started. So the first three properties

23294.23 -> that are pretty common are flex start, flex end, and center. So flex start is going to

23295.23 -> be where the container starts, which in this case is on the left. On the other hand, the

23296.23 -> end is going to be the opposite. So on in this container, it's on the right and then

23297.23 -> center positions in the middle. So what I'm going to do here is just set it as center

23298.23 -> for now. And you can see that now all of our eyes limbs have been centered in the middle

23299.23 -> here. If I said something like flex end, and remember, it does contain a dash in there,

23300.23 -> it's going to move everything to the end of the container here. So those are the three

23301.23 -> main values. Let's talk about the two special ones now. Now, pretty much these ones are

23302.23 -> going to be messing a little bit with the spacing between these, but they are still

23303.23 -> related to alignment, because it's changing the spacing in a way that does actually align

23304.23 -> our elements here. So the two main values are space around and space between. So let's

23305.23 -> talk about space between first, what happens is that space, the spacing between the flex

23306.23 -> items is created so that it's all equal. And it creates equal divisions to move everything

23307.23 -> on well, equally divided from each other on the same row. On the other hand, space around

23308.23 -> actually creates spacing on all sides of the item. So instead of just creating them between,

23309.23 -> it's going to create them between some of the flex items and the edges. So though, that's

23310.23 -> the main difference between the two, and it depends on what you really want. So for example,

23311.23 -> if you want a centered kind of item or a centered Flexbox, what you would do is use the space

23312.23 -> around property. Whereas if you wanted something to be stretched out, you would use the space

23313.23 -> between property.

23314.23 -> So in this video, we're going to be talking about two very important elements or what

23315.23 -> properties that can be used to justify and align flex items inside of container. So we're

23316.23 -> going to be talking about two main properties, one of them is going to be responsible for

23317.23 -> the horizontal alignment, and the other for the vertical alignment. So let's talk about

23318.23 -> them. The first one which is for horizontal alignment is called justify content. Now,

23319.23 -> both of these ello, both of these properties actually contained three main values which

23320.23 -> are shared between the two of them. And then each of them can take two special values,

23321.23 -> which actually align them in a pretty different way than you would expect. So let's talk about

23322.23 -> justify content. Now first of all, you'll notice that these are a little bit stretched

23323.23 -> out, don't worry about that for now, that's just because of the added height to the container

23324.23 -> will talk about that in just a second. But let's get started. So the first three properties

23325.23 -> that are pretty common are flex start, flex end, and center. So flex start is going to

23326.23 -> be where the container starts, which in this case is on the left. On the other hand, the

23327.23 -> end is going to be the opposite. So on in this container, it's on the right and then

23328.23 -> center positions in the middle. So what I'm going to do here is just set it as center

23329.23 -> for now. And you can see that now all of our eyes limbs have been centered in the middle

23330.23 -> here. If I said something like flex end, and remember, it does contain a dash in there,

23331.23 -> it's going to move everything to the end of the container here. So those are the three

23332.23 -> main values. Let's talk about the two special ones now. Now, pretty much these ones are

23333.23 -> going to be messing a little bit with the spacing between these, but they are still

23334.23 -> related to alignment, because it's changing the spacing in a way that does actually align

23335.23 -> our elements here. So the two main values are space around and space between. So let's

23336.23 -> talk about space between first, what happens is that space, the spacing between the flex

23337.23 -> items is created so that it's all equal. And it creates equal divisions to move everything

23338.23 -> on well, equally divided from each other on the same row. On the other hand, space around

23339.23 -> actually creates spacing on all sides of the item. So instead of just creating them between,

23340.23 -> it's going to create them between some of the flex items and the edges. So though, that's

23341.23 -> the main difference between the two, and it depends on what you really want. So for example,

23342.23 -> if you want a centered kind of item or a centered Flexbox, what you would do is use the space

23343.23 -> around property. Whereas if you wanted something to be stretched out, you would use the space

23344.23 -> between property.

23345.23 -> So there we go. Those are some of the little items or values that you can use under justify

23346.23 -> content property. Now let's move on to align items. So this is the property that aligns

23347.23 -> it vertically. Now by default, it's set to stretch, which is what we can see here. So

23348.23 -> it just stretches all the way across down to the bottom of the container, we can actually

23349.23 -> change this. So let's go ahead and add this property align items. Now what we're going

23350.23 -> to do is change it to center. So just like before, we have three main values, flex, start

23351.23 -> flex, and and center, you can see that immediately. Now all of these items are still spaced in

23352.23 -> between, but they have been moved to the center here. So you can see here that on the Align

23353.23 -> items, this has been arranged vertically, it this is the start at the top and the and

23354.23 -> the bottom and the flex end is well at the bottom of the container, justify content says

23355.23 -> the flex start is on the left side, and the flex end is on the right. So there we go,

23356.23 -> you can see what this is what this looks like right here is when we align the items, it

23357.23 -> centers it in between the top and the bottom. So let's go ahead and just see what the other

23358.23 -> values look like. So for example, flex start. So for, let's just say you want to keep the

23359.23 -> height of these items the same, you don't want to stretch them, this is what you would

23360.23 -> do, you could also set it to flex and if you wanted something to appear at the end of the

23361.23 -> page. And yeah, that's pretty much it for those three main values. Now let's talk about

23362.23 -> the two special values. So these are a little bit different because they don't follow some

23363.23 -> general convention. But the two values are baseline and stretch. Now we've already covered

23364.23 -> stretch a little bit in the beginning of this in which we could set stretch as our default

23365.23 -> value. And all that does is just align it all the way through from top to bottom. But

23366.23 -> baseline is a little bit different. Now unfortunately, we can't really see the effect, apparent right

23367.23 -> here. But pretty much what happens is that all of these items, no matter their size,

23368.23 -> are aligned to a baseline. Now if I actually go and add some inline styles to override

23369.23 -> some of these, so for example B, I'm going to let's just say I'm going to make the line

23370.23 -> height, which is a property we haven't actually learned yet, what we're going to do is just

23371.23 -> set the line height to whoops, real problem there, I'm going to set this to 100 pixels,

23372.23 -> like that. And now what I'm going to do is go ahead and refresh the page and see what

23373.23 -> happens, you can see that this is a little bit higher, but they're all aligned on the

23374.23 -> same line, you can see that the fonts here have been changed a little bit not really

23375.23 -> not really apparent here. But you can see the heights are different, but they're still

23376.23 -> all in the same line. So that's what baseline actually does it just no matter the size,

23377.23 -> or the font text or anything, it's all going to keep them or it's going to keep them all

23378.23 -> on the same baseline. And that's what it does. Alright, so I'm going to go ahead and remove

23379.23 -> this inline style, since we don't need it. And those are pretty much the two main alignment

23380.23 -> properties. Now if you wanted to align something to the center of a Flexbox, what you would

23381.23 -> do is just set justify content and jaw and align items, both of them to the center. And

23382.23 -> what that's gonna do is just align everything to the center of the flex box. So that's what

23383.23 -> I've just done here is I've set both of them to center so that way on top, it's centered

23384.23 -> between the top and the bottom as well as the left and the right. Alright, let's move

23385.23 -> on.

23386.23 -> So there we go. Those are some of the little items or values that you can use under justify

23387.23 -> content property. Now let's move on to align items. So this is the property that aligns

23388.23 -> it vertically. Now by default, it's set to stretch, which is what we can see here. So

23389.23 -> it just stretches all the way across down to the bottom of the container, we can actually

23390.23 -> change this. So let's go ahead and add this property align items. Now what we're going

23391.23 -> to do is change it to center. So just like before, we have three main values, flex, start

23392.23 -> flex, and and center, you can see that immediately. Now all of these items are still spaced in

23393.23 -> between, but they have been moved to the center here. So you can see here that on the Align

23394.23 -> items, this has been arranged vertically, it this is the start at the top and the and

23395.23 -> the bottom and the flex end is well at the bottom of the container, justify content says

23396.23 -> the flex start is on the left side, and the flex end is on the right. So there we go,

23397.23 -> you can see what this is what this looks like right here is when we align the items, it

23398.23 -> centers it in between the top and the bottom. So let's go ahead and just see what the other

23399.23 -> values look like. So for example, flex start. So for, let's just say you want to keep the

23400.23 -> height of these items the same, you don't want to stretch them, this is what you would

23401.23 -> do, you could also set it to flex and if you wanted something to appear at the end of the

23402.23 -> page. And yeah, that's pretty much it for those three main values. Now let's talk about

23403.23 -> the two special values. So these are a little bit different because they don't follow some

23404.23 -> general convention. But the two values are baseline and stretch. Now we've already covered

23405.23 -> stretch a little bit in the beginning of this in which we could set stretch as our default

23406.23 -> value. And all that does is just align it all the way through from top to bottom. But

23407.23 -> baseline is a little bit different. Now unfortunately, we can't really see the effect, apparent right

23408.23 -> here. But pretty much what happens is that all of these items, no matter their size,

23409.23 -> are aligned to a baseline. Now if I actually go and add some inline styles to override

23410.23 -> some of these, so for example B, I'm going to let's just say I'm going to make the line

23411.23 -> height, which is a property we haven't actually learned yet, what we're going to do is just

23412.23 -> set the line height to whoops, real problem there, I'm going to set this to 100 pixels,

23413.23 -> like that. And now what I'm going to do is go ahead and refresh the page and see what

23414.23 -> happens, you can see that this is a little bit higher, but they're all aligned on the

23415.23 -> same line, you can see that the fonts here have been changed a little bit not really

23416.23 -> not really apparent here. But you can see the heights are different, but they're still

23417.23 -> all in the same line. So that's what baseline actually does it just no matter the size,

23418.23 -> or the font text or anything, it's all going to keep them or it's going to keep them all

23419.23 -> on the same baseline. And that's what it does. Alright, so I'm going to go ahead and remove

23420.23 -> this inline style, since we don't need it. And those are pretty much the two main alignment

23421.23 -> properties. Now if you wanted to align something to the center of a Flexbox, what you would

23422.23 -> do is just set justify content and jaw and align items, both of them to the center. And

23423.23 -> what that's gonna do is just align everything to the center of the flex box. So that's what

23424.23 -> I've just done here is I've set both of them to center so that way on top, it's centered

23425.23 -> between the top and the bottom as well as the left and the right. Alright, let's move

23426.23 -> on.

23427.23 -> So for the first part of this section, we've been talking about a lot of the properties

23428.23 -> that we can use for the actual flex container. So you can see that we've covered five here,

23429.23 -> the display type, which is to create the container, the direction wrap, and our content alignment

23430.23 -> properties. But we haven't actually talked anything about the items themselves, because

23431.23 -> we've just been looking at the container. So that's what we're going to be doing over

23432.23 -> the next few videos is looking at some of the properties that we can use on our items

23433.23 -> themselves to change how they look. And that's when the real power of Flexbox comes in, and

23434.23 -> really shows how it can be used. So the first item that we're going to be covering or property

23435.23 -> in this case is flex item order. Now, instead of adding this directly to the container,

23436.23 -> we can actually go through and add this to the flex items themselves. So I'm going to

23437.23 -> hold Ctrl or Command if you're on Mac, and go ahead and add our style property to all

23438.23 -> five of these flex items, because what we're going to actually have to do is add this property

23439.23 -> to all of our items, seems like a new line was created there. Let's get started. So pretty

23440.23 -> much what we're going to be doing is using a property to change the positioning or order

23441.23 -> in this case of our flex items. So I'm going to go ahead and create that multiple cursor

23442.23 -> feature again. And the property we're going to use is order. Now what we can do is go

23443.23 -> ahead and start specifying our order. So pretty much what we're going to do is go through

23444.23 -> and change what this looks like and how this looks like in our place here. So what we're

23445.23 -> going to do is go and specify our values. And then we're instead of having it from A

23446.23 -> to E, we're actually going to go through and add something to make these properties look

23447.23 -> in a different way instead of having to actually move all of these around. So instead of moving

23448.23 -> the divs around, and you know changing all of them, we're actually going to go through

23449.23 -> and specify some numbers. So let's get started. So what we're going to use for this is numbers.

23450.23 -> Now, this ranges from one all the way up to as many numbers or as many items as you have,

23451.23 -> and the default value is zero. And this is just going to keep it in its position. But

23452.23 -> we can actually specify the number to see where it lands. So let's just say that I want

23453.23 -> D first, what I'm going to do is go ahead and under my order property, add a one, just

23454.23 -> like that. Now I'm going to go ahead and add E, so I'm going to set my order to two. Now

23455.23 -> if you've worked with computers before, you might think that it starts with zero, but

23456.23 -> in this case, zero is our default value. So we're not actually going to be using that.

23457.23 -> So I have D then E. Now let's say I would be next. So I'm going to put it under the

23458.23 -> third position. Now for C or actually a, I'm going to put as the fourth position, and C

23459.23 -> is the last. So let's see if this holds up here, we refresh the page d V AC. So you can

23460.23 -> see that we can actually change the order of these flex items directly from our CSS

23461.23 -> instead of having to go through and move them around. Now you might know you might be wondering

23462.23 -> why this could be useful at all. Now, although might not be apparent here because we haven't

23463.23 -> actually gotten, we're using the JavaScript. Once you start making your website interactive,

23464.23 -> this becomes a very useful features. Because you can't just go through and program something

23465.23 -> to move the divs around in your HTML document without using some sort of file reading. Instead,

23466.23 -> it's much easier to just add a style to it, where you can change the order, maybe even

23467.23 -> randomly. So you can see how this would work. And although like I said, although it's may

23468.23 -> not be useful in this case, it will definitely be useful once you start learning about JavaScript

23469.23 -> and start making your websites interactive. So that's a little bit about flex order. Now

23470.23 -> just one thing, you don't actually have to use it with an inline style tag. But it would

23471.23 -> be much easier considering that if without it, you'd have to go and add an individual

23472.23 -> class to every single item. Now, of course, it's much easier to just go ahead and add

23473.23 -> a style tag to each of these. But if you want to use it with a class method, maybe you already

23474.23 -> have an existing class, you can go ahead and do that. There's nothing wrong with that.

23475.23 -> I'm just using this because it's a lot more convenient and easy to use. Alright, so that's

23476.23 -> pretty much it about flex order. It's quite easy to learn once you know how to find the

23477.23 -> positions of items and how you know how to order them in the right way. As long as you

23478.23 -> know the number of items you have, it's very easy to position them just the way you like

23479.23 -> it. Alright, let's move on.

23480.23 -> So for the first part of this section, we've been talking about a lot of the properties

23481.23 -> that we can use for the actual flex container. So you can see that we've covered five here,

23482.23 -> the display type, which is to create the container, the direction wrap, and our content alignment

23483.23 -> properties. But we haven't actually talked anything about the items themselves, because

23484.23 -> we've just been looking at the container. So that's what we're going to be doing over

23485.23 -> the next few videos is looking at some of the properties that we can use on our items

23486.23 -> themselves to change how they look. And that's when the real power of Flexbox comes in, and

23487.23 -> really shows how it can be used. So the first item that we're going to be covering or property

23488.23 -> in this case is flex item order. Now, instead of adding this directly to the container,

23489.23 -> we can actually go through and add this to the flex items themselves. So I'm going to

23490.23 -> hold Ctrl or Command if you're on Mac, and go ahead and add our style property to all

23491.23 -> five of these flex items, because what we're going to actually have to do is add this property

23492.23 -> to all of our items, seems like a new line was created there. Let's get started. So pretty

23493.23 -> much what we're going to be doing is using a property to change the positioning or order

23494.23 -> in this case of our flex items. So I'm going to go ahead and create that multiple cursor

23495.23 -> feature again. And the property we're going to use is order. Now what we can do is go

23496.23 -> ahead and start specifying our order. So pretty much what we're going to do is go through

23497.23 -> and change what this looks like and how this looks like in our place here. So what we're

23498.23 -> going to do is go and specify our values. And then we're instead of having it from A

23499.23 -> to E, we're actually going to go through and add something to make these properties look

23500.23 -> in a different way instead of having to actually move all of these around. So instead of moving

23501.23 -> the divs around, and you know changing all of them, we're actually going to go through

23502.23 -> and specify some numbers. So let's get started. So what we're going to use for this is numbers.

23503.23 -> Now, this ranges from one all the way up to as many numbers or as many items as you have,

23504.23 -> and the default value is zero. And this is just going to keep it in its position. But

23505.23 -> we can actually specify the number to see where it lands. So let's just say that I want

23506.23 -> D first, what I'm going to do is go ahead and under my order property, add a one, just

23507.23 -> like that. Now I'm going to go ahead and add E, so I'm going to set my order to two. Now

23508.23 -> if you've worked with computers before, you might think that it starts with zero, but

23509.23 -> in this case, zero is our default value. So we're not actually going to be using that.

23510.23 -> So I have D then E. Now let's say I would be next. So I'm going to put it under the

23511.23 -> third position. Now for C or actually a, I'm going to put as the fourth position, and C

23512.23 -> is the last. So let's see if this holds up here, we refresh the page d V AC. So you can

23513.23 -> see that we can actually change the order of these flex items directly from our CSS

23514.23 -> instead of having to go through and move them around. Now you might know you might be wondering

23515.23 -> why this could be useful at all. Now, although might not be apparent here because we haven't

23516.23 -> actually gotten, we're using the JavaScript. Once you start making your website interactive,

23517.23 -> this becomes a very useful features. Because you can't just go through and program something

23518.23 -> to move the divs around in your HTML document without using some sort of file reading. Instead,

23519.23 -> it's much easier to just add a style to it, where you can change the order, maybe even

23520.23 -> randomly. So you can see how this would work. And although like I said, although it's may

23521.23 -> not be useful in this case, it will definitely be useful once you start learning about JavaScript

23522.23 -> and start making your websites interactive. So that's a little bit about flex order. Now

23523.23 -> just one thing, you don't actually have to use it with an inline style tag. But it would

23524.23 -> be much easier considering that if without it, you'd have to go and add an individual

23525.23 -> class to every single item. Now, of course, it's much easier to just go ahead and add

23526.23 -> a style tag to each of these. But if you want to use it with a class method, maybe you already

23527.23 -> have an existing class, you can go ahead and do that. There's nothing wrong with that.

23528.23 -> I'm just using this because it's a lot more convenient and easy to use. Alright, so that's

23529.23 -> pretty much it about flex order. It's quite easy to learn once you know how to find the

23530.23 -> positions of items and how you know how to order them in the right way. As long as you

23531.23 -> know the number of items you have, it's very easy to position them just the way you like

23532.23 -> it. Alright, let's move on.

23533.23 -> So in this video, we're going to be talking about three very important properties that

23534.23 -> come with Flexbox which are flex grow, flex, shrink and flex basis. Now, although it might

23535.23 -> not seem like it, these actually are completely responsible for the responsive power of Flexbox.

23536.23 -> And it's what really makes it what it is today and why it's used so commonly over things

23537.23 -> like floats and display types. So first of all, if we look at it, now, it might seem

23538.23 -> that flex grow and shrink, just specify the width and height. And although they sort of

23539.23 -> do, they are very different when it comes to the core concept and how it's decided.

23540.23 -> So the first thing we need to do is talk about the flex basis property, because from there,

23541.23 -> we're going to define everything else. Now, we all know that we have five items here,

23542.23 -> and they take up a certain amount of space each. But you can see that there's all of

23543.23 -> this extra room here on the side. So what actually happens is these properties work

23544.23 -> to define how the extra space or this remaining excess space is divided up between them. And

23545.23 -> from there, we can actually specify the width based on the you know, browser width, and

23546.23 -> it's all responsive. So it's all decided completely based on the browser and on the properties

23547.23 -> that you define. So the first thing I'm going to do is go ahead and actually add this property

23548.23 -> to all of them. And I'm gonna explain why in just a second. And why we need to do that.

23549.23 -> So what I'm going to do is first download, I'm going to go ahead and add the flex grow

23550.23 -> property, and the flex shrink property. Now we're not going to use all these in one go,

23551.23 -> we're just going to do this gradually, and then our flex basis. Okay, so let's talk about

23552.23 -> flex basis. First, what this does is it pretty much defines the minimum width of an item

23553.23 -> or a flex item. So this can be any value doesn't just have to it doesn't have to be a specific

23554.23 -> number or unit. So for example, I'm going to go ahead and set this as maybe 100 pixels

23555.23 -> for each one as its minimum width, we go ahead and refresh the page. And now you can see

23556.23 -> it's a lot wider. But you can see that there's still this extra space. So this is where our

23557.23 -> flex grow property comes in. Now what happens is, if I actually go ahead and go to all of

23558.23 -> them, and set them all as one, what this is pretty much going to say is every flex item

23559.23 -> is going to get the same amount of extra space. So you can see that this gets if all of them

23560.23 -> are one, they all get the same amount. Let's go ahead and see that when we refresh the

23561.23 -> page, you can see now there's only a little bit of margin, which is normal. But all of

23562.23 -> them are divided up equally. Now that we've set them as one. But what happens if we go

23563.23 -> ahead and actually change this value? Let's go ahead and for example, set our fifth item

23564.23 -> as to maybe. So now you can see that, although it's not much bigger, it is a little bit bigger.

23565.23 -> So what this is pretty, I'm gonna go ahead and set it to actually something a little

23566.23 -> bit bigger, so it's more obvious. So you can see now this is a lot bigger than the other

23567.23 -> items. So pretty much what this is saying is our fifth item, this container item is

23568.23 -> going to get five times as much excess space as the rest of the items here. So one thing

23569.23 -> you need to know about flex grow is that you need to add this property to every single

23570.23 -> one of them and make sure that they have a defined value. If they don't, if you want

23571.23 -> them just to give them a default space, give them a value of one. And this is because what

23572.23 -> happens is when you don't give them any value. If you give this flex grow property to anything,

23573.23 -> it's going to eat up all that extra space. Let's go ahead and demonstrate this. Now,

23574.23 -> I'm going to go ahead and erase all of this, all of these flex grow properties just temporarily.

23575.23 -> And then I'm going to leave it on this one. Now I'm going to set it to one. Now you might

23576.23 -> expect this is to be just a little bit bigger. But let's see what actually happens. If we

23577.23 -> go ahead and refresh the page, you can see that this is actually bigger than when we

23578.23 -> set this to flex this flex grow property to five. So what's going on here, pretty much

23579.23 -> what's happening is the default value for our flex grow property is actually zero, which

23580.23 -> means it's going to remain the same width, and it's not going to take up any excess space.

23581.23 -> So pretty much what's happening is when we set this to one, everything else is not taking

23582.23 -> any excess space, leaving it all to that one value. So all of that extra space is taken

23583.23 -> up by this block here. And you can see that and it's proved proven because there is still

23584.23 -> no excess space here, since it's all taken up out by this property. So what I would recommend

23585.23 -> is before we learn the flex

23586.23 -> So in this video, we're going to be talking about three very important properties that

23587.23 -> come with Flexbox which are flex grow, flex, shrink and flex basis. Now, although it might

23588.23 -> not seem like it, these actually are completely responsible for the responsive power of Flexbox.

23589.23 -> And it's what really makes it what it is today and why it's used so commonly over things

23590.23 -> like floats and display types. So first of all, if we look at it, now, it might seem

23591.23 -> that flex grow and shrink, just specify the width and height. And although they sort of

23592.23 -> do, they are very different when it comes to the core concept and how it's decided.

23593.23 -> So the first thing we need to do is talk about the flex basis property, because from there,

23594.23 -> we're going to define everything else. Now, we all know that we have five items here,

23595.23 -> and they take up a certain amount of space each. But you can see that there's all of

23596.23 -> this extra room here on the side. So what actually happens is these properties work

23597.23 -> to define how the extra space or this remaining excess space is divided up between them. And

23598.23 -> from there, we can actually specify the width based on the you know, browser width, and

23599.23 -> it's all responsive. So it's all decided completely based on the browser and on the properties

23600.23 -> that you define. So the first thing I'm going to do is go ahead and actually add this property

23601.23 -> to all of them. And I'm gonna explain why in just a second. And why we need to do that.

23602.23 -> So what I'm going to do is first download, I'm going to go ahead and add the flex grow

23603.23 -> property, and the flex shrink property. Now we're not going to use all these in one go,

23604.23 -> we're just going to do this gradually, and then our flex basis. Okay, so let's talk about

23605.23 -> flex basis. First, what this does is it pretty much defines the minimum width of an item

23606.23 -> or a flex item. So this can be any value doesn't just have to it doesn't have to be a specific

23607.23 -> number or unit. So for example, I'm going to go ahead and set this as maybe 100 pixels

23608.23 -> for each one as its minimum width, we go ahead and refresh the page. And now you can see

23609.23 -> it's a lot wider. But you can see that there's still this extra space. So this is where our

23610.23 -> flex grow property comes in. Now what happens is, if I actually go ahead and go to all of

23611.23 -> them, and set them all as one, what this is pretty much going to say is every flex item

23612.23 -> is going to get the same amount of extra space. So you can see that this gets if all of them

23613.23 -> are one, they all get the same amount. Let's go ahead and see that when we refresh the

23614.23 -> page, you can see now there's only a little bit of margin, which is normal. But all of

23615.23 -> them are divided up equally. Now that we've set them as one. But what happens if we go

23616.23 -> ahead and actually change this value? Let's go ahead and for example, set our fifth item

23617.23 -> as to maybe. So now you can see that, although it's not much bigger, it is a little bit bigger.

23618.23 -> So what this is pretty, I'm gonna go ahead and set it to actually something a little

23619.23 -> bit bigger, so it's more obvious. So you can see now this is a lot bigger than the other

23620.23 -> items. So pretty much what this is saying is our fifth item, this container item is

23621.23 -> going to get five times as much excess space as the rest of the items here. So one thing

23622.23 -> you need to know about flex grow is that you need to add this property to every single

23623.23 -> one of them and make sure that they have a defined value. If they don't, if you want

23624.23 -> them just to give them a default space, give them a value of one. And this is because what

23625.23 -> happens is when you don't give them any value. If you give this flex grow property to anything,

23626.23 -> it's going to eat up all that extra space. Let's go ahead and demonstrate this. Now,

23627.23 -> I'm going to go ahead and erase all of this, all of these flex grow properties just temporarily.

23628.23 -> And then I'm going to leave it on this one. Now I'm going to set it to one. Now you might

23629.23 -> expect this is to be just a little bit bigger. But let's see what actually happens. If we

23630.23 -> go ahead and refresh the page, you can see that this is actually bigger than when we

23631.23 -> set this to flex this flex grow property to five. So what's going on here, pretty much

23632.23 -> what's happening is the default value for our flex grow property is actually zero, which

23633.23 -> means it's going to remain the same width, and it's not going to take up any excess space.

23634.23 -> So pretty much what's happening is when we set this to one, everything else is not taking

23635.23 -> any excess space, leaving it all to that one value. So all of that extra space is taken

23636.23 -> up by this block here. And you can see that and it's proved proven because there is still

23637.23 -> no excess space here, since it's all taken up out by this property. So what I would recommend

23638.23 -> is before we learn the flex

23639.23 -> property in the next video, just go ahead and add this flex grow property to every single

23640.23 -> item or container if you plan to use it. So now if we go ahead and refresh the page, you

23641.23 -> can see that that's working great now what's the advantage of

23642.23 -> property in the next video, just go ahead and add this flex grow property to every single

23643.23 -> item or container if you plan to use it. So now if we go ahead and refresh the page, you

23644.23 -> can see that that's working great now what's the advantage of

23645.23 -> Using this, before we move on to our next property, if I actually resize this window,

23646.23 -> right here, I'm just gonna resize it, you can see that when it grows, it still takes

23647.23 -> up the same proportions of excess space. Now we'll talk about getting smaller in just a

23648.23 -> little bit. But you can see here that it does actually take up the same proportion. And

23649.23 -> that's where the really responsive power of Flexbox comes in, is when you're resizing

23650.23 -> your windows and browsers and there's all of the different devices, this actually stays

23651.23 -> the same. So let's move on to our next property. Now flex shrink. So we know that the basis

23652.23 -> for the minimum width is 100 pixels, that's the minimum it can go. But when we actually

23653.23 -> shrink this down, and all of these get smaller, I'm actually going to go ahead and move the

23654.23 -> flex wrap property from here because it's, it's some little intrusive here. And although

23655.23 -> it's not good for this, it's not good for this example, we'll go ahead and use it later.

23656.23 -> So when we go ahead and actually shrink this window, you can see that that proportion is

23657.23 -> actually lost. So what's going on here, pretty much when you go below the minimum width,

23658.23 -> whether it's defined on our flex basis, or the minimum width of the of the, of the container

23659.23 -> item itself, what's happening is that proportion is completely removed, and you go to the default

23660.23 -> value of flex shrink. So flex shrink is similar to flex grow, except what happens is it defines

23661.23 -> the rate of shrinkage of each container item again, relative to the rest of the items.

23662.23 -> So in this case, what we have to do is go ahead and look at how this trig property works.

23663.23 -> The default value for this, unlike flex grow is one, not zero. So what this is saying is

23664.23 -> shrink each item at the same rate as all the other items. And that's why we can see that

23665.23 -> once we go under the minimum height, or sorry, minimum width, you can see that all of those

23666.23 -> items begin to look the

23667.23 -> same.

23668.23 -> So what I'm going to do here is actually go ahead and show you how to manipulate this.

23669.23 -> And this is where the real responsive power comes in. And where you can really change

23670.23 -> how everything looks on different devices, all we have to do is go ahead and specify

23671.23 -> the value that we want here. And one thing to note is that if you don't want something

23672.23 -> to shrink, you can just set the value to zero. So for example, if I wanted to remove the

23673.23 -> shrinkage of our fourth item here, well let me go with our first item. Right here, all

23674.23 -> I have to do is go ahead and shet set, sorry, our shrink value to zero. And what this is

23675.23 -> going to say is don't shrink the item, even if it goes below, do not shrink the item at

23676.23 -> all, let everything else shrink. Let's go ahead and see how this looks on our site.

23677.23 -> So we're going ahead, we're removing that space. But you can see that our first value

23678.23 -> does not shrink at all. So there we go. Now let's go ahead and start adding our shrinkage

23679.23 -> values to the rest of our items here. So what I'm going to do is first add a value of one

23680.23 -> to all of them, just like this, just to keep everything the same. And now what we're going

23681.23 -> to do is go ahead and start manipulating them. So first of all, let's go ahead and say that

23682.23 -> we want our middle value to shrink three times as fast. So we're gonna go over to our middle

23683.23 -> value and change the flex shrink to three times. So now we go ahead and refresh the

23684.23 -> page. And when we shrink it, you can see that that value shrinks three times as fast as

23685.23 -> everything else. So you can see that and it's pretty apparent there. So there we go. That's

23686.23 -> pretty much it for our three values. Now one thing I forgot to mention is if your flex

23687.23 -> shrink is one and it's not there on purpose, you can actually go ahead and remove it since

23688.23 -> the default value is one forgot to mention that in the when I started changing them.

23689.23 -> But there we go. Now what I'm going to say is, why would you use something like this

23690.23 -> flex grow and flex shrink, when you're laying out entire pages based on Flexbox, you want

23691.23 -> to make it as responsive as possible, you don't want to go and you know, have it looked

23692.23 -> completely different on one device to the other. What you can actually do is use this

23693.23 -> to change the look of a website, depending on what device you're on. So for example,

23694.23 -> you can use this property to change the look of a website on a mobile phone versus on a

23695.23 -> widescreen TV, it's going to be completely different. And you can do this using only

23696.23 -> a few properties instead of having to go and define entire styles for separate devices.

23697.23 -> So from here, we can actually really see the true cloud power of Flexbox. From here, we

23698.23 -> can go ahead and actually model our website with just a few styles that are very streamlined

23699.23 -> and efficient to change the look of a website completely on different devices. So I hope

23700.23 -> that was a little bit easy. To understand now, I know it's quite hard to wrap your head

23701.23 -> around. But this is the core concept of Flexbox. And it's what really makes Flexbox what it

23702.23 -> is. So if you understand this, the rest of Flexbox, and using it is going to be a breeze.

23703.23 -> Alright, let's move on. So in this video, we're going to be moving on from flex grocery

23704.23 -> in basis and actually talking about a really useful shorthand property that can summarize

23705.23 -> all three of these into an even more streamline method. So in the past video, I talked just

23706.23 -> briefly about the flex property. And pretty much what it is, is a shorthand to use the

23707.23 -> flex grow shrink and basis property in one go. So we can use this to our great advantage,

23708.23 -> because instead of adding all of these properties to every single one of these items, we can

23709.23 -> actually just summarize it down into one simple property. So let's go ahead and talk about

23710.23 -> it. Pretty much the flex property, which is the property that we're going to be using

23711.23 -> follows or takes in three values, the grow the shrink, and the basis. So what we're going

23712.23 -> to do is first add our growth. In this case, it's one, and then we're going to add our

23713.23 -> shrink, which is the default value of

23714.23 -> one.

23715.23 -> And that's just a little tip, if you don't actually have that defined, just go ahead

23716.23 -> and set it as the default value. So just a quick summary grow the default is zero, which

23717.23 -> means it's not growable. The default string value is one, which means shrink it at the

23718.23 -> rate of everyone else. And then the there is no default for the basis property, unless

23719.23 -> you use something like auto. So what you can do is go ahead and define that as 100 pixels.

23720.23 -> Now, what we're going to do is go ahead and do it for the rest of these items, flex, flex

23721.23 -> just the property. Here, we're going to go one, which is the grow three, which is the

23722.23 -> shrink, and again, 100 pixels for the basis. And you can start to see kind of the rhythm

23723.23 -> that I'm getting into here, five for the grow one for the shrink, which is the default,

23724.23 -> and 100 pixels for our basis.

23725.23 -> Let's go ahead and do it for this one.

23726.23 -> And like I said, you can see the rhythm here, and you can just go ahead and do this very

23727.23 -> quickly, without having to manually go through and add all three of these properties. One,

23728.23 -> one, and 100 fixes.

23729.23 -> All right, now let's go ahead and erase all of these other unnecessary properties. Now

23730.23 -> that we have our flex property and restart. So if we did this, right, pretty much what's

23731.23 -> going to happen is everything is going to look the same, since all of our values are

23732.23 -> still working, we just threw them into a shorthand. Let's go ahead and first before we refresh,

23733.23 -> check out the behavior. Whoops, something's going wrong there. Yeah, there we go. So let's

23734.23 -> just check out the behavior, we shrink B get smaller D doesn't shrink at all. And we when

23735.23 -> we size up, our last value gets bigger. Let's go ahead and refresh the page and see if this

23736.23 -> worked. So when we shrink, D is supposed to stay the same, and B gets smaller. There we

23737.23 -> go. So D stays the same, and B gets smaller. And if we enlarge it, you can see that C gets

23738.23 -> larger. So there we go, you can see how all of this works. Instead of adding three properties,

23739.23 -> we can actually just go ahead and do this in one straight swoop, just go through and

23740.23 -> add all of all three values using one property, the flex property. Alright, let's move on.

23741.23 -> So this is going to be the last video on Flexbox. And I'm sure that we've summarized all of

23742.23 -> the different things that you can do with Flexbox in this section, and then you can

23743.23 -> go off and start using it and creating all sorts of really cool responsive websites and

23744.23 -> layouts with it. But for now, what we're going to be doing is going through and learning

23745.23 -> the final property. Now we've learned how to align all of the elements at the same time

23746.23 -> in our flex container, we learned how to align it both vertically and horizontally, but we're

23747.23 -> actually going to be doing is learning how to align each item. And remember, because

23748.23 -> each item is laid out with width wise in a certain way, we can only align it vertically.

23749.23 -> So just keep that in mind for now. So let's get started. Now in order to align it vertically,

23750.23 -> we use the Align items property to work with and align all of these. So in this case, what

23751.23 -> we did with our container is aligned all of them to center. But what we're going to be

23752.23 -> doing now is going through and aligning each individual item using a special property called

23753.23 -> align itself. Now one thing to note is that this property will override the Align items

23754.23 -> property if you have it enabled. So for example, if I wanted to align this to the top, it would

23755.23 -> override our center and what The line this only only and only this item to the top. So

23756.23 -> let's get started. First thing I want to do is go ahead and add the property. And remember,

23757.23 -> we have to go and add it just like everything else. So I'm going to go through and add it

23758.23 -> now. So first thing I'm going to do is go and let's just take our first item, for example.

23759.23 -> Where is it? There we go. So now I'm going to go ahead and add a line self. And now we

23760.23 -> can go ahead and add our different values. So let's go ahead and get started, I'm going

23761.23 -> to go ahead and try something just like with the normal values, let's go ahead and save

23762.23 -> flex start. So just like our other values with our default container, what we can actually

23763.23 -> do is align them with the same values. So center flex start and flex end. So let's go

23764.23 -> ahead and refresh the page. And you can see now that that specific item, which is D, or

23765.23 -> the first item is aligned to the start of the flex container, whereas the rest of the

23766.23 -> items are aligned to the middle, which is based on the Align items property that we

23767.23 -> had on our container. So now let's go ahead and create a sort of V shape out of all of

23768.23 -> our items here. So what I'm going to do is first go and add our flex, sorry, aligned

23769.23 -> self property to all of our values, here are all of our container items. And now what I'm

23770.23 -> going to do is start styling them. So we know that the first one is at the start, we want

23771.23 -> the second one here to be in the center. So although it's already defined, I'm just going

23772.23 -> to say center to make everything a little easier to read. Now we're going to go ahead

23773.23 -> and look for the third one, which needs to be at the bottom. So what I'm going to say

23774.23 -> here is flex

23775.23 -> end.

23776.23 -> And let's go ahead and refresh working so far. Our fourth one has to be on the same

23777.23 -> level as he so we're going to keep that in the center here, wherever it is, let's see.

23778.23 -> Yep, it's the fourth one centered. And now we want our final one to be at the top as

23779.23 -> well. So it is a little confusing to read with the orders. But after a little bit of

23780.23 -> looking, you can see how this whole thing works. Now obviously, it's a little bit out

23781.23 -> of proportion because of our sizes here. But you can see that our thing is still responsive.

23782.23 -> It's still resizing in the same way, we just aligned the items differently. Alright, so

23783.23 -> there you go. That's pretty much how this works. And one thing to note that before we

23784.23 -> move on is you can't actually use stretch and baseline on a line self, they just don't

23785.23 -> work because they are kind of container specific properties and they won't, they work off of

23786.23 -> values of the container. So aligning it on an item just wouldn't really work in the same

23787.23 -> way. So that is one thing you need to keep in mind is that you can only use these three

23788.23 -> values. Alright, so like I said, we were moving on and learning about all of the different

23789.23 -> alignments. And now that we've learned how to align each item, we can really use this

23790.23 -> along with our flex property and some other Flexbox properties on the container to create

23791.23 -> a really nice responsive layout. So I encourage you to go ahead and try this on your own,

23792.23 -> create your own flex layouts, and don't even just use these blocks, you can go through

23793.23 -> and use images and forums and all sorts of things. And just style them in a way that

23794.23 -> makes the website look good. Because now that you've learned the tools to create a responsive

23795.23 -> container, you can go through and actually start practically applying it to the real

23796.23 -> world. Alright, let's move on. So in this video, we're going to be looking at grid versus

23797.23 -> Flexbox. Now in the previous section, we looked at Flexbox as a whole, we looked at all the

23798.23 -> different container properties, we also looked at some of the other properties that we can

23799.23 -> use on our items. But today, we're going to be looking at a different type of well layout

23800.23 -> property, and that is grid. So before we get started, I'm going to give a little introduction

23801.23 -> to grid and what it actually is. So similar to Flexbox grid is a display type that's going

23802.23 -> to allow us to work with our layout and our CSS in a different way. So again, they are

23803.23 -> both completely all complete alternatives to some of the other layout features that

23804.23 -> were used in the older times and in other versions of CSS. So what we're going to be

23805.23 -> doing is again, in this section, going through looking at the different types, and what we

23806.23 -> do with grid, and how it actually all fits together.

23807.23 -> So now that we know some of the similarities, let's look at the differences. So although

23808.23 -> they are both alternatives to our, to our different layouts, what we can actually do

23809.23 -> is look at how they work at a core level. And although they are completely the same

23810.23 -> in what they achieve and their core goals, they are completely different in how they

23811.23 -> work. So first of all, the grid system is a lot more manual it requires well it doesn't

23812.23 -> require but you can control your container in a much easier way. So you can really customize

23813.23 -> your layout and see how everything fits together with a lot more tools. So one of the the main

23814.23 -> difference is how the grid system focuses on both the width and height. So although

23815.23 -> Flexbox does have some height features, it's mainly focused on the width of flex items

23816.23 -> in the container. Whereas grid is focused, very focused on providing both tools for width

23817.23 -> and height to create Well, a grid. And that's really the reason for the name is because

23818.23 -> it is more focused on creating a grid, providing tools for columns and rows, and all sorts

23819.23 -> of things that we're going to cover in the next few videos looking at, you know, some

23820.23 -> of the tools that we can use in grid and the inherent differences between grid and Flexbox.

23821.23 -> So I hope that was a really in depth view at the differences between grid and Flexbox.

23822.23 -> And we will go through and talk more about them as we go through the section, you know,

23823.23 -> learning more tools and properties that we can use on our grid. Alright, so I hope that

23824.23 -> you took a lot from this video. And although you're not really supposed to know anything

23825.23 -> about how they work, it's good to keep in mind about some of the differences between

23826.23 -> them, and draw your own conclusions about whether you should use grid or Flexbox depending

23827.23 -> on what type of website or application you are creating. Alright, let's move on.

23828.23 -> So in this video, we're going to be starting creating our different grid items and working

23829.23 -> with our grids. So I've already created and set up a little playground or sandbox for

23830.23 -> our grid here, we've pretty much adopted the same style as the Flexbox here using all of

23831.23 -> our different, you know, widths and heights and all these different blocks. But I encourage

23832.23 -> you, when you're doing this on your own to go ahead and experiment around, maybe use

23833.23 -> some different items. I'm just doing this because it's easy for demonstrations. Alright,

23834.23 -> so let's get started. Pretty much grid. And while Flexbox have very similar ways of activation,

23835.23 -> they both use a display type or the display property to set or activate the container.

23836.23 -> Now the only difference is is is the property that it or sorry, the value that needs to

23837.23 -> be used to activate these, which is pretty fair, which is fairly obvious. So let's get

23838.23 -> started. First of all, we need to put it on the container. Remember, we're not working

23839.23 -> with the items, we're working with the container as a whole. So all I need to do similar to

23840.23 -> how we created our flex container is that of saying Flexbox, or grid box or whatever,

23841.23 -> all we have to do is type in grid. And what this will do is set up our grid container.

23842.23 -> Let's go and refresh. And you can see that although you know may not appear that nothing

23843.23 -> has changed, we have activated a whole range of properties that we can now use on our grid

23844.23 -> here to set up everything and start creating our grid. Now you'll notice that when we set

23845.23 -> up our Flexbox, so many things different so many different things change. But without

23846.23 -> grid, we actually need to go through and set up the grid by ourselves, which is what the

23847.23 -> whole manual element about it, which is where the whole manual element comes in is we have

23848.23 -> to go and create a grid and sort of shape it in a way that suits our needs. Alright,

23849.23 -> so that's pretty much it for creating the grid. Now I know this wasn't a very heavy

23850.23 -> video, but there are going to be a lot more concepts that we're going to need to learn

23851.23 -> in the future. So this is quite an easy video, just setting up the grid. And now that we've

23852.23 -> done the easy part, we're going to go through and start learning some of the more difficult

23853.23 -> parts of CSS Grid.

23854.23 -> Alright,

23855.23 -> let's move on. So in this video, we're going to be moving on with grid and start creating

23856.23 -> and setting up this grid to really just define the style that we want to use for our website.

23857.23 -> So what we're going to do is go ahead and get started with some of the two basic properties

23858.23 -> that we're going to be using, which are template rows and columns. So unlike Flexbox, we can

23859.23 -> actually specify the number of grids are well the number of rows and columns that we want

23860.23 -> manually and create the exact style that we want to divide up all our elements. So what

23861.23 -> we're going to be doing is using two special properties that we can go ahead and use. And

23862.23 -> what this is going to do is allow us to split up our grid into a specified number of rows

23863.23 -> and columns, which we can then divide the items up into, and then start specifying the

23864.23 -> sizes and other parts of these items. So like I said, we're going to be going through and

23865.23 -> you know, doing all of this and as we go through. In this section, we're going to be getting

23866.23 -> more experienced with rows and columns and some of the other core concepts in grid that

23867.23 -> will allow us to really shape up this grid box that we have right here and start applying

23868.23 -> it in different places. So Let's get started. So like I said, the two properties that we're

23869.23 -> going to be learning today are about template columns and rows. So pretty much what this

23870.23 -> does is sets up the grid to start off with a certain number of rows or columns depending

23871.23 -> on what property that you're using. And then from there, you can actually specify the sizes

23872.23 -> of each column and row. Now, we're not to changing individual item sizes yet, but we

23873.23 -> can actually go ahead and change the size of each individual row or column to create

23874.23 -> alternating sizes and alternating boxes, which have alternating sizes. So let's get started.

23875.23 -> Now the two properties that we need to use, which are pretty easy to learn our grid, template

23876.23 -> columns, and rows, don't forget about areas for now we don't need to know them. Now, what

23877.23 -> we're going to do is set up our grid template columns first. So instead of doing something

23878.23 -> where we might be taken a function or something, this is actually set up in a really nice and

23879.23 -> elegant way. And all we have to do is type out the sizes that we want. And based on the

23880.23 -> number of sizes or values that we input, it will decide the number of rows that we want.

23881.23 -> So I'll give you an example here, let's just say I'm going to the first row to be 10 pixels

23882.23 -> wide, which is pretty small. And then I wanted the second one to be 50 pixels, and the third

23883.23 -> one to be 10

23884.23 -> pixels again.

23885.23 -> So what we're pretty much doing here is setting up setting it up so that we have three columns.

23886.23 -> Because we've passed in three values, the first is going to be about 10 pixels, which

23887.23 -> is very, very small, the next one is going to be 50 pixels. And then the last is going

23888.23 -> to be 10 pixels. Now let's see how this looks. Now if you don't already know this already,

23889.23 -> columns are going downwards, not this way. So just keep that in mind, we refresh the

23890.23 -> page. And you can see what kind of an effect that has here,

23891.23 -> we have

23892.23 -> a lot of empty space open here. Again, because we're using absolute values and not relative

23893.23 -> values. Or at least relative to the box that we have here, you can see that our boxes here

23894.23 -> are really divided up in a weird way. So our first column is 10 pixels very small. And

23895.23 -> then the second one is it's getting really mixed up you can see here with our wrapping

23896.23 -> and all of this different stuff. And of course, we don't have those lines to show us how our

23897.23 -> grid is set up. But you can see that doing something like this would obviously really

23898.23 -> mess up the grid. Now, obviously, you're not going to go and set all of this to 10 pixels

23899.23 -> at 50 pixels. But you can just see what kind of an effect this has already. We haven't

23900.23 -> even created any rows yet. And we've already completely customized the way our grid looks

23901.23 -> without touching or doing anything. Unlike Flexbox, we had to actually really go in and

23902.23 -> specify it in a way that changed everything. So let's get started on some of the next one,

23903.23 -> the next one, which is our grid template. What's it called rows. So what's going to

23904.23 -> happen here is instead of specifying the columns, we're going to go ahead and specify the rows

23905.23 -> and it works in exactly the same way, all we need to do is pass in a set number of values,

23906.23 -> and it'll decide what we need for us. And just one thing to note, these don't need to

23907.23 -> be the same imagine it imagine it as sort of a table here, we have three columns going

23908.23 -> downwards, and three rows going from left to right. So let's go ahead and specify this

23909.23 -> year, I'm going to go ahead and say I only want two rows. So I'm gonna say the first

23910.23 -> one is 50 pixels. The second one is 250 pixels. Now let's see how this looks. So you can see

23911.23 -> again, this whole thing has expanded. And now our first row is much smaller, and our

23912.23 -> second row is a lot bigger. So you can see already what you can do with this. And that

23913.23 -> you have power as of using these template columns and rows, as I've explained before,

23914.23 -> but this isn't a really convenient, or efficient way to create a nice looking grid. Because

23915.23 -> how are we supposed to know the elements or the amounts of each device, especially with,

23916.23 -> you know, all these different viewports and sizes, we need to keep this consistent across

23917.23 -> all devices. So there's actually a really easy value that we can use, which is called

23918.23 -> auto. Now if we actually go ahead and set all of our rows to auto, what's going to happen

23919.23 -> is it's actually going to divide the space evenly between the three no matter the size.

23920.23 -> And I can also even go ahead and do this with my rows. And now if I refresh the page, you

23921.23 -> can see this looks a lot better. Now you can kind of see how the spacing is working here,

23922.23 -> we have three columns. And obviously there's nothing in our third column for the bottom

23923.23 -> row. But then we also have two rows, so it's kind of split down the middle. And now we

23924.23 -> have our three elements up here and our fourth and fifth element down here. So you can see

23925.23 -> here that what's happening is it's dividing the space evenly between our elements or our

23926.23 -> grid. And if we did actually go ahead and remove on the values and change it to an absolute

23927.23 -> value, use something like 100 pixels, what's going to happen is the remaining space is

23928.23 -> going to be kind of divvied up between the two columns. And obviously, it doesn't look

23929.23 -> like it here, because we don't have spacings enabled. There's a bunch of things going on

23930.23 -> behind the scenes. But what happens is the remaining space is kind of divided up between

23931.23 -> the two columns. So you can see already that with these values, we can create some really

23932.23 -> nice looking grids without even having to do much work. Now, what I would recommend

23933.23 -> is, instead of going and specifying all of our absolute values, go ahead and just create

23934.23 -> the number of columns and rows that you want, while also using auto values. Because later

23935.23 -> in the future, what we're going to do is learn some techniques to split up our items and

23936.23 -> make them look a lot larger without having to change the size of the columns and rows.

23937.23 -> Because it is a much easier, it's much easier to work with our items rather than the grid

23938.23 -> itself. Alright, so that's pretty much it for template columns and rows. Now, like I

23939.23 -> said, just for any other exercise, I recommend you to go ahead and play with this on your

23940.23 -> own. Try and create your own custom grids and throwing images and all sorts of things

23941.23 -> in there, play around with it, and try and see what you can create. And just try and

23942.23 -> come up with this many cool crazy ideas as possible. Because there is a lot you can do

23943.23 -> with just these two. Properties, which are grid template columns, and grid template rows.

23944.23 -> Alright, let's move on. So in this video, we're going to be looking at some more properties

23945.23 -> relating to the grid container. Now, these properties are very similar to the ones we

23946.23 -> learned in Flexbox, which is actually somewhere up here, where we've learned how to justify

23947.23 -> and align items in different ways. But there are very similar concepts. The only problem

23948.23 -> is some of the values and the properties themselves are actually kind of different. So we need

23949.23 -> to go ahead and look over those differences. So that we can get used to interchanging these

23950.23 -> properties between the two without kind of affecting our understanding of the properties.

23951.23 -> So what I'm going to be doing in this video is going and teaching you in this video how

23952.23 -> to align and justify our items both horizontally and vertically. So let's start with the first

23953.23 -> one, which is very similar to Flexbox. And it is the justify content property. So just

23954.23 -> like we've learned before, this is going to justify it on kind of the horizontal axis

23955.23 -> instead of on the vertical axis. So for example, if we were to center these items, what we

23956.23 -> would do is we'll push them all to the center, instead of moving them up and down. So there

23957.23 -> we go. Let's go ahead and get started with this, I'm going to go ahead and create a new

23958.23 -> property here justify content. Now, just like with our previous property, there are three

23959.23 -> main values that are used both in our justify content property, and the aligned content

23960.23 -> property, which we're going to learn in just a second. The only problem is in our Flexbox

23961.23 -> section, we looked at them and they did have a prefix, which are flex start and flex end.

23962.23 -> So basically, like I said, these are sort of do signify the start and end of the flex

23963.23 -> box depending on what axes you're aligning your items on. But instead of adding that

23964.23 -> prefix here, we're just going to say start and and center, instead of something like

23965.23 -> grid start or granddad, they don't use any of that prefixes. All that's included are

23966.23 -> the three main keywords. So it's a lot simpler to understand. And but it is a little bit

23967.23 -> harder when you start using both Flexbox and grid, and you get the two very mixed up or

23968.23 -> confused. So let's go ahead and do that. Now. I'm just going to go ahead and justified the

23969.23 -> content to the center. Why don't I go ahead and do it or justify it to the end this time

23970.23 -> just to spice

23971.23 -> things up a little bit.

23972.23 -> If I refresh the page, you can see that our template columns, and that's the key word

23973.23 -> there template are ignored, and everything is completely aligned to the right side of

23974.23 -> our grid. So we can also do it just like with our previous properties in our Flexbox, we

23975.23 -> can also align it to the start and do pretty much whatever we want with these. So the next

23976.23 -> value, or the next two values that we're going to use for this property are space around

23977.23 -> and space evenly, which is a little bit different from space between. So they both work in the

23978.23 -> same way, in that they create spacing between the items to give them to you all even them

23979.23 -> out in the grid. But the only difference is on our Flexbox we actually used space between

23980.23 -> whereas on our grid, we're using the value space evenly. So I'm going to go ahead and

23981.23 -> show you that here. I'm going to just go ahead and say space evenly. Like that. Now if I

23982.23 -> refresh the page, you can see that although it doesn't actually show up here, maybe because

23983.23 -> of a developer error or something like that, we now have our it Here spaced evenly, just

23984.23 -> like we can see here in this grid box. Now there are remember spaces between or before

23985.23 -> and after our first items, and that's the key word there. You can see instead of saying

23986.23 -> between it says evenly. And pretty much, what this is saying is, we're actually going to

23987.23 -> space them evenly, not just put space in between them. So like I said, I talked about a lot

23988.23 -> of uses of these in the previous section, but we're not going to go over those now.

23989.23 -> So let's go ahead and try out the next value, which is space around. And when we refresh

23990.23 -> the page, you can see that this looks pretty much exactly the same. Now, of course, we

23991.23 -> don't have lots of space or room to work with here. So you're not going to see the direct

23992.23 -> impact or differences between these. So for now, let's just consider them the same purpose.

23993.23 -> Like I said, we've used both of these in the past, and you know exactly what they do. So

23994.23 -> now let's go ahead and get started with our next value or sorry, property, which is our

23995.23 -> align content property. Now, instead of using align items, we're using aligned content.

23996.23 -> So that's just one thing to keep in mind. But I'm going to go ahead and say is aligned

23997.23 -> content. And before that, let's actually go ahead and give it a little bit more height,

23998.23 -> I'm going to say maybe 500 pixels, refresh the page. And obviously, these stretch out,

23999.23 -> we don't have any defined heights for them. But we don't have to worry about that for

24000.23 -> now, I'll go ahead and change that in just a second. So what I'm going to do is go ahead

24001.23 -> and start playing around with some of these properties. Now, what's actually really interesting

24002.23 -> is for our align items, we can actually use both space evenly and space around. But we

24003.23 -> also we also have our space between property from our Flexbox section. So if I go ahead

24004.23 -> and try that out now,

24005.23 -> space in between,

24006.23 -> and refresh the page, you can see what happens is that we have our space between right there

24007.23 -> just as we've signified and it's not spaced evenly. Remember if there's no space, before

24008.23 -> or after our top and bottom items. So that's a really cool feature to keep in mind with

24009.23 -> our aligned content, property. And of course, along with space evenly and space around,

24010.23 -> we also have our three standard values, just go ahead and show you that here are three

24011.23 -> standard values, which are center start and end. So I can go ahead and show you that

24012.23 -> now. Start

24013.23 -> out or sorry, line content to the end. And that will push everything down to the bottom

24014.23 -> of bottom of the page. So there we go. There's a lot to digest. In this video, there's a

24015.23 -> lot of different properties to cover and memorize. But don't worry about all that for now just

24016.23 -> understand which property does which. And everything will just fall naturally into place.

24017.23 -> And remember, if you ever forget how to do something, you can always go and both review

24018.23 -> the lectures or just Google it. It's really that simple. There are tons of articles and

24019.23 -> helpful resources out there to help you decide or figure out some of the properties you may

24020.23 -> have lost or forgotten in your time using CSS. So there we go. That's pretty much it

24021.23 -> for aligning content, it's quite easy in terms of properties. Although there are a lot of

24022.23 -> values once you start using them and getting used to some of the subtle differences, everything

24023.23 -> will just fall naturally into place. As I said before, alright, let's move on. So in

24024.23 -> this video, we're going to be looking at another feature of our grids here, and that is going

24025.23 -> to be column, column gaps column and row gaps. So we've looked at aligning content, we've

24026.23 -> looked at creating columns and rows. Now we're going to look at the final piece that kind

24027.23 -> of connects everything together for our containers, which are gaps. So we've talked about how

24028.23 -> our grid is kind of set up, we have our boxes, we have our columns and our rows. And then

24029.23 -> we can actually change these or override them using our justification here, I'm actually

24030.23 -> going to go ahead and erase these or comment them out just for this lecture. So we can

24031.23 -> create some good demonstrations here. So what I'm going to be doing is going through and

24032.23 -> talking about these gaps. And they're actually pretty important when it comes to the whole

24033.23 -> thing because you can completely change the way a grid looks by creating spacing. And

24034.23 -> obviously, if you've seen any websites, and really look closely at it, you'll understand

24035.23 -> the importance of spacing in websites, they really bring everything together and create

24036.23 -> sort of a hierarchy that's easy on the eyes if you've taken any UX or design. So let's

24037.23 -> get started. Now what I'm going to be doing is going ahead and creating these column and

24038.23 -> row gaps. So the first the first one I want to talk about is column gaps. And just as

24039.23 -> we were working with our call template columns and template rows, the the properties that

24040.23 -> we need to use are pretty similar. So first, I'm going to go ahead and start with our columns.

24041.23 -> Now the property that we're going to be using is grid column gap. And you can obviously

24042.23 -> kind of associate these together to memorize them or maybe learn them easier. But besides

24043.23 -> that, we're going to go ahead and get this started. Now, of course, this only takes one

24044.23 -> value, we don't need to specify any more, because what we're going to be doing is giving

24045.23 -> each while each column A gap between them. So let's go ahead and give it a value, I'm

24046.23 -> just going to go ahead and say 150 pixels. To make it a little bit evident, go ahead

24047.23 -> and refresh the page. And although it may not be obvious, immediately, you can kind

24048.23 -> of see that these columns are a little bit more spaced out now. Now, of course, there's

24049.23 -> no lines to kind of show you the visualization. But you can kind of deduce from this, that

24050.23 -> there is definitely a bigger gap between the columns. Now that we've specified it. So now

24051.23 -> what I'm going to do is go ahead and actually change this and give it a row gap. So very

24052.23 -> similar to our previous previous property, we're going to use grid row gap. And this

24053.23 -> is pretty much the exact same thing, except it specifies the gap between rows. So this

24054.23 -> is probably going to be a lot more obvious here, what I'm going to do is just going ahead

24055.23 -> and saying 300 pixels, and notice how the gap of this place kind of gets bigger. You

24056.23 -> can see now that there is a much bigger gap between our top row and our bottom row. So

24057.23 -> that's pretty easy. But obviously, you don't want to go through and specify these every

24058.23 -> single time. So there's actually a really nice shorthand property that we can use to

24059.23 -> bring this all together, I'm going to go ahead and actually, I'll keep these for now, and

24060.23 -> then I'll erase them

24061.23 -> when we're done.

24062.23 -> So instead of specifying which axes you want to do it on, or which axis sorry, you can

24063.23 -> just say grid gap. And what this is going to do is just create the gap instantly, where

24064.23 -> you can pass in two values and specify it or do it all in one go. So this takes the

24065.23 -> column first. And then the row, kind of just how template columns goes first. And template

24066.23 -> rows go first in a shorthand, which we haven't actually talked about. But we'll get to that

24067.23 -> later. For here, what we're going to do is specify our column first, which is 150 pixels,

24068.23 -> and our row gap next 300 pixels. Now, I'm going to go ahead and erase these other values

24069.23 -> that we don't need and refresh the page. So I actually made a little mistake there, and

24070.23 -> I put the column before the rows or if I cause any confusion there. So what I'm going to

24071.23 -> do is actually just go ahead and change this really quickly. So that this will work. Now

24072.23 -> if I go ahead and refresh, you can see that they look exactly the same. Again, sorry for

24073.23 -> that mix up. Just remember that the row or the row size comes before the column size,

24074.23 -> just keep that in mind. So there we go. Now we have our grid gap setup. Now this is pretty

24075.23 -> much it for our well, column gap or row gap are all of these gaps for our grid layout.

24076.23 -> Now, there's really not that much to it, it's very easy to set up. But once you do that,

24077.23 -> it becomes very easy to sort of work with your grid along with the other properties

24078.23 -> to create some really nice looking layouts. And once we start learning some more of the

24079.23 -> properties in the next few videos, you can really maximize the use of the grid layout

24080.23 -> in CSS. Alright, let's move on. So now we're going to be moving on to a little bit more

24081.23 -> complex, the more complicated parts grid, and in this video, we're going to be covering

24082.23 -> quite a big topic, it's going to be a lot to chew. And don't worry, if you don't get

24083.23 -> it on the first try. We're going to go through this slowly, and we're going to go through

24084.23 -> it step by step so that we can learn everything about this. So in this video, we're gonna

24085.23 -> be learning about the real true power of grid and more we're going to be learning is how

24086.23 -> to rearrange and resize items based on starting at starting and ending points. So that's what

24087.23 -> we're going to be doing today. The first thing we need to do is obviously go and go to our

24088.23 -> grid container on our HTML file, since we need to specify the start and end points of

24089.23 -> each item individually. So let's get started. Now the first thing I'm going to do is actually

24090.23 -> go ahead and remove all of these values because it'll be much easier to see and understand

24091.23 -> what's going on. When we just have these fives here, what I'm actually going to do is go

24092.23 -> ahead and add a sixth item just to break even here and make everything look great. So I'm

24093.23 -> going to go ahead and choose another color. something random here, maybe a purple. Do

24094.23 -> we have that? Yeah, we do have that will be a green something. Actually, let's just go

24095.23 -> for a nice dark orange something here. And we're going to go ahead and copy that. And

24096.23 -> now we have a sixth values to break even here. So what we're going to be learning in this

24097.23 -> video is how to, like I just said resize items, and there are actually a few. There we go,

24098.23 -> we have our colors have now, we do have a few different shorthands and properties that

24099.23 -> we can use to set this up. So the first thing we need to learn is the lines and the concept

24100.23 -> of lines. So we do know that we have our columns and our rows. Well, what's happening here

24101.23 -> is that each column starts and ends or well, each column is designated a certain line.

24102.23 -> So for example, this would be line one beginning here, this would be line two, and then this

24103.23 -> would be line three. And then for our rows, we have our line one and our line two. So

24104.23 -> what we can actually do is say set, set this item to go from line one to line three, and

24105.23 -> from row line one to row, line two. And we can do this using a few properties and some

24106.23 -> shorthand, and some other keywords and other other things that we can do to set this whole

24107.23 -> thing up. So one thing you need to keep in mind that is that lines are the basically

24108.23 -> the core concept, the most important part of grid, it's what makes grid what it is,

24109.23 -> all of the properties that we've learned, are all kind of revolving around lines, and

24110.23 -> the model is created by those lines. So that's just one thing to keep in mind. Alright, let's

24111.23 -> get started. So the first thing I'm going to do is talk about how to start an end at

24112.23 -> certain item at a designated area. So we're going to go through and specify the start

24113.23 -> and end points. Now there are many different ways to do this. But we're going to start

24114.23 -> with the basic sort of syntax that we should use to set this up. And then we'll move in

24115.23 -> some into some of the more advanced syntax to set this thing up and start creating shorthands

24116.23 -> and other shorts of properties. So let's go ahead and get started. What I'm going to do

24117.23 -> is select what item I want, let's just go ahead and say the first item. And now what

24118.23 -> we need to do is go ahead and set read column like this.

24119.23 -> So what I need to do from here is up whoops, what I need to do from here is to specify

24120.23 -> a start and an end point. And they are separated by a slash. So the start point is going to

24121.23 -> be the starting column line. So I'm going to say one, and the end point is going to

24122.23 -> be well, the ending, and I'm just going to say two, or Yeah, I'm gonna say two or three.

24123.23 -> For now, I'm just going to go ahead with three. Now if I go ahead and refresh the page, you

24124.23 -> can see what's going on here. Now, obviously, it looks really weird with all of these different

24125.23 -> items here, and they're being rearranged in a different way. What's happening is we're

24126.23 -> starting at line one, and then we're going to end at line three. And you can see that

24127.23 -> although it's not resizing properly, it still does take up that space in an invisible way.

24128.23 -> So we have our item two at the start of line three, and everything is pushed right past

24129.23 -> it overriding those template rows and columns that we created. Now let's go ahead and specify

24130.23 -> our next value, which is the grid row value. So what we're going to do here is just with

24131.23 -> our first one, we're going to set a start and an end point and separate them by a slash.

24132.23 -> So what I'm going to do is go ahead and say, start at row one. And we're going to whoops,

24133.23 -> and we're going to end again, let's just go ahead and say line two, just like this. Now

24134.23 -> I'm going to refresh the page. And you can see nothing's happened because it does start

24135.23 -> at one and end at two. Let's go ahead and set three right there. So now you can see

24136.23 -> what's going on here. Although it didn't, it didn't show anything before when we had

24137.23 -> one to two, because it already took up that space. When we set it to 123, you can see

24138.23 -> that everything has now been pushed again, and the space has been separated accordingly.

24139.23 -> So you can kind of see the power of this already, you can create all sorts of layout menus and

24140.23 -> sidebars, just by using this syntax alone. And it is very powerful. But there's also

24141.23 -> many different ways to do it, which we're going to be covering over the next few videos.

24142.23 -> Now instead of specifying an endpoint or an end line. Because these can get quite confusing,

24143.23 -> you don't know where line start and where lines end. And it does get quite confusing,

24144.23 -> especially when you have very big grids with lots of different columns and rows. So instead

24145.23 -> of this, you can actually specify the distance that you want it to take up. So the keyword

24146.23 -> that you can use for this is span. What this is going to say is start at some line, whichever

24147.23 -> one you choose, and span or take up a certain amount of well spaces depending on what value

24148.23 -> you're using. So for now, I'm going to say span two, and here. I'm also going to change

24149.23 -> this to span two. Now let's refresh and see what happened. You can see that nothing has

24150.23 -> changed. Of course because They are exactly the same thing, you start at column one. And

24151.23 -> you take up two more spaces, you go up two more lines, you start at row one, and then

24152.23 -> you go down two more lines. So you start at line 112, just like that. And this is a much

24153.23 -> easier way to work with grid columns and rows, because you can kind of see what you're doing,

24154.23 -> instead of just specifying start and end points like this, you can actually kind of visualize

24155.23 -> the what you're doing with your grids, and how big you want to make your items. So that's

24156.23 -> pretty much it for these different items. Now, there are, like I said, many different

24157.23 -> shorthands that you can use, which we're going to be learning in just a few videos time.

24158.23 -> But this is kind of the basic idea of specifying these items, you can go through and you can

24159.23 -> set start and end point, add points based on the different lines and the sort of model

24160.23 -> created by the grid. And then you can set how big you want each item to be. Alright,

24161.23 -> let's move on. So today we are going to be covering or looking at the last feature of

24162.23 -> our grid section. And it's pretty much just a summary of what we did here, but using a

24163.23 -> shorthand. So you can see that we have our grid column and our grid row. So we identify

24164.23 -> our starting and ending points for both axes. But there's actually a way that you can do

24165.23 -> this whole thing in one go. And usually when you're developing what websites, you're going

24166.23 -> to want to do this, you don't want to go and do each of these properties individually.

24167.23 -> For all of them, you're going to want to do it quick and fast for both axes. And that's

24168.23 -> how you get the maximum out of grid. So what we're going to be using is something called

24169.23 -> the grid area property. And just like before, pretty much what happens is this is a shorthand

24170.23 -> that summarizes these two in one property. So it is a little bit confusing to get your

24171.23 -> head around the

24172.23 -> starting and ending points. So I'm just going to go through it with you. So right now I

24173.23 -> have changed this part a little bit of kind of messed around with the column starts and

24174.23 -> ends so that you can differentiate between the values. So pretty much what the first

24175.23 -> value we're going to input just like here is going to be your row starting point. So

24176.23 -> you're going to go ahead and input two in this case, because we want to match this exactly.

24177.23 -> And the next instead of your row end is actually your column starting point. So then we're

24178.23 -> going to put one. Now from here, this is where a lot of people get mixed up and confused.

24179.23 -> Pretty much what's happening is just how like with margin, you go top right, bottom left,

24180.23 -> or with any other kind of property that deals with those kind of multiple value scenarios,

24181.23 -> what's going to happen here is you have the row column start, and then you have the row

24182.23 -> column. And so just keep that in mind. And everything will work out for you. So all you

24183.23 -> have to do is go ahead and say two, one. And now we're going to put our row end. Remember,

24184.23 -> we have row start column, start row end, and then column end. So here we're gonna put span

24185.23 -> to Now remember, this can be a span value, or an end value, it doesn't actually matter.

24186.23 -> So you can do whatever you want here. And then of course, the column ending value, which

24187.23 -> in this case is span three. Should now what we're going to do is go ahead and and just

24188.23 -> comment these out for now and see if anything has changed. And you can see, of course, it

24189.23 -> hasn't. Since we pretty much summarize this into our shorthand, we don't actually have

24190.23 -> a use for these anymore, so I'm going to go ahead and get rid of them. So now that you

24191.23 -> know how to do it, let's talk about some of the benefits of this. Now, when you're creating

24192.23 -> a grid, you're creating a huge practical system, most likely, you're going to be organizing

24193.23 -> pages into headers, and sidebars, and all sorts of things. And you don't want to go

24194.23 -> and input those two for each one, it gets a little bit confusing after a while. So it's

24195.23 -> much easier if you just have one property that can summarize both the column and the

24196.23 -> row in one clean swoop. And then you can apply them to all of your different pieces. So your

24197.23 -> sidebar would go and start and end here, then your header would go here and you get the

24198.23 -> idea. So that's pretty much it for grids and grid area, there's a lot to cover. And of

24199.23 -> course, practice makes perfect with these kinds of things. But the more you use it,

24200.23 -> the more you will understand how to sort of work with it and play around with some of

24201.23 -> the tricks that really get grid to work properly. Now these tricks can't really be taught, because,

24202.23 -> of course, they're personal to the user, the developer and what kind of work they're doing.

24203.23 -> So there's always shortcuts and all sorts of little tricks you can use with these properties

24204.23 -> to really lay out your website related to your special field of development or work.

24205.23 -> Alright, let's move on. So this is going to be starting a brand new section. And we're

24206.23 -> actually going to be looking at a very cool and useful feature in CSS. Now, of course,

24207.23 -> this isn't a very old or considered a essential feature, but it's still very useful. And it

24208.23 -> can help you make your website look a lot better. So in this section, we're going to

24209.23 -> be covering everything to do with movement on your page. So things like animations, transitions,

24210.23 -> and some other features that you can use to sort of change the way your website looks

24211.23 -> without actually changing it, in a sense. Now, of course, this will make a lot more

24212.23 -> sense once we go forward and start working with some of the properties. But the first

24213.23 -> one I want to talk about in this video is our transition property. So there is a lot

24214.23 -> to cover in this video. And transition is actually a shorthand for four different properties.

24215.23 -> So there's going to be a lot to work with and talk about, so I'm going to go through

24216.23 -> it a little bit slow. But once you get to the end of this video, you'll understand everything

24217.23 -> about transitions and how to work with them. Now you can see I've touched up this website

24218.23 -> a little bit using any all of the skills that we've learned in this section selectors, displays,

24219.23 -> margins, all sorts of things like that, including styling the button just with a little creativity.

24220.23 -> And now we have our page kind of a little bit better laid out for our animation. So

24221.23 -> the main part that we're going to be focusing on is our contact us section, and notably

24222.23 -> our Submit button. So this is the main kind of focus piece of this section. So pretty

24223.23 -> much right now we have a static page, there's nothing moving nothing changing positions

24224.23 -> or properties or anything like that. And right now, what I want to do is focus on the submit

24225.23 -> button to create some transitions. Now pretty much what's going to happen is we're going

24226.23 -> to use pseudo selectors to change the state of this button.

24227.23 -> Or change some of the properties in it. So for example, the background or the text color,

24228.23 -> or anything like that, and then we're going to use the transition property to make it

24229.23 -> appear smooth. So that's one thing to keep in mind, the transition property itself isn't

24230.23 -> that big of a deal. But the real work goes behind the pseudo selectors and how you use

24231.23 -> them. So let's get started. The first thing I want to do is use a pseudo selector to change.

24232.23 -> Let's just go with the background for now. So what I'm going to do is use my class that

24233.23 -> I added, you can go ahead and add this on your own if you're following along. And then

24234.23 -> I'm going to use a pseudo selector. And I'm just going to say for now, let's go with hover,

24235.23 -> which is a pretty common pseudo selector. Now, just to test this, that this works, I'm

24236.23 -> going to change the color to black, because again, there could always be issues. Let's

24237.23 -> refresh hover, it's black, you can see that it's already working, it's just not smooth.

24238.23 -> So let's go through and start changing some of these properties. What I'm going to do

24239.23 -> is change the background to a lighter shade, I'm actually going to just use the color picker

24240.23 -> here, I'm going to go ahead and use a lighter shade of blue, something that would indicate

24241.23 -> that you're hovering over. So I'm going to go ahead and do that. And for now, we're just

24242.23 -> going to stick with one property. Well, once we go forward, we're actually going to add

24243.23 -> more and more properties to make it look a lot cleaner. Let's go ahead and refresh. See

24244.23 -> if that works, you can see that it is a much lighter shade. And it looks like a proper

24245.23 -> hover on a website. So let's get started. Now we have our Submit button or our base

24246.23 -> class, the one that's always active, and our special pseudo class, which kind of uses specificity

24247.23 -> to override our base class in certain conditions, in this case, the hover. Now what we're going

24248.23 -> to do is add our transition property. So what we do is go to our base class. And we're going

24249.23 -> to set our transition property here. And now we have a bunch of different values to input.

24250.23 -> The first is going to be the property that you want to well transition because remember,

24251.23 -> the property is basically going to smooth it out and move the property on one hand and

24252.23 -> from the base class slowly to the other in a nice, clean, automated way. So if you want

24253.23 -> to select all of your properties, you can just hit all, but I wouldn't recommend that

24254.23 -> unless you unless you want to shorten things or smooth over time, because sometimes your

24255.23 -> classes can change. And it can cause errors in the long run. So what I would do is for

24256.23 -> now I'm just going to select the specific property that I want. Next thing I want to

24257.23 -> talk about is the duration. So this is pretty much the time it's going to take to move from

24258.23 -> one property or one value to the other. Now this can be anything. Now you would specify

24259.23 -> this in seconds or milliseconds depending on what you want to choose. I'm going to go

24260.23 -> ahead and use seconds. So I'm going to say two seconds. And s by the way is the unit

24261.23 -> for seconds in case you didn't know. The next we want to go is talk about the sort of transition

24262.23 -> style So this is probably the most complicated thing to work with, because there's a lot

24263.23 -> of different styles and haven't really used them in daily life. But it's pretty easy.

24264.23 -> Pretty much what you're going to do is decide what kind of a change do you want? Do you

24265.23 -> want it to go straight from A to B? Do you want it to be smooth or speedy. And what I'm

24266.23 -> going to do is just run through some of the main ones you have here. So the first one,

24267.23 -> and the most common one is going to be ease typing is, and pretty much what this does

24268.23 -> is it's kind of the standard transition, it goes is it goes straight from A to B, then

24269.23 -> you have linear, which is not very commonly used, especially in transitions. But it just

24270.23 -> goes straight from A to B without any, you know, speed changes or anything like

24271.23 -> that.

24272.23 -> And you also have a couple more, there is one called ease in out like this. And you

24273.23 -> can pretty much just read this a name, it goes it eases using the previous one that

24274.23 -> I just talked about. But of course in that

24275.23 -> order.

24276.23 -> So those are pretty much the three, or the sorry, the four common ones that you would

24277.23 -> use. And of course, there's a bunch more, but these are really the main ones that you

24278.23 -> would work with here. So pretty much let's start working with our transition property

24279.23 -> here. So I'm actually going to go with ease and out just to spice it up a little bit,

24280.23 -> not use the basic ones. And then the last property that we're going to select is the

24281.23 -> delay. So pretty much what's going to happen is when you hover over it right now there's

24282.23 -> no delay, it's zero seconds, the animation plays instantly. Or what you can actually

24283.23 -> do is set a delay that you can use to let's just say after you hover, wait two seconds,

24284.23 -> and then play the animation. So let's just go ahead and set a delay of one second. And

24285.23 -> that offer the semicolon a lot to digest there, I know. But um, don't worry about it just

24286.23 -> leave, it's just keep it there for now. And if you don't understand it, we'll break it

24287.23 -> down and do some more examples. Let's go ahead and refresh the page. So what I'm going to

24288.23 -> do is hover over my button here, you can see that it's going to wait whoops. So I'm going

24289.23 -> to hover over. Now we're going to wait. And you can see after one second, it turns into

24290.23 -> that kind of shade that we want it. Now I feel like we're going to remove that one second

24291.23 -> delay, because we don't need it. And I'm actually going to shorten this down 2.5 seconds. Now

24292.23 -> what I want to do is refresh the page. And now you can see it's a lot faster. Now once

24293.23 -> you get into this range of one, you want to start using milliseconds. So we're going to

24294.23 -> go 300 ms, which is milliseconds.

24295.23 -> Let's refresh the

24296.23 -> page. And like I said, just play around with this tinker with it and see how it works.

24297.23 -> So you can see when we do this, that it changes the color. And when we hover over it changes

24298.23 -> back. So now you can see the difference between not having a transition and having it. Let's

24299.23 -> comment this out for a second. And you can see how that works. Without the transition,

24300.23 -> it looks kind of jarring and quick and sharp. It doesn't really look appealing. But when

24301.23 -> you add that transition, it just completely changes everything. Now why don't we go ahead

24302.23 -> and try out some of the other styles because it's much easier to show you how these styles

24303.23 -> works, rather than just explaining them. So let's go ahead and see linear.

24304.23 -> So

24305.23 -> pretty much what's going to happen, it just goes straight from A to B, no speech changes

24306.23 -> or anything. Of course, with something this small, it's not very noticeable. But when

24307.23 -> you have translations and all these different changes, then it will definitely be noticeable.

24308.23 -> So there you go, you have a linear transition there. Now let's go ahead and try our ease

24309.23 -> transition, refresh it. And you can see that it is a lot faster. And like I said, not very

24310.23 -> noticeable. But we can see a clear difference in the speed and agility or what not agility

24311.23 -> but the kind of curves of the transition, it starts out very fast in towards the middle

24312.23 -> and gets a little bit slower. And then towards the end, it's much faster. Now of course,

24313.23 -> it would be easier to demonstrate if it wasn't 300 milliseconds. Let's go ahead and see this

24314.23 -> when it is on a higher time, so you can see kind of how that works there. So there we

24315.23 -> go. Those are the different types of transition types. That's probably the hardest property

24316.23 -> to or sorry value to work with. And then after that, everything becomes a lot

24317.23 -> simpler.

24318.23 -> So now let's go ahead and start adding some more properties here to make this a little

24319.23 -> bit more interesting. I'm going to go ahead and add some padding. So I'm going to say

24320.23 -> when it's hovered over pretty much double the padding, so 20 pixels, 30 pixels. Now

24321.23 -> here, what we're going to do is either use a comma to separate the different property

24322.23 -> That we want to use. Or we can just erase all of this and say all. Now we refresh it.

24323.23 -> And you can see that that gets a lot bigger, let's change that back to about 500 milliseconds.

24324.23 -> Make that a lot shorter. And now you can see it gets bigger. On top of that, the sorry,

24325.23 -> the background changes. Now, of course, you can do so many different changes with this,

24326.23 -> you can maybe change the color, the font size, even the weight. And once we learn some of

24327.23 -> the translation, or sorry, transformation functions, we can do a lot more with it. But

24328.23 -> for now, we need to stick with the basics of the transition concept. So before we move

24329.23 -> on, there's one thing I need to talk about. And those are the prefixes that we need to

24330.23 -> use for browser support. So I think is with much newer CSS versions is that not all browsers

24331.23 -> support them, they all compile in a different way. And some of them don't support these

24332.23 -> newer properties, especially in the older version. So for example, Internet Explorer

24333.23 -> seven, Internet Explorer eight, all of those very old browsers, which people still use,

24334.23 -> won't be able to see this property. Now you have two solutions to this, either use a fallback,

24335.23 -> which is you know, if the transition doesn't work, just maybe have a fallback image or

24336.23 -> don't play it at all. Or you can use a browser support prefix. So each one or each type of

24337.23 -> browser has a different prefix, but the main ones are for Chrome and Safari, we need to

24338.23 -> use WebKit, like this. And remember, you need to start it with a dash and end it with a

24339.23 -> dash like this. Then you one for Mozilla Firefox is going to be dash m o z. And then of course,

24340.23 -> for some of the other browsers like opera, you would use Oh, whoops, online, would you

24341.23 -> Oh, for that. And those are pretty much the three main ones. Now. WebKit is pretty much

24342.23 -> an essential, it covers two browsers at once. Now, of course, and result is also still important.

24343.23 -> opera is important, but not as important as these other two. Now one thing you need to

24344.23 -> note is you can't just string these together, you can't go dash WebKit dash smalls dash

24345.23 -> O, you have to use separate property. So you have to go and copy each one, and it is a

24346.23 -> pain. But if you want the maximum browser support, you need to do this. So of course,

24347.23 -> if we refresh the page, nothing's gonna happen here. But anybody who's using an older browser,

24348.23 -> if I was testing this on maybe Internet Explorer seven, would see a clear difference between

24349.23 -> before and after we added these browser support prefixes. So that's pretty much it for transitions.

24350.23 -> Now, there is a lot to cover, and we will work with them throughout the future. But

24351.23 -> all you need to do is go ahead, select pretty much any element you want, and start playing

24352.23 -> around with it, add some different properties, maybe go and change the pseudo selector. So

24353.23 -> for example, if you want it to be active or something like that, or if you click it, you

24354.23 -> want to change some of these properties. There's a bunch of pseudo selectors out there. And

24355.23 -> combining that with the transition property and the skills you've learned in CSS, you

24356.23 -> can really make this website or whatever website you're working on interactive, without even

24357.23 -> having to learn any animation, or proper transformation properties. Alright, let's move on. So in

24358.23 -> this video, we're going to be covering different transform properties. And this is going to

24359.23 -> be quite a long video. Just like the transition video, we do have a lot to cover. There's

24360.23 -> many different values and functions that we need to use to complete this. But it is a

24361.23 -> pretty essential step of this section. So let's just get straight into it. So firstly,

24362.23 -> what we're going to be using in this video are actually not values, their functions.

24363.23 -> Now, just like this RGB thing is a function that takes a bunch of inputs and gets a value

24364.23 -> out. Or maybe something else. Well, it seems like this is the only one on the page. But

24365.23 -> what we're going to be doing is using a bunch of functions that take in inputs, and actually

24366.23 -> physically change what this is on the page. Now obviously, all of these do physically

24367.23 -> change what they are on the page. But instead of inputting absolute or direct values, this

24368.23 -> kind of processes in a different way behind the scenes. So let's just jump straight into

24369.23 -> it. First thing we need to learn is the property. Now we're going to use our button again, and

24370.23 -> I'm going to be using a value called transform. So what we're going to do is plug in a bunch

24371.23 -> of different values in here and see how it affects this. So pretty much we have two different

24372.23 -> sections of this video, we have our physical change properties or our movement, so our

24373.23 -> translation and our scaling, and then we also have our different rotation properties, or

24374.23 -> Well, I should say functions, but there we go. So we're going to have our Translation

24375.23 -> in our scale, so our physical changes, and then our rotation. And at the end, I'm going

24376.23 -> to throw in a nice shorthand function that summarizes all of it. So let's start with

24377.23 -> our physical changes. So the first thing we need to learn about is translate. So we're

24378.23 -> only going to be covering 2d translations for today, because 3d can get very complicated

24379.23 -> very quick. And it's not really useful in day to day life or developer life, unless

24380.23 -> you're making something that specifically needs it. So we're just going to cover 2d

24381.23 -> translations, and other function transformation functions for

24382.23 -> today.

24383.23 -> So pretty much what this is going to do is taken two different values, one of them is

24384.23 -> going to be the Y shift and the x shift. And it's going to actually shift physically shift

24385.23 -> the elements to that position. So for example, if you said, I want to move this button or

24386.23 -> this image a little bit to the left, and I wanted to move, or let's just say 10 pixels

24387.23 -> to the left, and I wanted to move it 10 pixels up, it would do that. And of course, there

24388.23 -> are many different ways to do it. But what we're going to do is use this translate method

24389.23 -> to really change the way that this whole thing works. So what we're going to do is are we're

24390.23 -> going to use an alternative method to you know, something like margin or grid or all

24391.23 -> of those. So the first thing you want to do is specify the x axis value. Now, in case

24392.23 -> you haven't, you know, learned about graphs, or you maybe forgot it, pretty much, what

24393.23 -> happens is the x axis is going to be your left and your right shift, right is going

24394.23 -> to be your positive value, so anything above zero, and if you want to shift it left, you

24395.23 -> use negative values. And then of course, the second value is the y axis. So up as positive

24396.23 -> and down is negative. So let's start with our x shift, I'm going to just go ahead and

24397.23 -> say 50 pixels here. So I want to shift it pick 50 pixels to the right. And remember,

24398.23 -> we don't need we need to, we don't need to say anything like to write or anything like

24399.23 -> that, we just need to specify the value, then we throw in a comma. And here, what we're

24400.23 -> going to do is add our Y axis shift. So here, I'm also going to say, let's just go with

24401.23 -> 30 pixels, refresh the page, see what happens. Now, we can see here that it's actually staying

24402.23 -> exactly the same. It's not moving. It's not changing anything here. But you can see that

24403.23 -> when we hover over it, it does actually move. So what's going on here. Now, here's where

24404.23 -> you have to be careful about where you add your properties, you can see that I added

24405.23 -> it to our pseudo selector instead of our base class. And that's one thing or one point I

24406.23 -> just wanted to make about these pseudo selectors is that if you add them on, maybe here, it's

24407.23 -> not just going to inherit it magically and put it on the base class, you do need to be

24408.23 -> specific. Remember, these two are completely different classes, it's just that some of

24409.23 -> them are being overridden. So for example, our background and our padding already exist.

24410.23 -> So what happens is that all of these styles are already applied. And then the new styles

24411.23 -> here are overridden. But this is a completely new property, it doesn't actually

24412.23 -> exist on our base class. So just make sure that you don't make that mistake. Let's go

24413.23 -> ahead and paste that on the base class. I'll do it just above the transitions. Now refresh

24414.23 -> the page, and it's translated perfectly. So now that we've done that, I want to talk about

24415.23 -> browser support for a second. Now all of these are very new features to CSS, you do need

24416.23 -> to make sure that you add your browser prefixes. So WebKit, mas, and O. Now, I'm not going

24417.23 -> to go through and add it for all of them. I'm just going to leave it blank for now.

24418.23 -> But you need to keep in mind that if you want the maximum support on your on your page on

24419.23 -> your site, you want to make sure you include those prefixes. So there we go, we've covered

24420.23 -> it translates. Now let's work with our next value, which is going to be scale. So scale

24421.23 -> works in a similar way to how maybe increasing the padding would work. What's gonna happen

24422.23 -> is you're going to go and you're going to type in scale, which is the name of the function,

24423.23 -> and then you're going to pass in a decimal value, it doesn't have to be a decimal, but

24424.23 -> pretty much what you're going to do is just say, let's say I want to scale this up by

24425.23 -> two and a half times, what's gonna happen is this is going to size up by two and a half,

24426.23 -> we refresh, you can see that it's gotten a lot bigger, and padding and all of that it

24427.23 -> doesn't really apply or change anything here. It just scales everything up by two and a

24428.23 -> half. So you can obviously see some of the issues here with margin and padding and all

24429.23 -> sorts of things like this. So be pretty careful when you do this. You don't want to mess up

24430.23 -> your page or change your style, or anything like that. You just want to make sure that

24431.23 -> you can scale without having to to mess with the layout of your page. So that's for scale,

24432.23 -> and all of the physical properties. Now let's move on to some of the rotation properties.

24433.23 -> So the first two, we're going to cover or sorry, the first one I'm going to cover is

24434.23 -> pretty simple. It's just a standard rotate. But then after that, I'm going to cover two

24435.23 -> really special ones, which are actually skewing on different axes. So we'll get to that in

24436.23 -> just a second. Let's refresh the page. So the first one I'm going to use is rotate,

24437.23 -> and this takes one value, obviously, it's going to be our degree value. So if you don't

24438.23 -> remember from our gradient section, what happens pretty much here is we rotated kind of circularly.

24439.23 -> Well, not for this one. But we can use degrees to actually change the angle or direction

24440.23 -> of our gradient. So for example, 90 degrees B, a 90 degree shift, so would go to the right,

24441.23 -> and then negative 90 degrees would go the other way. So it would go to the left. So

24442.23 -> if you just remember that you'd be doing great here. So let's just say I wanted to use minus

24443.23 -> 45 degrees, and remember the symbol for it. So what's gonna happen pretty much this is

24444.23 -> going to shift slightly, or will not shift, but it's going to rotate. And you can see

24445.23 -> what happens there. Now, if this was minus 90, it will pretty much flip. So it was facing

24446.23 -> up vertically. And I'll actually show you that now. But pretty much what you're doing

24447.23 -> here is just rotating it around it center, and changing the rotation of it. Pretty simple,

24448.23 -> pretty easy to use. So now let's talk about the two special ones. So pretty much what's

24449.23 -> going to happen here is they're going to skew them along certain axes. Now, this is really

24450.23 -> hard to explain. And most likely, nobody will get it if it explained. So the only real way

24451.23 -> to show it or the only real way to teach it is by showing it. So what I'm going to do

24452.23 -> is use skew. And you can see we have our shorthand and we also have skew x and skew y. So what

24453.23 -> I'm going to select this skew x first, and pretty much this is going to shift it or rotate

24454.23 -> it along the x axis instead of its center. So remember, the X is kind of

24455.23 -> a horizontal rod. So just kind of imagine a stick or a paper attached to a rod and you're

24456.23 -> rotating it around that rod. So now let's go ahead and input our value just like before,

24457.23 -> we're going to use degree values. So I'm going to go 45 degrees positive, we refresh the

24458.23 -> page. And obviously, it looks quite weird, because it's pretty hard to simulate these

24459.23 -> kinds of things. But you can see that pretty much what this has happened is rotated along

24460.23 -> that axis. So if I go negative 45, it's going to go the other way, just like that. And you

24461.23 -> can kind of see how that works. Now if we change this to skew y, it's going to go it's

24462.23 -> going to do this exact same thing. But it's going to be on the opposite axis. So it's

24463.23 -> going to be on a vertical rod. So just imagine that, refresh the page, and you can see how

24464.23 -> that is working. Now obviously, it is very hard to see and visualize. So I wouldn't encourage

24465.23 -> you to use skew X or Y. If you want to rotate something you should most likely stick or

24466.23 -> you should try and stick to the three I just covered. So the last value we're going to

24467.23 -> be talking about or the last function is going to be our matrix function. So this is going

24468.23 -> to be a shorthand to summarize everything into one go. And pretty much from here, what

24469.23 -> we're going to do is pretty much just summarize everything in one clean swoop. So pretty much

24470.23 -> this takes six arguments. And one thing you do have to note is it doesn't take rotation

24471.23 -> into account, it only works with skews, so you just have to keep that in mind. If you're

24472.23 -> planning to rotate it, you should probably add that as a as another function. So let's

24473.23 -> get started. What we're going to do is go ahead and work with our matrix function. So

24474.23 -> we're going to erase this. And we're going to go ahead and add our matrix. Now these

24475.23 -> six arguments do follow a very, very specific pattern or a order. So we're going to have

24476.23 -> to go through it slowly so that you can understand it. And it is a little bit out of order, logically,

24477.23 -> so we're just going to take our time this. Now the first value is going to be your x

24478.23 -> scale. Now one thing I forgot to mention is that we were actually using shorthand. shorthand

24479.23 -> functions to avoid all the mess with scale x and scale y and just shorten things up.

24480.23 -> So one thing you do need to keep in mind is that every scale component or function like

24481.23 -> this will have an x and a y value. And what we pretty much did is summarize them down

24482.23 -> into one or into those shorthand functions. So we can just do it really easily. But here

24483.23 -> it's actually split up into different functions. So let's To start with our scale x. Now one

24484.23 -> thing to note is that if you want to keep it the same, all you have to do is input one,

24485.23 -> pretty much this is not typing pretty much what this is going to happen. Or what this

24486.23 -> is going to do is say set this button or object or element one times as big as itself, which

24487.23 -> is, of course, just going to result in the same. So the next is your skew y and your

24488.23 -> skew x. Now if you don't want to do anything, you set it to zero. But if you do want to

24489.23 -> skew it along the axes, you do have to use decimal

24490.23 -> decimal values here. And one thing also to note is that you don't have to include the

24491.23 -> unit's like we did before. So no PX or mm or dagger do anything like that, you just

24492.23 -> include the numbers. So you do include decimal points here. So I'm just going to go quick

24493.23 -> 45 on both of these. And remember, this is actually 45 degrees, so keep that in mind.

24494.23 -> Next thing we're going to do is input our scale y. So again, you do have scale x and

24495.23 -> scale y, if you want to keep it the same, set it to one, and then you have your translate

24496.23 -> x and translate y. So I'm going to say 100 pixels. Whoops, 150. Remember, pixels pixels.

24497.23 -> So this is a little bit confusing, but it's don't try not to use it that much only use

24498.23 -> it if you really have to, or if you want to shorten code down. But I would recommend not

24499.23 -> using this function very often. It's quite clunky and ordered, and it doesn't really

24500.23 -> allow for freedom. So just keep that in mind when you're using it. Let's refresh. And you

24501.23 -> can see our new item here scaling is, of course, the same it shifted on the x and y axes. So

24502.23 -> you can see that here, it doesn't create that rotation that you may be expecting, because

24503.23 -> remember, it is a skew on individual axes. Just remember that. And of course, our scale

24504.23 -> on the x and y is one, our translation of x is 100. So it's about this much. And then

24505.23 -> our translation of y is 50. So there we go, we have everything set up. And now it's pretty

24506.23 -> much just all working, we have our shifts our movements here, and we also have our scaling.

24507.23 -> So go ahead and try these out on different elements, it doesn't just have to be with

24508.23 -> a button, you can use this on Grid Elements, although some of them may not work. You can

24509.23 -> use this on images, text, all sorts of things, these work on any element, and they can really

24510.23 -> help you to style your website without having to use some of the traditional methods that

24511.23 -> we've learned. Alright, let's move on. So in this video, we're going to be looking at

24512.23 -> CSS animations. So we've looked at transitions and some of the different transformation functions

24513.23 -> that we can use to sort of work with our elements in a different way. But now we're going to

24514.23 -> be learning another essential component, which are animations. So we're going to be covering

24515.23 -> this over the next few videos. And for the first one, we're going to be creating the

24516.23 -> animation. So first of all, what are the advantages of using an animation? Well, firstly, when

24517.23 -> you're using a transition, you have to apply those specific styles to everything you want

24518.23 -> to perform a transition with. But with an animation, you can define the changes once

24519.23 -> and then apply them to anything. So for example, let's just say I wanted to create an animation

24520.23 -> that turns something from red to black, or sorry, turns the background from red to black,

24521.23 -> then you can apply it to any item. Whereas if you use transitions, you'd have to go through

24522.23 -> and go through every single element, change the suit of selectors, and do all sorts of

24523.23 -> things. On top of that, when you're using animations, you can play something at the

24524.23 -> start, instead of having or with a delay instead of having to wait for some event to happen

24525.23 -> with a pseudo selector. So pretty much what happens here is you can say, we can pretty

24526.23 -> much just remove this image completely from the page or translate it at the

24527.23 -> start

24528.23 -> when the page is first refreshed. We can also use this to really make our website interactive

24529.23 -> and change the way this website looks completely. So let's get started. Now, first thing you

24530.23 -> need to realize is that these animations are completely custom, custom. You can name them

24531.23 -> whatever you want and do whatever you want inside them. There are a few keywords that

24532.23 -> we need to use to get this set up. Now an animation is split up into something called

24533.23 -> keyframes. Now pretty much each animation has at least one at least two keyframes. So

24534.23 -> you have the starting and the ending. And then you can add keyframes in between to decide

24535.23 -> the different stages of the animation. So to define an animation, all you have to do

24536.23 -> is go at keyframes. So in this case Is the prefix and keyframes is going to be our keyword.

24537.23 -> And then you name the animation. I'm just going to say, translate elements just like

24538.23 -> that. Now you can name this whatever you want. Remember, it's completely up to you, then

24539.23 -> you're going to open it up with brackets. So now it's a little bit different to how

24540.23 -> we've been using CSS, we can just define styles and expect it to work perfectly. There are

24541.23 -> two different ways or two different main ways that we can define our keyframes. So pretty

24542.23 -> much the kind of standard way of writing one of these keyframes is typing out the the keyword.

24543.23 -> So for example, I'm just going to type example here. Now, of course, if in a real world scenario

24544.23 -> wouldn't be like this, it would be a number or a percentage, or an actual keyword, but

24545.23 -> it wouldn't just say example, then you're going to create these curly braces, again

24546.23 -> inside of our keyframes. And here, you would type the styles at this stage. So for example,

24547.23 -> if I wanted a red background, you would type it here. So what I'm going to do is talk about

24548.23 -> the first two keywords, which are to and from. So first of all, let's start with from, so

24549.23 -> this is pretty much going to be your initial starting point. And then two, which is going

24550.23 -> to be your ending starting or ending point sorry, here, what you're going to do is type

24551.23 -> in whatever you want. So for example, let's just say our, I'm actually going to change

24552.23 -> this black to red, since that's what the or sorry, red to black, red to black. Now here,

24553.23 -> I would say start from when the background is red. Now there doesn't have to be anything

24554.23 -> here. But it would be recommended that you do start with something unless you're going

24555.23 -> for something specific after that. And then here to, I'm going to say at the end of it,

24556.23 -> make sure the background is black. Now, of course we don't have to work with timings

24557.23 -> or anything here, because that's all decided when we add and work with the animation on

24558.23 -> our element. So there we go, we have a define. Now these are the first this is the first

24559.23 -> way to do something. But what if you wanted more than one background, you can't just add

24560.23 -> two background properties in one go. So instead of this, what we use is percentages. So you

24561.23 -> can say at 0%, you want to have some special properties. So I'm going to say background

24562.23 -> is red. And then you can say at 100%. So at the end of the animation, this is when it's

24563.23 -> 100% complete the background to be black. Now, the direct advantage to using this, you

24564.23 -> can actually add more than more than two stops. So for example, I can go at 50%, I want the

24565.23 -> background to be yellow.

24566.23 -> Now realistically, you can add as many properties here as you want, it doesn't really change

24567.23 -> anything. But of course, you want to try and limit the amount of properties you add or

24568.23 -> sorry, stops or keyframes to maybe six or seven at the max. Now unless you're doing

24569.23 -> something very specific. Maybe you want strobe lights or something like that, you're going

24570.23 -> to want to keep it limited. So there we go, we have these steps here. But the last thing

24571.23 -> I want to cover is that you don't just have to work with one property. What if we wanted

24572.23 -> to translate something. So what I can do is actually set the Transform, remember, it is

24573.23 -> a property. And then I can say translate this. So by zero pixels and zero pixels. So of course,

24574.23 -> we don't actually have to type out this property. What I'm going to do is now copy this over.

24575.23 -> And so 50% of the way we want it to translate by 10 pixels, and 10 pixels. And at the end

24576.23 -> of it, we want to translate by 20 pixels and 20 pixels. So you can see how this works.

24577.23 -> So for example, let's just say we wanted to enlarge something and change the color from

24578.23 -> red to black. We can do it just like this except maybe using scale or padding or any

24579.23 -> other way that you choose whichever one whichever one you think is best for the specific website

24580.23 -> you're developing. Now one thing I'm going to mention is that the kind of convention

24581.23 -> is to keep these curly brackets on the same line. But if it is getting a little bit long

24582.23 -> like this one, you can definitely open and close them just like I'm doing here. Don't

24583.23 -> be limited by the whitespace. It's not really a defining factor. You can space these however

24584.23 -> you want. But usually you're not going to use more than one property on a keyframe like

24585.23 -> this. If you do have a giant animation, something with, you know backgrounds, transforms and

24586.23 -> margins you're going to want to, you know, space it out make it easy for people to read.

24587.23 -> So this doesn't just have to be multiples of 10. This could be 30% 37% way 37% of the

24588.23 -> way through, it could be 25 you could split it into quarters, you could do pretty much

24589.23 -> anything you want with this But the key thing you have to remember is you're designing your

24590.23 -> own animation, you're going to want to fit it to how you want. So for example, if you

24591.23 -> just wanted to enlarge something, you didn't really you don't really have to use these

24592.23 -> percentages you can just use to and from or from and to, since you only have two stops,

24593.23 -> but if you want to do something like multiple color change, then you most likely want to

24594.23 -> switch to percentages. So you want to go from 0% to 33% 66%, you know, work with it, just

24595.23 -> kind of see how everything works together and design the animation based on what you

24596.23 -> need. So this is the video based on designing the animation. Now in the next video, we're

24597.23 -> actually going to be adding our animation and start working with it, to change it based

24598.23 -> on what we need for each element. Alright, let's move on. So in this video, we are going

24599.23 -> to be adding the animation that we created in the previous video to one of our elements.

24600.23 -> And then we're actually going to be going through and working with it in the next video.

24601.23 -> So first of all, let's just recap what we've done. So far. In the previous video, we created

24602.23 -> some keyframes for animation, I talked about all the different units, and how you can actually

24603.23 -> set these values. And we covered all of that. But now that we've actually created our animation,

24604.23 -> it's time to go through and add them to some of our elements. So this is going to be quite

24605.23 -> a short video because it is quite easy to just go ahead and add the animation. But there

24606.23 -> is a lot to cover about the different properties of animations, which we're going to be talking

24607.23 -> about in the next video. So let's get started. The first thing is to find a suitable item

24608.23 -> that we can apply this to. So obviously, this is used with translation and background colors.

24609.23 -> So we can pretty much apply it to anything on this page. For now I'm just going to go

24610.23 -> with our about me text right there. So the first thing I'm going to do is go ahead and

24611.23 -> select it by adding a class, it looks like where is it hold on, let's see seems to be

24612.23 -> have lost and all this. It's got to be somewhere there we go about me. So he already has a

24613.23 -> class subtitles. So what we're going to do is, well, actually, there's already stuff

24614.23 -> applied there. So it would be much better if we actually added an ID to it using specificity.

24615.23 -> And we're just going to say about

24616.23 -> me

24617.23 -> just like that. Now what I would recommend you keep your animations and keyframes at

24618.23 -> the bottom so that if you ever need to reference them, you can just scroll down and see all

24619.23 -> of them there. So what I'm going to do is go ahead and select this. So I'm going to

24620.23 -> go hash, and then about me, open up the curly braces. And now what we're going to do is

24621.23 -> go and start adding our animation. So this is pretty easy to do, all you have to do is

24622.23 -> use one property animation name. And you can see a little shorthand there. But we're going

24623.23 -> to be covering that a little bit later. Let's go ahead and add that. And here we're going

24624.23 -> to put the name of our animation. So this would be red to black. And remember, it's

24625.23 -> going to be the exact name of the animation that we specified here. So let's go ahead

24626.23 -> and refresh the page, see how this works. And you can see that nothing's happening.

24627.23 -> So this is something that I want to cover in the next video because we're actually going

24628.23 -> to be working with some of the properties. But for now, all you need to know is that

24629.23 -> we do need to apply some special properties for the animation to start running. So for

24630.23 -> now, all we've done is taken the keyframes just slot them on to the about me title. And

24631.23 -> in the next video, we're going to go and actually set this up so that we can start seeing it

24632.23 -> moving, changing the times and actually making the animation come to life. Alright, let's

24633.23 -> move on. So now we're actually going to be going ahead and covering the different properties

24634.23 -> that we can do in our little CSS stylesheet. Here, we're going to go through, we're going

24635.23 -> to add some of these different animation properties. And we're actually going to start working

24636.23 -> with it so that we can really get into how the animation works and how we can work with

24637.23 -> it. So let's get started. Now, I'm only going to be covering some of the basic properties

24638.23 -> here. But there are many more out there. There are so many different ways that you can work

24639.23 -> with these animations and change their properties or how they work. Well, what we're going to

24640.23 -> do is go ahead and use some of these basic functions, so we can get this up and running

24641.23 -> and working. So let's get started. The first one, I want to talk about an animation duration.

24642.23 -> And this is probably the best or well not really the best, but it's the most important

24643.23 -> one, because pretty much what happens is the animation duration is going to actually allow

24644.23 -> your animation to run. So what I'm going to do here is first of all set up this function

24645.23 -> here. And pretty much the default value of this property here it's actually zero. And

24646.23 -> that's why in the last video, this wasn't running at all, we added the animation, but

24647.23 -> because the default value is zero, pretty much the animation style starts and finishes

24648.23 -> at the exact same time. Well, not really. But we can't see it at all the time is zero.

24649.23 -> So we're going to do here is specify a second value here. So I'm going to go ahead and say

24650.23 -> two seconds, which is quite fast. So I'm actually going to go ahead with four seconds. Now if

24651.23 -> we refresh the page, you can see that that animation does play. And you can see it kind

24652.23 -> of works like that, it goes from red to yellow to black. So that's the first thing about

24653.23 -> the animation that you'll notice it goes, it stops, and then it finishes. And we're

24654.23 -> going to be using some of the other properties to actually change how this work and maybe,

24655.23 -> you know, repeat it over and over again and do all sorts of things with them. So the next

24656.23 -> property I'm going to be covering is the sort of style of how the property works. So we've

24657.23 -> already covered the name of the property, which is obviously applying the property or

24658.23 -> the animation itself. We've also talked about the duration. But now we're going to be talking

24659.23 -> about the style. So pretty much the style is probably the hardest property to learn

24660.23 -> about kind of how, you know, we looked at transition properties or styles. And those

24661.23 -> were the hardest, this is pretty much the exact same. So pretty much what happens here

24662.23 -> is that this style is going to define the speeds, or how the animation works out. So

24663.23 -> all we have to do is go ahead and type out animation. Animation, dash, sorry, timing

24664.23 -> function. There we go. And now from here, we can apply the different speeds or

24665.23 -> styles.

24666.23 -> So I'm going to be talking about the main ones. And you can probably recognize these

24667.23 -> from the transitions video. So we have ease, which is the normal one you can see there.

24668.23 -> And then we also have a few more. So let's go ahead and check it out. We have linear,

24669.23 -> of course, which is just straight, there's no speed changes, or weird anything like that,

24670.23 -> you can see just go straight down. So you can see a very clear difference there, especially

24671.23 -> here, unlike the transition. Whereas with ease, it would stop in the middle and then

24672.23 -> speed back up. Whereas linear, it just goes straight. Of course, we also have ease in

24673.23 -> and ease out and ease in out just like we covered before. So there we go, I'm going

24674.23 -> to leave it at linear, because I think it looks the best. There we go. And you can see

24675.23 -> we've set that speed curve there. So now let's talk about the next property, which is going

24676.23 -> to be the animation delay. So the delay is a little bit of a weird case here, because

24677.23 -> you can use positive values. But you can also use negative values, which is a little bit

24678.23 -> confusing, but let's talk about it here. So I'm going to go ahead and add an animation

24679.23 -> delay, just like that. And here, I'm going to specify a delay time. So for example, two

24680.23 -> seconds. Now, of course, this works perfectly. we refresh waits two seconds, and then the

24681.23 -> animation plays just like you would normally. But what if we added a negative to here, what

24682.23 -> do you think would happen? If we refresh, you can see it's already at yellow. So what's

24683.23 -> pretty much happening here is that it starts when the animation is zero, which is the default,

24684.23 -> it starts right as the page loads. But if you go negative two, it's pretty much acting

24685.23 -> as if you're already two seconds into the animation. That's kind of how negative values

24686.23 -> work here. Now, obviously, there's no real application for this unless you're looking

24687.23 -> for something really, really niche that you need it. But this isn't really widespread

24688.23 -> or used. very commonly, it's just a really cool thing to know about animation delays.

24689.23 -> So the next thing we're going to cover is the iteration count. And I talked about this

24690.23 -> a little bit when we started the duration. And it's pretty much going to say how many

24691.23 -> times this thing is going to loop over. So we can use the property animation iteration

24692.23 -> count. And here, what we're going to do is apply our the number of times we wanted to

24693.23 -> iterate. So for example, if I wanted to, to iterate or loop over two times, I could refresh,

24694.23 -> of course, it starts a little bit early, and it goes another time. And there we go after

24695.23 -> that is finished, so it went over two times. Now there's also a really special value you

24696.23 -> can use here, which is infinite. And then this means that this is just going to keep

24697.23 -> going over and over pretty much forever until you terminate the page or close it or even

24698.23 -> change something. But when this is set, it's gonna keep looping over and over again pretty

24699.23 -> much forever. So there we go. Now let's go ahead and talk about the shorthand property.

24700.23 -> And pretty much what we're gonna do here, whoops, actually, we need to cover one more

24701.23 -> value before we use that shorthand. And that's going to be our animation direction. So this

24702.23 -> is the final value just like you're seeing here before we started, but it's actually

24703.23 -> pretty useful unlike something like the negative animation delay value here. Pretty much what

24704.23 -> this is going to say is the starting and ending points of the animation. So for example, let's

24705.23 -> go ahead and add that property their animation direction. And now we're going to talk about

24706.23 -> the four main values for this function. Of course, the default value is going to be normal,

24707.23 -> which is just like that. And that, of course, plays from 0% to 100%, just like normal. And

24708.23 -> I'm actually going to set this iteration to two times and remove the delay. Just like

24709.23 -> that, so that we can get the full picture here. So if we refresh the page, you can see

24710.23 -> that it's just normal, it goes from start to finish. And then you have your opposite

24711.23 -> way, which is reverse. So pretty much what happens here is it goes from 100% to 0%. And

24712.23 -> the properties aren't flipped, they stay exactly the same. So if you look at this, it goes

24713.23 -> back in time, all the way to its starting position. So the other two, which are a little

24714.23 -> bit more complicated to understand, are alternate. So just like this, so alternate pretty much

24715.23 -> means it's going to go forward and then go backward. So it kind of bounced back, you

24716.23 -> can see there, so it goes from zero to 100. And then in the same animation, well not the

24717.23 -> same. It goes from 100 to zero. And then of course, just like with our first two, you

24718.23 -> have alternate reverse, which does still the alternation, but it starts at 100, instead

24719.23 -> of at zero, so it's kind of going to start here and then go back to it starting and bounce

24720.23 -> back to 100.

24721.23 -> Let's look at that here. You can see it goes up, and then it bounces all the way back to

24722.23 -> its starting position. So there we go. That's pretty much how this whole thing works.

24723.23 -> And those are the four are actually here, it's five main main functions and or sorry,

24724.23 -> properties. What we're going to have to do here is summarize all of them because there

24725.23 -> is a lot to cover. And you're not going to add five animations every time, especially

24726.23 -> when you have to use all of the different browser support tools and prefixes. And it

24727.23 -> gets really complicated after some time. So what I'm going to do is use a very cool shorthand

24728.23 -> that just summarizes everything for us. So we don't even have to use our animation name

24729.23 -> here, we can just cover it all once in our animation shorthand, so I'm going to do it

24730.23 -> here, animation. So the first, this takes, of course, five values, your first value is

24731.23 -> going to be your animation name, which is red to black. Your next value is going to

24732.23 -> be the duration, which is a pretty important one. So we're going to set it the same at

24733.23 -> four seconds, your next value is going to be your timing function or your speed. So

24734.23 -> we're going to set it linear here. And then next is going to be your delay. Now we removed

24735.23 -> that there, but we do have to put that delay. So I'm just going to say zero. Next, I'm going

24736.23 -> to put the iteration count, which is two. And finally the direction which is alternate.

24737.23 -> Whoops, alternate reverse. Now you can see that does get a little bit long there. So

24738.23 -> I'm going to leave both of these versions on in the project file for you to decide for

24739.23 -> yourself. Now let's refresh the page, see what happens. Oh, whoops, forgot the pixels.

24740.23 -> Sorry, forgot the second value there. Let's refresh. And now you can see that it goes

24741.23 -> from the back to the start, just like we had here. So like I said that shorthand is a little

24742.23 -> bit hectic to memorize and you know, learn all of the different values. But there is

24743.23 -> always Google if you forget the order or anything like that. And what makes this really useful.

24744.23 -> If you want to add any browser freebet for prefixes like this, you can easily do that.

24745.23 -> And then just copy this over for the different prefixes. So you can go here, here, here and

24746.23 -> put your different prefixes. So I have from Mozilla, we have from Microsoft, so Internet

24747.23 -> Explorer. And then of course, we have our opera. So we have four different prefixes

24748.23 -> here and five values for one element, you'd have to put 20 properties just to get this

24749.23 -> all covered. Now, you can probably see the advantage of using something like this, with

24750.23 -> that shorthand over all of the really clunky properties. Alright, so that's pretty much

24751.23 -> it for animation properties, or the different types of animations or ways you can manipulate

24752.23 -> these animations. Of course, there is once you learn this, there's a lot of power that

24753.23 -> can go into it. You can create all sorts of different animations, grow styles, and then

24754.23 -> you can really manipulate them just by using these five values. We didn't even we didn't

24755.23 -> even have to touch the animation to make it look completely different. So that's pretty

24756.23 -> much it. Now we've covered a lot of features in CSS. And in the next section, we're actually

24757.23 -> going to be going through and styling the website from scratch as a challenge. So you're

24758.23 -> going to have a challenge to style a website. And then the solution is the video I'm going

24759.23 -> to show you and that's where you're really going to get challenged to use all of the

24760.23 -> skills you've learned in this section. Maybe touch up on some things that you may not have

24761.23 -> been comfortable with, or you may have been fuzzy on. Alright, let's move on.

24762.23 -> So now that you've learned pretty much all of the basic skills, or some of the more advanced

24763.23 -> skills as well, in CSS, it's time to move on and start working on a challenge. So pretty

24764.23 -> much in this challenge, you are given an unstyled website, which by the way, a zip, or a packaged

24765.23 -> file of all of the files that you can use to get started is available for download on

24766.23 -> this Udemy lecture. So what you can do is just go ahead and download that, and it's

24767.23 -> going to prompt you and bring up this page. So you can see, we have a lot of stuff See

24768.23 -> here, and I'm actually going to zoom out, just to get a better view of it. But there's

24769.23 -> a lot of raw images, raw HTML, there's no, there's no styling on it at all. And what

24770.23 -> your job is to do is to follow these objectives here, given here, just follow them and obviously,

24771.23 -> don't follow them to the core to the bone, you can, you know, make any attendance upended,

24772.23 -> you know, amendment sorry, to, to these lists of tasks as you like, but pretty much, you're

24773.23 -> just gonna have to style this website from scratch using the techniques that we've learned

24774.23 -> coloring the layout grid Flexbox animations, just completely revamped this website. Now

24775.23 -> one note is I do have my own solution video posted in on the next lecture. But it is quite

24776.23 -> long, so you don't have to watch that. But if you want to see how I did it, maybe you

24777.23 -> want to, you know, review everything or get a little view on some of the topics, you can

24778.23 -> always watch that but don't feel forced or don't feel like you have to watch that lecture.

24779.23 -> If you don't want to watch it, all you have to do is click on it the bulleted list icon

24780.23 -> and just tick off the lecture, just make sure that if you want it to mark as complete, just

24781.23 -> tick off the lecture make sure that it is finished. And then you don't have to watch

24782.23 -> it. But other than that, we have this website that is just completely unstyled. And we have

24783.23 -> to go and style it. Now just to show you this is what our website here looks like I'm going

24784.23 -> to actually refresh the page. So you can see that nice fade in, we have a sidebar, which

24785.23 -> we styled and created borders for. And we also have a nice image grid. So you can see

24786.23 -> there that is responsive. So if I go and actually resize the window, you can see there that

24787.23 -> it is responsive, we have a little bit of image changing there. And it is just overall

24788.23 -> a responsive website. So this is how it looks. And there you go, you can see we've changed

24789.23 -> the backgrounds, we've imported our own custom fonts. And we use Flexbox and grid to set

24790.23 -> up this website along with animations, you can see a nice transition in color there.

24791.23 -> So we're going to be doing all of this in the solution video. Again, you don't have

24792.23 -> to watch it, you can either copy what it looks like on this page. Or instead, you can just

24793.23 -> go and do whatever you want. Pretty much just take the content I give you and style it however

24794.23 -> way. And I would encourage you to either go on the video lab website, or the q&a section

24795.23 -> of this course and post what you've got, you know, show off your skills and show off what

24796.23 -> you can create out of this website, it's really encouraged to you know, share it with the

24797.23 -> community, and everyone can learn from each other and the skills. So don't feel limited

24798.23 -> by anything you've learned in this course, if you want to do something very specific

24799.23 -> that you haven't learned or you forgot how to do just for you feel free to use Google,

24800.23 -> this isn't a test, it's more of a fun activity to see how far you've gotten in CSS. So that's

24801.23 -> just one thing to keep in mind. Alright, I will see you in the solution video. So in

24802.23 -> this video, we're going to get started and start finishing up this website, we're going

24803.23 -> to, you know, do all of the skills and use everything we've learned over the course to

24804.23 -> get this all set up and running. Alright, let's get started. So the first thing I want

24805.23 -> to do is just flip the page over here with my HTML. And then we're going to get started

24806.23 -> straight away. So before we start anything, I think we need to link a CSS stylesheet,

24807.23 -> I'm actually just going to go ahead and close off our previous site. Because what's happening

24808.23 -> here is we have our actual site set up. But we need to start working on our CSS through

24809.23 -> an external stylesheet as we've been doing for the last well for most of this course.

24810.23 -> So we're going to get started with that. We're going to use Ctrl or Command n to create a

24811.23 -> new file. And then I'm going to save it in my CSS folder here. And I'm going to call

24812.23 -> it style dot CSS. All right, there we go. So the next thing I want to do is start laying

24813.23 -> out what we need for the website. And what I like to do before I start is just kind of

24814.23 -> get myself in the right mind frame by setting out the kind of phones I want to use, the

24815.23 -> different colors, everything like that. So what I'm going to do is just create a comment

24816.23 -> Up here using this notation. I've used it a couple times throughout the course. And

24817.23 -> what we're going to do is in here, we're going to type out all of the stuff we need. So I'm

24818.23 -> going to say primary font. Whoops. So we have our primary font, here, we have our secondary

24819.23 -> font.

24820.23 -> And now we have our different colors. So what I like to do for my colors is have my RGB

24821.23 -> code, do whatever here, and then you have the name of the color. So this would be for

24822.23 -> example, black, pretty much. So we're going to do that in just a second. But first of

24823.23 -> all, let's just go and find the fonts that we want to use. We're not going to import

24824.23 -> them yet. But we just want to look and see what kind of fonts we need. So what I'm going

24825.23 -> to do is just choose two here, pretty randomly, again, usually most websites will use at maximum

24826.23 -> three fonts, but you should use or maybe two fonts, one for headers, and one for normal

24827.23 -> text. So I'm going to go ahead and use later, we used it previously to pretty nice font.

24828.23 -> And we're also going to go ahead and for our headers, we're going to use Roboto condensed,

24829.23 -> so we have normal Roboto here, but we're going to use the condensed version. So for the primary

24830.23 -> font, it's going to be later. And for our secondary, which is for pretty much headers

24831.23 -> and subtitles, things like that, it's going to be Roboto condensed. Alright, there we

24832.23 -> go. Let's go ahead and check out the website. And the color scheme is blue, and orange.

24833.23 -> So if you made your website using a different color scheme, don't worry about it, it doesn't

24834.23 -> really matter. But what we're going to do is go ahead and try and find some blues and

24835.23 -> oranges. So I'm going to find for each color, a main color, so pretty dark, bold color,

24836.23 -> and then one that's a little bit lighter and easier on the eyes. So let's start off with

24837.23 -> blue here, I'm going to go with quite a dark kind of blue something around here. And I'm

24838.23 -> going to copy that in. And I'm going to say dark blue, although it's not really dark,

24839.23 -> dark blue. But I'm going to say that and paste in the code. Now let's go with a lighter blue.

24840.23 -> Now we can always use RGBA color codes. But again, doing this allows us more freedom in

24841.23 -> the long run when we start working with everything. So let's go ahead and just copy that. And

24842.23 -> this is going to be our light blue. Now let's move on to orange. So again, these are very

24843.23 -> opposing colors. That's why I chose them. So we're going to go again with quite a striking,

24844.23 -> you know, very bold orange. So something like this would be good. So I'm just going to say

24845.23 -> the bold orange. And again, it doesn't really matter what you give these, your names, as

24846.23 -> long as you kind of understand them, you can name them whatever you want. And then we're

24847.23 -> going to go with a lighter orange. So something around here. Now what I like to do, if you're

24848.23 -> trying to create a lighter color, is just look for something on the this side of the

24849.23 -> spectrum closer towards the higher values of the RGB. So if it's low, it's most likely

24850.23 -> going to be dark, you can see that in effect here. So I'm going to go ahead and say in

24851.23 -> light orange, is just like that. Alright, so we've set up our color schemes now. So

24852.23 -> we have everything written down and ready to go. But next thing we need to do is actually

24853.23 -> link the stylesheet because we haven't linked it yet. So what I'm going to do in my head

24854.23 -> here is create a link tag, hit tab. And now we're going to reference it just like before,

24855.23 -> we need to go back one directory, we use dot dot. Now we're up here in our challenge directory.

24856.23 -> So previously, we were here. Now we'll jump back up to challenge. Now we need to jump

24857.23 -> back forward one into the CSS directory. And then from there, we need to reference the

24858.23 -> file, which is style dot CSS.

24859.23 -> Just like that, refresh the page. And of course, nothing's gonna visibly change because we

24860.23 -> haven't written anything down yet. But that's a pretty good first task. So again, none of

24861.23 -> these have to be in order, as I said in the last video, so we're just going to go ahead

24862.23 -> and fix up these images because they are quite big. So that's what I'm going to do. First,

24863.23 -> I'm going to go ahead and reference all the images for now. Now we can go and change the

24864.23 -> classes and do specificity later. But for now, I'm just going to specify them and group

24865.23 -> them all at once. So I'm going to set their width to 400 pixels, and their height 200

24866.23 -> pixels. Now, obviously, I've kind of created a, a, I really don't like absolute values.

24867.23 -> But for something like this, it isn't, it's kind of necessary. And we can work with the

24868.23 -> relative newness or the responsiveness of these images later. So let's go ahead and

24869.23 -> refresh see how it looks. So now we know for sure that our images are working fine. And

24870.23 -> of course, you can see how the absolute values are kind of stretching this out. They're not

24871.23 -> kept in proportion. But for now we don't need to worry about that. So there we go. We've

24872.23 -> resized our images, and now we can see everything a lot more clearly. So we have our images

24873.23 -> set up. The next thing I want to do is actually set up our page. To have two sections, we

24874.23 -> want to have our content section. And we want to have our sidebar. So we have our sidebar

24875.23 -> section, I'm actually going to create a divider there, our sidebar section and our main section.

24876.23 -> So that's what we're going to do. So I'm sorry, our content section. So we have a main div

24877.23 -> here, which clot groups everything together. So in my eyes, the best way to do this would

24878.23 -> be using a grid. So what I'm going to do is select the class main. Although now that I'm

24879.23 -> looking at it, we could probably just use an ID instead. So I'm going to go ahead and

24880.23 -> change the ID to main, remember, there's only one main on the whole page. So it's not like

24881.23 -> we need to use a class. And from here, we'll get started. So the first thing I want to

24882.23 -> do is set the display type to grid. Right. So this is going to obviously set up a grid.

24883.23 -> Now, we won't be able to see anything here pretty obviously. But now we're going to start

24884.23 -> working with it. So pretty much what I have vision for the change is we have our content

24885.23 -> section, which is taking up the majority of the page, and then we have our posts section.

24886.23 -> So our post section is going to be much smaller, it's going to be while a sidebar, that's kind

24887.23 -> of the definition of it. And it's going to take up a small portion on this side of the

24888.23 -> page. So that's what I'm going to do here, I'm going to create two columns. So one of

24889.23 -> the grid template columns, just like that, and I'm going to set them to 70% and 30%.

24890.23 -> Now, instead of using auto auto, which would just change them to the exact same height,

24891.23 -> we're now giving the first column a preference. So it's going to be a little bit bigger than

24892.23 -> the second one, we refresh. And it's working great. Now, what I recommend that you do while

24893.23 -> you're doing this is always try and go and see how your page looks in different viewpoints.

24894.23 -> So if you go ahead and you click on Inspect anywhere on your page, you can actually go

24895.23 -> and use your Chrome responsiveness kind of thing here to check out how your page would

24896.23 -> look on different devices. So I would recommend using this over resizing the browser, because

24897.23 -> resizing, the browser actually shows some inaccuracy. So you can really see how it would

24898.23 -> look like on your phone, or you know, maybe an iPad or a tablet or something like that

24899.23 -> without having to actually go on those tablets. So there we go. Now what I'm going to do is

24900.23 -> go ahead and manipulate this a little bit. So I'm going to go ahead and create a grid

24901.23 -> gap. to separate the two, I'm going to say it's about 50 pixels. There we go. And, yeah,

24902.23 -> let's you can see now that that gap has been created. And if we go ahead and inspect the

24903.23 -> page, you can see let me go to a phone, actually, you can see that there's a gap there a clear

24904.23 -> gap. And at least for now, it's not very evident. But once we start, you know, creating borders

24905.23 -> and things like that, we can really see this in a much better way. So there we go. That's

24906.23 -> great and working fine. So now that we've set up the set that up, I want to do something

24907.23 -> that we actually should have done at the beginning, which is add classes here because you can

24908.23 -> see that although I've added the main classes myself, we still want to be able to, you know,

24909.23 -> group subtitles together or paragraph text, so that once we start doing all of the important

24910.23 -> stuff, like importing images, and all sorts of things like that, we want to be able to

24911.23 -> group all of them or style all of them together at the same time. So that's what I'm going

24912.23 -> to do here. First thing I want to do is add a class of subtitle to all of the subtitles,

24913.23 -> just pretty obvious. Now again, some of them are h1, some of them are h tos and all sorts

24914.23 -> of things like that. So I'm going to go class

24915.23 -> is subtitle. And here as well, class is subtitle. Now, we kind of want all of the subtitles

24916.23 -> to be relatively the same size. But you can see here that there's actually a mini topic

24917.23 -> which we want to be smaller. So what I'm going to do is change the class and change this

24918.23 -> actually to topic,

24919.23 -> subtitle.

24920.23 -> So now we can specify this in a more specific way. So instead of having to use the subtitle

24921.23 -> class, we can actually go and talk about this in a different way. So there we go. Now let's

24922.23 -> go ahead and start looking at some of the other parts of the site. Oh, we actually still

24923.23 -> have more, you can see we have a lot of stuff here. So what I'm going to do is actually

24924.23 -> add classes to each of these posts, because they are going to be a little bit different

24925.23 -> considering the grid situation that we have here. So I have six posts. So I'm going to

24926.23 -> set their class to post title,

24927.23 -> like that.

24928.23 -> And what I want to do is also set some of the other stuff. So here, for example, our

24929.23 -> paragraphs, or kind of our descriptions and our posts, I want to also create a class for

24930.23 -> those. So I'm going to say class, I'm going to say post text, or post description, it

24931.23 -> doesn't really matter, whichever one you are comfortable with. And we're going to leave

24932.23 -> these blank for now. And actually also go ahead and add a class to these dips. Because

24933.23 -> remember, the more we can specify The better our page is going to look. Now obviously,

24934.23 -> we're just doing baseline kind of stuff here. If we ever need to specify something in the

24935.23 -> future, you just go and add a class, a class to that. So there we go, we have everything

24936.23 -> set up. Now we've added our classes. So the next thing I want to do is go ahead and import

24937.23 -> my different fonts. So firstly, let's go ahead and check out our little documentation mini

24938.23 -> documentation there. And we're going to start selecting some of these fonts. So first thing

24939.23 -> I want to do is download or import in Leto. So I'm going to go and select Leto. And here,

24940.23 -> I'm going to go ahead and just copy that link. Or actually, before that, let's go ahead and

24941.23 -> add some more families so that we can import it all at the same time. So we have our Roboto

24942.23 -> condensed, there we go. add that. Now what we're going to do is go ahead and whoops,

24943.23 -> didn't mean to do that. Now, we're going to go ahead and select some other fonts here

24944.23 -> or sorry, weights here. So I'm going to select bold 704. Later, I'm going to also select

24945.23 -> bold 700. And we're also going to go with a light. So the load time is moderate, it's

24946.23 -> not going to, you know be very easy on the site. But it is worth it. Because these are

24947.23 -> all the fonts that we need. And without them, the site would look completely different.

24948.23 -> So let's go ahead and import those. I'm going to go into my index and insert the link right

24949.23 -> below here. So I'm going to do that oh, because actually, we need to put the stylesheet below

24950.23 -> the below the fonts, remember, because we need the fonts to load in first. So there

24951.23 -> we go, we have that important. Now what we're going to do is just go ahead and copy these

24952.23 -> onto our onto here, just for reference. Now we are going to, you know, put these and specify

24953.23 -> these different selectors, obviously, but for now, I just want to leave them in there.

24954.23 -> So it just in case we forget some of these fallbacks or anything like that, we're just

24955.23 -> going to keep that there. For reference, I'm going to actually put that in our little notepad

24956.23 -> there. So now let's go ahead and refresh the page. And obviously, we won't see much of

24957.23 -> a change since we just add added classes. But there we go, we have our kind of hierarchy

24958.23 -> set up to start working with our website. So let's go ahead and start using these fonts.

24959.23 -> Now, what I'm going to do first is select everything that has a class of

24960.23 -> subtitle, right here.

24961.23 -> And what I'm going to do is paste in this font family, or actually, before we do that,

24962.23 -> why don't we use the CSS specificity chart, we're going to start by selecting everything

24963.23 -> that has the class of key, so all paragraphs, so I'm going to do the lips, I'm going to

24964.23 -> select all classes, all paragraph elements. And I'm going to give them that later font

24965.23 -> family. So what this is going to do is style everything. And if we don't like that, what

24966.23 -> we can do instead is just go and change the font family. So that for example, if maybe

24967.23 -> we want to have a different font, maybe it's a subtitle or some special text, we can just

24968.23 -> easily specify it without having to go through and you know, specify each one every single

24969.23 -> time. So it's a much easier way. So now that we are starting to do this, we can actually

24970.23 -> start to see flaws here. So for example, we also want the list items to be styled. So

24971.23 -> I'm going to do select all allies,

24972.23 -> allies.

24973.23 -> And now I'm going to paste in that same font family, and refresh. And you can see that

24974.23 -> that is now working we have everything set up here. And you can see there's also a little

24975.23 -> bit of text here. So you can kind of start to notice bugs in you know, maybe HTML that

24976.23 -> you've written or anything like that, you can easily start to notice bugs in it, once

24977.23 -> you start styling it. So this is most likely an indentation error. Maybe this text ended

24978.23 -> up outside the paragraph tag, so I'm going to look for it. It is next to our l eyes.

24979.23 -> And you can see it is right there. So what I'm going to do is just erase that we started

24980.23 -> out, we start up our p tag. And I'm going to create a new one under it just to make

24981.23 -> things a little cleaner. Now I refresh and that is working. This is most likely an error

24982.23 -> with indentation, things like

24983.23 -> that.

24984.23 -> So now we have our paragraph text, everything like that set up. What I'm going to do is

24985.23 -> now work on our headers. So I'm going to start off with our h ones. And I'm going to give

24986.23 -> it that header font family. So I'm going to Ctrl x which is cut or Command x if you're

24987.23 -> on Mac. And I'm going to paste that in refresh. And you can see that that is worked on our

24988.23 -> heading here. Now we're going to do it on all of our h twos, which remember if you've

24989.23 -> kind of looked at the code, our our subtitles, do that and now those have also been styled.

24990.23 -> So just by doing that our page has been completely transformed. We've you know, imported this

24991.23 -> custom font and laid out our site in a way that just makes it look a lot better. So that

24992.23 -> is working fine. So There we go, we have this set up, and it is working fine. Now what I

24993.23 -> want to do is go ahead and start working on some of other layout features on this page.

24994.23 -> Once we get into that, we can start tackling coloring and formatting and all the other

24995.23 -> things after we've used the fonts. So let's get started. What I want to do first is working

24996.23 -> on our little image grid here. So we don't actually have a proper grid setup, which is

24997.23 -> what I'm looking to fix in this in this part of the video. So I'm going to go ahead and

24998.23 -> do that. Now. I'm going to first of all, select it. So we're going to look for that class

24999.23 -> that we use, which is image grid. So we're going to go into here and select that using

25000.23 -> dot image dash grid. And there are many different ways to create a grid these days, but the

25001.23 -> way I'm going to use to make it a lot easier is just use Flexbox. So we've already used

25002.23 -> grid once Flexbox would be a great way to solve this. So let's go ahead and refresh

25003.23 -> the page. And now you can see that we have created a little Flexbox here. So we have

25004.23 -> that set up. And obviously you can see that it is pretty badly laid out right after creating

25005.23 -> the Flexbox. So we're going to tackle that problem now. Now, there are actually only

25006.23 -> two commands that we need to fix this, we can go and set up our flex grow and shrink

25007.23 -> to make it just how we like it. But there is an easy workaround to it, the first thing

25008.23 -> we want to do is turn wrapping on. So we're going to say flex wrap, wrap. And this is

25009.23 -> just going to move everything on to a new line, which is pretty easy. You can see there

25010.23 -> that that is working fine now. And when I resize the page or turn it into full width,

25011.23 -> you can see that that creates a nice three by three image grid. But even if we go into

25012.23 -> our inspector or change the responsiveness, it also resizes accordingly. The last thing

25013.23 -> I want to do is change it so that it's not kind of you know, placed like this, I want

25014.23 -> to kind of make it in the center of the page. So what I'm going to do is just use the simple

25015.23 -> justify content property and set that to center. Now we refresh, and you can see that this

25016.23 -> has been realigned to the center of the page. And remember, we do have a sidebar here, which

25017.23 -> is kind of, you know, giving us the illusion that it's not taking up the space, it actually

25018.23 -> should be. But it is centered. So it's centered to that 80% of the page, you do need to keep

25019.23 -> that in mind when you're working with this. Once you start working with coloring, you'll

25020.23 -> really start to see the page come together. So the last thing I want to do is kind of

25021.23 -> create a gap between some of these images because they don't look that good when they're

25022.23 -> just slammed together, you want to create some kind of contrast between colors. So we're

25023.23 -> going to use a nice special selector. To do this, we're going to select every single image

25024.23 -> inside of the grid instead of having to place new classes on them. So what I'm going to

25025.23 -> do is go ahead and select dot image grid, and then this symbol, which is the greater

25026.23 -> than symbol, and then image. So this is every image inside of our image grid, open that

25027.23 -> up. And we're just going to give it a margin of 10 pixels very easy, we don't need to work

25028.23 -> with anything else, refresh the page, and that margin has been added. So you can see

25029.23 -> how that looks a lot better now that we've done it. And it's still responsive when we

25030.23 -> you know, change the display, maybe to iPad or anything like that you can see it is still

25031.23 -> responsive, it's not changing it at, it's not changing it at all. So that's really good.

25032.23 -> So there we go, I'm going to set that up. So now that we have our image grid set up,

25033.23 -> the last thing I want to work with is this right here. So it says in our objective list,

25034.23 -> we want to move this image onto the side. So there you could use Flexbox, or grid, this

25035.23 -> is a pretty simple scenario. So what I'm going to do, instead of doing that is just use a

25036.23 -> simple float. So I'm going to give this an ID since we only need to do this as a one

25037.23 -> time thing. So I'm going to go ahead and look for that image, give it an ID of image, one,

25038.23 -> because it is the first image on the page. You can name this anything you want, depending

25039.23 -> on the purpose of the

25040.23 -> element. But I'm going to give it that class there. So I'm going to set it as image one,

25041.23 -> just like this. So what I'm going to do is go ahead and give that a float of right, just

25042.23 -> like that. And whoops, forgot the id selector there, we refresh the page. And now that is

25043.23 -> working fine. Now obviously, you can see there is a little bit of an issue with the spacing.

25044.23 -> So we're going to use a quick fix for this and give it a margin of about 15 pixels. So

25045.23 -> this is going to kind of push everything to the side. And obviously you can see there

25046.23 -> are still issues with positioning and everything. But that's kind of the you know, issue with

25047.23 -> using floats and things like that you can't really control where the spacing is going

25048.23 -> to go. So what I'm going to do to fix this is just increase the height a little bit.

25049.23 -> So instead of setting a height of 200 pixels, I'm going to go ahead and set it to maybe

25050.23 -> 250. Now we're going to refresh and it's almost there. We're going to actually use 300 pixels.

25051.23 -> Now, of course, in a normal scenario, you wouldn't have to use this, you know, maybe

25052.23 -> you would want to use a grid or Flexbox, like I specified here. But like I said, you can

25053.23 -> pretty much use whatever creative methods you deem necessary. And this is much easier

25054.23 -> because again, there are only three items and using something like a grid, or a Flexbox

25055.23 -> wouldn't really be practical in this situation. So there we go, we have this, this and this

25056.23 -> laid out just perfectly. Now we're gonna go ahead and tackle some of the other parts of

25057.23 -> this site. So we have our little image grid here, we have things like this, let's go ahead

25058.23 -> and check out our item list here. So we do have animations, which we're going to leave

25059.23 -> for last, we have our image grid. And there we go. So our next task is going to be creating

25060.23 -> those borders. So we did create our post here. So remember, we have our post class. So let's

25061.23 -> go ahead and select that. I'm going to go ahead and say dot post. So first thing I'm

25062.23 -> going to do is go ahead and set a border. So this is going to be our first use of the

25063.23 -> color scheme that we created. So I'm going to say to pixels, because monnit, that big,

25064.23 -> solid.

25065.23 -> And now we're going to go ahead and copy a color from up here. So I'm going to go ahead

25066.23 -> and use a dark blue. Just like that, copy it in just like an RGB color code.

25067.23 -> We've done it many times before, refresh, and we have our borders. Now, obviously, there

25068.23 -> are some issues with margining. So what I'm going to do is give each of those a margin

25069.23 -> of about 10 pixels, just like our images, refresh the page, and it's working. So there

25070.23 -> we go, we have our posts, and they are separated. Now, pretty much we do have some internal

25071.23 -> padding issues, which is normal, we'll go ahead and style those in just a second. But

25072.23 -> first of all, if you can start to see our sidebar working here, we have that little

25073.23 -> grid gap. And we have our the start of our second column there. So it's working great.

25074.23 -> Let's go ahead and start working with our margins here. So first thing I'm going to

25075.23 -> select is our post title. So I'm going to go ahead and say post title. Now you can do

25076.23 -> this in two ways. Since there's only one h2 and every post, you could go and say it like

25077.23 -> this. Or you can use this class that we created. So we're going to actually just go ahead and

25078.23 -> use that. So what I'm going to say is give it a margin on the left of maybe five pixels.

25079.23 -> And now what that's going to do is push that inside. And we're going to have to do the

25080.23 -> same for our paragraph text. So I'm going to go ahead and add our post text class here,

25081.23 -> I must have forgotten it. So we're going to go on dot post text and give that the same

25082.23 -> margin. There we go. And now we have everything pushed in. So there are still margining issues

25083.23 -> there. You can see that with some of these here. So I'm actually going to go ahead and

25084.23 -> also give our text a right margin. And again, this is all about experimentation. So go ahead,

25085.23 -> and you know, play around with this and see what really works for you. And you can see

25086.23 -> that now that's really fixed that up. And we have our posts sorted. So there we go,

25087.23 -> we have everything working. Now let's go ahead and try and work with more of our color scheme.

25088.23 -> Because right now, it's pretty blank here. So what I'm going to do is go ahead and just,

25089.23 -> you know, use this color scheme in a better way. So firstly, I'm going to give the page

25090.23 -> a background. So what I'm going to do is give the whole page so I'm going to use the body

25091.23 -> selector. I'm actually going to do that at the top. So I'm going to use the body selector

25092.23 -> body. And I'm going to give it a color, or sorry, background, a background and I'm going

25093.23 -> to give it our light blue color, just like that. Oh, let's copy the name as well, you

25094.23 -> just want to copy the color code, remember. And there we go. Our whole page now has a

25095.23 -> light blue color. Now, I'm actually going to go ahead and use an RGBA because this isn't

25096.23 -> light enough. So that's what I meant about flexibility at the beginning of the video,

25097.23 -> you can go ahead and change the colors based on your main four here. So I'm going to give

25098.23 -> this about point five, just make it a little bit lighter on the eyes. You can see that

25099.23 -> looks a lot better now. So now that we've done that, I'm actually considering changing

25100.23 -> the border color here. So what I'm going to do is go ahead and find it. And instead of

25101.23 -> using our blue, I'm going to use a bold orange so it's going to be quite striking on the

25102.23 -> eyes there. So I'm going to go ahead and do that. And there we go. We have our dark orange

25103.23 -> there. Now what I'm going to do is specify this and select our sidebar class. So I'm

25104.23 -> going to go ahead and do that right below all of these. So I'm going to go dot sidebar.

25105.23 -> And I'm going to give it a background of a light orange. So it's going to create a nice,

25106.23 -> a nice contrast, in effect tabin. And again, I copied the name. So I'm going to go ahead

25107.23 -> and give it that background that we need, which is our light orange. Now I refresh the

25108.23 -> page. And oh, something must Oh is selected subtitle went on to the wrong one. So I'm

25109.23 -> going to paste that in here. And there we go. Now refresh the page, and we have that

25110.23 -> orange background color there. So we could you know, do some color changes and mess around

25111.23 -> with these. But for now, I think this is fine. We don't really need to change these in any

25112.23 -> way. For now. So we have our orange background, we've kind of incorporated this color scheme

25113.23 -> very well. So we're going to do a little checkup of our sections here. So we've laid out our

25114.23 -> content, we've created our margins, or spacing, things like that, we pretty much have everything

25115.23 -> set up here, except for our links and our hovers and our transitions.

25116.23 -> So this is going to be the final part of the video, we're going to go we're going to set

25117.23 -> up our, you know, maybe our changes our resizes, things like that, and then we're going to

25118.23 -> finish off the solution, it is getting quite long. And I want to keep this short. So let's

25119.23 -> get started. So first thing I'm going to do is work with our links. Now, we haven't actually

25120.23 -> added anything to the links. So that's what I'm going to do first of all, now I kind of

25121.23 -> left it up to you what you want to add to the links, but what I'm going to do is just

25122.23 -> go and check out each of these. So I'm going to go click on all of them. And I'm just going

25123.23 -> Oh, whoops, I went into the href. And here, I'm just going to add lorem ipsum and some

25124.23 -> dummy text, like that. So now we're going to use because I don't really feel like going

25125.23 -> and adding a whole bunch of classes and selectors, I'm going to use our special advanced selector

25126.23 -> there. So inside of our sidebar here, we're actually inside of our post, sorry, we're

25127.23 -> going to go post and then our a or our anchor tag. Now we're going to go ahead and work

25128.23 -> with these. So I'm going to refresh the page, make sure they're there. So first thing we

25129.23 -> need to do is give it that left right margin that we need, remember, because to space it

25130.23 -> out a little bit, then what I'm going to do is say text decoration none. So pretty much

25131.23 -> what this is going to do. Oh whoops, didn't need to add that text, what I'm going to do

25132.23 -> is give it a text decoration property of none. So pretty much what this is going to do is

25133.23 -> change this. So that pretty much instead of having this underline, it's just going to

25134.23 -> be blank text. So this looks a lot cleaner, especially when we go ahead and add our um,

25135.23 -> our fonts, so I'm going to do that next. So remember, we have it added to our paragraphs

25136.23 -> or allies. And I think it only makes sense if we added to our anchor tags, as well. So

25137.23 -> I'm going to go ahead and add that whoops. So I'm going to add that there. And now we

25138.23 -> have that font, so it's looking great again. So now let's go ahead and start adding some

25139.23 -> pseudo selectors. So we have our basic colors. Now all of these are already clicked. But

25140.23 -> pretty much we have our post color. So I'm going to say the post color is going to be

25141.23 -> our that dark blue that we had. So this is before it's clicked remember. So dark blue.

25142.23 -> Copy that in and set this as the main color. And now we're going to combine our special

25143.23 -> selectors with a pseudo selector. Now, we haven't actually seen this before, but it's

25144.23 -> pretty easy to do, you just add it onto the element. And the only thing that we're going

25145.23 -> to change remember is going to be the color of the text there. So I'm going to go and

25146.23 -> find our light blue. And I'm going to paste that in. So now when we hover over it, it

25147.23 -> should change the color to a light blue. That's working great. Now let's add our transition.

25148.23 -> So I'm going to use the transition property. Now I'm not going to use any of the prefixes.

25149.23 -> But if you're using an older browser, you want to support it or you want browser support,

25150.23 -> you should always use this. So now I'm going to specify specify what I want in the transition.

25151.23 -> So I'm only going to use the basic properties. So I'm going to say maybe point five seconds,

25152.23 -> hover out sorry, point five seconds color. And yeah, that's pretty much it. So let's

25153.23 -> go ahead and fresh. Now we hover over it and it takes 0.5 seconds to change color. Now

25154.23 -> we could of course go and you know add our special styles for our transition. But I'm

25155.23 -> only going to use the two basic ones here, which is the time and the property. So we've

25156.23 -> changed that. Now we have our link color change. The last thing we need, or the last two things

25157.23 -> is the image grow. And the page animation sequence, which is going to be our sidebar,

25158.23 -> and our, our main section here kind of fading in if if it makes sense. So that's what we're

25159.23 -> going to do here. First thing I'm going to do is go and set the image grow. So what I'm

25160.23 -> going to do is go somewhere, where's my image, I'm selecting my images. If there's none here,

25161.23 -> I can just go and change that. Now, what I'm going to do is first create our image hover,

25162.23 -> just like that. And I Oh, yeah, I forgot I put that up at the top here. So I'm going

25163.23 -> to create my image hover. And here, I'm going to put in what I need. So I want to, you know,

25164.23 -> increase the height. So I'm going to say, the height is going to be 250 pixels. And

25165.23 -> the width is going to be 500 pixels, because we want that two to one aspect ratio. So now

25166.23 -> we refresh hover over an image becomes bigger, we hover over an image becomes bigger. So

25167.23 -> now what we want to do is add that transition property. So we're going to go again, point

25168.23 -> five seconds,

25169.23 -> and we're going to add two properties. So we're going to go height and width separated

25170.23 -> by a comma, refresh. And of course, it seems to be a little problem there. Whoops, I forgot

25171.23 -> to

25172.23 -> add that

25173.23 -> misspelling here. Now we do that and it changed it. Now you can see that there is a little

25174.23 -> bit of a weird kind of transition effect there. So it increases the width fully, and then

25175.23 -> it increases the height. So what I'm going to do to fix that is just use the all property.

25176.23 -> So what this is going to do is transition the height and the width together. When I

25177.23 -> refresh, you can see that that styles or moves everything together, because pretty much what's

25178.23 -> happening is it's overriding our our width property, it's just setting it instantly,

25179.23 -> and then it's changing the height, which we don't want. So I'm going to set that there,

25180.23 -> you can see that's working great. So what we're going to do now is go ahead and create

25181.23 -> that fade in effect that we needed for our content and sidebar. So first thing I want

25182.23 -> to do is go ahead and select both of them. So I'm going to select our content. And I'm

25183.23 -> going to select our sidebar. And now what I'm going to do is start creating our animation.

25184.23 -> So the first thing we need to do is create keyframes. So I'm going to go add keyframes,

25185.23 -> and then the name of our animation, let's just call it fade in for now. So the next

25186.23 -> thing I need to do is select my, the different time stamps I want. So I'm going to use the

25187.23 -> from and two keywords to do this from and to. Now we're going to use a property that

25188.23 -> we haven't actually learned before. And hopefully you Google this and try to find it when doing

25189.23 -> the challenge. And it's actually called opacity. So this allows us to go from opacity of zero,

25190.23 -> no percents, no pixels, just straight number to opacity one, just like our RGB a color

25191.23 -> code, now we're going to do is just refresh the page, obviously, we're not going to see

25192.23 -> anything, just make sure that everything is still running the same. So I'm going to go

25193.23 -> ahead and now add our animations to both of these sections or both of these block here.

25194.23 -> Sorry, blocks. So I'm going to go ahead and say the animation name is going to be fade

25195.23 -> in. We're also going to set the duration. Remember, we always need a duration to two

25196.23 -> seconds, refresh the page. Hopefully this works. And you can see that it now fades in.

25197.23 -> So there we go, we have our page set up and working, we refresh here, we can hover over

25198.23 -> images and make them look better. And it just looks really cool over also, you know, we

25199.23 -> pretty much set up this page from scratch. And now we have it all working, we have our

25200.23 -> fonts, and everything seems to be looking great. Alright, let's move on. So you've reached

25201.23 -> the end of the course now. So before we move on, I want to congratulate you it very few

25202.23 -> people who ended up starting the course make it to the end. And it does take a lot of discipline

25203.23 -> to learn everything and stick to it throughout the course. So I just like to say well done.

25204.23 -> And it's great that you're here with me. But now that you've learned CSS what what is there

25205.23 -> to do next? I mean, should I just stop and use my skills? Or are there other things that

25206.23 -> I need to learn. So I'm going to give you this helpful guide to maybe get you off your

25207.23 -> feet and start learning new skills progressing your careers. So I'm going to talk about it.

25208.23 -> Now before we move on. Let's just take a second and recap what position we're in right now.

25209.23 -> So by now you should have pretty good proficiency in both html5 and CSS three, which are just

25210.23 -> the latest versions of the two. So you should know all of the concepts and inner workings

25211.23 -> behind CSS and how it works so you can really see how a page is fit together using everything

25212.23 -> so box models Flexbox responsive this things like that. By now, you should have the skills

25213.23 -> to style your website in pretty much any way that you want. If you want to make it, you

25214.23 -> know, a very rustic or vintage feel. Or if you want to lay it out in a nice modern design,

25215.23 -> you should be able to layout your website with as much creative freedom as you want.

25216.23 -> But here are some skills that you should learn, learn next. So there are three main front

25217.23 -> end technologies that are called the Big Three. So you've already covered two of them, which

25218.23 -> are HTML and CSS. The third one, and arguably the most important is JavaScript. Now, JavaScript

25219.23 -> is the programming language, it's kind of what makes a website come to life, it gives

25220.23 -> it that interactive feel. And you can also change things in a much easier way. And without

25221.23 -> JavaScript, you can't really grab the essence of web development as a whole, you need it

25222.23 -> to be able to bring your website together and really take it to the next level. So that's

25223.23 -> one skill that you should definitely learn next, if you're planning on continuing. Now,

25224.23 -> once you've learned JavaScript,

25225.23 -> then you have to go on and choose what kind of career path you want to go down. If you're

25226.23 -> planning to go down a front end route, so you're only developing things that you know,

25227.23 -> you're only changing the look and feel of the website, on the main mainframe, then you

25228.23 -> should start learning some more advanced skills on either of the big three. So I've let I've

25229.23 -> left some examples there. So there are lots of libraries, frameworks, that things people

25230.23 -> have created. So you can go and research some of these. Some of them I would recommend for

25231.23 -> CSS, or some of the pre processors, which are sass and less. So I would recommend you

25232.23 -> go and check those out. You can also look at some JavaScript frameworks. So things like

25233.23 -> react ESX, and also some other libraries. So bootstrap, Font Awesome, and semantic UI.

25234.23 -> So again, don't take all of those, as you know, you're trying to wrack your brain and

25235.23 -> keep all those in your memory. Just go and do some research on what where you want to

25236.23 -> go and what kind of skills you should learn next, those who are looking to go into server

25237.23 -> architecture. So more back end development, people who are looking to fix up the processing

25238.23 -> website, saving users or, you know, delivering specified content should look into some back

25239.23 -> end architecture and programming languages. So for example, Django would be one for web

25240.23 -> development or server development for the web. And it is made or powered by Python,

25241.23 -> you also have PHP and a JavaScript, which is JavaScript web server, which is called

25242.23 -> node j, s. And then you have some others like Ruby and dotnet. So there are so many out

25243.23 -> there, you can always go and research and you'll find tons of options. So there you

25244.23 -> go. So that's pretty much it. We've covered everything on CSS, we've talked about grids,

25245.23 -> Flexbox. And pretty much everything there is to know about the basic concepts behind

25246.23 -> CSS, when you can start specializing and going into very specific details. And obviously,

25247.23 -> it's ever expansive, you're never going to have to stop learning. So by the time you're

25248.23 -> watching this, there could be an entirely new version of CSS out with a ton of new features.

25249.23 -> So never stop learning and always keep, you know, taking up new skills and trying to learn

25250.23 -> more about the skills that you already have. So that's one thing I would recommend to keep

25251.23 -> in mind and just continue down this path and you will eventually end up as a web developer

25252.23 -> that can really create things to his or her creative freedom. Alright, thanks for taking

25253.23 -> the course.

Source: https://www.youtube.com/watch?v=1Rs2ND1ryYc