Base Styles

[00:00:00]
>> Kevin Powell: And with all of that done, we want to start getting into our regular base styles and setting the stage up for everything else that's gonna happen. And this is where you really want to lean into how CSS works and do as much here as you can so you can write less CSS later on.

[00:00:19]
This is a step that I see people not taking advantage of enough, we had the question about inheritance earlier on, all of your text styles, most of that stuff's inherited right away. So if you set your typography and your base styles up from the beginning, it makes your life a lot [LAUGH] Easier in the long run.

[00:00:35]
So in here, and this is where you could make an argument also, for a sub layer. Potentially, but I'm just gonna come after the root selector closes, you'll also notice the difference in the color, the braces that are in here. That's default VS code behavior now, they used to need extensions for that, but we don't anymore.

[00:00:51]
So, I know that's where the root's ending, and I'm gonna do an html selector first. The html selector, you don't need to set this on the html, you could do this on your body but I like coming in with my font- family here. And so in this case, I know my font- family is my font, I just do f I get the two choices.

[00:01:15]
I choose my body, and the other one I do here is my line- height. Actually with the line he'd set earlier up, but a lot of time I'll set my line- height here as well. It's one extra declaration, won't kill anything, we're not really going to take advantage of this in this project, but we have a lot of root properties now.

[00:01:33]
We have root, people know of REM, so that's looking at the font size of your HTML element. We also have root line height, root x, root, other things, so it's for me, having these set here just means that those will actually work in a predictable way. Because traditionally, I used to always just apply these styles on the body instead of having them on the HTML.

[00:01:55]
So these days, I put my font family and my line height there, and then I come in with things like my font size here. And the reason I come in with my font size here and not on the HTML is because I want my REM to stay consistent.

[00:02:10]
The base font size that we had, the font size 400, if we come and take a look at it, or actually that one's staying the same at both sizes, but a lot of the time your font size at your base level will actually change. And that means whatever one REM is would change with everything if you'd set it on your HTML, which I don't wanna happen.

[00:02:29]
So I always, just for consistency sake, I like having the font size on my body, so that would be my, sorry, I was going to do font-size- regular right there. The color as well, you can just come in with the color, in this case, I prefixed them with text.

[00:02:49]
You might wanna prefix it just with the word color instead. I have my text-main and I should be able to hit save and I see those coming through. Right away, I know that there's a Problem, because I can barely read my text. So that reminds me that I also want to change my background-color, and this is why I like having live server on so then I can do my background and in this case, it would be my background-main, and I set it there.

[00:03:16]
And again, this is why I really like custom properties that are telling me exactly how they're being used, because I don't have to figure it out. I just look at my background colors, and I probably know which one I want, it makes my life a lot easier, right there.

[00:03:29]
So yeah, those are coming in, those are looking pretty good, I might have forgotten something along the way here too. I find a lot of the time when I'm setting up these base styles, I sort of just do what I remember. And then I keep going, and then every now and then you're gonna remember that you forgot something you just go back and add it.

[00:03:44]
There's this thing where people feel like they have to write like the perfect code right away. There's no harm in like, I forgot this one property, or this one thing. So, we'll double check after to make sure I didn't forget anything, but at this point, I would keep going.

[00:03:56]
And we can set up some other things, so this is my font-size, my color, we can do the same thing now for my headings. So h1, h2, h3, maybe we have an h4 in this project, I'm not sure, and we can do something like font-family and then --ff.

[00:04:12]
Once again for the heading, I wouldn't set a font size here, but if you do look in the project, dive through the Figma file. All of the headings are the bright color, so we can say the color is the high contrast. And I can see that's changed, it's not the easiest thing to see, but you can definitely see that it has shifted over.

[00:04:33]
Then we can say that my h1 set up your font styles, so the sizes I mean, so font-size is in this case, actually we didn't decide earlier, so this would be something we'll come back to and we style the main area there. So my font size, I have to decide if I want the extra large and then if I'm gonna do something to make the top area smaller.

[00:05:00]
Or if I'm gonna say that it's the large and then do something to make the bottom text bigger. I'm gonna do it this way, but if you think the other way around, makes sense. Choose whichever one you want, but I should see that text get nice and big.

[00:05:13]
Now, the one thing I will say here, actually, with these is, right now, I'm selecting that on an h1, for that one for now, I'm gonna leave it on the h1 it's probably not the end of the world, but I tend to avoid setting base styles on the heading levels.

