Base Color Variables

[00:00:00]
>> Fantastic, the lance gets started here with establishing our base styling. One of the things you'll see me do a lot in this course is that, in the JavaScript box here I will sometimes put in instructions for you. I'm not using the JavaScriipt box otherwise, it's always just to comment there to about what might be going in this particular CodePen.

[00:00:19]
So if you wanna take a look at it, you are welcome to do that. For now, what we're going to do is we're going to start here, and let's just take a look at what we've got in place. So here in our HTML, the first thing to know about CodePen is that it does not sure you you're the HTML head of our document, and it also does not show us the body element either.

[00:00:44]
Those are pretty fundamental to a web page, this is everything that's inside of that body element. And I'll show you later on today how to take this HTML and put it into a web page where that body element and the head are present. So just be aware, if it looks a little weird, that's why it looks weird.

[00:01:03]
So we have a series of div elements here. Those div elements each have their own class associated with them, and we are gonna turn these into some boxes for colors. So that is one of the things we're gonna code. Next, we have some type, you'll see here we have our various headings elements.

[00:01:21]
The heading elements are really important to use in your document, the one of the so called semantic elements, that communicate meaning, particularly for accessibility purposes. And show you sort of the broad overall structure of the page. We also have a link, we have a list, and we have one of my favorite HTML items, which is the figure.

[00:01:44]
Figures are designed to associate images with captions. So if you have text that goes under a picture, chances are it winds up being a figure, and this is how you would go about coding that. So it's always good to take a quick peek at your HTML and get Familiar with what you see there.

[00:02:02]
Then we're gonna take a look at the CSS that I've given you here. So the first part of this is a little preamble, this is setting us up for the appropriate kind of box model that we're gonna use in this particular document, so-called border box. This has to do with making layouts easier, and that's pretty much all I'm going to say about this at that point in time.

[00:02:24]
If you wanna know more about this, you can look at the Frontmasters Boot Camp, where I explain this in more detail. And I've also included a little style here courtesy of Scott O'Hara, ahe's got a blog post on this. This is a lovely way to make things hidden for screen readers.

[00:02:44]
So if you want something, some text you wanna show up on the page, but you don't want it visible to most of the visitors for your website, you just want it read by a screen reader. This is a lovely way of doing that, that's really inclusively done and you just add that as our only class into your HTML to make that happen.

[00:03:03]
So let's start by setting up the colors for our webpage. Inside of the class website, you'll see that I've given you a series of colors here. Those of course are hex values that we're going to use for those colors. They are what our designer has picked out for us to use in this particular design.

[00:03:23]
So one of the first things that we always do is we start by setting these up as CSS variables, or the more appropriate name is CSS custom properties. And the way that we do that, and I usually put mine right up here at the very start of the web page, we're gonna give this a selector called root, R-O-O-T with a colon in front of it.

[00:03:48]
What does root mean?
>> The one location that everything connects to.
>> The one location, it's the root, the very base of the document, right? Everything is derived from this base of the document. And by setting up our custom properties or variables here, we make them globally available everywhere in the document.

[00:04:07]
And when it comes to colors and fonts, that is absolutely what you wanna do. So, we will start by giving these names, and we can debate how you name your particular variables. In a lot of cases people advocate calling them like primary color and secondary color and all the rest of that.

[00:04:25]
Because what happens if one day you go from blue to purple, and you now have a variable called blue, which has a value of purple. [LAUGH] So that might be something you wanna think about. But to keep things simple, I am going to call my variables by the color names.

[00:04:42]
You set up a variable by putting a double dash in front of it, and then we're gonna give it a name, like black with a colon after it, and then we give it our value 000501 and a semicolon at the end, okay? Absolutely nothing is gonna change on your webpage, don't panic it's totally fine.

[00:05:04]
And that is, we're just setting up these variables right now, we haven't actually set them up to display, okay? I'll show you how to do white. So I'm gonna call this one white and this one is ff,ff If that's, okay? All right, we've got four more to go here, take two minutes and type in all the rest of those there into your root declaration.

[00:05:42]
Okay, It looks like the typing has died down in the room in front of me. So, hopefully you have a series of variables that are set up like this. Remember that variables just like everything else in code, do not like spaces, do not like funny characters. So when you come to a name like light green, you want to make it all one word, lightgreen.