In this video we'll start adding some styles
to our application.
So far everything in our page is displayed
using the default browser styles,
which doesn't make for a great look.
The most basic way to add some styles
is to add a regular CSS file
that is used for the entire website.
Let's start with this approach.
Let's create a "styles" folder
at the top of our project,
just to keep the CSS files
separate from the rest of our code.
And inside that folder
let's create a new file
called "globals.css",
since it will contain global styles.
Here we can add some CSS rules,
for example we may want to
set a "font-family",
and I'll accept this suggestion,
which is a common choice of sans-serif fonts.
Ok. Let's save this file.
Now, for these styles to actually be used
we need to import that CSS file
into our custom App component.
Relative to the "pages" folder
it's up one level,
and then "styles/globals.css".
And if we save,
now you can see that
the page is using a different font.
You can actually import any CSS file you like
into your App component
and it will be applied globally.
It doesn't have to be called "globals.css",
that's just an arbitrary name.
In fact, you could also import
multiple CSS files if you want to.
Anyway, let's go and add some more styles
to make our app look a bit nicer.
Maybe we could change
the "color" of the links,
and set it to "darkred" for example.
I'm using a named colour for simplicity,
but of course you could select a custom shade
using the colour picker.
Anyway, if save this change,
the links become dark red.
We could also remove the underline,
by setting "text-decoration" to "none".
And that's the result.
There's no need to underline those links
because they're in the navigation bar.
However we could show the underline
when the link is focused,
or when the user moves the mouse over it.
So in this case set the "text-decoration"
back to "underline".
And if we save this,
it should underline the links
when we hover over them,
which can help the user a little bit.
Now, those links are still displayed
as a bulleted list,
which is not really what we want
in a navigation bar.
Let's remind ourselves
of the structure of that NavBar.
As you can see here,
there a "ul" element,
that is an "unordered list",
that contains an "li", or list item,
element for each link.
So we want to re-style the "ul" element
to remove the bullet points.
And that can be done by setting
"list-style-type" to "none".
Ok, the bullet points are gone.
But there's still a lot of space
before each link,
Let's remove it by setting
"padding" to "0".
That's better.
Now, we also want to display those links
all in the same line.
So let's go and style
the "li" elements,
and set them to "display: inline".
So they're all on the same row.
But there's no space between them now.
Let's add a bit of a margin,
maybe on the left,
so before each link,
and let's set it to 0.75 rem units.
That's more readable.
Ideally we don't really need
the margin before the first item,
so we could set the margin only
on items that are ":not"
the ":first-"
"child".
So let's set the "margin-left"
only in this case.
And if we save,
the "Home" link is aligned to the left.
Ok, that's enough for this example.
As you probably know,
you can easily spend a lot of time
fiddling with the styles,
to make your app look really nice.
But since this course is not
specifically about CSS,
I'll keep the styles fairly basic.
The important thing to know is that
with Next.js you can have
global CSS files
that apply to your entire app,
simply by importing them
into your "_app.js" file.
In the next video we'll see
how to define component-level styles,
as opposed to global styles.