1
00:00:00.03 --> 00:00:02.01
- [Chris] Hi, this is Chris Converse,

2
00:00:02.01 --> 00:00:04.08
and in this episode, we'll
explore some CSS techniques

3
00:00:04.08 --> 00:00:06.09
for styling text and links in a footer

4
00:00:06.09 --> 00:00:08.06
for multiple screen sizes

5
00:00:08.06 --> 00:00:11.07
without the need for a lot
of extra HTML on our webpage.

6
00:00:11.07 --> 00:00:14.06
Our footer content is divided
into two div elements,

7
00:00:14.06 --> 00:00:16.02
and we'll use these two divs

8
00:00:16.02 --> 00:00:18.01
to style all of the footer content.

9
00:00:18.01 --> 00:00:19.06
So if you'd like to follow along with me,

10
00:00:19.06 --> 00:00:21.01
download the exercise files,

11
00:00:21.01 --> 00:00:25.00
and let's begin by opening
index.html in a text editor.

12
00:00:25.00 --> 00:00:27.02
And once you have the HTML file open,

13
00:00:27.02 --> 00:00:29.03
up in the head area,
you'll see we have a link

14
00:00:29.03 --> 00:00:33.05
to style.css, which we'll
be opening in a few minutes.

15
00:00:33.05 --> 00:00:36.01
If I scroll down inside of the
body area, we have a header,

16
00:00:36.01 --> 00:00:39.05
an article element, and a footer element.

17
00:00:39.05 --> 00:00:41.01
Inside the footer, we have two divs.

18
00:00:41.01 --> 00:00:43.02
There's the first div here, which contains

19
00:00:43.02 --> 00:00:44.07
the copyright information.

20
00:00:44.07 --> 00:00:47.08
There's also a link
around the company name

21
00:00:47.08 --> 00:00:51.02
and two additional links and a break tag.

22
00:00:51.02 --> 00:00:54.05
And in the second div we just
simply have four anchor links.

23
00:00:54.05 --> 00:00:56.02
So I wanna call attention to the fact

24
00:00:56.02 --> 00:00:57.08
that we do have a break tag here,

25
00:00:57.08 --> 00:01:00.06
which we're going to be
turning off for larger screens,

26
00:01:00.06 --> 00:01:02.06
and it's these two div elements
we're going to be targeting

27
00:01:02.06 --> 00:01:06.02
in our CSS in order to style
multiple layouts of the footer.

28
00:01:06.02 --> 00:01:07.07
Now if you'd like to see
the layout we're going to

29
00:01:07.07 --> 00:01:10.07
be starting with, you can
open index.html in a browser.

30
00:01:10.07 --> 00:01:12.08
Inside of our browser,
we can see the footer

31
00:01:12.08 --> 00:01:14.05
showing up down here at the bottom.

32
00:01:14.05 --> 00:01:16.00
Now there's no formatting in place,

33
00:01:16.00 --> 00:01:18.01
so we don't have any
spaces between our links,

34
00:01:18.01 --> 00:01:21.02
and we can see the break tag
pushing the privacy policy

35
00:01:21.02 --> 00:01:23.06
and legal statement on the next line.

36
00:01:23.06 --> 00:01:25.04
And so to begin styling our content,

37
00:01:25.04 --> 00:01:26.09
let's go back to the exercise files,

38
00:01:26.09 --> 00:01:30.03
and let's open style.css
in our text editor.

39
00:01:30.03 --> 00:01:34.06
And now inside of our CSS
file, let's scroll down,

40
00:01:34.06 --> 00:01:35.09
and let's find the rule that targets

41
00:01:35.09 --> 00:01:37.08
all the anchor tags inside of the footer.

42
00:01:37.08 --> 00:01:40.00
After text decoration none,

43
00:01:40.00 --> 00:01:42.07
let's come in here and add a property.

44
00:01:42.07 --> 00:01:46.03
Let's set a margin of
zero pixels on the top,

