A Comprehensive Overview of CSS Techniques

Hello, my name is Beau Carnes and I'm with FreeCodeCamp.org. This is a complete CSS course or Cascading Style Sheets. CSS is something you use to style websites or style HTML. So before you watch this course, you should have some familiarity with HTML. You can learn HTML through the free HTML curriculum at FreeCodeCamp.org. or you can check out the video course that I link to in the description. This whole CSS course follows along with the CSS curriculum at freecocap.org. So when you hear me talk about challenges or completing challenges, I'm talking about the challenges as part of that curriculum. However, it's a standalone video, so you don't have to go through the curriculum to get value out of this course. But if you want to, you can go through that curriculum as well. I have the link to the freecodecamp.org CSS curriculum in the description. After you finish this course, you may want to try out some CSS projects. So I have a link to a playlist with a bunch of CSS projects you can do right in the description. And then after you master CSS and HTML, it may be good to try out JavaScript. So I have a link to a JavaScript course also in the description. So let's get started. In this challenge, we're going to talk about inline styles. Inline styles are where you style something right on the element that you want to affect. So if I put my mouse on this p tag here, I can add a style to the p tag by just using style. then we're going to put what the style is going to be and we're going to put color blue. So that would just make the color of that text blue. But for this challenge, we're not going to style the p tag, we're going to sell the h2. So I'm going to undo that. And now I'm going to add the style to this h2 tag. And I'm going to make this style where the color going to be read just like that. And let's open up the browser and see what that looks like. Okay, you can see that the text the title here is red. In the last challenge, we talked about inline styles. That's what this is here. Now we're going to talk about a different way to add styles using a style block. And you can see we use color red, there are actually hundreds of CSS properties like color, we're going to eventually get to those but not quite yet. I'm going to show you the style block. So to make a style block, just at the beginning, I can add the tag style. And then we just need a closing style block. Now I can add all my styles between these two style tags. So let me give you an example. If I wanted to style all the paragraph tags, I can put a key and then I'm going to put a curly brace. And inside these two curly braces, I'm going to put color red. Now this is going to style all the paragraphs. Every time you see a P tag, like here, here, and all the p tags are going to now be read. If we look in the browser, we can see what that's going to look like. So you can see, look, this paragraph is read, this paragraph is read, all the p tags have now changed the text to read. So for this challenge, we're going to take out the inline style here. And I'm going to add some style to this block up here. instead of styling p tags, we're going to style the h2 tags, and I'm going to make them all blue. So I'm going to put color blue. Now let me open up the browser. And we'll see what that looks like. If I refresh, and you can see the h2 is now blue. In the last challenge, we learned about styling tags. like this, all h2 tags are blue. In this challenge, we're talking about styling classes, classes are reusable styles that can be added to HTML elements. So to show that you're styling a class, you would put a dot in front of it. So I'm going to change this eight h2 to dot blue text. And if you add this dot blue text, this is only going to style elements that have a class of blue text. So for instance, for this paragraph, I'm going to add a class. And I'm going to put in blue text. Now you can see I put a period up here, but you don't put a period down here. The period just means it's a class when you're looking at your CSS your styles. So if I open this in my browser, and refresh it, we can see that this is now blue, right here, we're going to change this up. Instead of making it a blue text, it's now going to say red text, and this color is going to become red. I'm not going to need this anymore. Because instead of putting the class on the paragraph, I'm going to put the class on this h2 tag, it's going to be class red. text. And then if I show that in the browser and refresh, you can see the title is red. What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements. So for instance, yeah, this is class red text, I can add red text, a class red text to any element. to make it red. And that's what we're going to do in this challenge. So on the first P element, right here, right up here, I'm going to add class equals red text. And when I open up the little browser here, you'll see that the title is red. And the first paragraph is read just by adding the class to both elements. There are hundreds of different CSS properties. We've only talked about color so far. But another one is font size. That's pretty self explanatory, it's going to change the font size of an element. So for instance, I can put font size 30 pixels. And now everything that has the red text class will also be font size 30. So if I look in here, you can see that this paragraph is a lot bigger now. we're going to change the font size of paragraphs. So I'll just remove what I had here. And I'm going to add another style. So right down here, it's going to be p, and the font size is going to be 16 pixels. So I'm gonna put 16 px. And now, if I show the browser here, we'll see. that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs, you can set which font in element should use by using the font family property. Now you can use a type or style of font like serif sans serif or monospace, or you can put in the exact font. So in this challenge, we're going to make all the P elements, monospace. So right here, I'm going to put font family, and then monospace. And if we just show this in the browser and refresh, you can see now we have these this monospace font here, just like that you can import fonts from different websites. free library of web fonts that you can use is Google fonts, they have a lot of great fonts. And that's what we're going to do in this challenge. We're going to see how to import Google fonts. So if I just paste in some code up here, this code comes directly from the Google fonts website. And you can see it's the font family lobster. So I'm just about to show you how to use that right in our code here. So what I'm going to do is for the age element, I'm going to add h2 here. And I'm going to add a font family of lobster. Now that's all I really have to do for this challenge. If I wanted to, I could add a backup font that would be used just in case the the Google font didn't load like this, I do a comma, and then I can put a generic font. that's going to be used if the specific font doesn't load but we're not going to do that for this I'm just going to open the browser and see if it works And you can see we have the lobster font right here. There are some default fonts available in all browsers, like monospace, serif and sans serif. You can see we're using the monospace font right here. So when one font isn't available, you can tell the browser to degrade or default to another font, like one of these default fonts, like the monospace font. For example, let's say we had the font family in the font family, we had held that Helvetica. So if I add Helvetica right here, and I can actually just make a list of fonts right here. So in font family, when you have a list here, first, it tries the first font, but if that one's not available, it will go to the next font. So when you're making a list of font family fonts, you always want the last one to be a generic font. So you know that if the browser can't get the first font or the second font, I can always get the default font at the end here. So for this example, for this challenge, we're going to do that for the h2 tag. So in this h2 tag, we have lobster, let me delete Helvetica here. And I'm going to make the default font monospace. Now, right now, if I open up the browser, you're not going to see anything different, you're going to see lobster here. But I comment out the link to the Google fonts. And now I'm going to refresh this. And you can see it's defaulted to the monospace just like that. See, so it couldn't find lobster. So it defaulted to the monospace font. CSS has a property called width that controls an element width. this can apply to almost any type of element like an image or a div or a paragraph. And we're going to create a style that can make a larger image. So I'm going to create this called larger image. Now that's only going to apply to an element with the class larger image, and I'll put width to be 500 pixels. So if we have anything with the class larger image will make it larger. So I'm going to actually add that to this image here, I'm going to put class equals larger image. So if we look in the browser here, we should see that the image is very big right now. For this challenge, we're going to make a smaller image. So I'm just going to actually just change this to smaller. And instead of 500 pixels, we're gonna make this 100 pixels, and I have to apply the smaller image class down here. So if I open the little browser, and refresh, now it's just a tiny little cat, a cute little cat right there on our page. CSS borders have properties like style, color and width. Let me show you an example, I'm going to actually make a change to the h2 style here, I'm going to paste in some code, you'll see border color red border width five pixels border style solid. So when I refresh the page here, you'll see this red border around the h2 tag, I'm going to delete this for right now. Because for this challenge, we're actually going to make a thick green border. So I'll just put it right up. at the top for now here. And I am going to make a new class called thick green border. And I'm just going to actually paste in that same code from before. But the border color is now going to be green, and the border width can be 10 pixels, and the border style. will still be solid here. So now I'm going to have to apply it to the image. So right now, there's the class smaller image, but you can have two classes here, I just put a space. And then I'm going to put thick mean order. So as long as you just have a space in between classes, you can have two classes. So if I refresh here, you'll see the thick green border right around there. You can see so far we have very sharp corners around this image, there's a border radius property that we can use to make that a little route more rounded, I'm going to add a new thing called border radius. and I'm going to set the value to 10 pixels. So if I refresh now, you can see we have rounded corners here. In addition to pixels, you can also specify the border radius using a percentage. So instead of border radius 10 pixels, I'm going to change this to 50%. And if I refresh my page here, you can see it makes a circle, you can set an elements background color with a property called background color. So here's an example. Let's set the background color of the h2 element background color. And I'm going to change this to blue. So if I open up my browser, we'll see that the background is blue. I'm going to make a new class. And the new class is going to be called silver background, silver background. And you guessed it, it's going to have a silver background. So I'm going to put background color, silver. Now remember, I also have to apply it somewhere I have to make something use that class. So for this div, I'm gonna put class equals silver background. Now if I refresh here, you can see we have a silver background here, we don't need this background color blue. So I'll take that off here and refresh it one more time. And that's how it's supposed to look. We've talked about styling specific elements like this. And then we've also talked about styling classes, you can also style based on ID. An ID is similar to a class except each element is only going to have one ID classes, you can put on a lot of different elements. So let me show you how to apply an ID to an element. If I just go down to this form here, and I'm just going to put ID equals cat photo form. And just like that, it's not going to change the appearance at all, because we haven't styled it yet. but now we can use the ID to add CSS styles, or we can reference it in JavaScript. In the last section, we learned about IDs. Now we're going to learn about styling IDs. I'll use this ACE two as an example and add an ID of heading your styling IDs. It's similar to when you're styling classes, but we are going to use a hash mark. instead of a period. So I'm going to put heading here. Let me format this a little better. So you can see normally for the class that starts with a period for an ID, it's going to start with a hash mark. So I am going to put color green. Now, I want to show you something. So you can see that this h2 has a class of red text and a heading an ID of heading So we have the red text and the heading. So is it going to be red? Or is it going to be green? Well, let's open the browser and find out here. You can see it is green, because CSS puts a higher priority to IDs than classes. And as a reminder, you should only have one ID per element, we already have the ID down here on the form ID of cat photo form. And so now I'm going to change this instead of heading is going to say cat photo form. And then for color, we're going to instead of color green, it's going to be background color green. And now I'm just going to refresh that. And if I go down here to the form, you can see it's green in the background. You may have already noticed this, but all HTML elements are essentially little rectangles. There are three properties that control the space around each element, which is padding, margin and border. We already talked about border, which you can see on here, the padding is the space around the text, you can see that the padding around this red text is a little more than the padding around the blue text, the margin is the space outside of the border that surrounds the padding. So in this task, we are going to change the padding, we're going to change the padding on the blue box to match that of the red box. So if we look down here, the padding on the blue box is 10, the padding on the the red box is 20. So we're just going to change this to 20. And then if I refresh my page here, you can see that these boxes are the same size, and elements margin controls the amount of space between an element's border and the surrounding elements, you can see that there's greater margin on this red box than the blue box. So in this task, we're going to make sure that they're both the same. So I'm going to change the margin of the blue box to match that of the red box. So you can see the margin is 20 on the red box. So I'm just going to set the blue box to also be 20. And then if I refresh my page, you can see that they're the same. The reason why this red box is so big right here is because it has negative margin. we're going to make sure the blue box is just as big as the red box by giving the blue box negative margin as well. So I'm going to set this to negative 15. So now the red box and the blue box are both at negative 15. And if I refresh the page, now they're both the same. As you can see in this red box, each side can have different amounts of padding. that's this code here, padding top padding, right padding, bottom padding left, we are going to use different paddings for the different sides of the blue box. So I'm just going to copy this code right here, and then paste it down here. And now what we have to do for the challenge is set the top and left to 40. So let's do 40 here and top and left are already 40. And then the bottom and right to 20. that's just the same as already is. So let me refresh. And we're done. We already learned that you can set each side of padding separately. You can also do the same thing for margin, you can see for this red box, it has different margin on each side, we have margin top right bottom left, we're going to do the same thing for the blue box. and I'm just going to copy this margin from the red box and paste in for the blue box. And now I'm just going to refresh my page. Because we're done. Previously, we learned about padding top padding, right padding, bottom and padding left, there is an easier way to do the same thing. And it's called clockwise notation. if I if we look at this browser here, and see the red box, there's actually a different padding on each side. So if you look at this padding here, see all these four numbers, well, the first number is the top, then the right, then the bottom, then the left. So we're going to do the same thing in the blue box, I'm going to start off by copying this padding from the red box, I'll paste it into the blue box. And this time, the padding top and left have to be 40. So this one has to be 40. And then the last one, that's the left. And the bottom and right have to be 20. Those are the two middle numbers. So if I change those and refresh, we'll see that they're both kind of the same. They're a little different because this one has the 21st and 40. And then this one has the 40th and 20. And that's it. We already learned about clockwise notation for padding. Now we're going to learn about it for margin. It's basically the same, you can see this red box has a different margin on each side. So here's the code here. It's clockwise notation, there's four numbers. The first is the top, right, bottom, and then left. So you can do all in one line instead of having four different lines. We're going to do the same thing for the blue box. So I'm just going to start by copying this line. And to solve this challenge, we're just going to flip these two numbers around because the 40 has to be the SP top, and the 20 is going to be on the right. So if I refresh my page here, you can see that it has changed, we now know how to style classes. So this is an example of silent classes with a dot before the class here. And then you can put the styles for the class, and then use style IDs with the hash mark instead of a dot here will be a hash mark. Now we're going to learn how to use attribute selectors to style elements. Now this is a selector that matches and styles elements with a specific attribute value. I'm going to show you an example how to style something with a type radio. So we can style everything with type radio. So let me add that right up top here. So what you put brackets around and we're gonna do that. So we're going to put the attribute which is type, and then we're going to put the value which is radio. So type equals radio. And we're gonna that's how we're going to select what we're styling. So here, I'm just going to set the margin to 20 pixels. So if we open up the browser here, now let me scroll down. And we can see that there is a margin around these radio buttons of 20 pixels. So now we're going to use the type attribute selector to try to give the checkboxes a top margin of 10 pixels and a bottom margin of 15 pixels. So all I'm going to do is so let's go and look at the checkbox in the code says type checkbox. So we're gonna use the same thing up here instead of type radio is going to be type checkbox. And then for the margin, the top is going to be 10 and the bottom is gonna be 15. So what I'm going to do is do top up if we do the the clock one. So the first number is top, the second number is right, I'm just gonna put zero pixels. And then the third number is bottom, I'm going to put 15 pixels. And then the fourth number is the left, which is zero pixels. So if I just refresh my page here, and the check boxes are styled. So far, we've been setting margins and paddings using pixels, px, see this example, negative 25p extra pixels, these are absolute types of length. So absolute types of length include like I n for n for mm millimeters. These are all tied to physical units of length. but there's also relative units of length, such as em and REM. And these are relative to another length value. For example, em is based on the size of an element's font. And if you use it to set the font size property itself, it's relative to the parents font size. Now we'll talk about this a little more in the responsive web design principles section. But for now, we're going to try a setting some padding using an EM or M value. So that's what I'm going to show you. Now, we're going to set the class of the red box here, we're going to set the padding to an EM value. So I'm gonna put padding, and it's just like how you would put pixels, but instead of doing px, you just put em. So this is going to be relative, depending on other things on the page. So if I show the browser here, now you'll see this extra padding here. around the red box. Every HTML page has a body element. Now usually it'll be a more explicit, you'll see the the body tag right on the page. But even if you don't see the body tag on the page, like in these examples, it's still there, it's just hidden. So we can prove this by actually just styling the body element. So that's what we're gonna do here, I'm going to add a body here, or a body style. we're just going to set the background color to black. And now if I refresh my page, you can see it turns black, this the whole page turns black here. So we've seen the all pages have a body element. Now CSS that stands for cascading style sheets. cascading means anything that you apply to an upper element goes down to any lower elements or any elements that are inside other elements. So anything that you apply to the body element will cascade or get it be inherited to all the other elements on the page. So let's see how that first I'm going to create an h1 element. And inside the h1 element, I'm going to say hello, world. And now I'm going to style the body element. So we already have black on color black, I'm also going to put color green. And I'm for the font family. I'll put it as mono space. Now let's open up the browser and see what that looks like. Okay, look, we have green mono space font, I didn't apply it to the h1 tag, I applied it to the body. And then everything else got that same style. sometimes your HTML elements will receive multiple styles that conflict with one another. If you see on here, this h1 here, this body will apply is will cascade down to the h1 to make the color green. But what if there is something else to make this a different color? What would happen? So what I'm going to do is make a new class, it's going to be called pink text. And I am going to make the color pink. And now I will apply the class to this h1 tag. So pink text. So what do you think is going to happen? It has the color green from here, but also has the color pink from here. Well, let's open up the browser and find out. And it's pink. The way it works is it uses whichever one is more specific, since this has the class pink tax and it doesn't start with body or anything, the pink text is more specific than the body because body is further up. So whatever one is closest to the actual text is which style it will use. So we saw that this color pink overrides the color green because pink text is more specific than body. What can we do to overwrite this pink text here? What if I made another class like this, I'm going to just copy that, and then paste it here. But instead of being pink text, it's going to be blue, and the color is going to be blue. Now, I'm going to add another class here, remember to add two classes, you just put a space in between classes, I'm going to put blue text here. So now what's going to happen is going to be pink or blue, I'm just going to give you one tip here that the order of the classes here doesn't matter. It doesn't matter whether pink text or blue text comes first. So let's see what color the text is going to be. And you can see it's gonna be blue. So the order that does matter is the order that the styles declared in. So if I just take this blue text here, I'm going to cut this. And now I'm going to just paste it right up here. And now if I refresh the page, you'll see that it's pink, because it just depends on what order this comes in here. So we saw that you could override styles by making things more specific pink text, the class overrides just styling the body. And then we saw you could override styles by putting things lower in the styling section. So this blue text overrides pink text because it's lower. Now, there's another way to override styles, and that's with IDs. So I'm going to add an ID to this h1 here, it's going to be ID equals, and we're going to have an ID name called orange. text. And now I'm going to put the ID style right above the pink text. Because when you're styling IDs, it doesn't matter the order doesn't matter if it's above or below the other styles, because IDs are even more specific. Let me show you what I mean. So remember, instead of starting with a dot, we're gonna start with a hash sign or pound sign. And I'm going to put orange text and here we're going to put color orange. And now I'm going to show the browser here. And we'll refresh. And you can see it's orange text. Because IDs are specific, you are only supposed to have one ID per page. So orange text should only be on this element. Whereas classes you will put on multiple elements IDs, you only apply to one element. So IDs are more specific. than classes. And here's another way to override class declarations with inline styles. Inline styles are going to be more specific than all these other ways of styling text, I'm going to go right into this element here and put style equals and then I'm just going to change the color to white, you can write this just as you would write your CSS above but right in line. Now I'm going to open up the browser here. And then you should be able to see the text is white. So that's even more specific. You've learned many ways to override CSS and get even more and more specific, starting at the body, then pink text and blue text and orange text. We've learned many ways. But now I'm about to tell you about the most powerful method of all how you can show something is super important. Let me show you that now. If you remember, this pink text has been overridden many times. But now we're going to show that this is very important. I'm going to use an exclamation point and then the word important. So using this exclamation point important after a style means it's the most important style and you should definitely apply this style. So let's see what that looks like. And now it is pink. Hello world is now pink. So far, we've been coloring things. using the actual color names, like for instance, black, or orange, or green or blue. But there's a way to get even more specific using hex codes. hex codes are six hexadecimal digits that represent colors. So you can represent any color on the spectrum using a hex code. So I'm going to change this instead of black, I'm going to put the hexadecimal for black, which is just 000000. So the first two zeros are the red, second two zeros are the green and the third two zeros are blue. But since it's black, it's a zero for every single one. So let's see what that looks like in the browser. And it's still black hex codes can be used to create over 16 million different colors. And that's what we're going to do here, we're going to put in the right hex codes for these colors. So the hex for red is going to be they're always going to start with the hash marker pound key, and I'm just going to put F F 0000. And then for a green, we're gonna do the hash mark, and it's going to be 00 F F 00. And then for Dodger blue text. Now I don't have these memorized, I'm actually just reading them off. Most you're not it's gonna be hard to memorize 16 million different combinations for colors. So usually you're going to look these up somewhere. There's a lot of websites and a lot of other resources to find the appropriate hex codes for different colors. So for the orange text, it's going to be FFA 500. And let's open up the browser and see what this looks like. If I refresh this, and now we see all the different colors, some hex codes can be shortened. Remember, they're usually six. digits long. But sometimes the hex codes have three sets of two of the same digits. For instance, red text, the hex code is normally ff 0000. You can see that the first two digits are F, the second two digits are zero, and the third two digits are zero. So whenever there's three sets of two, we can shorten this by just doing one number one digit for each. So f 00. So this f will be expanded to ff, this will be expanded to 00. And this will be expanded to 00. For future for future text, we can do f zero f, for the cyan text, we can do zero ff. And then then for the green text, we can do zero f zero. So let's open the browser and see if we got those colors. And it worked. besides using hex values to represent colors, you can also represent colors using RGB values. So that will be like this instead of this hex value, you would put RGB and then there's gonna be three numbers. Each number is going to be between zero and 255. I'll just use 255 three times here. And if we show this in the browser 255 255 255 is white. But for this challenge, we're going to change it change it to black. So black is just going to be 000. So I put 000 for black. And if I refresh, we'll see that it's changed to black, you can make just as many colors using RGB as you can make with hex. So I'm going to make all these colors with RGB instead of hex. So for the red text, it's just going to be RGB. And then the first Number is always red. And then we have the green. then we have the blue. So for red, it's all red, no green, no blue, you can kind of mix to decide how much you want to be each color color with RGB. And you can really do the same thing with hex as well. So for orchid text, let's do RGB. And this is going to be 218 112. And then 214. I don't actually have all these memorized. I'm just reading them off here. to make this even easier, I'm going to do some copying and pasting. So we're going to have the sienna text and the blue text. Sienna is going to be 160. And then 1182. And then we're going to do 45. And then for blue, this is going to be an easy one because we just have zero zero to 55. And now let's look at the browser to see what that's going to look like. There are our colors. Look at the sweet penguin created only with CSS and HTML. We're not going to go into exactly how to create this, you can look at the code to find out yourself. But this is all about showing CSS variables. So here right here. CSS variables. So the penguin skin black, belly gray, be yellow, you can see they're used here, like here background, we have the var. And then you have the parentheses two dashes, penguin dash skin, and gray. So this would be the backup color right here. But this would be we would try to use this variable. If we can't use this variable, we go to the backup. But right now I'm going to show you how just changing these variable colors will change everything every time those variables are used. So I'm going to change this black to gray, I'm going to change this gray to white, and I'm going to change the yellow to orange. And then if I just refresh here, you can see our penguin is a completely different color now. is it was super easy, we only had to change in one spot, and it changed it everywhere in the code. In last challenge, we were introduced to variables. Now we'll go over them some more and learn about them in more detail. So to create a variable, we're going to do it right here. So we're going to create a penguin skin variable. So they always start with two dashes. And then we just do we put the name here, which is going to be penguin. skin. Now we're going to be able to use this variable anywhere throughout the code, this is just going to be gray. So now anywhere we use this penguins skin variable, it's going to be replaced with gray in the code. So in the last challenge, we create this variable penguin skin gray. Now we're going to use it. So to use a variable, you just put var and in parentheses, you put the variable name. let me show you here for this background, I'm going to put var and then parentheses, and then I'm just going to put dash dash penguin. And then that's the variable, we're going to use the same variable in multiple places. So I'm just going to copy this. And we'll paste it here. And then I'll paste it here. And then if I refresh, it's great. Oh, there's a wing. let's see, we have to replace one more spot. Okay, let's replace there and refresh. And now everything that's supposed to be gray is now gray. So now we had to replace all these spots this time. But from now on, whenever we want to change the color of the penguin skin, we only have to change it in one spot. That's the great thing about variables. Variables can have fallback. values attached. These are used if for some reason, the variable won't work. It could be because someone's using an older browser that doesn't use CSS variables. Or maybe just a variable name is spelled wrong. So that's what's happening here. See, it says, ping, gween, that's spelled wrong. But to show that that's just to show these fallback values. So what I'm going to do is just add the word black here. And then here, I can add the word black. And now let's just refresh this. And you can see it's using the fallback value because it cannot find the penguin skin because it's spelled wrong here. variables are available inside the element in which you create it. So we have these variables here. The reason why they work in the other parts of the penguin is because everything is within the penguin element, like the right cheek, left cheek, belly, these are all within the penguin element. Sometimes in order to make variables available anywhere in a document, you can declare the variables inside a root element. you can think of the root element as a container for your entire HTML document in the same way that an HTML element is a container for the body element. So anytime you create a variable within the root element, they're going to be available throughout the whole page. So that's what we're going to do here. So I'm going to make a variable named penguin belly. And then this is going to be pink. So we can already see that it's used in these spots here to pin when belly is used here, pin when belly is used here. So it's using these two different places. And but just making it here within the root, we're gonna be able to use it everywhere else. So let me refresh the page. And you can see that that it's pink in both places. So variables declared within root apply to the whole page. But you can overwrite those within a specific element. So down here, I'm going to overwrite penguin belly. So penguin belly, and this is now going to be white. So if I refresh the page, it's white now, media queries can be used to change variables. media queries make different CSS apply depending on the size of the screen. So here's a media query for max width 300. pixels. So we can make variables that only apply when the max width is 350 pixels. So let's try changing the size. So now the penguin size will be 200 pixels. And we're also going to try changing the skin. So penguin skin with this media query will be black. So now when you change the size of the browser, let me refresh again, it will change the variables. Time to create our first CSS grid, you can turn any HTML element into a grid container by setting its display property to grid. So we have this HTML element container. And then here is the CSS for we are going to set the display property property to grid. And this will give us the ability to use the other properties associated with CSS grid. So I'm just going to put display grid, and we're done. So it doesn't do anything quite yet, because we haven't updated any of the other properties yet. But we'll do that in later challenges. Now. we need to start defining the structure of the grid, we'll start with adding some columns using grid template columns. So I'm going to do that now and show you how to solve this challenge. I'm going to type in grid template columns. And after grid template columns, we're going to put the width of each column. So the number the number of numbers we put here are the number of columns, we're going to have three columns. So we're going to have three numbers, and all of them are going to be 100 pixels wide. So I just have to put 100 pixels three times. And now, if I refresh the page here, you'll see that we have three columns. So here we have grid template columns, which we already learned about which sets the number of columns. Now we want to set the exact number of rows. Right now the rows are just determined automatically. But if we know exactly how many rows we want, we can use grid template rows. So to solve this challenge, we just have to add grid template rows. And then just like grid template columns, the number of numbers are the number of rows. and each number is how tall each one will be. So I'm going to put 50 pixels, 50 pixels. So we'll have two rows are each 50 pixels high. So if I refresh that, it looks pretty similar, because that was very close to what the default was. But we just solved it, you can use CSS grid units to change the size of columns and rows, you can use pixels and Ms. But you can also use things like FR, which sets the column or row to a fraction of the available space. See this how we have five different columns, and they're all different sizes. Well, we have this code here. So you can see the first column is auto, that's the one here. And that sets the column to the size of the space. So it just is just big enough for that one to fit in there. And then the second column is 50. So this column with the two 50 pixels wide. With the three we have 10%. So this three is 10% of the available section from the whole container. This is 3% of the whole container. And now we have the two fr on one fr, that's columns four and five. So the last two columns, the remaining space is divided into three sections, because two plus one is three, two. the sections are allocated to the fourth column, and one to the fifth column, we're going to make a grid with three columns. Instead of all five of these, we're going to specify three of them. So the first one is going to be one fr. And then we're going to have 100 pixels, and then two fr. So let's see what that looks like when I refresh the page here. So we can see we have three columns. the middle column is always staying at 100 pixels, no matter how wide, but the first and third column will change. Because of the FR units here, you can see here in these columns, there's no gap between the columns, they just split up right against each other. Sometimes you want to gap between the columns. So you use grid column gap. I'm going to show you how to do that right now and show you how to solve this challenge. So it's gonna be grid column gap. And then we set how many pixels we want in between each column. In this case, we're going to put 20 pixels. So if I refresh here, we should see space in between each column. In the last challenge, we learned about grid column gap. you probably won't be surprised to learn that there's also a grid row gap. So it works just the same. We'll put grid row gap, and it'll make a gap between the rows. In this case, we'll put five pixels by refresh here, you can see that there is a space in between the rows here, the grid gap property is a shorthand property for using the grid row gap and grid. column gap properties all at once. If you just put one number, it will put the same gap on the rows and columns. If you use two numbers, the first number will be rows, the second number will be columns. So I'm going to just do the two numbers here. So I'm going to do grid gap. And then the first number is going to be 10 pixels for the rows. And the second number is gonna be 20 pixels for the columns. If I refresh this here. we can see that there's the 10 pixels in between. And then there's the 20 pixels for the columns here, the grid column property is used to set how many columns a grid item will take up. Now, here's a three by three grid. And there's these hypothetical lines that you don't see, but they exist in between the grids. And they're numbered. one, you can see in this example, for a three by three grids, there's four lines 1234. So for the grid column property to set how many columns an item is going to take up, you're going to specify the beginning line and the ending line. So if you wanted to take up two columns, the first two columns, you would specify line one, and then line three, because it would start at line one, and it would that line three, let me show you what that would look like. So for instance, if we were going to set this item five to set to take up the first two columns, it would be like this grid column, and then we would put one slash because it would start at the first line and end at the third line. For this challenge, though, we are going to make the grid take up the final two columns. So it's going to start at two and in that four. So if we refresh that, we should see that this fifth element starts at two, and then it ends at four, just like that. we learned how to make grid items consume multiple columns, we can also do the same thing with rows, it's basically the same thing. So instead of grid column is going to be grid row. And then for this challenge, we have to make it take up the last two rows. So the same as before, I'm going to put two slash four, because if you look on the diagram, the last two rows are these two rows. it's going to start the two line and end at the four line. So let's refresh the page here. And you'll see that's taking up the last two rows of this section here. In CSS grid, each box is considered a cell. So each of these colored boxes on screen are considered different cells. If we use justify self, we can justify and align the content within the cells. By default, the property is a value of stretch, which will make the content fill the whole width of the cell. But for this challenge, we're going to try a different, a different property. So I'll do justify self. And instead of setting it to stretch, which is the default, I'm going to set it to center, we can also do start or end. But if we set the center, you'll see this has been centered within the cell just like that. In the last challenge, we used justify self, which aligns horizontally. Now we're going to align an item vertically using align self, it works pretty much the same way. So I'm going to put align self, and then I'm going to set this to end. So now if we refresh, you'll see that this aligns vertically to the bottom of the cell. If you want all your items in your grid to share the same alignment, you can use justify items on the parent container, it uses all the same values that we saw before. So we'll put justify items. And then I'll just set this to be center. If we refresh, we'll see everything has been centered, we saw that justify items aligns all items horizontally, align items aligns all items vertically, again, you put on the parent container. So put align items. And I'll set this to end to set so all of them align at the end of each cell. So we see they all go to the bottom, which is the end. Here, we've created an area template, the cells have been grouped together using a custom name, you'll see when you look at the rows and columns, there's three columns and three rows, or nine cells total. And that's how many words you'll see here. So each set of three words in quotation marks is a row. So that's the first row, second row, third row. And you can see each word corresponds to a cell in this layout here. So you can see the first three are now designated headers. And then we have an advert and then two contents. And then the last three are the footer cells, you can use a period to designate an empty Selma grid. And that's what we'll do for this challenge. So instead of the word advert here, I'm just going to put a period and that designates it as an empty cell, we saw how to define our template areas here in the last challenge. Now we'll learn how to place items in a specific spot in the grid area. So if we want to set item five to be in a specific spot, we'll use the grid area property. So grid area then we just put one of our customs names that we defined below. For instance, if we set this to header, and I refresh here, you'll see the number five has popped out of its normal location and fills up the entire header, it fills up the entire header. because there are three items in the header. And there's only only item five is set to header. So it fills up the whole header. For this challenge, however, we're going to put it in the footer. So I'll just change this name to footer. And then if we refresh, again, you'll see that the item five takes up the entire footer, you can create grid areas without a template. you'll notice here that we no longer have our template code here. But I'm going to show you how to create a grid area. So same with before we start with grid area. But instead of saying the template name, I'm going to put some numbers, I'll do one slash one slash two slash four. Now, these use the same type of numbers that we talked about before. If you look at this chart here, it's almost like setting coordinates on a graph. The first two numbers are the start coordinate. And then the second one is the end coordinate. And then the third one is the end coordinate. the last two numbers are the end coordinate. So the first two numbers would be the horizontal line to start with and the vertical line to start with. So for 11, it would start in this top corner here. And then you'll see that the second two numbers are two four. So two four means it's going to end at the second horizontal line, here's two, and then here's four, it's going to end at the fourth vertical line. So 1124 would start at this point and end at this point. So that would just take up the entire top row. So let's see what that looks like. I'll refresh and we'll see that the five takes up the entire top row. Now we'll make some slight changes to this to solve the challenge. So the numbers we're going to use are three, one, or four. So if you look on here, three, one, would be right here for four would be right here. So now it should take up the bottom row. Let's refresh and you'll see five takes up the bottom row. If you want to repeat the same size row or column many times you can use the repeat function. If you see right here, we have the same size row repeated three times one fr one fr one fr, we can use the repeat function to repeat that. three times. Here's another way you can use the repeat function. Let me put it in here. So to use the repeat function, you start with the word repeat. And then in parentheses, we're going to pass in something first, the number of times you want to repeat. So in this case, I'm going to pass in the number two, you could use 7550 100, however many times you want this to repeat. Now we could put one size to repeat the same size over and over. Or we can put in any number of sizes. So I'm going to put one fr, and then 50 pixels. So it's going to repeat that two times. And then you can even add other sizes afterwards. So I'm going to put 20 pixels, let me show you how this would be calculated. I'm going to copy this and just paste it in here. Now normally, you would never have grid template rows twice in a row. I'm just using this as an example. So when this calculates out, it would look like this. I'll copy this because it's going to be on there two times. And now you'll see one fr 50 pixels, one fr 50 pixels 20 pixels. So this with the repeat function would calculate out to this, let's back up a little bit, I'm going to undo some of the things I put in here to go back to what the code looked like initially. And now we're actually going to make a change to the grid template columns. See how it says one fr three times, let's use the repeat function to do the same thing. So I'm going to do repeat, and I'm going to pass in three, and then one fr. So now, if I refresh, we should see no changes, it looks exactly the same, because this is equivalent to what we already had, you can also set the size of a row or column using the min max function. the min max function takes two arguments. The first number is the smallest size that the row or column can be. And then the second number is the largest size a row or column can be. So let me show you how this works and show you how to solve this challenge. I'm going to replace this second number in the repeat function with the min max function, which will pass in two arguments. First will be 90 pixels, that will be the minimum amount the row that this column can be. And the second number is going to be one fr, which would be the max amount that the column can be. So if I just refresh the page here, you can see how it changes depending on the size of the frame here. We saw already that in the repeat function, the first argument you pass in is the number of times you want this to repeat. So this is going to repeat three times, you can also use autofill. So if you use autofill, it's going to automatically insert as many rows or columns of your desired size as possible, depending on the size of the container. So let's see what happens. I'm going to refresh the page here. then we'll see that this changes depending on the size of the container. You can see the difference between container one and container to container two at the bottom has just repeating three, and then the top one has repeat auto fill. So you can see how they behave differently depending on the size. We talked about auto fill this one right here. Now we're going to talk about auto fit. it's very similar. I think the best way to show you the difference would be to actually show you what what effect it has on this browser here. So this first one is set to auto fill. For this challenge, we have to set the second one to auto fit. So I'm gonna put auto fit. And now let's just refresh the browser and we'll can see how they're very, very similar, but not quite, you can see they work very similar. But you see the auto fit always make sure that they fit the entire length of the container. Well, auto fill doesn't necessarily need to fit the entire length of the container, they still keep repeating as much as you need to. But it's just whether it's going to stretch or not. media queries can be used along with template areas to make responsive layouts. Let's look at the page right now. See when I change the size, it will change how things are laid out on the screen with the header, the advert the content. So you can see how that works here. Here is the default, the default one is right here with and the default would be in the smallest size. However, we also have this media query, when the min width is 300 pixels. So when it's over 300 pixels, we're going to change the template. So you'll see here, there's just four areas header, ever content footer. here, each row has the effort on the side, and then either has the header, the content or footer, you can see that when you change the size of the window size, let's do one more to solve this challenge. When the min width is 400 pixels, we want the header to be along the all the top. So I'm gonna put header, I'm going to change the word advert to header. And we want the footer to be along the full bottom at min width 400 pixels. So I'm going to put footer here. And now if I refresh, we'll see that there's three different sizes we can do. So here, you can see the header on the top and bottom and the ever in the middle. Now the average stretches all the way from the top to bottom. And then the third size would be everything right on top of each other. You can have grids within grids, this item three right here corresponds to the paragraph one and two on the page. So we're going to change item three into a grid. So I'll do display grid. Now I'll set the grid template columns to set what the columns are going to be. And we'll use auto and then one fr. So let's see what happens. If I refresh. you'll see that this now takes up the whole space here. And there's a grid within the grid. Flexbox is used to position CSS elements in a flexible way. So we're going to be talking about flexbox in this section. To use flex on an element, we're going to have to set the display to flex. That's what I'll do here. Display flex. So now we've set this box container to display flex. And you can see it now sets the boxes right next to each other on the page. Throughout this section, we will be using flex to style this tweet. So to get ready, we're going to have to add display flex to a lot of the elements. So let's add it to the header display flex. when you're using flexbox, you have to use display flex on a lot of different things. So I'm just going to copy this. And we have on the header. we have it on the profile name, we have it on the Follow button, we have on this h3 h4, we have it on the footer, and we have on the stats. So now we have flex box everywhere we want to have it. And you can see it's already made some changes to what our page looks like. After we add display flex to an element, it becomes a flex container. this makes it possible to align any children of the element into rows or columns using the flex direction property. The default to flex direction is row, but you can also set it to column or row reverse or column reverse. So for this challenge, we are going to set this box container element to have a flex direction. So we'll put flex direction, and I'll set it to row, reverse. Now let's update the page and see what happens. And you can see everything has been reversed. Now we'll apply the flex direction property to create rows in our tweet. So the both the header and the footer have child elements that can be arranged as rows. So that's what we're going to do. I'm going to use flex direction here in the header direction. and then set this to row. Now, I'll just copy this. And then I'm going to paste it down at the footer. So now they both have flex direction row. If I refresh, you'll see that nothing has changed. That's because row is the default setting for flex direction. But we'll be making more changes in future challenges. we saw how to use flex direction to create rows. Now we'll do it to create columns. It's pretty straightforward. We'll just set flex direction to column. And now we should see a change when we refresh. See row is the default. So when we set flex direction to column, it updates two columns. You can see in this tweet that the name Quincy Larson and his Twitter handle appear right next to each other. These would look good stacked on top of each other. This is the perfect time to use flex direction column. So let's go down to the profile name section here because the name and the Twitter handle are all wrapped in the profile name class. So let's add flex direction and then set it to column. Now let's refresh and see what that looks like. Okay, much better. You can align elements using the justify content property. This diagram represents a flex container. And this is a row. Remember, they're either going to be in rows or columns. And this represents a row with two items, you can see the first item here, and the second item here. Now there are several options for how to space the flex items along the line that is the main axis, you can see the main axis goes straight through like this. If there's a column, the main axis would go up and down instead of left and right. But one of the most commonly used ways to space the flex items is justify content center, which aligns all the flex items to the center inside the flex container. Also, there's a flex which will align the items to the start of the flex container over on the left side here. For a row, this pushes the items to the left of the container, but a column for a column is going to push the items to the top, and then flex end is over on the right side, it pushes the things to the right space between will align items to the center of the main axis. And there will be extra space placed between the items. Now the first and last items are pushed to the very edge of the flex container space around is similar to space between but the first and last items are not locked to the edges of the container. And the space is distributed around all the items. So let's see this in practice. For this challenge, we're just going to try one of these. So I'm going to put the property justify content here. And then I'm going to set it to center. So let's see what happens on our page. See, now everything's centered, and how it's justified. Now I would recommend trying some of the other options on your own. Now we're going to use the justify content property in the tweet embed. So I'll show you how to do that challenge right now. In this profile class here for this style, we're going to put justify content here. And we can set this to any of the options from the last challenge, I'm going to use flex in, but you can use something else and still pass the challenge. Now as I refresh the page, look at this name here. it's just going to move down very slightly. So you're going to look closely to see the difference. So if I refresh here, it goes to the bottom of this row here, the align items property is similar to the justify content property, the justify content property aligns along this main axis right here. But the the align items property aligned along the cross axis. And these axes are opposite if you're using a column instead of a row, where the cross axis would be back and forth left and right for a column, and the main axis would be up and down for a column. But this diagram shows a row and the different values for align items are pretty much the same as they are for justify content. you have the flex star flex in center stretch and baseline. So the stretch and baseline are the different ones. Stretch will stretch the items to fill the flex container and baseline will align the items to their baselines. So let's see an example of this in our code here, we are going to add something to our box container here. So I'm going to put a line items, and then I'll set it to center. And we should be able to see what that does here. So let me refresh the page. You see these have been aligned to the center of our page here. Now we'll use the align items property in the tweet embed. So to solve this challenge, we're just going to apply it to two different sections here. In this follow button class, we'll put align items, and then we'll set to center. And I'm just going to copy this line, because we're going to use the same line below, right in the h3 and h4. And now if I refresh the page, you'll see that things are aligned in the center. Now, it doesn't show up too much because you can see this is just moved down slightly, the movement was very slight, but it is aligned now. By default, a flex container will fit all flex items together, you can see here that all these colored boxes are in one row here. But if you use the flex wrap property, it tells CSS to wrap items. So it just means the extra items move to a new row or column. So I'm going to show you how to solve this challenge here by adding flex wrap, and I'm going to set this to ramp. another setting you can use is wrapped reverse, you can see now it wraps to the next line, the flex shrink property applies to flex items instead of a flex container, it allows an item to shrink if the flex container is too small. So I'm going to apply the flex shrink property to both of these items here box one and box two, like this, this will solve this the challenge here. it's going to set you always have to set a number. So I'm going to set this one to one, and then I'll set the next one to two. So these numbers shrink in relation to each other. So if the second one is two, that means that this box two will be two times as small as box one that has a shrink value of one. So let's refresh and see what happens. You can see that the red box is two times as small as the blue box. the flex grow property is basically the opposite of the flex shrink property. The flex shrink property controls the size of the items when the container shrinks, but the flex grow property controls the size of the items when the parent can when the parent container expands. Right now, the website doesn't know how to render this HTML here and the CSS because we need to add a flex grow property. So let's do this the box one and box two. So we'll do flex grow. And then I'll put a one just like flex shrink, you're going to put a number. And now instead of this being two times smaller, I'm going to put two again for box two, instead of it being two times smaller, it's going to be two times bigger. So I'm gonna set this to two. And now this should know how to render if I refresh, and you can see box two is two times larger because we had flex grow. the flex basis property specifies the initial size of the item before CSS makes adjustments with flex shrink or flex grow. So we're going to see how that works here, we're going to set a specific size with pixels, M's or percentages, or auto. So let's add that to box one and box two, I'm going to put flex basis. And you can see you can't even see box one or box two until we add this. So the first one is going to be 10am. then I'll do flex basis. And this one will do 20 am's. And then if I refresh, we should see it on here. Okay, so now it works. The flex property is a shortcut to set the flex grow, flex shrink and flex basis properties all at once. Let me show you an example with the default property settings. So the default property settings of flex are 01. Auto. So the first number is the flex row number. The second number is the flex shrink number. And then we have the flex basis here. So for this challenge, we're going to go off of the default. And I am going to set the first flex row to two, and then I'll set the fresh flex shrink to two, and I'll set the flex basis to 150 pixels. Now do something similar for box two, I'm going to also set the flex property. So it's going to be one one, and then 150 pixels. So let me show that in the browser and see what that's like. Now we can change the size. And you can see when it's small, the red box is bigger. But when the browser gets bigger, the blue box is bigger. So because of how we set the properties at the at the 300 pixels lines, it's going to change which one's getting bigger and which one's getting smaller. The order property can be used to rearrange items. By default, they just appear in the order that they're there. So the blue box box one appears first and then the red box box to appear second, but we can change that with the order property. So for order, I'm going to put this first box to have the order of two. And then I'm going to set the second box to have an order of one. So we should see the red and blue flip places when I press refresh. that's what we see the align self property will align each item individually. We already talked about the align items property, which you set on the parent container. When you set an align items on the parent container, every item within that container is aligned in the same way. But if we use align self, we use it on the individual item, and we can set each one differently, it will override any value set by the align items property. So for this challenge, let's set some align items or align self for these items. So I'll do align self. And then you can use any value that you can also use in the align items property. In this case, I'm going to put center for this one. And then down here, align self, I'll put flex. And another option will be flex start. So let's refresh. And then we can see here that this blue box is centered. And then this red box is the end or goes to the bottom of the row here. Well, thanks for watching the CSS course. Don't forget to subscribe. And remember, use your code for good.

