1
00:00:03,000 --> 00:00:05,979
In this video we'll start adding some styles

2
00:00:05,979 --> 00:00:07,265
to our application.

3
00:00:07,265 --> 00:00:10,109
So far everything in our page is displayed

4
00:00:10,109 --> 00:00:12,344
using the default browser styles,

5
00:00:12,344 --> 00:00:14,782
which doesn't make for a great look.

6
00:00:15,553 --> 00:00:18,035
The most basic way to add some styles

7
00:00:18,035 --> 00:00:19,913
is to add a regular CSS file

8
00:00:19,913 --> 00:00:22,328
that is used for the entire website.

9
00:00:22,328 --> 00:00:24,408
Let's start with this approach.

10
00:00:25,109 --> 00:00:26,948
Let's create a "styles" folder

11
00:00:26,948 --> 00:00:28,541
at the top of our project,

12
00:00:28,541 --> 00:00:30,134
just to keep the CSS files

13
00:00:30,134 --> 00:00:32,279
separate from the rest of our code.

14
00:00:32,963 --> 00:00:34,146
And inside that folder

15
00:00:34,146 --> 00:00:35,384
let's create a new file

16
00:00:35,938 --> 00:00:37,650
called "globals.css",

17
00:00:37,650 --> 00:00:40,585
since it will contain global styles.

18
00:00:41,167 --> 00:00:43,140
Here we can add some CSS rules,

19
00:00:43,640 --> 00:00:45,258
for example we may want to

20
00:00:45,258 --> 00:00:46,502
set a "font-family",

21
00:00:47,472 --> 00:00:49,728
and I'll accept this suggestion,

22
00:00:49,728 --> 00:00:52,901
which is a common choice of sans-serif fonts.

23
00:00:53,472 --> 00:00:54,877
Ok. Let's save this file.

24
00:00:55,377 --> 00:00:58,552
Now, for these styles to actually be used

25
00:00:58,552 --> 00:01:00,953
we need to import that CSS file

26
00:01:00,953 --> 00:01:03,277
into our custom App component.

27
00:01:03,932 --> 00:01:06,200
Relative to the "pages" folder

28
00:01:06,200 --> 00:01:07,561
it's up one level,

29
00:01:07,561 --> 00:01:09,829
and then "styles/globals.css".

30
00:01:10,481 --> 00:01:11,507
And if we save,

31
00:01:11,507 --> 00:01:12,875
now you can see that

32
00:01:12,875 --> 00:01:15,270
the page is using a different font.

33
00:01:15,270 --> 00:01:18,349
You can actually import any CSS file you like

34
00:01:18,349 --> 00:01:19,923
into your App component

35
00:01:19,923 --> 00:01:22,112
and it will be applied globally.

36
00:01:22,112 --> 00:01:25,054
It doesn't have to be called "globals.css",

37
00:01:25,054 --> 00:01:27,107
that's just an arbitrary name.

38
00:01:27,107 --> 00:01:29,159
In fact, you could also import

39
00:01:29,159 --> 00:01:31,486
multiple CSS files if you want to.

40
00:01:32,602 --> 00:01:35,059
Anyway, let's go and add some more styles

41
00:01:35,059 --> 00:01:37,038
to make our app look a bit nicer.

42
00:01:37,597 --> 00:01:38,762
Maybe we could change

43
00:01:38,762 --> 00:01:40,149
the "color" of the links,

44
00:01:41,498 --> 00:01:44,091
and set it to "darkred" for example.

45
00:01:44,091 --> 00:01:46,973
I'm using a named colour for simplicity,

46
00:01:47,546 --> 00:01:50,202
but of course you could select a custom shade

47
00:01:50,202 --> 00:01:51,618
using the colour picker.

48
00:01:52,178 --> 00:01:54,067
Anyway, if save this change,

49
00:01:54,067 --> 00:01:55,821
the links become dark red.

50
00:01:56,389 --> 00:01:58,666
We could also remove the underline,

51
00:01:58,666 --> 00:02:01,203
by setting "text-decoration" to "none".

52
00:02:01,769 --> 00:02:03,056
And that's the result.

53
00:02:03,056 --> 00:02:05,396
There's no need to underline those links

54
00:02:05,396 --> 00:02:07,619
because they're in the navigation bar.

55
00:02:08,237 --> 00:02:10,559
However we could show the underline

56
00:02:10,559 --> 00:02:12,217
when the link is focused,

57
00:02:12,217 --> 00:02:14,938
or when the user moves the mouse over it.

58
00:02:15,570 --> 00:02:18,411
So in this case set the "text-decoration"

59
00:02:18,411 --> 00:02:19,796
back to "underline".

60
00:02:20,365 --> 00:02:21,101
And if we save this,

61
00:02:22,198 --> 00:02:24,012
it should underline the links