45
00:01:46.03 --> 00:01:49.03
then a space, 16 pixels on the right,

46
00:01:49.03 --> 00:01:53.01
then a space, zero on the
bottom, and zero on the left.

47
00:01:53.01 --> 00:01:54.06
Add our semicolon.

48
00:01:54.06 --> 00:01:57.00
I'll save my file, reload in the browser.

49
00:01:57.00 --> 00:01:58.08
We'll now see that all of the anchor links

50
00:01:58.08 --> 00:02:01.03
have a 16 pixel margin on the right.

51
00:02:01.03 --> 00:02:03.06
However, the link for the company

52
00:02:03.06 --> 00:02:05.04
has a 16 pixel margin on the right,

53
00:02:05.04 --> 00:02:06.09
and we have a period here.

54
00:02:06.09 --> 00:02:09.03
So we're gonna fix that in a moment.

55
00:02:09.03 --> 00:02:12.07
Back in our CSS after the a, colon, hover,

56
00:02:12.07 --> 00:02:15.09
let's hit a few returns,
and let's set the break tag

57
00:02:15.09 --> 00:02:18.04
so that it does not display,
so that privacy policy

58
00:02:18.04 --> 00:02:20.04
and legal statement
will be on the same line

59
00:02:20.04 --> 00:02:22.00
as the copyright.

60
00:02:22.00 --> 00:02:26.03
So I'll type footer, space,
br for the break tag,

61
00:02:26.03 --> 00:02:28.09
put in our brackets,

62
00:02:28.09 --> 00:02:33.07
let's come in here and
set display to none.

63
00:02:33.07 --> 00:02:35.07
Save our work, go back to the browser.

64
00:02:35.07 --> 00:02:37.00
We can see that these two links

65
00:02:37.00 --> 00:02:38.07
are now showing up on the first line.

66
00:02:38.07 --> 00:02:40.05
Let's go back to our
CSS, and now let's target

67
00:02:40.05 --> 00:02:43.01
the anchor links in the first div element.

68
00:02:43.01 --> 00:02:44.04
We wanna add some margin properties

69
00:02:44.04 --> 00:02:46.04
to the left-hand side of the anchor links.

70
00:02:46.04 --> 00:02:49.08
So I'll start with footer, then a space.

71
00:02:49.08 --> 00:02:51.08
Then we'll use a greater than sign,

72
00:02:51.08 --> 00:02:53.02
then type in div.

73
00:02:53.02 --> 00:02:54.09
We wanna target the divs
that are immediately

74
00:02:54.09 --> 00:02:56.09
inside the footer element.

75
00:02:56.09 --> 00:02:59.01
Then we're gonna use
the nth child selector.

76
00:02:59.01 --> 00:03:03.01
So I'll type a colon, nth dash child,

77
00:03:03.01 --> 00:03:06.06
put in our parentheses, and
then inside of the parentheses,

78
00:03:06.06 --> 00:03:09.02
we'll put a number one to
target the first div element

79
00:03:09.02 --> 00:03:10.09
that's immediately inside of the footer.

80
00:03:10.09 --> 00:03:12.03
Then outside of the parentheses,

81
00:03:12.03 --> 00:03:14.06
let's hit a space, type the letter A,

82
00:03:14.06 --> 00:03:16.05
so we're targeting all of the anchor links

83
00:03:16.05 --> 00:03:19.03
in the first div element,
put in our brackets,

84
00:03:19.03 --> 00:03:22.00
let's split this open, and
let's add a property of margin,

85
00:03:22.00 --> 00:03:24.08
and we'll set the values
to zero on the top,

86
00:03:24.08 --> 00:03:28.00
space, zero on the right,
space, zero on the bottom,

87
00:03:28.00 --> 00:03:30.09
and 12 pixels on the left.

88
00:03:30.09 --> 00:03:32.06
With that in place, we'll hit save,

89
00:03:32.06 --> 00:03:35.02
and now back in the
browser, all of the links

90
00:03:35.02 --> 00:03:38.07
in the first div have a margin
left property of 12 pixels,

