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