Hello, my name is Beau Carnes and I'm with free
code camp.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 Free Code
camp.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 Free Code camp.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 Free Code camp.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
effect. So if I put my mouse on this p tag here, I can add a style to the PPI by just using style.
And 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 style 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 is
going to be red, 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 the tag style.
And then we just need a closing style block. And now I can add all my styles between these two
style tags. So let me give you an example. If I want to style all the paragraph tags, I can
put a P and 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 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. Oh, 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.in front of it. So I'm going to change this eight, eight to two dot
blue text. And if you add this dark 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 gonna change this up, instead of making 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, here, this is class red text, I can add red text a class red text to any element
to make it read. 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 read text. And when I open up the little browser,
here, you'll see that title is read. 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, it's going to 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 Sarah Stan setter
for mono space, or you can put in the exact font. So in this challenge, we're going to make
all the P elements mono space. So right here, I'm going to put font family and then model
space. 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,
a 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 h2 element, I'm going
to add h2 here, and I'm gonna 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 will 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 add the font family and 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,
it can always get the 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 model space. Now, right now, if I open up the browser,
you're not going to see anything different, you're going to see a lobster here. But if
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 motto space 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
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, we'll 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 mortar. 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 Vic 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 surf We have very sharp corners
around this image, there's a border radius property that we can use to make that a little
round 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, so 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 us 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, 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 and ideas 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 meaner 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 started 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, then 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 it's 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 Reese 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 that. Having 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. Depending 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. Elements merging controls the amount of space
between an elements 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 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're 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 it 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 how these four numbers
while 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 gonna 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 has 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 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 40 than 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 it 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 that it has to be 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 styling classes with a dot before the class here, and then
you can put the styles for the class. And then you stay IDs with the hash mark, instead of a dot
hero 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 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 going to 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. It says type check box.
So we're going to use the same thing up here, instead of type radio, it's going to be type check
box. 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 if we do the clock one, so the first number is top, the second number
is right, and it's going to 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 checkboxes are styled. So far, we've been setting margins and paddings
using pixels. px, see this example, nega 25, px or pixels, these are absolute types of
length. So absolute types of length include, like, I N for answer, mm, millimeters, these
are all tied to physical units of length. But there's also relative units of length, such as M
and REM. And these are relative to another link value. For example, em is based on the size of
an elements 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 on the responsive
web design principles section. But for now, we're going to try setting some padding using an M
or M value. So that's what I'm going to show you. Now we're going to set the the class of the red
box here, we're going to set the padding to an m value. So I'm gonna put padding, and it's just
like how you would put up pixels, but instead of doing px, you just put em. So this is gonna
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 more explicit, you'll see the the body tag 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
going to do here, I'm going to add a body here, or a body style. And 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's 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 be inherited to all the
others. 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 gonna put color green. And I'm for the
font family. I'll put it as monospace. Let's open up the browser and see what that looks like.
Okay, look, we have green monospace 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 it will cascade down to the h1 to make the color green. But what if there was
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 the h1 tag. So pink text. So what do you think's gonna
happen? It has the color green from here, but I also had 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 text, 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, override the
color green because pink text is more specific than body. What can we do to override 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 is 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 going to
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 they 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 lowering 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 what 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 the 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 to so starting with a dot, we're gonna start with a hashtag 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 tech should only be
on this element. Whereas classes you would 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 that 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 overwritten 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 style means is 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 gonna put the hexadecimal for black, which is
just 000000. So the first two zeros are the red, the second two zeros are the green and the third,
two zeros are blue. But since it's black, it's 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 mark or pound key. And I'm just going to put ff 0000. And then
for green, we're going to do the hash mark, and it's going to be 00, ff 00. And then for
Dodger blue Tex. Now I don't have these memorized, I'm actually just reading them off. Mo's 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, a lot of other resources to
find the appropriate hex codes for different colors. So for the orange text, it's going to
be FF a 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 f f 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 e. So F 00. So this f will be expanded to f f, this will be expanded to 00. And this
will be expanded to 00. For future for future tax, we can do F Zero F for the scientex, we
can do zero f f, M, and 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 would 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-250-5255 is white. But for this challenge,
we're going to change change it to black. So black is just going to be 000000 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 gonna be RGB. And then the first number is always red. And then we have the
green. And 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 beat color color with RGB. And you can really do the same thing
with hex as well. So for orchid text was to 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. And to make this even
easier, I'm going to do some copying and pasting. So we're going to have the C unitech. And the blue
Tex Sienna is going to be 160 and then 110 82. And then we're going to do 45. And then for blue. This
is gonna be an easy one, because we just have 00 255. And now let's look at the browser to see what
that's going to look like. There are our colors. Look at this sweet pin one 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, our CSS
variables, so the penguins skin black belly gray, beak yellow, you can see they're used here, like
here background, we have the var and then your the parentheses two dashes, Penguin, deskin
and gray. So this would be the backup color right here. But this will be, we will 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
pin one is a completely different color now, is was super easy, we only had to change it in one
spot, and it changed it everywhere in the code. In last challenge, we were introduced to
variables. Now we'll go over him 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 quick skin variable, it's
going to be replaced with gray in the code. So in the last challenge, we created 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 desc
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 the spots this time, but
from now on, whenever we want to change the color of the penguin scan, we only have to change it in
one spot. That's the great thing about variable. 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 the variable name is spelled
wrong. So that's what's happening here. css pin GUI 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
pinguin 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 pin one 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. So your penguin belly belly is used
here. Penguin bellies use here. So it's used in these two different places. And but just making it
here within the route, we're gonna be able to use it everywhere else. So let me refresh the page.
And you can see that it's pink in both places. So variables declared within route apply to
the whole page, but you can overwrite those within a specific element. So down here, I'm
going to overwrite pin one 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 that, 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 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 num, 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 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, or
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 saw that you can use CSS Grid units to change the size
of columns and rows, you can use pixels and M's. 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 a two is 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 and 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 other 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 is no gap between the columns. This is
brought up right against each other. Sometimes you want to gap between the columns. So you
use a 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 a 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 grid row gap, and I'll make a gap between the rows. And this
case, we'll put five pixels. By refresh here, you can see that there's 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 a grid gap. And
then the first number is going to be 10 pixels for the rows and the second numbers can be 20
pixels for the columns. By 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 and 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 end at 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
three, because it would start at the first line. And in that 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 the rows, it's basically the
same thing. So instead of grid column, it's 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, and it's
gonna start to 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 has a value
of stretch, which will make the content filled 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 that 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 a line self. It works pretty much the same way. So I'm going
to put a line, 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 aligned items aligned all items vertically, again, you put it 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 to 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 in
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,
and then we just put one of our customers 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 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've 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 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 one, one, it would start in this top
corner here. And then you'll see that the second two numbers are two, four. So two, for me, that'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 will
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 3144. So if you look on here, three, one would be
right here, four, 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 75 5100. 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 gonna put 20 pixels. Let me
show you how this will 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 of our 50 pixels, one of our 50 pixels 20 pixels. So this with
the repeat function we 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 then the path and
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. 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 that 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. And 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 autofill. So you can see how they behave
differently depending on the size. We talked about autofill 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 both 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 advert content
footer. Here, each row has an advert on the side and then either has the header of 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 gonna change word advert to header. And we want the footer to be
long the full bottom at min width 400 pixels. So I'm going to put a 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 average 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 that 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
f r. So let's see what happens. If I refresh. You'll see that this it 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 a 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 the
stats. So now we have Flexbox 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. And 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 we're 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 I was refreshed 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 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 was 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 start, which will
align the items to the start of the flex container over on the left side here. For a row this pushes
the ions 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 of pushes the things to the right. space between
will align items to the center of the main axis And then 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 am 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. t. 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 and bed. 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've got to look closely
to see the difference. So if I refresh here, it goes to the bottom of this row here is
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 properly 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 a line items are pretty
much the same as they are for justify content, you have the flex start 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 a line 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 move 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 just means the extra items moved 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 island 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 grille property. So let's do this the box one and
box two, so what will 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
ends or percentages, or auto. So let's add that to box one and box two. I'm gonna put flex asis.
And you can see you can't even see box one, box two until we add this. So the first one is
going to be 10 em, and then I'll do flex basis, and this one will do 20 AM's and 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, two, two, and then I'll set the front 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 is
getting bigger and which one is getting smaller. The order property can be used to rearrange items.
By default, they just appear in the order that are 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. And 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 a line 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 gonna put center for this one. And then
down here, align self. I'll put flex and another option be flipped 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