Hello, my name is Beau Carnes and I'm with FreeCodeCamp.org. This is a complete CSS course or Cascading Style Sheets. CSS is something you use to style websites or style HTML.

So before you watch this course, you should have some familiarity with HTML. You can learn HTML through the free HTML curriculum at FreeCodeCamp.org. or you can check out the video course that I link to in the description.

This whole CSS course follows along with the CSS curriculum at freecocap.org. So when you hear me talk about challenges or completing challenges, I'm talking about the challenges as part of that curriculum. However, it's a standalone video, so you don't have to go through the curriculum to get value out of this course. But if you want to, you can go through that curriculum as well.

I have the link to the freecodecamp.org CSS curriculum in the description. After you finish this course, you may want to try out some CSS projects. So I have a link to a playlist with a bunch of CSS projects you can do right in the description. And then after you master CSS and HTML, it may be good to try out JavaScript.

So I have a link to a JavaScript course also in the description. So let's get started. In this challenge, we're going to talk about inline styles. Inline styles are where you style something right on the element that you want to affect.

So if I put my mouse on this p tag here, I can add a style to the p tag by just using style. then we're going to put what the style is going to be and we're going to put color blue. So that would just make the color of that text blue.

But for this challenge, we're not going to style the p tag, we're going to sell the h2. So I'm going to undo that. And now I'm going to add the style to this h2 tag. And I'm going to make this style where the color going to be read just like that.

