1
00:00:08,667 --> 00:00:10,041
Hi, in today's lecture,

2
00:00:10,041 --> 00:00:13,290
we're going to talk about styling
your text on your webpages.

3
00:00:13,290 --> 00:00:16,540
One of the best and easiest ways

4
00:00:16,540 --> 00:00:20,640
to really make your page look a little bit
different than the standard default is to

5
00:00:20,640 --> 00:00:24,960
think about how you might wanna style your
text to kind of bring maximum impact.

6
00:00:24,960 --> 00:00:27,440
So many, many options and
we're gonna talk about some of them today.

7
00:00:28,570 --> 00:00:32,140
One of those options is to think
about basically your font.

8
00:00:32,140 --> 00:00:34,960
Some of the things you can style
are the font family, the font style,

9
00:00:34,960 --> 00:00:36,840
the font variant and the font size.

10
00:00:38,220 --> 00:00:42,060
We can also think about styling
the color and background of your font.

11
00:00:42,060 --> 00:00:43,470
We can talk about alignment as well.

12
00:00:44,710 --> 00:00:48,208
And finally, we're going to talk
very briefly about line-height.

13
00:00:48,208 --> 00:00:52,430
These are all four things that you can
do to just really kind of highlight or

14
00:00:52,430 --> 00:00:55,150
emphasize the different things you
would like your style to bring about.

15
00:00:56,250 --> 00:00:58,400
So first let's talk about font family.

16
00:00:58,400 --> 00:01:00,650
Font families are just
different types of text.

17
00:01:00,650 --> 00:01:04,180
So if you've used Word before, you've
gone in, you've gone to font family and

18
00:01:04,180 --> 00:01:07,660
you can pick Arial or Wingdings or
all these different types of fonts.

19
00:01:07,660 --> 00:01:09,362
You can do the same
things on your webpage.

20
00:01:09,362 --> 00:01:13,668
So I've got a couple of examples up
here for you of the more common.

21
00:01:13,668 --> 00:01:20,360
You have Helvetica, Courier, Courier New,
Comic Sans, cursive or Verdana.

22
00:01:20,360 --> 00:01:22,880
I tried to put the font
type here in the slide, but

23
00:01:22,880 --> 00:01:24,360
it might be hard for you to see.

24
00:01:24,360 --> 00:01:28,760
And I kind of did that on purpose, because
what looks obvious to you when you're

25
00:01:28,760 --> 00:01:32,650
designing doesn't always look obvious to
the people who are looking at your page.

26
00:01:32,650 --> 00:01:35,830
I also picked these particular
ones cuz I wanted to show you

27
00:01:35,830 --> 00:01:38,660
that some are a single word,
such as Helvetica.

28
00:01:38,660 --> 00:01:43,758
But Comic Sans MS is multiple words,
so I had to put it inside quotes.

29
00:01:43,758 --> 00:01:45,228
All right.

30
00:01:45,228 --> 00:01:48,400
So how it works is, again,
you use your syntax rule.

31
00:01:48,400 --> 00:01:51,340
You have your selector,
your property, and then your value.

32
00:01:51,340 --> 00:01:54,610
So in this case I've said
whenever you see an h1 heading,

33
00:01:54,610 --> 00:01:59,420
don't use the browser default heading,
instead I want you to use the Arial font.

34
00:01:59,420 --> 00:02:02,410
So it changes the font slightly
to look like this example here.

35
00:02:04,070 --> 00:02:07,540
Now every single browser
doesn't support everything.

36
00:02:07,540 --> 00:02:09,340
We've seen this even with HTML 5.

37
00:02:09,340 --> 00:02:12,000
Some browsers support some text,
some don't.

38
00:02:12,000 --> 00:02:15,970
In the same way some browsers support
some fonts and others don't as well.

39
00:02:15,970 --> 00:02:18,860
So what you can do is you
can provide alternatives.

40
00:02:18,860 --> 00:02:22,690
In this example, I've given the browser
three different alternatives to use.

41
00:02:22,690 --> 00:02:23,680
I'm basically saying,

42
00:02:23,680 --> 00:02:28,070
whenever you come up to an h1 tag,
I really want you to use the Courier font.

43
00:02:28,070 --> 00:02:32,280
But if you don't have the Courier font,
go ahead and use the Impact font.

44
00:02:32,280 --> 00:02:35,480
If you don't have that one,
go ahead and use Arial.

45
00:02:35,480 --> 00:02:37,940
Now, one of questions you
might ask yourself is,