[00:05:28]
So a lot of people do like, doing like, then they're h2 setting the styles there for like, the next font size down and then the next font size down. But wrong shortcut, if we come and take a look at the Figma file. If I look here like this, makes sense to be an h2 and then these guys down here wouldn't become an h3, so my h3 here is kind of big, not huge, but it's big enough and orange.

[00:05:55]
But then if I come and take a look here, these are probably also h3s, and, there's these over here also gonna be h3's when I'm looking at this. And one problem that you can run into, if you're using the regular selector like this is, you're gonna start picking styles, you're gonna start picking elements based on how you style them.

[00:06:18]
Rather than picking the right semantic element to go with it, so, I don't like having my style linked to the semantic version of something. I just find that all it does is make me make bad decisions along the way. So instead of linking it to an h1, h2, h3, this one will leave like this and potentially change a little bit later.

[00:06:38]
But for my h2, we could come in, and instead of that, maybe it's a section title instead, or maybe you could even have heading-md or different things. We're gonn tackle this a little bit later, once we actually have to start styling them. If you wanna start thinking about that now, it's a really good thing to sort of start exploring and thinking about a little bit just because, yeah, I like separating those concerns as much as possible.

[00:07:06]
Just to make sure I'm choosing the right semantic element and then just using CSS to style it, and doing that with a range of selectors, instead of linking it directly to the h1, h2, h3, levels. Some projects you're gonna have, if you have a blog site where it's just always consistent everywhere, then you're fine just using your h1, h2, h3.

[00:07:25]
Another thing that you might see people do is h1, h1 so you could use an h1 selector or an h1 class if it's an h2 that needs to look like an h1 this is really popular, or you could this could also be title. There's other ways of doing it, primary-title could be another one, there's so many different ways of doing this primary that it really depends on how you like to work.

[00:07:50]
I am of the mind where I tend not to want to use the semantic selectors at all, just because then people, especially if it's not a solo project, and other people are touching the code, you're just enabling them to make a mistake. So by not having any styles associated with the semantics of it, it's a nice way to strip away that potential problem that could come up.

[00:08:10]
So the only other one here that I think does deserve some styling are just the link colors. We don't really have any links in this project outside of the navigation. So we don't have a lot to go on, but just setting them up as a basic one like this could go really well.

[00:08:25]
But I do wanna highlight one thing in there that you might not have seen before, which is focus visible. So if we come in here, and as I said, we'll come back to the section and the heading things in a little bit, maybe I'll even take I'll leave this one just because it looks a bit better.

[00:08:39]
But we'll revisit that, but with your link, you can obviously come in with whatever color you want. So in this case, it could even be a color inherit in I think it's the high contrast, though, so we'll do the high contrast for that one. And then I had an a hover, and then a usually you would see something like this where you'd be doing a focus state.

[00:09:00]
Focus is the old way of doing things, it's when you're keyboard navigating. So let's just say the color here is red, now, just so we can actually see this in action, if I tab over, the color of it changes because it's gained focus while I'm tabbing on something.

[00:09:14]
The default in all the browsers for every element that was using focus is now. Focus-visible, which on a link will work exactly the same way and won't actually change anything. The difference here is if you have a button and we're gonna have a button eventually, so we'll delete this in a bit, but I'm just gonna do it to show you.

[00:09:35]
Hello there, if ever you have a button, and let's just change this for now to button, just to highlight what focus visible is doing. If I click on this, when I'm hovering on top of it, whoops, let's change this to focus first, and we'll do that as a background.

[00:09:56]
Just to make it easy to see. If I click on it and then move my mouse away, it's gained focus because when you click on something that's interactive, it gains focus. Usually, when you click on a button, something happens and you don't want it to keep that like the navigation opens or something over here does something.

[00:10:11]
You don't wanna users staring at this button that has changed focus states so focus-visible prevents that from happening, focus-visible. If I click on my button when I leave, it's acting only as a hover, as long as I'm doing that with my mouse. If I keyboard navigate to it, when it gains focus, it's showing because if your keyboard navigating, you need to be able to see what the users actually highlighted or done there.

[00:10:34]
So the basic rule is focused-visible the browser, we'll figure it out based on what the type of element it is and how the users interacting with it. Whereas, if you just use focus, that state will always get applied no matter what. So in general, focus-visibles probably what you want to actually use there.

[00:10:50]
So I'm gonna switch these both back to being a, and then just do the color. And this case, it was the brand-light on there for the hover state on those, and that's good. Then the underline and other things we'll tackle once we get to the navigation, cuz I think in general you wanna leave the underline on your links to make sure people know that they're actually links.