And let's open up the browser and see what that looks like. Okay, you can see that the text the title here is red. In the last challenge, we talked about inline styles. That's what this is here. Now we're going to talk about a different way to add styles using a style block.

And you can see we use color red, there are actually hundreds of CSS properties like color, we're going to eventually get to those but not quite yet. I'm going to show you the style block. So to make a style block, just at the beginning, I can add the tag style. And then we just need a closing style block. Now I can add all my styles between these two style tags.

So let me give you an example. If I wanted to style all the paragraph tags, I can put a key and then I'm going to put a curly brace. And inside these two curly braces, I'm going to put color red. Now this is going to style all the paragraphs. Every time you see a P tag, like here, here, and all the p tags are going to now be read.

If we look in the browser, we can see what that's going to look like. So you can see, look, this paragraph is read, this paragraph is read, all the p tags have now changed the text to read. So for this challenge, we're going to take out the inline style here.

And I'm going to add some style to this block up here. instead of styling p tags, we're going to style the h2 tags, and I'm going to make them all blue. So I'm going to put color blue. Now let me open up the browser.

And we'll see what that looks like. If I refresh, and you can see the h2 is now blue. In the last challenge, we learned about styling tags.

like this, all h2 tags are blue. In this challenge, we're talking about styling classes, classes are reusable styles that can be added to HTML elements. So to show that you're styling a class, you would put a dot in front of it.