91
00:03:38.07 --> 00:03:41.00
and now we'll go back to our CSS file,

92
00:03:41.00 --> 00:03:43.05
and we'll override the
very first anchor link

93
00:03:43.05 --> 00:03:46.05
so that the company name
doesn't have a margin left,

94
00:03:46.05 --> 00:03:48.02
but that privacy policy
and legal statement

95
00:03:48.02 --> 00:03:50.00
will still have the margin settings.

96
00:03:50.00 --> 00:03:53.05
So back in our CSS,
let's create a new rule.

97
00:03:53.05 --> 00:03:55.04
Target footer,

98
00:03:55.04 --> 00:03:57.03
greater than,

99
00:03:57.03 --> 00:03:59.03
div, colon,

100
00:03:59.03 --> 00:04:01.05
nth child,

101
00:04:01.05 --> 00:04:02.09
put in our parentheses,

102
00:04:02.09 --> 00:04:05.00
put a number one inside,

103
00:04:05.00 --> 00:04:07.01
then a space,

104
00:04:07.01 --> 00:04:10.03
then we'll type a colon nth child.

105
00:04:10.03 --> 00:04:12.00
Put in our parentheses.

106
00:04:12.00 --> 00:04:13.08
We'll put a number one
inside of here as well.

107
00:04:13.08 --> 00:04:17.08
So we're targeting the first
anchor link in the first div.

108
00:04:17.08 --> 00:04:19.08
Then a space, put in our brackets.

109
00:04:19.08 --> 00:04:21.01
I'll split these open,

110
00:04:21.01 --> 00:04:23.02
and the first property's gonna be margin.

111
00:04:23.02 --> 00:04:26.06
We're gonna set this to
zero on all four sides,

112
00:04:26.06 --> 00:04:28.08
and then on the next
line, let's come in here

113
00:04:28.08 --> 00:04:31.07
and set a float property to none.

114
00:04:31.07 --> 00:04:33.06
Now we're not using floats at the moment,

115
00:04:33.06 --> 00:04:35.02
but when we get to smaller screens,

116
00:04:35.02 --> 00:04:37.03
we are going to invoke a float property,

117
00:04:37.03 --> 00:04:39.01
and we wanna make sure the company name

118
00:04:39.01 --> 00:04:41.02
doesn't pick up that property as well.

119
00:04:41.02 --> 00:04:43.04
So now with that in place,
let's save our work.

120
00:04:43.04 --> 00:04:45.00
Let's go back to the
browser and hit reload,

121
00:04:45.00 --> 00:04:46.09
and we'll now see that the anchor link

122
00:04:46.09 --> 00:04:49.02
around the company name
has no extra margin

123
00:04:49.02 --> 00:04:52.02
on the right or left, but privacy
policy and legal statement

124
00:04:52.02 --> 00:04:54.01
have a margin on the left,

125
00:04:54.01 --> 00:04:56.02
which is a little different
from the links in the second div

126
00:04:56.02 --> 00:04:58.04
which have the margin
on the right hand side.

127
00:04:58.04 --> 00:05:00.09
And now the last property I
wanna set for the larger screens

128
00:05:00.09 --> 00:05:03.02
is to make the second div spaced out

129
00:05:03.02 --> 00:05:05.03
a little further from the first div.

130
00:05:05.03 --> 00:05:06.09
So back to our CSS,

131
00:05:06.09 --> 00:05:08.09
we'll type footer,

132
00:05:08.09 --> 00:05:10.09
greater than,

133
00:05:10.09 --> 00:05:14.04
div, colon, nth child.

134
00:05:14.04 --> 00:05:16.02
Put in our parentheses.

135
00:05:16.02 --> 00:05:18.02
Inside of the parentheses,
we'll put a number two.

136
00:05:18.02 --> 00:05:20.07
We're gonna target the second div element,

137
00:05:20.07 --> 00:05:22.08
which holds the links for about us,

