Custom Properties for Color & Spacing

[00:00:00]
>> Jen Kramer: Now I'm going to go on to styling, which is the part that everybody loves, right? Okay, you can continue working in the same CodePen that you are already working in, if you have all of your markup done. There are in the course website, you'll see that I have given you way the page is going to look by the time we're done with this particular section.

[00:00:23]
And down here there are CodePens as well, you can use these to put together code. So now I'm gonna pull up my CSS here. Let's take a look at the CSS that I've already given you for building this site. So I have a couple of things going on here.

[00:00:38]
This is right here, :root. Anyone know what that means? This is a CSS selector, anyone seen it before? Anyone know what this means?
>> Jen Kramer: TJ?
>> TJ: Yeah, that is the basics, it affects almost everything. That's the basics.
>> Jen Kramer: This is the root of the document, it affects almost everything everywhere.

[00:01:01]
So this is a way that we make these CSS variables available to everything inside of our website. And what I have here are some colors that our designer has given us, and they have color names along with them. So there's all of the colors that we're going to be working with in our design.

[00:01:20]
You'll also see I have a couple of other things here. I have a property called corners, this has to do with rounding corners on images, we'll work with that later. And I also have a base font size here of 1rem. Okay, then we have a chunk of code here.

[00:01:36]
These next two styles, anybody see this? Anybody watch any of my other classes before? Anyone know what this is?
>> TJ: The asterisk before shows that each tag, if you apply that to any tag, that will happen before the tag. Or it might be before whatever, specifying before.
>> Jen Kramer: Right.

[00:01:58]
>> TJ: And that happens after those tags also.
>> Jen Kramer: Exactly, exactly, so. So this is the entire universe and everything that comes before and after, right? Every element has three nodes. We have the actual main node itself, the before, and after. And what we're saying is that we're going to use the border-box sizing method here, and we'll have that inherit, because it doesn't normally inherit.

[00:02:23]
The border-box will allow us to create our layouts a little bit more easily. It's a little bit better and simpler to work with in terms of math than working with the content box model, which is what is used in CSS by default. So this is just a little bit of boilerplate that you probably wanna add at the top of every CSS document that you ever work with.

[00:02:42]
Okay, then we have the next two styles here. From the body element itself we're gonna set up our base font size of 1rem. This is gonna allow us to scale everything proportionately a little bit easier. We've also set our font family of Inter. It happens to be this design only uses one font, so this is a very simple way of doing it.

[00:03:05]
A lot of people like to use variables for their font families, totally fine. But in this case, we're gonna set our font once and forget it. We'll never need to change it again, it'll be inherited from the body into all of our other elements. And then the last part,
>> Jen Kramer: Is our image, it's set to a max-width of 100%.

[00:03:24]
What does that mean? Why do we do that? Yes.
>> Speaker 3: Take the full max width of the page.
>> Jen Kramer: Right, so our images can be no wider than the width of our web page, right? And what this actually does is it makes them a little bit flexible. So you'll see that down here with our image, that I'm able to continue to make my screen smaller, and you see my image scale down.

[00:03:51]
And proportionately, this scales up until it's as big as it can be. So in other words, it won't over scale, it won't go to 2 or 3 or 400% of its actual image size. It will go to no larger than the image that we actually have that we're working with.

[00:04:06]
So to this, let's start adding some additional styling. So here in the body, we're gonna need to give this a background color. And the way we call a variable is using var and then some parentheses dash dash calls the name of our variable. In this case, we're gonna call our platinum color.

[00:04:34]
>> Jen Kramer: And the platinum color was created up here at the top of the page, so here it is right here. So we've called that in, it's just a very, very pale gray. And we can also set our text color, which will be var(--onyx), okay? So just a not quite stark white and black, but a little bit of gray and a very dark gray to contrast with that.

[00:05:07]
To this now we can start styling our individual headings. If we go back and look at our website, the screenshot here, you'll see that my h2 is some very small blue uppercase letters. As opposed to my h1, which looks kinda close to what we already had for an h1.

[00:05:29]
So let's style that.
>> Jen Kramer: So right after my body element I'm going to add an h1
>> Jen Kramer: One of the first things that you have to remember about our headings is that they have a lot of margin on them by default. Margin is what is pushing them apart and giving a space between the words Frontend Developer and Brissa Isidro.

[00:05:54]
So we can add to this a margin of 0, and the moment I do that, nothing happens, why? Why didn't anything happen when I assign a margin of 0?
>> Speaker 4: Because margin of 0 is means there's no margin.
>> Jen Kramer: Margin of 0 means there's no margin. So I now have no margin on Brissa Isidro.

[00:06:16]
But clearly nothing moved, why is that?
>> Speaker 5: There's also padding.
>> Jen Kramer: There's also padding, good guess, but no. And we can say padding 0 and nothing will happen there either. Other guesses?
>> Speaker 6: Is the body or the entire document set at margin 0?
>> Jen Kramer: Actually the body itself is not set to margin 0.

[00:06:41]
We could do that. You'll see what'll happen is that our text will smash right up against the edge of the browser window here when we do that, but it won't change the distance between our headings.
>> Jen Kramer: Okay, this is one of the most misunderstood concepts in CSS, and that's why I'm spending time on this.