So I'm going to change this eight h2 to dot blue text. And if you add this dot blue text, this is only going to style elements that have a class of blue text. So for instance, for this paragraph, I'm going to add a class. And I'm going to put in blue text. Now you can see I put a period up here, but you don't put a period down here.

The period just means it's a class when you're looking at your CSS your styles. So if I open this in my browser, and refresh it, we can see that this is now blue, right here, we're going to change this up. Instead of making it a blue text, it's now going to say red text, and this color is going to become red. I'm not going to need this anymore. Because instead of putting the class on the paragraph, I'm going to put the class on this h2 tag, it's going to be class red.

text. And then if I show that in the browser and refresh, you can see the title is red. What's great about classes is that they allow you to use the same CSS styles on multiple HTML elements.

So for instance, yeah, this is class red text, I can add red text, a class red text to any element. to make it red. And that's what we're going to do in this challenge.

So on the first P element, right here, right up here, I'm going to add class equals red text. And when I open up the little browser here, you'll see that the title is red. And the first paragraph is read just by adding the class to both elements.

There are hundreds of different CSS properties. We've only talked about color so far. But another one is font size.

That's pretty self explanatory, it's going to change the font size of an element. So for instance, I can put font size 30 pixels. And now everything that has the red text class will also be font size 30. So if I look in here, you can see that this paragraph is a lot bigger now.

