Using Color Variables

[00:00:01]
>> Now I know you're wondering what these colors actually look like. Yeah, let's see what these colors look like. So to do that, you know that in our HTML we have a series of boxes up here on the top of the page, and they're called white black, tan, green, light green and red.

[00:00:19]
Just like the colors that you just set up, but of course we don't see them anywhere here on the page. Right now these DIVS have no height, no width, and no color associated with them. They're just coded here in place. We need to write some CSS so we can actually see these.

[00:00:36]
So to do that, let us start by, and I'll just leave that open a little bit like that so you can see what's going on. I need to make a whole series of little boxes on the page. How would i go about doing that? Did anyone have a suggestion?

[00:00:53]
>> Make a list.
>> We can make a list, that would certainly be one way of doing it. How else could i do it? Maybe a layout method?
>> Would it work in a table?
>> Yes, tables, absolutely. But we don't use tables in this context anymore. This is now we've moved on to other layout methods other than tables.

[00:01:11]
So yes, tables would have solved that problem but not anymore. No, not now.
>> Borders.
>> Borders, yeah. Borders would be definitely part of this. How about Flexbox? We want a bunch of little flexible boxes. Let's use Flexbox to put these together. So Flexbox works with parents and children.

[00:01:34]
So remember we have here a parent. This is our DIV with a class of colors. Inside of that we have a series of children. They're called white, black, tan, green, light green, and red. Everybody see how those are nested together? Okay, so what we do then is, on the parent, which is called colors.

[00:01:54]
We're gonna set up a display of flex. And again, absolutely nothing is gonna happen because we haven't put in any colors actually there in place. Then what we're going to do. Is flex our selector muscles. And I'm gonna do one like this .colors with a greater than sign and a star.

[00:02:20]
Anyone wanna take a guess at what that means?
>> Any element nested in colors?
>> Yes, exactly so. Any element, that's what the star means. Pretty much anywhere in code, anytime you see a star, it means anything, all right? Same is true here in CSS. Anything and we have .colors that comes first, but we remember that with the CSS selectors we write them left to right.

[00:02:46]
But we read them from right to left. So you always start on the right side of your selector. So anything, and then we have this funny greater than sign and then that class of colors. Well, that greater than sign is indicating the relationship between anything and colors. In this case we're saying all of the children anything that is a child of colors, which would be all of these guys, white, black, tan green, light green and red.

[00:03:12]
We select them all at once, pretty cool. So now we're going to give this a width. Let's say 50 pixels and a height, let's say 50 pixels, so we have lovely little squares. And you'll notice that my page just twitched a little bit. Those squares are on up there.

[00:03:33]
You just can't see them yet. And we can give ourselves a little bit of space in between these. Probably the easiest way to do that is say something like gap, something like 20 pixels, and we put that on our flex property. That gives us the space in between.

[00:03:53]
And then we can say something like border 1 pixel solid black. There they are. How cool is that? You made boxes? [APPLAUSE] It's the root of all CSS boxes. How are you doing so far? Good. Okay, so now let's look at your code. What have you got so far?

[00:04:20]
You have variables for colors. And you have boxes. How do we connect those colors and the variables with the boxes that currently have no color? How are we gonna put those two things together? Those of you who know how variables work in any other programming language, what do you need to do?

[00:04:40]
Anybody have a suggestion?
>> Someone's saying --var.
>> Interesting idea. Yes, so not -- but we need to put this together somehow we have to declare our various variables. So the way we're gonna do that is we're going to set up a series of classes, because we already have those classes there in our HTML.

[00:05:01]
So we're gonna say white. And then I'm going to say background color is this var that the guy just mentioned, var(--white). And that was a really bad one to start with. So let's just do another one real quick. Because you won't be able to see that, of course I'm just gonna copy-paste that and make this black with a background color of black.

[00:05:30]
Now we have one square with color, okay? What just happened here? We have our class, which is white, black, tan, green, and light green. We've set it up to have a background color, a CSS property, and we're saying declare it as the value of this variable, which I established up here at the top of my document, and this is the way we make our variables appear.

[00:05:57]
We say var and then inside of the parentheses we say the name of our variable, in this case the color. So we're just gonna copy-paste because we've made this easy for ourselves by calling these all the same things, and let's just go through and change these colors. So we have tan and tan.

[00:06:20]
Green and green. Light green and light green. Oops. And red and red. Cool, that everybody gets pretty colors. Super simple. Always a great way to start. You can just copy code right out of the CSS that we wrote here, and you can start any webpage just like this.

[00:07:05]
Show what the colors are gonna be on this webpage. Any questions on that so far?
>> On said, my boxes are showing up vertically, and it's not working when I use are only if I put the color in by myself,
>> Okay, if the boxes are showing up vertically, make sure that you have a class here called colors and inside of colors it says display flex with a little bit of a gap.

[00:07:33]
I suspect that's something that you might have missed. Make sure the spelling is correct computers are really strict about spelling, okay? So the colors in your HTML has to match your colors here inside of your CSS, so make sure that's in place. And then in terms of your variables, make sure you set those up with colon root, not just the word root, make sure there's a colon in front of it, and then make sure all of those names have a double dash in front of those.

[00:08:02]
Generally speaking, when things, quote, don't work. It's tends to be these syntax errors here along the way, okay? Make sure all of the semicolons are in place. Make sure all the colons are in place. Computers are really picky about these things, okay? Any other questions online?
>> You forgot tan.

[00:08:26]
>> I forgot tan. I did forget tan. Thank you. Tan, tan I didn't set up the color here, did I? No worries. Tan. Thank you for pointing that out. What was my tan color? b6b57b. There we go. There's tan.