46
00:02:37,940 --> 00:02:40,300
what if it doesn't have
any three of these fonts?

47
00:02:40,300 --> 00:02:42,660
It doesn't have Courier, Impact, or Arial.

48
00:02:42,660 --> 00:02:43,870
Well, if you remember,

49
00:02:43,870 --> 00:02:48,700
when we first talked about cascading style
sheets, we said if you give it a rule and

50
00:02:48,700 --> 00:02:52,100
it can't support it, it will always
go back to the browser default.

51
00:02:52,100 --> 00:02:55,530
So you don't need to worry
about font disappearing because

52
00:02:55,530 --> 00:02:56,930
you gave it a bad font family.

53
00:02:56,930 --> 00:02:57,990
It'll always come through.

54
00:02:59,820 --> 00:03:01,340
So when you pick your font families,

55
00:03:01,340 --> 00:03:03,180
there's a few things
you should think about.

56
00:03:03,180 --> 00:03:05,313
The first one is maybe the most important,

57
00:03:05,313 --> 00:03:08,390
is some fonts are much more
user friendly than others.

58
00:03:08,390 --> 00:03:10,010
There are basically two categories.

59
00:03:10,010 --> 00:03:13,330
You have serif fonts and sans-serif fonts.

60
00:03:13,330 --> 00:03:18,050
The serif fonts are the ones that have
the kind of the fancy edges along the side

61
00:03:18,050 --> 00:03:21,460
that you used when you were learning
calligraphy or different things like that.

62
00:03:21,460 --> 00:03:24,820
The sans-serif fonts are very clean,
there's no drop downs or

63
00:03:24,820 --> 00:03:26,000
anything like that.

64
00:03:26,000 --> 00:03:29,290
So when it comes time for
someone to blow your page up,

65
00:03:29,290 --> 00:03:33,090
kind of really go in and
I'm trying to think of the right word,

66
00:03:33,090 --> 00:03:35,370
when they wanna go in, and
they wanna make it look bigger.

67
00:03:35,370 --> 00:03:38,990
Serif fonts can really get messy,
so avoid those whenever possible.

68
00:03:40,360 --> 00:03:43,200
I personally don't use
custom fonts myself, but

69
00:03:43,200 --> 00:03:45,310
I've never been an artsy type of person.

70
00:03:45,310 --> 00:03:48,200
So if you do decide that you
wanna have your own font, or

71
00:03:48,200 --> 00:03:51,090
some sort of special web-safe custom font,

72
00:03:51,090 --> 00:03:54,410
you need to use something special
here called a font-face rule.

73
00:03:54,410 --> 00:03:57,150
And what we do, is you can see in
the first example, you say, hey,

74
00:03:57,150 --> 00:03:59,260
I'm gonna define my own font-face.

75
00:03:59,260 --> 00:04:01,410
I'm gonna happen to call it mySpecialFont.

76
00:04:01,410 --> 00:04:05,470
You can call it anything you want to call
it, and then you need to give it a source.

77
00:04:05,470 --> 00:04:08,040
So that source,
this is a new one you haven't seen before.

78
00:04:08,040 --> 00:04:11,270
We're not using href,
we're not using source, we're using url.

79
00:04:11,270 --> 00:04:15,060
And the url says this is
where you can find the file

80
00:04:15,060 --> 00:04:16,455
that defines my special font.

81
00:04:16,455 --> 00:04:20,250
And once you do that,
once you write the font face rule once,

82
00:04:20,250 --> 00:04:23,910
throughout the rest of your style sheet
you can go ahead and reference it.

83
00:04:23,910 --> 00:04:28,660
So now every time I use an h1 font,
you're gonna use mySpecialFont.

84
00:04:28,660 --> 00:04:30,730
So now let's talk about font style.

85
00:04:30,730 --> 00:04:32,910
It's a much fancier word
than you might expect, but

86
00:04:32,910 --> 00:04:35,630
we're simply talking about do you
want your font to look normal,

87
00:04:35,630 --> 00:04:38,820
which is the default, or
do you want it to be italic?

88
00:04:38,820 --> 00:04:43,060
Or do you want it to be oblique, which is
basically just a special kind of italic.

89
00:04:43,060 --> 00:04:47,034
So normal font will happen no matter
what if it's just how it's going to be.

90
00:04:47,034 --> 00:04:50,622
If someone else has written a style sheet
and they've made it all italic, that's

91
00:04:50,622 --> 00:04:54,277
when you might want to say, no, no, I'm
going to overwrite it and make it normal.