we're going to change the font size of paragraphs. So I'll just remove what I had here. And I'm going to add another style. So right down here, it's going to be p, and the font size is going to be 16 pixels. So I'm gonna put 16 px.

And now, if I show the browser here, we'll see. that all the paragraphs are 16 pixels that we've just increased everything to 16 pixels for the paragraphs, you can set which font in element should use by using the font family property. Now you can use a type or style of font like serif sans serif or monospace, or you can put in the exact font.

So in this challenge, we're going to make all the P elements, monospace. So right here, I'm going to put font family, and then monospace. And if we just show this in the browser and refresh, you can see now we have these this monospace font here, just like that you can import fonts from different websites.

free library of web fonts that you can use is Google fonts, they have a lot of great fonts. And that's what we're going to do in this challenge. We're going to see how to import Google fonts.

So if I just paste in some code up here, this code comes directly from the Google fonts website. And you can see it's the font family lobster. So I'm just about to show you how to use that right in our code here. So what I'm going to do is for the age element, I'm going to add h2 here. And I'm going to add a font family of lobster.

Now that's all I really have to do for this challenge. If I wanted to, I could add a backup font that would be used just in case the the Google font didn't load like this, I do a comma, and then I can put a generic font. that's going to be used if the specific font doesn't load but we're not going to do that for this I'm just going to open the browser and see if it works And you can see we have the lobster font right here.

There are some default fonts available in all browsers, like monospace, serif and sans serif. You can see we're using the monospace font right here. So when one font isn't available, you can tell the browser to degrade or default to another font, like one of these default fonts, like the monospace font.

For example, let's say we had the font family in the font family, we had held that Helvetica. So if I add Helvetica right here, and I can actually just make a list of fonts right here. So in font family, when you have a list here, first, it tries the first font, but if that one's not available, it will go to the next font.

So when you're making a list of font family fonts, you always want the last one to be a generic font. So you know that if the browser can't get the first font or the second font, I can always get the default font at the end here. So for this example, for this challenge, we're going to do that for the h2 tag. So in this h2 tag, we have lobster, let me delete Helvetica here. And I'm going to make the default font monospace.

Now, right now, if I open up the browser, you're not going to see anything different, you're going to see lobster here. But I comment out the link to the Google fonts. And now I'm going to refresh this.

And you can see it's defaulted to the monospace just like that. See, so it couldn't find lobster. So it defaulted to the monospace font.

CSS has a property called width that controls an element width. this can apply to almost any type of element like an image or a div or a paragraph. And we're going to create a style that can make a larger image. So I'm going to create this called larger image.

Now that's only going to apply to an element with the class larger image, and I'll put width to be 500 pixels. So if we have anything with the class larger image will make it larger. So I'm going to actually add that to this image here, I'm going to put class equals larger image. So if we look in the browser here, we should see that the image is very big right now. For this challenge, we're going to make a smaller image.

So I'm just going to actually just change this to smaller. And instead of 500 pixels, we're gonna make this 100 pixels, and I have to apply the smaller image class down here. So if I open the little browser, and refresh, now it's just a tiny little cat, a cute little cat right there on our page. CSS borders have properties like style, color and width. Let me show you an example, I'm going to actually make a change to the h2 style here, I'm going to paste in some code, you'll see border color red border width five pixels border style solid.

So when I refresh the page here, you'll see this red border around the h2 tag, I'm going to delete this for right now. Because for this challenge, we're actually going to make a thick green border. So I'll just put it right up.

at the top for now here. And I am going to make a new class called thick green border. And I'm just going to actually paste in that same code from before.

But the border color is now going to be green, and the border width can be 10 pixels, and the border style. will still be solid here. So now I'm going to have to apply it to the image. So right now, there's the class smaller image, but you can have two classes here, I just put a space.

And then I'm going to put thick mean order. So as long as you just have a space in between classes, you can have two classes. So if I refresh here, you'll see the thick green border right around there. You can see so far we have very sharp corners around this image, there's a border radius property that we can use to make that a little route more rounded, I'm going to add a new thing called border radius.

and I'm going to set the value to 10 pixels. So if I refresh now, you can see we have rounded corners here. In addition to pixels, you can also specify the border radius using a percentage. So instead of border radius 10 pixels, I'm going to change this to 50%. And if I refresh my page here, you can see it makes a circle, you can set an elements background color with a property called background color.

So here's an example. Let's set the background color of the h2 element background color. And I'm going to change this to blue. So if I open up my browser, we'll see that the background is blue.

I'm going to make a new class. And the new class is going to be called silver background, silver background. And you guessed it, it's going to have a silver background.

So I'm going to put background color, silver. Now remember, I also have to apply it somewhere I have to make something use that class. So for this div, I'm gonna put class equals silver background. Now if I refresh here, you can see we have a silver background here, we don't need this background color blue.

So I'll take that off here and refresh it one more time. And that's how it's supposed to look. We've talked about styling specific elements like this. And then we've also talked about styling classes, you can also style based on ID.

An ID is similar to a class except each element is only going to have one ID classes, you can put on a lot of different elements. So let me show you how to apply an ID to an element. If I just go down to this form here, and I'm just going to put ID equals cat photo form.

And just like that, it's not going to change the appearance at all, because we haven't styled it yet. but now we can use the ID to add CSS styles, or we can reference it in JavaScript. In the last section, we learned about IDs.

Now we're going to learn about styling IDs. I'll use this ACE two as an example and add an ID of heading your styling IDs. It's similar to when you're styling classes, but we are going to use a hash mark. instead of a period. So I'm going to put heading here.

Let me format this a little better. So you can see normally for the class that starts with a period for an ID, it's going to start with a hash mark. So I am going to put color green. Now, I want to show you something.

So you can see that this h2 has a class of red text and a heading an ID of heading So we have the red text and the heading. So is it going to be red? Or is it going to be green?

Well, let's open the browser and find out here. You can see it is green, because CSS puts a higher priority to IDs than classes. And as a reminder, you should only have one ID per element, we already have the ID down here on the form ID of cat photo form.

And so now I'm going to change this instead of heading is going to say cat photo form. And then for color, we're going to instead of color green, it's going to be background color green. And now I'm just going to refresh that. And if I go down here to the form, you can see it's green in the background. You may have already noticed this, but all HTML elements are essentially little rectangles.

There are three properties that control the space around each element, which is padding, margin and border. We already talked about border, which you can see on here, the padding is the space around the text, you can see that the padding around this red text is a little more than the padding around the blue text, the margin is the space outside of the border that surrounds the padding. So in this task, we are going to change the padding, we're going to change the padding on the blue box to match that of the red box. So if we look down here, the padding on the blue box is 10, the padding on the the red box is 20. So we're just going to change this to 20. And then if I refresh my page here, you can see that these boxes are the same size, and elements margin controls the amount of space between an element's border and the surrounding elements, you can see that there's greater margin on this red box than the blue box. So in this task, we're going to make sure that they're both the same.

So I'm going to change the margin of the blue box to match that of the red box. So you can see the margin is 20 on the red box. So I'm just going to set the blue box to also be 20. And then if I refresh my page, you can see that they're the same.

The reason why this red box is so big right here is because it has negative margin. we're going to make sure the blue box is just as big as the red box by giving the blue box negative margin as well. So I'm going to set this to negative 15. So now the red box and the blue box are both at negative 15. And if I refresh the page, now they're both the same.

As you can see in this red box, each side can have different amounts of padding. that's this code here, padding top padding, right padding, bottom padding left, we are going to use different paddings for the different sides of the blue box. So I'm just going to copy this code right here, and then paste it down here. And now what we have to do for the challenge is set the top and left to 40. So let's do 40 here and top and left are already 40. And then the bottom and right to 20. that's just the same as already is. So let me refresh.

And we're done. We already learned that you can set each side of padding separately. You can also do the same thing for margin, you can see for this red box, it has different margin on each side, we have margin top right bottom left, we're going to do the same thing for the blue box.

