Add Global CSS Styles

[00:00:00]
>> Now we've got what starting to look like a website here, we've got this common header, we've got navigation, but clearly this is not styled, we have not made this look like anything. So the next thing we're gonna do is we're gonna look at at styling Gatsby sites.

[00:00:17]
So the biggest thing when you're looking at any site is you're gonna start to see global things, you wanna have shared color palette. You wanna have your fonts typically are gonna be set globally, you're gonna have some baseline like typography settings for line heights and stuff like that.

[00:00:35]
So the first thing that you're probably gonna run into in Gatsby is needing to set up some global styles. So what I'm gonna do is, let's create a new folder, and this folder is gonna be called styles. In styles, we're gonna create a file and I'm gonna call it global.css.

[00:00:57]
And let's just make some basic styles here. So I'm gonna use plain.css, this is a stuff that you can use in any browser with the possible exception of like IE. But we're using CSS variables, which will make life easier, I'll show you why in a minute. But let's set a color for our darkest color will be black.

[00:01:19]
We're gonna have a mid color that we can use kind of a mid gray and then once said a white we'll just go plain white. And then I want to clean up some basic junk that happens in the browser. So I want my borders and margins and everything to be factored into the width of things so that we don't get junk all over the place.

[00:01:42]
I don't know if we're actually gonna hit that, I have to do this for every site or else I don't feel safe. And then let's set up our basics. So the whole color I want the text color of this site to be gray. I want to use system fonts, so I have a shortcut for this, no, my shortcut didn't work.

[00:02:03]
[LAUGH] Maybe I don't have a shortcut for this and instead I will copy paste it so that you don't have to watch me type this all out. This is the system font stack, so we use Apple system. BlinkMacs, Segoe, Roboto, oxygen, this is all the different OSs, somebody took the time I think CSS tricks, it's just some font stack, I think it is.

[00:02:31]
This is a really helpful little snippet that I use all the time where it kinda walks through everything you can use. This is the one that I'm using, there are other options out there but this one this one is handy. After we've got our system font I'm going to set the font size.

[00:02:48]
I want the font size to be a little bit bigger, I like legibility I'm not afraid to go with big words. So let's do a line height as well of 1.4, but these are just kinda getting into preferences. I want it to look somewhat designed, we're not gonna go too far on this but I just wanna make sure it looks like we're at least put in the old college try.

[00:03:13]
Have the body with a margin of zero so that we don't get that kinda weird white border around the whole site. And then I wanna set up for my headings, I want my headings to be a darker color. So let's go h1 through 6, we will set to that color of black.

[00:03:33]
Okay, so I have done this, and now that I have all of these styles, I wanna actually use them. And there used to be a lot of stuff you had to do this a little bit of rigmarole involved. Now it's great you can just go into your layout component, you can just import this, so let's just import styles, global, right?

[00:04:00]
So I'm gonna import this style, let's head back over to the browser and look at that, we now have our default fonts. Everything got a little bit bigger, so that we can see what's going on. And we're using the system fonts, so that's okay. I'm happy, I like that, I'm into it.