-: I think that the last big thing that we have to do
is make sure that our header has a little bit better styling
than it does right now.
So in this section, we're gonna add
in just a tiny bit of CSS.
To get started, I'll flip back over to my header component.
There's many different ways of hooking up CSS inside
of a Create React app application, but we'll take care
of a little bit more conventional style where
we will create a separate CSS file tied
to this component and then place all
of our CSS relevant to this component in there.
To get started, in my components directory,
I'm gonna make a new file called HeaderStyle.css.
We're going to eventually write all of our styling
for just that component into this file.
But first, we'll hook it up to the header.js file.
At the top, I can connect that CSS file
to this component by importing it.
When we import a CSS file, we're not
pulling in any variables or anything like that.
So we write out just import and then the path to the file.
So HeaderStyle.css.
Okay, so that's gonna hook up the CSS file
to our header component in order to make sure
that the CSS we put inside there
only affects this component,
I'm gonna go down to my render method.
And on this route div right here,
I'll add a class name of header like so.
So that's gonna allow me to do just a little bit
of CSS scoping and make sure
that the rules that we add will only affect
the markup inside of here.
Then inside of my HeaderStyle.css file,
I'll first target that header div,
or the div with the class name of header,
and I'll give it a rule of display: flex.
That's just gonna make sure that the link right here
and the link right underneath it show up on the same line.
And then after that, I'll do header,
I'll find all the anchor tags inside there,
and I'm gonna give them some consistent margin.
So I'll say 0px and, or excuse me,
just 0 by itself, 10px.
So this means that for every anchor tag
we'll have zero pixels of space above and below,
but 10 pixels to the left and the right.
If I now save this file,
we should see everything kind of flip
to the same line and kind of space out; very good.
Now if you want to, we could kind of make the stuff
over here on the right hand side, move over
to the far right hand by finding the header
and doing something like justify-content: space-between.
So that's going to attempt to maximize the space
between this link right here and the div
that comes back from the renderLinks call.
So if we save this, we should see everything kind
of flip over to the right hand side.
Ah, there we go.
Okay, I think that's it.
I think that's enough styling.
Again, the point of this application was really not styling,
it was really just focusing on authentication.
So let's pause right here, we're gonna come back
to the next section and do a quick wrap up.