and I'm just going to copy this margin from the red box and paste in for the blue box. And now I'm just going to refresh my page. Because we're done. Previously, we learned about padding top padding, right padding, bottom and padding left, there is an easier way to do the same thing. And it's called clockwise notation.

if I if we look at this browser here, and see the red box, there's actually a different padding on each side. So if you look at this padding here, see all these four numbers, well, the first number is the top, then the right, then the bottom, then the left. So we're going to do the same thing in the blue box, I'm going to start off by copying this padding from the red box, I'll paste it into the blue box.

And this time, the padding top and left have to be 40. So this one has to be 40. And then the last one, that's the left. And the bottom and right have to be 20. Those are the two middle numbers. So if I change those and refresh, we'll see that they're both kind of the same. They're a little different because this one has the 21st and 40. And then this one has the 40th and 20. And that's it.

We already learned about clockwise notation for padding. Now we're going to learn about it for margin. It's basically the same, you can see this red box has a different margin on each side.

So here's the code here. It's clockwise notation, there's four numbers. The first is the top, right, bottom, and then left.

So you can do all in one line instead of having four different lines. We're going to do the same thing for the blue box. So I'm just going to start by copying this line. And to solve this challenge, we're just going to flip these two numbers around because the 40 has to be the SP top, and the 20 is going to be on the right.

So if I refresh my page here, you can see that it has changed, we now know how to style classes. So this is an example of silent classes with a dot before the class here. And then you can put the styles for the class, and then use style IDs with the hash mark instead of a dot here will be a hash mark. Now we're going to learn how to use attribute selectors to style elements. Now this is a selector that matches and styles elements with a specific attribute value.

I'm going to show you an example how to style something with a type radio. So we can style everything with type radio. So let me add that right up top here. So what you put brackets around and we're gonna do that.

So we're going to put the attribute which is type, and then we're going to put the value which is radio. So type equals radio. And we're gonna that's how we're going to select what we're styling. So here, I'm just going to set the margin to 20 pixels.

So if we open up the browser here, now let me scroll down. And we can see that there is a margin around these radio buttons of 20 pixels. So now we're going to use the type attribute selector to try to give the checkboxes a top margin of 10 pixels and a bottom margin of 15 pixels. So all I'm going to do is so let's go and look at the checkbox in the code says type checkbox.

So we're gonna use the same thing up here instead of type radio is going to be type checkbox. And then for the margin, the top is going to be 10 and the bottom is gonna be 15. So what I'm going to do is do top up if we do the the clock one. So the first number is top, the second number is right, I'm just gonna put zero pixels.

And then the third number is bottom, I'm going to put 15 pixels. And then the fourth number is the left, which is zero pixels. So if I just refresh my page here, and the check boxes are styled. So far, we've been setting margins and paddings using pixels, px, see this example, negative 25p extra pixels, these are absolute types of length. So absolute types of length include like I n for n for mm millimeters.

These are all tied to physical units of length. but there's also relative units of length, such as em and REM. And these are relative to another length value.

For example, em is based on the size of an element's font. And if you use it to set the font size property itself, it's relative to the parents font size. Now we'll talk about this a little more in the responsive web design principles section. But for now, we're going to try a setting some padding using an EM or M value. So that's what I'm going to show you.

Now, we're going to set the class of the red box here, we're going to set the padding to an EM value. So I'm gonna put padding, and it's just like how you would put pixels, but instead of doing px, you just put em. So this is going to be relative, depending on other things on the page. So if I show the browser here, now you'll see this extra padding here. around the red box.

Every HTML page has a body element. Now usually it'll be a more explicit, you'll see the the body tag right on the page. But even if you don't see the body tag on the page, like in these examples, it's still there, it's just hidden.

So we can prove this by actually just styling the body element. So that's what we're gonna do here, I'm going to add a body here, or a body style. we're just going to set the background color to black.

And now if I refresh my page, you can see it turns black, this the whole page turns black here. So we've seen the all pages have a body element. Now CSS that stands for cascading style sheets.

cascading means anything that you apply to an upper element goes down to any lower elements or any elements that are inside other elements. So anything that you apply to the body element will cascade or get it be inherited to all the other elements on the page. So let's see how that first I'm going to create an h1 element.

And inside the h1 element, I'm going to say hello, world. And now I'm going to style the body element. So we already have black on color black, I'm also going to put color green. And I'm for the font family.

I'll put it as mono space. Now let's open up the browser and see what that looks like. Okay, look, we have green mono space font, I didn't apply it to the h1 tag, I applied it to the body. And then everything else got that same style. sometimes your HTML elements will receive multiple styles that conflict with one another.

If you see on here, this h1 here, this body will apply is will cascade down to the h1 to make the color green. But what if there is something else to make this a different color? What would happen? So what I'm going to do is make a new class, it's going to be called pink text. And I am going to make the color pink.

And now I will apply the class to this h1 tag. So pink text. So what do you think is going to happen?

It has the color green from here, but also has the color pink from here. Well, let's open up the browser and find out. And it's pink.

The way it works is it uses whichever one is more specific, since this has the class pink tax and it doesn't start with body or anything, the pink text is more specific than the body because body is further up. So whatever one is closest to the actual text is which style it will use. So we saw that this color pink overrides the color green because pink text is more specific than body. What can we do to overwrite this pink text here? What if I made another class like this, I'm going to just copy that, and then paste it here.

But instead of being pink text, it's going to be blue, and the color is going to be blue. Now, I'm going to add another class here, remember to add two classes, you just put a space in between classes, I'm going to put blue text here. So now what's going to happen is going to be pink or blue, I'm just going to give you one tip here that the order of the classes here doesn't matter.

It doesn't matter whether pink text or blue text comes first. So let's see what color the text is going to be. And you can see it's gonna be blue.

So the order that does matter is the order that the styles declared in. So if I just take this blue text here, I'm going to cut this. And now I'm going to just paste it right up here.

And now if I refresh the page, you'll see that it's pink, because it just depends on what order this comes in here. So we saw that you could override styles by making things more specific pink text, the class overrides just styling the body. And then we saw you could override styles by putting things lower in the styling section.

So this blue text overrides pink text because it's lower. Now, there's another way to override styles, and that's with IDs. So I'm going to add an ID to this h1 here, it's going to be ID equals, and we're going to have an ID name called orange.

text. And now I'm going to put the ID style right above the pink text. Because when you're styling IDs, it doesn't matter the order doesn't matter if it's above or below the other styles, because IDs are even more specific.

Let me show you what I mean. So remember, instead of starting with a dot, we're gonna start with a hash sign or pound sign. And I'm going to put orange text and here we're going to put color orange. And now I'm going to show the browser here.

And we'll refresh. And you can see it's orange text. Because IDs are specific, you are only supposed to have one ID per page.

So orange text should only be on this element. Whereas classes you will put on multiple elements IDs, you only apply to one element. So IDs are more specific.

than classes. And here's another way to override class declarations with inline styles. Inline styles are going to be more specific than all these other ways of styling text, I'm going to go right into this element here and put style equals and then I'm just going to change the color to white, you can write this just as you would write your CSS above but right in line.

Now I'm going to open up the browser here. And then you should be able to see the text is white. So that's even more specific. You've learned many ways to override CSS and get even more and more specific, starting at the body, then pink text and blue text and orange text. We've learned many ways.

But now I'm about to tell you about the most powerful method of all how you can show something is super important. Let me show you that now. If you remember, this pink text has been overridden many times.

But now we're going to show that this is very important. I'm going to use an exclamation point and then the word important. So using this exclamation point important after a style means it's the most important style and you should definitely apply this style.

So let's see what that looks like. And now it is pink. Hello world is now pink. So far, we've been coloring things. using the actual color names, like for instance, black, or orange, or green or blue.

But there's a way to get even more specific using hex codes. hex codes are six hexadecimal digits that represent colors. So you can represent any color on the spectrum using a hex code.

So I'm going to change this instead of black, I'm going to put the hexadecimal for black, which is just 000000. So the first two zeros are the red, second two zeros are the green and the third two zeros are blue. But since it's black, it's a zero for every single one. So let's see what that looks like in the browser.

And it's still black hex codes can be used to create over 16 million different colors. And that's what we're going to do here, we're going to put in the right hex codes for these colors. So the hex for red is going to be they're always going to start with the hash marker pound key, and I'm just going to put F F 0000. And then for a green, we're gonna do the hash mark, and it's going to be 00 F F 00. And then for Dodger blue text. Now I don't have these memorized, I'm actually just reading them off. Most you're not it's gonna be hard to memorize 16 million different combinations for colors.

So usually you're going to look these up somewhere. There's a lot of websites and a lot of other resources to find the appropriate hex codes for different colors. So for the orange text, it's going to be FFA 500. And let's open up the browser and see what this looks like. If I refresh this, and now we see all the different colors, some hex codes can be shortened. Remember, they're usually six.

digits long. But sometimes the hex codes have three sets of two of the same digits. For instance, red text, the hex code is normally ff 0000. You can see that the first two digits are F, the second two digits are zero, and the third two digits are zero.

So whenever there's three sets of two, we can shorten this by just doing one number one digit for each. So f 00. So this f will be expanded to ff, this will be expanded to 00. And this will be expanded to 00. For future for future text, we can do f zero f, for the cyan text, we can do zero ff. And then then for the green text, we can do zero f zero. So let's open the browser and see if we got those colors.

And it worked. besides using hex values to represent colors, you can also represent colors using RGB values. So that will be like this instead of this hex value, you would put RGB and then there's gonna be three numbers.

Each number is going to be between zero and 255. I'll just use 255 three times here. And if we show this in the browser 255 255 255 is white. But for this challenge, we're going to change it change it to black.

So black is just going to be 000. So I put 000 for black. And if I refresh, we'll see that it's changed to black, you can make just as many colors using RGB as you can make with hex. So I'm going to make all these colors with RGB instead of hex.

So for the red text, it's just going to be RGB. And then the first Number is always red. And then we have the green.

then we have the blue. So for red, it's all red, no green, no blue, you can kind of mix to decide how much you want to be each color color with RGB. And you can really do the same thing with hex as well. So for orchid text, let's do RGB. And this is going to be 218 112. And then 214. I don't actually have all these memorized.

I'm just reading them off here. to make this even easier, I'm going to do some copying and pasting. So we're going to have the sienna text and the blue text.

Sienna is going to be 160. And then 1182. And then we're going to do 45. And then for blue, this is going to be an easy one because we just have zero zero to 55. And now let's look at the browser to see what that's going to look like. There are our colors. Look at the sweet penguin created only with CSS and HTML.

We're not going to go into exactly how to create this, you can look at the code to find out yourself. But this is all about showing CSS variables. So here right here. CSS variables.

So the penguin skin black, belly gray, be yellow, you can see they're used here, like here background, we have the var. And then you have the parentheses two dashes, penguin dash skin, and gray. So this would be the backup color right here. But this would be we would try to use this variable. If we can't use this variable, we go to the backup.

But right now I'm going to show you how just changing these variable colors will change everything every time those variables are used. So I'm going to change this black to gray, I'm going to change this gray to white, and I'm going to change the yellow to orange. And then if I just refresh here, you can see our penguin is a completely different color now. is it was super easy, we only had to change in one spot, and it changed it everywhere in the code.

In last challenge, we were introduced to variables. Now we'll go over them some more and learn about them in more detail. So to create a variable, we're going to do it right here. So we're going to create a penguin skin variable. So they always start with two dashes.