92
00:04:54,277 --> 00:05:00,570
Italic is always a certain kind of lean,
basically, to your font.

93
00:05:00,570 --> 00:05:03,580
An oblique is when you really
want to be extra special and

94
00:05:03,580 --> 00:05:06,600
define exactly what angle you want
to have your text lean towards.

95
00:05:08,930 --> 00:05:11,620
The font variant,
we really only have two options here.

96
00:05:11,620 --> 00:05:14,620
We have normal and we have small-caps.

97
00:05:14,620 --> 00:05:18,120
People use this quite a bit when they're
trying to do very consistent and

98
00:05:18,120 --> 00:05:20,270
yet somewhat fancy look to it.

99
00:05:20,270 --> 00:05:25,370
So here I've said again, always using h1,
I want my font variant to be small-caps.

100
00:05:25,370 --> 00:05:29,230
So now when you look at my text,
my h1 text down at the bottom,

101
00:05:29,230 --> 00:05:31,970
I've written <h1>Small caps variation.

102
00:05:31,970 --> 00:05:36,320
But when the browser displays it,
it's going to display it in small caps.

103
00:05:36,320 --> 00:05:38,400
So this keeps you from
having to go back and

104
00:05:38,400 --> 00:05:42,165
forth to remembering to change all
your text to uppercase or lowercase.

105
00:05:42,165 --> 00:05:47,550
It doesn't matter how you write it, the
browser will always show it in uppercase.

106
00:05:47,550 --> 00:05:51,400
Now font size is something that we'll be
talking about pretty much throughout this

107
00:05:51,400 --> 00:05:54,260
entire course and in other courses
we're going to be doing as well,

108
00:05:54,260 --> 00:05:58,605
such as responsive design, because it's
really a lot of different ways to do it.

109
00:05:58,605 --> 00:06:01,025
So let's just start with the most basic.

110
00:06:01,025 --> 00:06:05,087
Your options are, you can use font
size equals extra-extra-small,

111
00:06:05,087 --> 00:06:07,835
extra-small, small, and smaller.

112
00:06:07,835 --> 00:06:09,875
I don't really like those very much,

113
00:06:09,875 --> 00:06:12,935
because it doesn't really
give me a frame of reference.

114
00:06:12,935 --> 00:06:17,800
You can have medium, you can have large,
extra-large, xx-large, and larger.

115
00:06:17,800 --> 00:06:21,400
Very few people use these options,
but they're out there so

116
00:06:21,400 --> 00:06:23,080
I wanted to tell you what they were.

117
00:06:23,080 --> 00:06:26,360
Instead, what many people
use is they use pixels.

118
00:06:26,360 --> 00:06:29,530
So, I'm gonna include on the website
this nice kind of table for

119
00:06:29,530 --> 00:06:32,940
you that relates how many pixels to
an inch, how many pixels to picos, so

120
00:06:32,940 --> 00:06:34,030
you can get a feel for it.

121
00:06:34,030 --> 00:06:38,520
But most people do something along the
lines of 20 pixels, 35 pixels, 80 pixels.

122
00:06:38,520 --> 00:06:41,490
And this is a very consistent look and

123
00:06:41,490 --> 00:06:44,950
it's something that people can kind
of feel what it should look like.

124
00:06:44,950 --> 00:06:48,400
However, I tend to use
percentages instead.

125
00:06:48,400 --> 00:06:52,339
Percentages are going to allow us to
change the font size as we resize

126
00:06:52,339 --> 00:06:54,077
the screen much more easily.

127
00:06:54,077 --> 00:06:57,897
So if you were to say use 100%
it's going to be the default size.

128
00:06:57,897 --> 00:07:02,080
If you say use 110% it
will be slightly larger.

129
00:07:02,080 --> 00:07:07,540
If you were to use 75%,
it'd be three-quarters the size.

130
00:07:07,540 --> 00:07:10,370
Next, let's talk about color and
background color.

131
00:07:10,370 --> 00:07:13,860
The color attribute is the color of the
foreground, which is the fancy word for

132
00:07:13,860 --> 00:07:15,146
just the text itself.

133
00:07:15,146 --> 00:07:15,849
All right.

134
00:07:15,849 --> 00:07:19,840
The background-color is the color of
the background behind the font that

135
00:07:19,840 --> 00:07:20,900
we're looking at.

136
00:07:20,900 --> 00:07:25,470
And depending on what kind of text you're
styling, it can look very different.