62
00:02:24,012 --> 00:02:25,512
when we hover over them,

63
00:02:26,074 --> 00:02:28,030
which can help the user a little bit.

64
00:02:28,530 --> 00:02:30,894
Now, those links are still displayed

65
00:02:30,894 --> 00:02:32,141
as a bulleted list,

66
00:02:32,141 --> 00:02:34,242
which is not really what we want

67
00:02:34,242 --> 00:02:35,556
in a navigation bar.

68
00:02:36,252 --> 00:02:37,777
Let's remind ourselves

69
00:02:37,777 --> 00:02:39,994
of the structure of that NavBar.

70
00:02:40,563 --> 00:02:42,217
As you can see here,

71
00:02:42,217 --> 00:02:43,953
there a "ul" element,

72
00:02:43,953 --> 00:02:46,267
that is an "unordered list",

73
00:02:46,267 --> 00:02:49,243
that contains an "li", or list item,

74
00:02:49,243 --> 00:02:51,062
element for each link.

75
00:02:51,893 --> 00:02:54,585
So we want to re-style the "ul" element

76
00:02:55,992 --> 00:02:57,698
to remove the bullet points.

77
00:02:58,198 --> 00:03:00,581
And that can be done by setting

78
00:03:00,581 --> 00:03:02,734
"list-style-type" to "none".

79
00:03:03,311 --> 00:03:05,395
Ok, the bullet points are gone.

80
00:03:05,395 --> 00:03:07,548
But there's still a lot of space

81
00:03:07,548 --> 00:03:08,691
before each link,

82
00:03:09,325 --> 00:03:11,163
Let's remove it by setting

83
00:03:11,163 --> 00:03:12,364
"padding" to "0".

84
00:03:12,935 --> 00:03:13,883
That's better.

85
00:03:13,883 --> 00:03:16,591
Now, we also want to display those links

86
00:03:16,591 --> 00:03:18,013
all in the same line.

87
00:03:18,649 --> 00:03:20,123
So let's go and style

88
00:03:20,123 --> 00:03:21,386
the "li" elements,

89
00:03:21,956 --> 00:03:24,649
and set them to "display: inline".

90
00:03:25,149 --> 00:03:27,016
So they're all on the same row.

91
00:03:27,016 --> 00:03:29,305
But there's no space between them now.

92
00:03:29,866 --> 00:03:31,634
Let's add a bit of a margin,

93
00:03:31,634 --> 00:03:32,771
maybe on the left,

94
00:03:32,771 --> 00:03:34,034
so before each link,

95
00:03:34,661 --> 00:03:38,086
and let's set it to 0.75 rem units.

96
00:03:38,586 --> 00:03:39,903
That's more readable.

97
00:03:39,903 --> 00:03:41,658
Ideally we don't really need

98
00:03:41,658 --> 00:03:43,726
the margin before the first item,

99
00:03:44,351 --> 00:03:46,452
so we could set the margin only

100
00:03:46,452 --> 00:03:48,078
on items that are ":not"

101
00:03:48,645 --> 00:03:49,282
the ":first-"

102
00:03:50,945 --> 00:03:51,716
"child".

103
00:03:54,278 --> 00:03:56,120
So let's set the "margin-left"

104
00:03:56,120 --> 00:03:57,225
only in this case.

105
00:03:57,787 --> 00:03:58,762
And if we save,

106
00:03:58,762 --> 00:04:01,297
the "Home" link is aligned to the left.

107
00:04:01,862 --> 00:04:03,787
Ok, that's enough for this example.

108
00:04:04,287 --> 00:04:05,567
As you probably know,

109
00:04:05,567 --> 00:04:07,641
you can easily spend a lot of time

110
00:04:07,641 --> 00:04:09,166
fiddling with the styles,

111
00:04:09,166 --> 00:04:11,240
to make your app look really nice.

112
00:04:11,923 --> 00:04:13,854
But since this course is not

113
00:04:13,854 --> 00:04:15,441
specifically about CSS,

114
00:04:15,441 --> 00:04:17,786
I'll keep the styles fairly basic.

115
00:04:18,425 --> 00:04:21,053
The important thing to know is that

116
00:04:21,053 --> 00:04:22,933
with Next.js you can have

117
00:04:22,933 --> 00:04:24,135
global CSS files

118
00:04:24,135 --> 00:04:26,389
that apply to your entire app,

119
00:04:27,115 --> 00:04:29,224
simply by importing them

120
00:04:29,224 --> 00:04:31,422
into your "_app.js" file.

121
00:04:32,009 --> 00:04:34,160
In the next video we'll see

122
00:04:34,160 --> 00:04:37,106
how to define component-level styles,

123
00:04:37,106 --> 00:04:39,336
as opposed to global styles.