And then we just do we put the name here, which is going to be penguin. skin. Now we're going to be able to use this variable anywhere throughout the code, this is just going to be gray.

So now anywhere we use this penguins skin variable, it's going to be replaced with gray in the code. So in the last challenge, we create this variable penguin skin gray. Now we're going to use it. So to use a variable, you just put var and in parentheses, you put the variable name. let me show you here for this background, I'm going to put var and then parentheses, and then I'm just going to put dash dash penguin.

And then that's the variable, we're going to use the same variable in multiple places. So I'm just going to copy this. And we'll paste it here.

And then I'll paste it here. And then if I refresh, it's great. Oh, there's a wing. let's see, we have to replace one more spot. Okay, let's replace there and refresh.

And now everything that's supposed to be gray is now gray. So now we had to replace all these spots this time. But from now on, whenever we want to change the color of the penguin skin, we only have to change it in one spot.

That's the great thing about variables. Variables can have fallback. values attached.

These are used if for some reason, the variable won't work. It could be because someone's using an older browser that doesn't use CSS variables. Or maybe just a variable name is spelled wrong. So that's what's happening here.

See, it says, ping, gween, that's spelled wrong. But to show that that's just to show these fallback values. So what I'm going to do is just add the word black here.

And then here, I can add the word black. And now let's just refresh this. And you can see it's using the fallback value because it cannot find the penguin skin because it's spelled wrong here.

variables are available inside the element in which you create it. So we have these variables here. The reason why they work in the other parts of the penguin is because everything is within the penguin element, like the right cheek, left cheek, belly, these are all within the penguin element. Sometimes in order to make variables available anywhere in a document, you can declare the variables inside a root element. you can think of the root element as a container for your entire HTML document in the same way that an HTML element is a container for the body element.

So anytime you create a variable within the root element, they're going to be available throughout the whole page. So that's what we're going to do here. So I'm going to make a variable named penguin belly. And then this is going to be pink. So we can already see that it's used in these spots here to pin when belly is used here, pin when belly is used here.

So it's using these two different places. And but just making it here within the root, we're gonna be able to use it everywhere else. So let me refresh the page.

And you can see that that it's pink in both places. So variables declared within root apply to the whole page. But you can overwrite those within a specific element. So down here, I'm going to overwrite penguin belly.

So penguin belly, and this is now going to be white. So if I refresh the page, it's white now, media queries can be used to change variables. media queries make different CSS apply depending on the size of the screen.

So here's a media query for max width 300. pixels. So we can make variables that only apply when the max width is 350 pixels. So let's try changing the size. So now the penguin size will be 200 pixels. And we're also going to try changing the skin.

So penguin skin with this media query will be black. So now when you change the size of the browser, let me refresh again, it will change the variables. Time to create our first CSS grid, you can turn any HTML element into a grid container by setting its display property to grid.

So we have this HTML element container. And then here is the CSS for we are going to set the display property property to grid. And this will give us the ability to use the other properties associated with CSS grid.

So I'm just going to put display grid, and we're done. So it doesn't do anything quite yet, because we haven't updated any of the other properties yet. But we'll do that in later challenges.

Now. we need to start defining the structure of the grid, we'll start with adding some columns using grid template columns. So I'm going to do that now and show you how to solve this challenge. I'm going to type in grid template columns.

And after grid template columns, we're going to put the width of each column. So the number the number of numbers we put here are the number of columns, we're going to have three columns. So we're going to have three numbers, and all of them are going to be 100 pixels wide. So I just have to put 100 pixels three times.

And now, if I refresh the page here, you'll see that we have three columns. So here we have grid template columns, which we already learned about which sets the number of columns. Now we want to set the exact number of rows. Right now the rows are just determined automatically.

But if we know exactly how many rows we want, we can use grid template rows. So to solve this challenge, we just have to add grid template rows. And then just like grid template columns, the number of numbers are the number of rows.

and each number is how tall each one will be. So I'm going to put 50 pixels, 50 pixels. So we'll have two rows are each 50 pixels high. So if I refresh that, it looks pretty similar, because that was very close to what the default was. But we just solved it, you can use CSS grid units to change the size of columns and rows, you can use pixels and Ms. But you can also use things like FR, which sets the column or row to a fraction of the available space.

See this how we have five different columns, and they're all different sizes. Well, we have this code here. So you can see the first column is auto, that's the one here.

And that sets the column to the size of the space. So it just is just big enough for that one to fit in there. And then the second column is 50. So this column with the two 50 pixels wide. With the three we have 10%. So this three is 10% of the available section from the whole container.

This is 3% of the whole container. And now we have the two fr on one fr, that's columns four and five. So the last two columns, the remaining space is divided into three sections, because two plus one is three, two.

the sections are allocated to the fourth column, and one to the fifth column, we're going to make a grid with three columns. Instead of all five of these, we're going to specify three of them. So the first one is going to be one fr.

And then we're going to have 100 pixels, and then two fr. So let's see what that looks like when I refresh the page here. So we can see we have three columns. the middle column is always staying at 100 pixels, no matter how wide, but the first and third column will change. Because of the FR units here, you can see here in these columns, there's no gap between the columns, they just split up right against each other.

Sometimes you want to gap between the columns. So you use grid column gap. I'm going to show you how to do that right now and show you how to solve this challenge.

So it's gonna be grid column gap. And then we set how many pixels we want in between each column. In this case, we're going to put 20 pixels.

So if I refresh here, we should see space in between each column. In the last challenge, we learned about grid column gap. you probably won't be surprised to learn that there's also a grid row gap.

So it works just the same. We'll put grid row gap, and it'll make a gap between the rows. In this case, we'll put five pixels by refresh here, you can see that there is a space in between the rows here, the grid gap property is a shorthand property for using the grid row gap and grid.

column gap properties all at once. If you just put one number, it will put the same gap on the rows and columns. If you use two numbers, the first number will be rows, the second number will be columns. So I'm going to just do the two numbers here.

So I'm going to do grid gap. And then the first number is going to be 10 pixels for the rows. And the second number is gonna be 20 pixels for the columns. If I refresh this here.

we can see that there's the 10 pixels in between. And then there's the 20 pixels for the columns here, the grid column property is used to set how many columns a grid item will take up. Now, here's a three by three grid.

And there's these hypothetical lines that you don't see, but they exist in between the grids. And they're numbered. one, you can see in this example, for a three by three grids, there's four lines 1234. So for the grid column property to set how many columns an item is going to take up, you're going to specify the beginning line and the ending line.

So if you wanted to take up two columns, the first two columns, you would specify line one, and then line three, because it would start at line one, and it would that line three, let me show you what that would look like. So for instance, if we were going to set this item five to set to take up the first two columns, it would be like this grid column, and then we would put one slash because it would start at the first line and end at the third line. For this challenge, though, we are going to make the grid take up the final two columns. So it's going to start at two and in that four. So if we refresh that, we should see that this fifth element starts at two, and then it ends at four, just like that.

we learned how to make grid items consume multiple columns, we can also do the same thing with rows, it's basically the same thing. So instead of grid column is going to be grid row. And then for this challenge, we have to make it take up the last two rows.

So the same as before, I'm going to put two slash four, because if you look on the diagram, the last two rows are these two rows. it's going to start the two line and end at the four line. So let's refresh the page here.

And you'll see that's taking up the last two rows of this section here. In CSS grid, each box is considered a cell. So each of these colored boxes on screen are considered different cells. If we use justify self, we can justify and align the content within the cells.

By default, the property is a value of stretch, which will make the content fill the whole width of the cell. But for this challenge, we're going to try a different, a different property. So I'll do justify self.

And instead of setting it to stretch, which is the default, I'm going to set it to center, we can also do start or end. But if we set the center, you'll see this has been centered within the cell just like that. In the last challenge, we used justify self, which aligns horizontally. Now we're going to align an item vertically using align self, it works pretty much the same way.

So I'm going to put align self, and then I'm going to set this to end. So now if we refresh, you'll see that this aligns vertically to the bottom of the cell. If you want all your items in your grid to share the same alignment, you can use justify items on the parent container, it uses all the same values that we saw before.

So we'll put justify items. And then I'll just set this to be center. If we refresh, we'll see everything has been centered, we saw that justify items aligns all items horizontally, align items aligns all items vertically, again, you put on the parent container.

So put align items. And I'll set this to end to set so all of them align at the end of each cell. So we see they all go to the bottom, which is the end. Here, we've created an area template, the cells have been grouped together using a custom name, you'll see when you look at the rows and columns, there's three columns and three rows, or nine cells total.

And that's how many words you'll see here. So each set of three words in quotation marks is a row. So that's the first row, second row, third row.

And you can see each word corresponds to a cell in this layout here. So you can see the first three are now designated headers. And then we have an advert and then two contents. And then the last three are the footer cells, you can use a period to designate an empty Selma grid.

And that's what we'll do for this challenge. So instead of the word advert here, I'm just going to put a period and that designates it as an empty cell, we saw how to define our template areas here in the last challenge. Now we'll learn how to place items in a specific spot in the grid area.

So if we want to set item five to be in a specific spot, we'll use the grid area property. So grid area then we just put one of our customs names that we defined below. For instance, if we set this to header, and I refresh here, you'll see the number five has popped out of its normal location and fills up the entire header, it fills up the entire header.

because there are three items in the header. And there's only only item five is set to header. So it fills up the whole header. For this challenge, however, we're going to put it in the footer. So I'll just change this name to footer.

And then if we refresh, again, you'll see that the item five takes up the entire footer, you can create grid areas without a template. you'll notice here that we no longer have our template code here. But I'm going to show you how to create a grid area.

So same with before we start with grid area. But instead of saying the template name, I'm going to put some numbers, I'll do one slash one slash two slash four. Now, these use the same type of numbers that we talked about before.

If you look at this chart here, it's almost like setting coordinates on a graph. The first two numbers are the start coordinate. And then the second one is the end coordinate. And then the third one is the end coordinate.

the last two numbers are the end coordinate. So the first two numbers would be the horizontal line to start with and the vertical line to start with. So for 11, it would start in this top corner here.

And then you'll see that the second two numbers are two four. So two four means it's going to end at the second horizontal line, here's two, and then here's four, it's going to end at the fourth vertical line. So 1124 would start at this point and end at this point.

So that would just take up the entire top row. So let's see what that looks like. I'll refresh and we'll see that the five takes up the entire top row. Now we'll make some slight changes to this to solve the challenge. So the numbers we're going to use are three, one, or four.

So if you look on here, three, one, would be right here for four would be right here. So now it should take up the bottom row. Let's refresh and you'll see five takes up the bottom row.

If you want to repeat the same size row or column many times you can use the repeat function. If you see right here, we have the same size row repeated three times one fr one fr one fr, we can use the repeat function to repeat that. three times. Here's another way you can use the repeat function.

Let me put it in here. So to use the repeat function, you start with the word repeat. And then in parentheses, we're going to pass in something first, the number of times you want to repeat.

So in this case, I'm going to pass in the number two, you could use 7550 100, however many times you want this to repeat. Now we could put one size to repeat the same size over and over. Or we can put in any number of sizes.

So I'm going to put one fr, and then 50 pixels. So it's going to repeat that two times. And then you can even add other sizes afterwards.

So I'm going to put 20 pixels, let me show you how this would be calculated. I'm going to copy this and just paste it in here. Now normally, you would never have grid template rows twice in a row.

I'm just using this as an example. So when this calculates out, it would look like this. I'll copy this because it's going to be on there two times.