137
00:07:25,470 --> 00:07:28,620
So, here I've done one rule, and
you haven't seen this before.

138
00:07:28,620 --> 00:07:31,170
I'm going to go ahead and
style two different selectors.

139
00:07:31,170 --> 00:07:32,610
I'm going to style h1 and span.

140
00:07:32,610 --> 00:07:35,477
So if you put a comma right there,
I've got it right here,

141
00:07:35,477 --> 00:07:38,983
between the h1 and the span, you can
put as many commas as you want, and

142
00:07:38,983 --> 00:07:41,260
write as many selectors as you want.

143
00:07:41,260 --> 00:07:44,070
In this case I've said, hey,
I want my color to be blue,

144
00:07:44,070 --> 00:07:46,300
and I want my background color to be gray.

145
00:07:46,300 --> 00:07:50,100
And if you're not sure where
these strange numbers came from,

146
00:07:50,100 --> 00:07:51,380
go watch the colors video.

147
00:07:51,380 --> 00:07:53,430
It'll explain everything for you there.

148
00:07:53,430 --> 00:07:58,520
So now I've gone in, and in my HTML,
I have colors in an h1 tag,

149
00:07:58,520 --> 00:08:00,650
and I have the word
inline inside a span tag.

150
00:08:00,650 --> 00:08:04,620
And what I want you to notice is that for
the h1,

151
00:08:04,620 --> 00:08:09,410
the block element, the background color
covers the whole width of the page.

152
00:08:09,410 --> 00:08:11,450
But for span, for inline elements,

153
00:08:11,450 --> 00:08:16,050
the background color only goes around
just the element and the text itself.

154
00:08:18,130 --> 00:08:20,650
Next let's talk about aligning text.

155
00:08:20,650 --> 00:08:22,030
Aligning text is simple.

156
00:08:22,030 --> 00:08:24,400
It's probably one of the easiest
things you can do in HTML.

157
00:08:24,400 --> 00:08:26,060
And you're gonna be really happy.

158
00:08:26,060 --> 00:08:29,440
Because later when you decide you want
to align other things, it's so hard and

159
00:08:29,440 --> 00:08:31,670
you're just gonna want to
put everything in text.

160
00:08:31,670 --> 00:08:35,360
So your options are when you use
text align you can use left,

161
00:08:35,360 --> 00:08:37,310
which means just align
the text to the left.

162
00:08:37,310 --> 00:08:39,220
That's what we do already.

163
00:08:39,220 --> 00:08:44,084
You can have right, which means align
everything to the right, center, and

164
00:08:44,084 --> 00:08:45,750
justify.

165
00:08:45,750 --> 00:08:49,010
Center everything as much as you,
along the middle of that division.

166
00:08:49,010 --> 00:08:52,970
Justify tries to spread it out to
use as much space as possible.

167
00:08:52,970 --> 00:08:55,870
So let me show you some examples cuz
that's really the best way to understand

168
00:08:55,870 --> 00:08:56,700
what's going on here.

169
00:08:58,080 --> 00:08:59,860
Here I've got a left alignment.

170
00:08:59,860 --> 00:09:03,430
Everything lines up along
the left hand side of the screen.

171
00:09:04,890 --> 00:09:07,920
The next one I've used
text in line equals right.

172
00:09:07,920 --> 00:09:10,170
And you can see that everything
is lined up to to the right.

173
00:09:10,170 --> 00:09:11,290
It looks really weird.

174
00:09:11,290 --> 00:09:13,670
There's very few reasons
you're gonna use this.

175
00:09:13,670 --> 00:09:16,660
Unless you have something else
kind of going along in the side

176
00:09:16,660 --> 00:09:18,230
in the middle here.

177
00:09:18,230 --> 00:09:20,170
The next one we're going to do is center.

178
00:09:21,180 --> 00:09:22,450
People use center quite a bit.

179
00:09:22,450 --> 00:09:26,225
They almost use it too much, but it is a
nice way to kind of break up your text and

180
00:09:26,225 --> 00:09:28,135
have it look a little bit different.

181
00:09:28,135 --> 00:09:32,965
So justify is really hard to explain,
and even when you first look at it,

182
00:09:32,965 --> 00:09:34,845
you might not notice what's going on.

183
00:09:34,845 --> 00:09:38,789
But with justify, the browser is
putting in little bits of extra space

184
00:09:40,320 --> 00:09:44,860
to kinda help you spread it out so it has
the exact same width all the way along.