138
00:05:22.08 --> 00:05:25.01
products, services, and contact us.

139
00:05:25.01 --> 00:05:28.08
Put in our brackets,
we'll split this open,

140
00:05:28.08 --> 00:05:30.07
and we'll come in here
inside of margin property.

141
00:05:30.07 --> 00:05:34.05
We're gonna set 14 pixels on
the top, zero on the right,

142
00:05:34.05 --> 00:05:37.02
zero on the bottom, and zero on the left.

143
00:05:37.02 --> 00:05:39.08
Save our work, and we'll now
see that these four links

144
00:05:39.08 --> 00:05:41.09
are now spacing 14 additional pixels

145
00:05:41.09 --> 00:05:44.00
away from the first div.

146
00:05:44.00 --> 00:05:46.00
So now with these in
place, let's scroll down

147
00:05:46.00 --> 00:05:48.06
and let's make some changes
for when our browser

148
00:05:48.06 --> 00:05:50.07
is under 700 pixels.

149
00:05:50.07 --> 00:05:52.04
So the first thing I'll do is come in here

150
00:05:52.04 --> 00:05:53.08
and change the width of my browser

151
00:05:53.08 --> 00:05:56.04
so that we are under 700 pixels.

152
00:05:56.04 --> 00:05:58.07
So here, we're at about 650.

153
00:05:58.07 --> 00:06:00.04
If you scroll down in the CSS,

154
00:06:00.04 --> 00:06:02.03
I've already put a media query in here

155
00:06:02.03 --> 00:06:04.02
with a max width of 700.

156
00:06:04.02 --> 00:06:06.03
Now the first thing I'm going
to do in this media query

157
00:06:06.03 --> 00:06:08.08
is turn the break tag back on just in case

158
00:06:08.08 --> 00:06:11.00
the legal statement or privacy policy

159
00:06:11.00 --> 00:06:15.00
begin to wrap for the smaller screen.

160
00:06:15.00 --> 00:06:17.08
So inside the media query,
we're gonna type footer, space,

161
00:06:17.08 --> 00:06:20.01
br,

162
00:06:20.01 --> 00:06:21.09
put in our brackets.

163
00:06:21.09 --> 00:06:25.06
We're gonna set a display type of inline.

164
00:06:25.06 --> 00:06:27.08
With that in place, we'll hit save.

165
00:06:27.08 --> 00:06:29.08
We'll now see that privacy
policy and legal statement

166
00:06:29.08 --> 00:06:31.09
now wrap to the next line.

167
00:06:31.09 --> 00:06:33.06
Now we'll need to get
rid of that extra margin

168
00:06:33.06 --> 00:06:35.02
on the left hand side.

169
00:06:35.02 --> 00:06:38.03
So again still inside of the media query

170
00:06:38.03 --> 00:06:40.01
for a max width of 700,

171
00:06:40.01 --> 00:06:43.05
let's now target the anchor
tags inside of the first div.

172
00:06:43.05 --> 00:06:46.08
So footer, space, greater than,

173
00:06:46.08 --> 00:06:50.07
div, colon, nth child.

174
00:06:50.07 --> 00:06:54.02
Put in our parentheses, put in number one,

175
00:06:54.02 --> 00:06:59.02
then a space, then an A,
targeting the anchor tag.

176
00:06:59.02 --> 00:07:01.01
Put in our brackets.

177
00:07:01.01 --> 00:07:02.06
Inside here, the first
property we're gonna set's

178
00:07:02.06 --> 00:07:04.07
gonna be the display type.

179
00:07:04.07 --> 00:07:07.01
We're gonna set the
display to inline block.

180
00:07:07.01 --> 00:07:09.01
This way, we can assign margin properties

181
00:07:09.01 --> 00:07:10.07
to the top and bottom.

182
00:07:10.07 --> 00:07:13.08
Otherwise an anchor tag, which
has a display type of inline,

183
00:07:13.08 --> 00:07:17.00
will not allow us to assign
margins to the top and bottom.