And now you'll see one fr 50 pixels, one fr 50 pixels 20 pixels. So this with the repeat function would calculate out to this, let's back up a little bit, I'm going to undo some of the things I put in here to go back to what the code looked like initially. And now we're actually going to make a change to the grid template columns.

See how it says one fr three times, let's use the repeat function to do the same thing. So I'm going to do repeat, and I'm going to pass in three, and then one fr. So now, if I refresh, we should see no changes, it looks exactly the same, because this is equivalent to what we already had, you can also set the size of a row or column using the min max function.

the min max function takes two arguments. The first number is the smallest size that the row or column can be. And then the second number is the largest size a row or column can be. So let me show you how this works and show you how to solve this challenge.

I'm going to replace this second number in the repeat function with the min max function, which will pass in two arguments. First will be 90 pixels, that will be the minimum amount the row that this column can be. And the second number is going to be one fr, which would be the max amount that the column can be. So if I just refresh the page here, you can see how it changes depending on the size of the frame here. We saw already that in the repeat function, the first argument you pass in is the number of times you want this to repeat.

So this is going to repeat three times, you can also use autofill. So if you use autofill, it's going to automatically insert as many rows or columns of your desired size as possible, depending on the size of the container. So let's see what happens.

I'm going to refresh the page here. then we'll see that this changes depending on the size of the container. You can see the difference between container one and container to container two at the bottom has just repeating three, and then the top one has repeat auto fill. So you can see how they behave differently depending on the size.

We talked about auto fill this one right here. Now we're going to talk about auto fit. it's very similar.

I think the best way to show you the difference would be to actually show you what what effect it has on this browser here. So this first one is set to auto fill. For this challenge, we have to set the second one to auto fit. So I'm gonna put auto fit. And now let's just refresh the browser and we'll can see how they're very, very similar, but not quite, you can see they work very similar.

But you see the auto fit always make sure that they fit the entire length of the container. Well, auto fill doesn't necessarily need to fit the entire length of the container, they still keep repeating as much as you need to. But it's just whether it's going to stretch or not. media queries can be used along with template areas to make responsive layouts. Let's look at the page right now.

See when I change the size, it will change how things are laid out on the screen with the header, the advert the content. So you can see how that works here. Here is the default, the default one is right here with and the default would be in the smallest size.

However, we also have this media query, when the min width is 300 pixels. So when it's over 300 pixels, we're going to change the template. So you'll see here, there's just four areas header, ever content footer. here, each row has the effort on the side, and then either has the header, the content or footer, you can see that when you change the size of the window size, let's do one more to solve this challenge.

When the min width is 400 pixels, we want the header to be along the all the top. So I'm gonna put header, I'm going to change the word advert to header. And we want the footer to be along the full bottom at min width 400 pixels.

So I'm going to put footer here. And now if I refresh, we'll see that there's three different sizes we can do. So here, you can see the header on the top and bottom and the ever in the middle.

Now the average stretches all the way from the top to bottom. And then the third size would be everything right on top of each other. You can have grids within grids, this item three right here corresponds to the paragraph one and two on the page. So we're going to change item three into a grid.

So I'll do display grid. Now I'll set the grid template columns to set what the columns are going to be. And we'll use auto and then one fr.

So let's see what happens. If I refresh. you'll see that this now takes up the whole space here. And there's a grid within the grid.

Flexbox is used to position CSS elements in a flexible way. So we're going to be talking about flexbox in this section. To use flex on an element, we're going to have to set the display to flex.

That's what I'll do here. Display flex. So now we've set this box container to display flex.

And you can see it now sets the boxes right next to each other on the page. Throughout this section, we will be using flex to style this tweet. So to get ready, we're going to have to add display flex to a lot of the elements. So let's add it to the header display flex. when you're using flexbox, you have to use display flex on a lot of different things.

So I'm just going to copy this. And we have on the header. we have it on the profile name, we have it on the Follow button, we have on this h3 h4, we have it on the footer, and we have on the stats. So now we have flex box everywhere we want to have it. And you can see it's already made some changes to what our page looks like.

After we add display flex to an element, it becomes a flex container. this makes it possible to align any children of the element into rows or columns using the flex direction property. The default to flex direction is row, but you can also set it to column or row reverse or column reverse. So for this challenge, we are going to set this box container element to have a flex direction.

So we'll put flex direction, and I'll set it to row, reverse. Now let's update the page and see what happens. And you can see everything has been reversed. Now we'll apply the flex direction property to create rows in our tweet.

So the both the header and the footer have child elements that can be arranged as rows. So that's what we're going to do. I'm going to use flex direction here in the header direction. and then set this to row. Now, I'll just copy this.

And then I'm going to paste it down at the footer. So now they both have flex direction row. If I refresh, you'll see that nothing has changed. That's because row is the default setting for flex direction.

But we'll be making more changes in future challenges. we saw how to use flex direction to create rows. Now we'll do it to create columns. It's pretty straightforward. We'll just set flex direction to column.

And now we should see a change when we refresh. See row is the default. So when we set flex direction to column, it updates two columns. You can see in this tweet that the name Quincy Larson and his Twitter handle appear right next to each other.

These would look good stacked on top of each other. This is the perfect time to use flex direction column. So let's go down to the profile name section here because the name and the Twitter handle are all wrapped in the profile name class. So let's add flex direction and then set it to column. Now let's refresh and see what that looks like.

Okay, much better. You can align elements using the justify content property. This diagram represents a flex container. And this is a row. Remember, they're either going to be in rows or columns.

And this represents a row with two items, you can see the first item here, and the second item here. Now there are several options for how to space the flex items along the line that is the main axis, you can see the main axis goes straight through like this. If there's a column, the main axis would go up and down instead of left and right.

But one of the most commonly used ways to space the flex items is justify content center, which aligns all the flex items to the center inside the flex container. Also, there's a flex which will align the items to the start of the flex container over on the left side here. For a row, this pushes the items to the left of the container, but a column for a column is going to push the items to the top, and then flex end is over on the right side, it pushes the things to the right space between will align items to the center of the main axis.

And there will be extra space placed between the items. Now the first and last items are pushed to the very edge of the flex container space around is similar to space between but the first and last items are not locked to the edges of the container. And the space is distributed around all the items. So let's see this in practice.

For this challenge, we're just going to try one of these. So I'm going to put the property justify content here. And then I'm going to set it to center. So let's see what happens on our page.

See, now everything's centered, and how it's justified. Now I would recommend trying some of the other options on your own. Now we're going to use the justify content property in the tweet embed.

So I'll show you how to do that challenge right now. In this profile class here for this style, we're going to put justify content here. And we can set this to any of the options from the last challenge, I'm going to use flex in, but you can use something else and still pass the challenge. Now as I refresh the page, look at this name here.

it's just going to move down very slightly. So you're going to look closely to see the difference. So if I refresh here, it goes to the bottom of this row here, the align items property is similar to the justify content property, the justify content property aligns along this main axis right here.

But the the align items property aligned along the cross axis. And these axes are opposite if you're using a column instead of a row, where the cross axis would be back and forth left and right for a column, and the main axis would be up and down for a column. But this diagram shows a row and the different values for align items are pretty much the same as they are for justify content. you have the flex star flex in center stretch and baseline. So the stretch and baseline are the different ones.

Stretch will stretch the items to fill the flex container and baseline will align the items to their baselines. So let's see an example of this in our code here, we are going to add something to our box container here. So I'm going to put a line items, and then I'll set it to center.

And we should be able to see what that does here. So let me refresh the page. You see these have been aligned to the center of our page here. Now we'll use the align items property in the tweet embed. So to solve this challenge, we're just going to apply it to two different sections here.

In this follow button class, we'll put align items, and then we'll set to center. And I'm just going to copy this line, because we're going to use the same line below, right in the h3 and h4. And now if I refresh the page, you'll see that things are aligned in the center. Now, it doesn't show up too much because you can see this is just moved down slightly, the movement was very slight, but it is aligned now. By default, a flex container will fit all flex items together, you can see here that all these colored boxes are in one row here.

But if you use the flex wrap property, it tells CSS to wrap items. So it just means the extra items move to a new row or column. So I'm going to show you how to solve this challenge here by adding flex wrap, and I'm going to set this to ramp. another setting you can use is wrapped reverse, you can see now it wraps to the next line, the flex shrink property applies to flex items instead of a flex container, it allows an item to shrink if the flex container is too small.

So I'm going to apply the flex shrink property to both of these items here box one and box two, like this, this will solve this the challenge here. it's going to set you always have to set a number. So I'm going to set this one to one, and then I'll set the next one to two.

So these numbers shrink in relation to each other. So if the second one is two, that means that this box two will be two times as small as box one that has a shrink value of one. So let's refresh and see what happens. You can see that the red box is two times as small as the blue box.

the flex grow property is basically the opposite of the flex shrink property. The flex shrink property controls the size of the items when the container shrinks, but the flex grow property controls the size of the items when the parent can when the parent container expands. Right now, the website doesn't know how to render this HTML here and the CSS because we need to add a flex grow property.

So let's do this the box one and box two. So we'll do flex grow. And then I'll put a one just like flex shrink, you're going to put a number.

And now instead of this being two times smaller, I'm going to put two again for box two, instead of it being two times smaller, it's going to be two times bigger. So I'm gonna set this to two. And now this should know how to render if I refresh, and you can see box two is two times larger because we had flex grow.

the flex basis property specifies the initial size of the item before CSS makes adjustments with flex shrink or flex grow. So we're going to see how that works here, we're going to set a specific size with pixels, M's or percentages, or auto. So let's add that to box one and box two, I'm going to put flex basis.

And you can see you can't even see box one or box two until we add this. So the first one is going to be 10am. then I'll do flex basis. And this one will do 20 am's. And then if I refresh, we should see it on here.

Okay, so now it works. The flex property is a shortcut to set the flex grow, flex shrink and flex basis properties all at once. Let me show you an example with the default property settings. So the default property settings of flex are 01. Auto.

So the first number is the flex row number. The second number is the flex shrink number. And then we have the flex basis here.

So for this challenge, we're going to go off of the default. And I am going to set the first flex row to two, and then I'll set the fresh flex shrink to two, and I'll set the flex basis to 150 pixels. Now do something similar for box two, I'm going to also set the flex property.

So it's going to be one one, and then 150 pixels. So let me show that in the browser and see what that's like. Now we can change the size. And you can see when it's small, the red box is bigger. But when the browser gets bigger, the blue box is bigger.

So because of how we set the properties at the at the 300 pixels lines, it's going to change which one's getting bigger and which one's getting smaller. The order property can be used to rearrange items. By default, they just appear in the order that they're there.

So the blue box box one appears first and then the red box box to appear second, but we can change that with the order property. So for order, I'm going to put this first box to have the order of two. And then I'm going to set the second box to have an order of one.

So we should see the red and blue flip places when I press refresh. that's what we see the align self property will align each item individually. We already talked about the align items property, which you set on the parent container.

When you set an align items on the parent container, every item within that container is aligned in the same way. But if we use align self, we use it on the individual item, and we can set each one differently, it will override any value set by the align items property. So for this challenge, let's set some align items or align self for these items.

So I'll do align self. And then you can use any value that you can also use in the align items property. In this case, I'm going to put center for this one. And then down here, align self, I'll put flex. And another option will be flex start.

So let's refresh. And then we can see here that this blue box is centered. And then this red box is the end or goes to the bottom of the row here.

Well, thanks for watching the CSS course. Don't forget to subscribe. And remember, use your code for good.

Transcript for:A Comprehensive Overview of CSS Techniques

Transcript for:
A Comprehensive Overview of CSS Techniques