[00:07:01]
The reason is that when you have two vertical margins, so we have a margin on our h1 and we have a margin on our h2, okay? When you put those together, they are not additive. With padding, if we had one rem of margin and one rem of margin, we would wind up with a distance of two rem between two elements.

[00:07:21]
But in the case of vertical margins, only the vertical not the horizontal. If we have one rem of margin on one element and one rem of margin on the other element, the distance between them is what, one rem. One plus one is one, vertically with margins inside of CSS, they collapse, okay?

[00:07:40]
So what happened is our h2 still has some margin on it, and that is keeping the distance from our h1. So if you want to have no distance between your h1 and your h2, you will need to add h2 margin 0. And that will, in fact, push those two things together, right?

[00:08:05]
Now what you have going on here, the distance between them, a little bit of distance is due to the line height, not due to margin. I'm also going to add to my h1, take out this padding. I will add a font size, and we can do a calculation for this.

[00:08:25]
So calc is our function that allows us to do calculations inside of CSS, which is very cool, because now I can take my variable and scale it appropriately. So what I'm gonna do is I'm gonna say my base-font-size, and I'm gonna multiply that by 2.9. So that's gonna give me the size of my h1.

[00:08:51]
Now why would I do it this way, instead of just saying something like, 32 pixels is the size of my h1? Anybody know?
>> Speaker 7: Because different people's browsers might have different defaults,
>> Jen Kramer: Different people browsers might have different defaults, and this will give you perhaps 2.9 times the size of that browser default.

[00:09:13]
Anything else?
>> TJ: Responsiveness,
>> Jen Kramer: It's good for responsiveness, right? We may want a smaller size at some dimensions and a larger size at others. And we have this wonderful base-font-size right here that now we can always just scale it up and down or redefine that size and everything will scale proportionately.

[00:09:33]
How cool is that? Okay, so now here in our h2 let's do the same thing. So our font size, we actually want this much smaller. So var will be just the base-font-size, which will make our Frontend Developer word much, much smaller. We can make them uppercase using text-transform: uppercase.

[00:10:08]
So there we go, now we have our uppercase letters. We can also make them blue, var(--windsurfing), that's the name of the color that we like. And letter spacing, 0.25em. Now here's another interesting point. I have used 0.25em, just E-M, even though up here in my variables, I refer to my based on size as 1rem.

[00:10:48]
Why am I using ems here on my h2 instead of using rems? Okay, so is a very flexible relative unit of measure. It's the height of a lowercase letter m, that is defined as 1em. So some fonts may have a very tall lowercase letter m, some may have a very short lowercase letter m.

[00:11:10]
It doesn't matter, whatever size that is, that's considered to be 1em. The reason we would use ems here is that depending on what size we have going on, we're saying make it a quarter of that size. Doesn't matter what size the font is, we're want a quarter of that size to give us the spacing here.

[00:11:30]
So relatively speaking, it's always the same. A rem is a root relative so relative to the root of the document. And in that case it would be one quarter of the base font size, not necessarily the size of the h2. So that's why we've taken this approach, all right?

[00:11:54]
>> Jen Kramer: All right, then for my h3s, I don't think I have any h3s on this page, but I'll add this anyway, margin of 0. The other thing I usually like to add to my paragraphs is a line height of 1.5. This makes my paragraph just a little bit more space in between it.

[00:12:15]
We wanna use the no units when we're working with line height. You can use, for example, I could say 20 pixels or I could say 2rem or I could say 2em even. But by having no units here, this is a proportion, okay? So 1.5 times the size of the font, whatever the size of the font is at that moment in time, make it 1.5 that.

[00:12:41]
And I think this is the best way of working with this unit, because that would always make our line height look good regardless of the size of our font, big or small. We can also style up our links. And for our links themselves, our color will be var (--windsurfing).

[00:13:07]
So we'll pull in that nice blue color again for that a, and then we can also assign our hover state, a:hover,
>> Jen Kramer: And the color here will be var(--marina).
>> Jen Kramer: And then the other interesting thing that's going on here in our design is these corners. They may be hard to see with this particular background here, but if you look carefully at this photo, you will notice that we have a rounded corner here in the upper left.

[00:13:44]
And we have a rounded corner here in the lower right. The corner in the upper left and the upper right and the lower left are pointy. Frequently, when we work with rounded corners, they're all four the same. In this case, the designer decided to do this cool thing, rounding the two that are diagonally opposed to each other.

[00:14:08]
So how do we code that? It's actually pretty straightforward here as well. And we have already set here the way to do that with our corners property. The first number, the 24 pixels, stands for the corner in the top left and the lower right, and the 0 refers to the top right and lower left.

[00:14:38]
Why they did corners this way, I don't know. Why they didn't follow the same pattern of everything else in CSS, which is the clock or TRBL, top right, bottom left, I don't know why they decided to go this way, but they did. So that is the way that we will write that little bit of code.

[00:14:58]
So for all of the images that are here on our site, we can say our border radius is var(--corners).
>> Jen Kramer: And that should round the corners here on our image appropriately.