184
00:07:17.00 --> 00:07:19.03
So after display, let's hit a return.

185
00:07:19.03 --> 00:07:23.07
We'll type margin, we're gonna
put 16 pixels on the top.

186
00:07:23.07 --> 00:07:26.09
Space, 12 pixels on the right,

187
00:07:26.09 --> 00:07:29.08
zero on the bottom, and zero on the left.

188
00:07:29.08 --> 00:07:31.08
Save our work, go back to the browser.

189
00:07:31.08 --> 00:07:34.00
Now we can see privacy
policy and legal statement

190
00:07:34.00 --> 00:07:36.06
are spaced a little further
away from the first line

191
00:07:36.06 --> 00:07:38.09
of the copyright, and the
margin left property's

192
00:07:38.09 --> 00:07:40.05
been removed as well.

193
00:07:40.05 --> 00:07:42.05
So at this point, let's
make some more adjustments

194
00:07:42.05 --> 00:07:46.00
for when the browser is
less than 500 pixels wide.

195
00:07:46.00 --> 00:07:49.00
So the first thing I'll do
is adjust my preview here

196
00:07:49.00 --> 00:07:52.01
so that we're at about 470.

197
00:07:52.01 --> 00:07:55.00
Let's come over to the CSS,
scroll down here a little bit.

198
00:07:55.00 --> 00:07:58.04
I have a media query in here
with a maximum width of 500,

199
00:07:58.04 --> 00:08:00.06
and inside of here,
let's start by targeting

200
00:08:00.06 --> 00:08:02.07
all of the anchor tags in the footer.

201
00:08:02.07 --> 00:08:07.03
So footer, greater than, div, space, A.

202
00:08:07.03 --> 00:08:10.04
Put in our brackets.

203
00:08:10.04 --> 00:08:13.02
Inside of here, let's
set a float property.

204
00:08:13.02 --> 00:08:15.04
Let's set the value to left,

205
00:08:15.04 --> 00:08:17.07
and then to make sure each
item shows up on its own line,

206
00:08:17.07 --> 00:08:21.07
let's set a clear
property of left as well.

207
00:08:21.07 --> 00:08:24.00
And then next, let's
set a margin property.

208
00:08:24.00 --> 00:08:27.00
Let's set that to 16 pixels on the top,

209
00:08:27.00 --> 00:08:30.06
zero on the right, zero on the
bottom, and zero on the left.

210
00:08:30.06 --> 00:08:32.09
Now since all of our anchor
links now have float properties,

211
00:08:32.09 --> 00:08:34.06
we're gonna need to clear the floats

212
00:08:34.06 --> 00:08:38.07
on the main div elements.

213
00:08:38.07 --> 00:08:41.00
So for the next rule,
we're gonna type footer,

214
00:08:41.00 --> 00:08:43.00
greater than, div,

215
00:08:43.00 --> 00:08:44.06
two colons.

216
00:08:44.06 --> 00:08:47.04
Let's put in a pseudo-element of after,

217
00:08:47.04 --> 00:08:49.02
then a space.

218
00:08:49.02 --> 00:08:51.02
Put in our brackets.

219
00:08:51.02 --> 00:08:54.08
Let's hit a few returns.

220
00:08:54.08 --> 00:08:57.02
Let's put in content.

221
00:08:57.02 --> 00:09:00.08
Next, two single tick
marks and a semicolon.

222
00:09:00.08 --> 00:09:03.06
So we're setting the content to nothing.

223
00:09:03.06 --> 00:09:07.04
Let's set a display type of block,

224
00:09:07.04 --> 00:09:15.06
and lastly, let's set a
clear property of both.

225
00:09:15.06 --> 00:09:17.07
And then finally, let's add one more rule

226
00:09:17.07 --> 00:09:21.00
to target the second div element.

227
00:09:21.00 --> 00:09:24.01
So I'll type footer, greater than,

228
00:09:24.01 --> 00:09:25.03
div,

229
00:09:25.03 --> 00:09:28.08
colon, nth child.