185
00:09:44,860 --> 00:09:47,970
So I'm gonna show you
the justified with the left.

186
00:09:47,970 --> 00:09:50,420
And I think that's the best way
to kinda see the difference,

187
00:09:50,420 --> 00:09:53,690
is that you basically don't
have the empty space here.

188
00:09:53,690 --> 00:09:57,360
They've kinda spread it out over here, so
no one place has too much blank space.

189
00:09:59,010 --> 00:10:00,760
Next we're gonna talk about line height,
and

190
00:10:00,760 --> 00:10:05,610
line height is really different because
it's not affecting the font itself.

191
00:10:05,610 --> 00:10:07,350
It's not affecting your text.

192
00:10:07,350 --> 00:10:10,800
It's affecting how much
space is around your text.

193
00:10:10,800 --> 00:10:12,699
Some of you may have used Word before, and

194
00:10:12,699 --> 00:10:15,480
you can go and just how much
space there is between the lines.

195
00:10:15,480 --> 00:10:18,640
Maybe you want it to be one line,
one and a half lines, double spaced.

196
00:10:18,640 --> 00:10:20,170
That's what we're talking about here.

197
00:10:20,170 --> 00:10:22,410
So my first example I said
line-height equal 50%.

198
00:10:22,410 --> 00:10:26,730
And the next one I said
line-height equals 200%.

199
00:10:26,730 --> 00:10:30,680
So, in the first rule, that's kind of
a weird rule to write because I'm saying I

200
00:10:30,680 --> 00:10:33,030
want things to overlap with each other.

201
00:10:33,030 --> 00:10:36,360
In the second rule I'm saying I
want you to really spread out far.

202
00:10:36,360 --> 00:10:40,080
Oops, all right, I'm going to go ahead and
put an example later online where I can

203
00:10:40,080 --> 00:10:42,660
show you exactly how
these things would look.

204
00:10:42,660 --> 00:10:45,690
Or even better, I'm just going to
turn this into a teachable moment and

205
00:10:45,690 --> 00:10:47,520
have you go in there and
type it yourself and

206
00:10:47,520 --> 00:10:50,330
look at how these two different
rules affect the text.

207
00:10:52,070 --> 00:10:53,160
So let's review.

208
00:10:53,160 --> 00:10:57,310
I know I went over a lot of things,
and it can be overwhelming.

209
00:10:57,310 --> 00:11:01,085
So one of the most important things is
with everything we do in this course,

210
00:11:01,085 --> 00:11:05,800
is take five, ten minutes, type some stuff
in, take a look and see what happens.

211
00:11:05,800 --> 00:11:07,570
Make as many mistakes as you can,

212
00:11:07,570 --> 00:11:10,420
because this is the time to make mistakes,
when you've got me and

213
00:11:10,420 --> 00:11:14,007
the rest of the crowd here to answer
the questions on the different boards.

214
00:11:15,100 --> 00:11:17,020
Practice on toy problems.

215
00:11:17,020 --> 00:11:20,360
Don't make a huge webpage and
try to style it.

216
00:11:20,360 --> 00:11:24,250
Create a page with three or four
paragraphs, a couple links, and practice

217
00:11:24,250 --> 00:11:27,810
on those, because it doesn't matter,
you don't need to practice on a big page,

218
00:11:27,810 --> 00:11:31,290
you can practice on the small problems and
it really makes a big difference.

219
00:11:33,230 --> 00:11:37,300
And finally, if you decide that you're
ready to code and you are ready to do that

220
00:11:37,300 --> 00:11:41,310
large project, make sure you design
your larger projects on paper first.

221
00:11:41,310 --> 00:11:45,650
I can't stress enough that if you start
coding and styling without really having

222
00:11:45,650 --> 00:11:49,150
a clear plan,
you're just gonna get very frustrated and

223
00:11:49,150 --> 00:11:51,830
hopefully, not hopefully, you'll get
very frustrated and you'll quit.

224
00:11:51,830 --> 00:11:53,130
And I don't want you to do that.

225
00:11:53,130 --> 00:11:56,030
So plan all your projects on paper first.

226
00:11:56,030 --> 00:11:59,080
If you follow these suggestions,
if you practice, practice,

227
00:11:59,080 --> 00:12:03,660
if you do toy problems, if before you jump
into big problems you sketch it out first,

228
00:12:03,660 --> 00:12:04,780
I think you're gonna have a lot of fun,
and

229
00:12:04,780 --> 00:12:07,110
you're gonna have a really great
page that you're gonna be proud of.