230
00:09:28.08 --> 00:09:31.04
Put in our parentheses.

231
00:09:31.04 --> 00:09:33.05
Number two.

232
00:09:33.05 --> 00:09:39.00
Space, let's put in our brackets.

233
00:09:39.00 --> 00:09:42.00
Let me scroll up here a little bit.

234
00:09:42.00 --> 00:09:44.02
Now what we wanna do for the second div

235
00:09:44.02 --> 00:09:45.09
is add a rule across the top

236
00:09:45.09 --> 00:09:48.00
and then space this out
a little bit further.

237
00:09:48.00 --> 00:09:49.06
So first, let's start with the spacing.

238
00:09:49.06 --> 00:09:52.01
So we'll do that by
adding a margin property.

239
00:09:52.01 --> 00:09:54.06
We'll add 24 pixels to the top,

240
00:09:54.06 --> 00:09:58.03
zero on the right, zero on the
bottom, and zero on the left.

241
00:09:58.03 --> 00:10:00.06
Next property's padding.

242
00:10:00.06 --> 00:10:02.08
We're gonna set 10 pixels on the top,

243
00:10:02.08 --> 00:10:06.04
zero on the right, zero on the
bottom, and zero on the left.

244
00:10:06.04 --> 00:10:08.07
And then finally, we'll
add a border to the top.

245
00:10:08.07 --> 00:10:10.05
So border dash top,

246
00:10:10.05 --> 00:10:12.01
colon, space,

247
00:10:12.01 --> 00:10:14.04
one pixel for the size,

248
00:10:14.04 --> 00:10:16.05
solid for the style,

249
00:10:16.05 --> 00:10:17.08
then a space,

250
00:10:17.08 --> 00:10:20.00
and then for the color, we'll
use the RGBA color space.

251
00:10:20.00 --> 00:10:23.06
So RGBA, parentheses, semicolon.

252
00:10:23.06 --> 00:10:25.02
Inside of the parentheses,

253
00:10:25.02 --> 00:10:28.04
for red, we're gonna set 95, comma,

254
00:10:28.04 --> 00:10:32.00
87 for green, comma, 75 for blue,

255
00:10:32.00 --> 00:10:36.06
then a comma, and then we'll
set .3 for the alpha setting.

256
00:10:36.06 --> 00:10:38.04
So now with these in
place, save your work,

257
00:10:38.04 --> 00:10:40.05
go back to the browser, hit reload,

258
00:10:40.05 --> 00:10:43.04
and now when the browser's
width is under 500 pixels,

259
00:10:43.04 --> 00:10:46.06
we'll see all of the links
will stack up vertically.

260
00:10:46.06 --> 00:10:48.06
We'll see the rule being
applied to the second div

261
00:10:48.06 --> 00:10:50.06
in the footer element,
and then if we come back

262
00:10:50.06 --> 00:10:52.02
and increase the width of the browser,

263
00:10:52.02 --> 00:10:53.03
we can see the different footer layouts

264
00:10:53.03 --> 00:10:55.03
that we've created with our CSS.

265
00:10:55.03 --> 00:10:57.03
So with minimal structure
in our HTML file,

266
00:10:57.03 --> 00:10:59.03
we were able to modify our footer layout

267
00:10:59.03 --> 00:11:03.09
for multiple screen sizes using only CSS.

268
00:11:03.09 --> 00:11:06.00
Now if you'd like to learn
to build a full webpage

269
00:11:06.00 --> 00:11:09.07
using HTML and CSS that's
responsive across screen sizes

270
00:11:09.07 --> 00:11:11.03
as well as to printed page,

271
00:11:11.03 --> 00:11:13.02
check out Creating a
Responsive Web Design,

272
00:11:13.02 --> 00:11:15.07
which is also available
here in the library.

273
00:11:15.07 --> 00:11:18.02
And with that, I'll conclude this episode,

274
00:11:18.02 --> 00:11:21.02
and as always, thanks for watching.