1
00:00:08,604 --> 00:00:09,420
Hi.

2
00:00:09,420 --> 00:00:13,630
Welcome to our first truly technical
lecture in our CSS course.

3
00:00:13,630 --> 00:00:15,360
It's about adding style to your pages.

4
00:00:16,370 --> 00:00:19,310
If you've come to this course
with me from our HTML course,

5
00:00:19,310 --> 00:00:23,050
you know that I know that you
can make general HTML files.

6
00:00:23,050 --> 00:00:26,240
But up til now,
you may not have styled them at all.

7
00:00:26,240 --> 00:00:29,570
What I want you to know before we even
begin styling, and you start putting your

8
00:00:29,570 --> 00:00:34,520
own little twists on the pages, is that
the same HTML file may look different

9
00:00:34,520 --> 00:00:38,180
when viewed on different browsers,
and there's a few reasons for that.

10
00:00:38,180 --> 00:00:42,540
First, some tags aren't supported in
some browsers while they are in others.

11
00:00:42,540 --> 00:00:46,830
So if you've ever used the details tag,
you can see that sometimes your page will

12
00:00:46,830 --> 00:00:50,760
have little arrows or different little
markings on them and other times it won't.

13
00:00:50,760 --> 00:00:53,110
So that comes down to
tags that are supported.

14
00:00:53,110 --> 00:00:58,330
But also, every single browser has
its own different default style.

15
00:00:58,330 --> 00:01:03,150
And what that default style says is this
is how I want my H1 headings to look, or

16
00:01:03,150 --> 00:01:06,230
this is how much padding I
want around my paragraphs.

17
00:01:06,230 --> 00:01:10,060
So if you go to the exact same page on
different browsers, it may be hard to

18
00:01:10,060 --> 00:01:14,460
tell, but you'll see tiny little
differences in how things are made.

19
00:01:14,460 --> 00:01:17,490
But in general,
this default look is really plain.

20
00:01:17,490 --> 00:01:20,760
And most people I know,
they don't want their pages to look plain.

21
00:01:20,760 --> 00:01:22,500
They want to put in some style.

22
00:01:22,500 --> 00:01:25,894
So let's begin looking
at ways you can do this.

23
00:01:25,894 --> 00:01:30,520
One way to add style is to think about
adding it directly into the text.

24
00:01:30,520 --> 00:01:36,120
Now as HTML evolved, we went from having
tags that were distinctly about color,

25
00:01:36,120 --> 00:01:38,310
and about different centering,
and things like that.

26
00:01:38,310 --> 00:01:42,170
To saying no, no, we don't want
tags that have to do with style.

27
00:01:42,170 --> 00:01:44,500
We only want tags that
have to do with content.

28
00:01:44,500 --> 00:01:48,460
People said, okay, we can do that,
but I want to make it pretty.

29
00:01:48,460 --> 00:01:51,720
So how they did this is they
added style attributes.

30
00:01:51,720 --> 00:01:56,080
So in this case I've taken an h1 tag and
added the style attribute and

31
00:01:56,080 --> 00:01:57,670
simply said "color:blue".

32
00:01:57,670 --> 00:02:02,960
And what this is going to do is it's
going to make this particular h1 heading

33
00:02:02,960 --> 00:02:04,520
have blue font to it.

34
00:02:04,520 --> 00:02:05,730
So it's very simple.

35
00:02:05,730 --> 00:02:09,920
It's a nice way to just go in and
add simple styling to your page.

36
00:02:09,920 --> 00:02:13,590
However, this still
kind of breaks our rule

37
00:02:13,590 --> 00:02:16,070
of wanting to separate content from style.

38
00:02:16,070 --> 00:02:18,550
Because if you want to change it to,
say, red or green or

39
00:02:18,550 --> 00:02:21,030
something like that later,
you're going to have to go in and

40
00:02:21,030 --> 00:02:24,220
change the tag, because you're going
to have to change the attribute.

41
00:02:24,220 --> 00:02:28,980
So I really tried to go out of my way
to not use this at all, and instead,

42
00:02:28,980 --> 00:02:31,130
get in the habit of doing
things the right way.

43
00:02:31,130 --> 00:02:35,400
And the right way to style
your pages is to use CSS.

44
00:02:35,400 --> 00:02:40,240
Cascading style sheets are basically a way
for you to write rules that say how you

45
00:02:40,240 --> 00:02:44,120
want to style all the paragraphs, or how
you want to style all your headings, or

46
00:02:44,120 --> 00:02:46,430
how you want to style some of your images.

47
00:02:46,430 --> 00:02:47,360
It's a really nice,

48
00:02:47,360 --> 00:02:51,640
specific way that everyone can follow
to make these styling choices.

49
00:02:51,640 --> 00:02:53,532
And the rules are set up like this.

50
00:02:53,532 --> 00:02:55,661
First you have to put up your selector,
and

51
00:02:55,661 --> 00:02:59,720
selector is just kind of a fancy way
of saying what it is you want to style.

52
00:02:59,720 --> 00:03:02,260
In our case, we'll start off
by just giving the selector

53
00:03:02,260 --> 00:03:04,300
different tag names such as h1 or
paragraph.

54
00:03:05,350 --> 00:03:07,230
Once you find which tag
it is you want to style,

55
00:03:07,230 --> 00:03:09,840
you say which property it
is you want to change.

56
00:03:09,840 --> 00:03:13,440
So we can look at things such as color,
background color,

57
00:03:13,440 --> 00:03:16,330
how much space we put around it,
we're gonna cover all of those.

58
00:03:16,330 --> 00:03:19,830
But for right now, we're gonna start
off really simple and deal with colors.

59
00:03:19,830 --> 00:03:22,120
Then, you have to give
each property a value,

60
00:03:22,120 --> 00:03:24,820
saying which color you want it to be.

61
00:03:24,820 --> 00:03:27,470
So, on one side, we have the very generic,
how we write a rule.

62
00:03:27,470 --> 00:03:30,960
And on the other, I've written
a very specific rule that says, hey,

63
00:03:30,960 --> 00:03:35,580
whenever you see an h1 heading,
I want you to make the font color blue.

64
00:03:35,580 --> 00:03:38,970
So we've done exactly what we did
when we embedded using the style tag,

65
00:03:38,970 --> 00:03:43,710
but now it's very generic, and we're
not talking about a specific heading.

66
00:03:43,710 --> 00:03:46,230
We're not talking about a specific tag.

67
00:03:46,230 --> 00:03:50,250
So, when you write those rules,
the syntax is very important.

68
00:03:50,250 --> 00:03:53,390
A lot of times, when you write HTML,
the browser is really nice to you and

69
00:03:53,390 --> 00:03:55,590
if you forget to close a tag it says,
that's okay,

70
00:03:55,590 --> 00:03:59,400
I know what she wants me to do and
it'll go ahead and put the page up anyway.

71
00:03:59,400 --> 00:04:00,580
When you're doing CSS,

72
00:04:00,580 --> 00:04:04,470
if you're sloppy with what we call your
syntax, you're going to get in trouble.

73
00:04:04,470 --> 00:04:07,420
So, the brackets and
the semicolons are very important.

74
00:04:07,420 --> 00:04:09,550
So, let me show you again
when we go back here,

75
00:04:09,550 --> 00:04:12,340
you can see that I've got
a beginning bracket and

76
00:04:12,340 --> 00:04:15,860
a closing bracket, and
I've got this semicolon right at the end.

77
00:04:15,860 --> 00:04:17,580
You need to remember to include those.

78
00:04:18,600 --> 00:04:22,520
And one of the reasons I talk about this
is that when you start writing your code,

79
00:04:22,520 --> 00:04:26,460
when you pick a good editor, and most
editors are pretty good, such as Sublime

80
00:04:26,460 --> 00:04:31,690
or TextWrangler, TextEdit, Notepad++,
they will put colors in for you.

81
00:04:31,690 --> 00:04:33,700
So all of a sudden if you're
looking at your CSS rules and

82
00:04:33,700 --> 00:04:37,230
you're like, woah, I kind of expected
things to be different colors, but

83
00:04:37,230 --> 00:04:40,310
instead everything's white or
everything's red.

84
00:04:40,310 --> 00:04:44,100
It kind of gives you this hint that
you've messed up on your rule syntax.

85
00:04:44,100 --> 00:04:48,340
In the same line, I just kinda wanna throw
in here that when you're writing your rule

86
00:04:48,340 --> 00:04:50,950
you can put comments in to
kinda help you debug and

87
00:04:50,950 --> 00:04:53,190
help you explain to
yourself what you're going.

88
00:04:53,190 --> 00:04:54,940
And this is how comments are done in CSS.

89
00:04:54,940 --> 00:05:00,228
You just do the /*, */ again.

90
00:05:00,228 --> 00:05:03,950
So what happens if you want to
do more than just one property?

91
00:05:03,950 --> 00:05:06,700
What if instead of saying just
you want the color to be blue,

92
00:05:06,700 --> 00:05:09,210
you also want the background
color to be yellow?

93
00:05:09,210 --> 00:05:10,340
Well, no problem.

94
00:05:10,340 --> 00:05:13,560
You can have as many property
value combinations as you want.

95
00:05:13,560 --> 00:05:17,320
You just need to remember to
separate them with semicolons.

96
00:05:17,320 --> 00:05:18,500
So in this case, again,

97
00:05:18,500 --> 00:05:21,450
I've set the color to blue and
the background color to yellow.

98
00:05:21,450 --> 00:05:23,960
All right so

99
00:05:23,960 --> 00:05:27,800
now that you know how to write a rule
how do we actually get them to work?

100
00:05:27,800 --> 00:05:29,120
Well there's two ways and

101
00:05:29,120 --> 00:05:32,740
the first way I'm gonna tell you about
is called using an Internal Style Sheet.

102
00:05:32,740 --> 00:05:36,970
So as you can see over here in my code,
I've got the basic template of our file.

103
00:05:36,970 --> 00:05:41,630
And inside the head tags,
I've put this style tag in, that's where

104
00:05:41,630 --> 00:05:45,740
you're going to want to put your rules,
they're defined right within that style.

105
00:05:45,740 --> 00:05:49,850
So now, inside the style tag,
I've added the h1, the color blue, and

106
00:05:49,850 --> 00:05:51,760
I've ended my style tag.

107
00:05:51,760 --> 00:05:56,260
So what happens now is that when
the browser opens your page,

108
00:05:56,260 --> 00:05:58,220
it gets to the head section it says,
oh great,

109
00:05:58,220 --> 00:06:00,850
she wrote some rules,
let's see what she wants me to do.

110
00:06:00,850 --> 00:06:03,350
And it's gonna know to
go through your page and

111
00:06:03,350 --> 00:06:05,540
apply this rule to all the H1 tags.

112
00:06:05,540 --> 00:06:09,920
And if you have multiple rules including
paragraphs, images, things like that,

113
00:06:09,920 --> 00:06:14,500
it's gonna know, I want to apply this
to all instances in the entire file.

114
00:06:14,500 --> 00:06:15,240
Okay.

115
00:06:15,240 --> 00:06:19,570
Now there's a really good chance you're
gonna mess up because I do this 80% of

116
00:06:19,570 --> 00:06:22,280
the time when I'm developing in class, and

117
00:06:22,280 --> 00:06:25,630
what I do is I forget to
close this style tag.

118
00:06:25,630 --> 00:06:28,300
And if you forget to close that
style tag down at the bottom,

119
00:06:28,300 --> 00:06:31,470
well actually your page
may end up being blank.

120
00:06:31,470 --> 00:06:35,410
So don't freak out when you first start
doing this if your page is blank,

121
00:06:35,410 --> 00:06:38,270
it probably means you forgot
to close the style tag.

122
00:06:38,270 --> 00:06:38,830
All right.

123
00:06:38,830 --> 00:06:41,440
So, internal style sheets are really nice

124
00:06:41,440 --> 00:06:42,810
when you're just trying
to style up one page.

125
00:06:42,810 --> 00:06:44,250
All right?

126
00:06:44,250 --> 00:06:48,180
And I often do it just so I can keep all
my code in one file instead of going back

127
00:06:48,180 --> 00:06:50,080
and forth and back and forth.

128
00:06:50,080 --> 00:06:54,415
But Imagine that you have site where
you're gonna have 10,20, a 1,000

129
00:06:54,415 --> 00:06:58,325
different pages and you want them all to
have a very consistent look about them.

130
00:06:58,325 --> 00:07:01,315
You don't wanna have to go in and
say if you want to change a color,

131
00:07:01,315 --> 00:07:04,035
you don't wanna have to go in and
open every single one of those files so

132
00:07:04,035 --> 00:07:06,405
you can change the color to red or green.

133
00:07:06,405 --> 00:07:09,465
Instead what you want to use is
you want to use something called

134
00:07:09,465 --> 00:07:10,585
external style sheets.

135
00:07:12,170 --> 00:07:15,980
The way it works with an external
style sheet is that you put your rules

136
00:07:15,980 --> 00:07:16,890
in a different file.

137
00:07:16,890 --> 00:07:18,340
So you open up a file,

138
00:07:18,340 --> 00:07:24,620
you're gonna save it something such as
like mystyle with a .css file extension.

139
00:07:24,620 --> 00:07:29,200
So now the browser knows,
oh everything in HTML, that's the content.

140
00:07:29,200 --> 00:07:32,250
Everything in .css, that's the layout.

141
00:07:32,250 --> 00:07:36,250
Now, when you make your external style
sheet, it looks just like we just did

142
00:07:36,250 --> 00:07:38,730
in the internal, except for
you don't use a style tag.

143
00:07:40,270 --> 00:07:43,190
Then, once you've put your
rules in a separate file,

144
00:07:43,190 --> 00:07:46,210
all you need to do is add
a link into the head section.

145
00:07:46,210 --> 00:07:47,620
So in this case, I've gone in,

146
00:07:47,620 --> 00:07:51,520
I've put my link, I need to let it know
the relationship cuz of the style sheet.

147
00:07:51,520 --> 00:07:54,640
And you have to remember
to put the file name.

148
00:07:54,640 --> 00:07:57,530
so once again this is where it's
going to be really important

149
00:07:57,530 --> 00:08:00,860
that you're naming things in ways
that they make since to you.

150
00:08:00,860 --> 00:08:04,050
You can link to as many different
style sheets as you want,

151
00:08:04,050 --> 00:08:05,620
most of the time we start with one.

152
00:08:07,230 --> 00:08:10,330
So Now that we've had that style sheet,

153
00:08:10,330 --> 00:08:14,690
every single file that links to it
will all share that style sheet.

154
00:08:14,690 --> 00:08:17,820
So remember when I mentioned that
you might have a site with 10, 20,

155
00:08:17,820 --> 00:08:21,970
1000 pages to it and you decide to change
that color from blue to red or green or

156
00:08:21,970 --> 00:08:22,770
something like that?

157
00:08:22,770 --> 00:08:23,640
This is great.

158
00:08:23,640 --> 00:08:28,750
All you need to do is open up style.css,
change one line of code, and

159
00:08:28,750 --> 00:08:32,960
you've now just changed potentially
thousands of pages Okay,

160
00:08:32,960 --> 00:08:37,090
so let's talk for a second about
this idea of cascading style sheets.

161
00:08:37,090 --> 00:08:39,400
What does it mean that we're cascading?

162
00:08:39,400 --> 00:08:43,300
Well, when the browser goes to make your
page, the first thing it's gonna look at

163
00:08:43,300 --> 00:08:46,550
is go, all right,
maybe they're not telling me anything.

164
00:08:46,550 --> 00:08:48,610
How do I normally make h1 headings?

165
00:08:48,610 --> 00:08:50,630
How big do I make that font?

166
00:08:50,630 --> 00:08:52,700
Have its own kind of default values.

167
00:08:52,700 --> 00:08:56,240
But then it goes and it looks and it says,
oh are there any external style sheets.

168
00:08:56,240 --> 00:09:00,010
Because if so, I'm gonna
overwrite my browser defaults and

169
00:09:00,010 --> 00:09:03,790
put in the rules that are in this
external style sheet instead.

170
00:09:03,790 --> 00:09:06,720
Next it's going to check for
internal style.

171
00:09:06,720 --> 00:09:08,930
That style you have in the head section.

172
00:09:08,930 --> 00:09:12,820
Because in general, the browser thinks,
hm, maybe there's something really special

173
00:09:12,820 --> 00:09:17,130
about this particular page, and here
she wants me to do these rules instead.

174
00:09:18,190 --> 00:09:22,280
Finally, any of those inline styles
where you use the attribute tag,

175
00:09:22,280 --> 00:09:24,960
those are gonna have
the highest precedence of all.

176
00:09:24,960 --> 00:09:29,320
So it can be really confusing, because you
might start writing up different rules,

177
00:09:29,320 --> 00:09:32,230
and you can't figure out why some
are working and some aren't.

178
00:09:32,230 --> 00:09:34,730
This is where the cascading
part comes in again.

179
00:09:34,730 --> 00:09:39,470
First it looks at defaults, then external,
then internal, and then inline.

180
00:09:39,470 --> 00:09:43,230
Which is why really you want to
avoid using any inline style because

181
00:09:43,230 --> 00:09:45,630
it pretty much nullifies
all your styling rules.

182
00:09:47,280 --> 00:09:52,320
Alright, so we know how those four go,
but what if you have a selector ANd,

183
00:09:52,320 --> 00:09:54,830
you've linked to two or
three different style sheets, and

184
00:09:54,830 --> 00:10:00,490
that same H1 has been defined to be blue,
green, and yellow, but in different files.

185
00:10:00,490 --> 00:10:02,350
How does the browser know what to do?

186
00:10:02,350 --> 00:10:07,800
Well, how it works is that the rules from
the most recent file have precedence.

187
00:10:07,800 --> 00:10:11,370
And what I mean by the most recent file,
it means it goes up into the head section

188
00:10:11,370 --> 00:10:15,220
and it goes one, two, three, and it kind
of looks at what order you listed them,

189
00:10:15,220 --> 00:10:19,050
and the last one you listed is the one
that's going to have precedence.

190
00:10:19,050 --> 00:10:19,830
Okay?

191
00:10:19,830 --> 00:10:23,510
Well, what if you have
a selector in the same file, and

192
00:10:23,510 --> 00:10:25,500
you've written H1 multiple times.

193
00:10:25,500 --> 00:10:27,440
This can actually happen quite a bit.

194
00:10:27,440 --> 00:10:30,970
Especially if you decide to go off and
be part of a big development company,

195
00:10:30,970 --> 00:10:34,220
you write some code, and
then someone else writes some code, or,

196
00:10:34,220 --> 00:10:38,350
as I tell my undergrads, maybe you went
out and had a really good time one night,

197
00:10:38,350 --> 00:10:40,460
and you came home and
decided, I'm gonna code!

198
00:10:40,460 --> 00:10:42,810
And you forget that you've
already written some rules.

199
00:10:42,810 --> 00:10:45,330
Well, if that's the case, once again,

200
00:10:45,330 --> 00:10:48,390
the browser's going to look
at the one it saw last.

201
00:10:48,390 --> 00:10:50,610
So, in this case, I have two rules for h1.

202
00:10:50,610 --> 00:10:52,580
One writes at the color to blue.

203
00:10:52,580 --> 00:10:56,180
And I said, hey I want you to
use this aerial font family.

204
00:10:56,180 --> 00:10:58,260
And then later, there might be
a whole bunch of stuff in here,

205
00:10:58,260 --> 00:11:02,280
might be nothing, and I say hey,
I want you to use a font family Times.

206
00:11:02,280 --> 00:11:04,735
How the browser's going to look
at this is it's gonna go down,

207
00:11:04,735 --> 00:11:08,600
doo-doo-doo-doo-doo and say,
I'm gonna make all the font blue, and

208
00:11:08,600 --> 00:11:10,900
I'm gonna go ahead and
make the font family Times.

209
00:11:10,900 --> 00:11:14,100
It's just always is going
to use the last one it saw.

210
00:11:16,150 --> 00:11:18,560
So again,
the most recent rule has precedence,

211
00:11:18,560 --> 00:11:21,180
whether it was inside your code or
it came from different files.

212
00:11:22,300 --> 00:11:25,620
There is, however,
one way to overwrite this.

213
00:11:25,620 --> 00:11:28,680
Suppose you're writing something and you
know you want something to be that way.

214
00:11:28,680 --> 00:11:31,350
You don't care if anyone
else overwrites it.

215
00:11:31,350 --> 00:11:33,740
You really wanna make sure people
aren't using inline style,

216
00:11:33,740 --> 00:11:35,180
different things like that.

217
00:11:35,180 --> 00:11:39,170
What you can use is you can use
the !important Attribute right here.

218
00:11:39,170 --> 00:11:44,020
So right here I've got font-family,
Arial, and I've got important right here.

219
00:11:44,020 --> 00:11:48,260
So even though later I decide to overwrite
it with times, the browser's going to say

220
00:11:48,260 --> 00:11:52,780
nope, I know that she really wanted
me to use Arial, and it works out.

221
00:11:52,780 --> 00:11:56,740
So let's go ahead and look at an example
of what I mean by all those precedents.

222
00:11:56,740 --> 00:11:59,900
I know just listening to me can get
a little overwhelming, so I've got a quick

223
00:11:59,900 --> 00:12:03,750
example showing you the different ways And
then I'll kind of wrap up this lecture.

224
00:12:03,750 --> 00:12:07,160
So let's start off using
the style attribute.

225
00:12:07,160 --> 00:12:09,490
As you can see in here,
I've written the code, and

226
00:12:09,490 --> 00:12:13,680
I've used the style attribute for
this h1 heading, and this one paragraph.

227
00:12:13,680 --> 00:12:17,210
So in this case, I want my h1 heading
to be blue, and my paragraph to be red.

228
00:12:17,210 --> 00:12:19,950
And what I really wanna show you is that

229
00:12:19,950 --> 00:12:24,370
the only paragraph that was changed to
red text or red font was the first one.

230
00:12:24,370 --> 00:12:25,950
The other one's still black.

231
00:12:25,950 --> 00:12:29,340
So the only way to style is if
you go in and you change each and

232
00:12:29,340 --> 00:12:31,980
every tag to make it look
the way you want it to.

233
00:12:31,980 --> 00:12:34,520
If I wanted all the paragraphs to be red,
I'd have to go in there and

234
00:12:34,520 --> 00:12:36,520
put style equals, style equals.

235
00:12:36,520 --> 00:12:37,610
In this example there's only two,

236
00:12:37,610 --> 00:12:40,460
but you can imagine how it'd get really
annoying if you had a lot, okay.

237
00:12:41,710 --> 00:12:45,200
In our next example we
have an internal style.

238
00:12:45,200 --> 00:12:50,040
In this case, I've put in my style tag
up at the top and I've added rules for

239
00:12:50,040 --> 00:12:53,570
paragraphs and H1 headings,
and it should handle both.

240
00:12:53,570 --> 00:12:58,370
So now there's nothing in here anymore,
my tag is all by itself.

241
00:12:58,370 --> 00:13:00,500
And if you look at the result,
let's go over here.

242
00:13:03,690 --> 00:13:08,240
You can see that now, even though my
HTML doesn't have any type of styling in

243
00:13:08,240 --> 00:13:11,820
at all, both of the paragraphs are red
over here and so's the heading.

244
00:13:11,820 --> 00:13:12,970
All right?

245
00:13:12,970 --> 00:13:17,080
The last example I had for you is,
I took these exact same rules and

246
00:13:17,080 --> 00:13:20,270
I put them off into
an external style sheet.

247
00:13:20,270 --> 00:13:22,400
Again, there's no style tag here.

248
00:13:22,400 --> 00:13:24,460
It's just the rules themselves.

249
00:13:24,460 --> 00:13:29,990
And then I had to go back to the HTML
file, and you can see right up here,

250
00:13:29,990 --> 00:13:34,160
near the top, I have hey,
let's link to the style sheet I want.

251
00:13:34,160 --> 00:13:36,760
Now, I wanna point this
out very carefully to you.

252
00:13:36,760 --> 00:13:40,530
If you notice,
I have css/externalStyle sheet.

253
00:13:40,530 --> 00:13:45,040
This means that my style sheet is
in a special folder called css.

254
00:13:45,040 --> 00:13:47,790
Developers really stress that you do this,

255
00:13:47,790 --> 00:13:51,140
because you want your code to be kind
of organized into different parts.

256
00:13:51,140 --> 00:13:52,940
So again, in the same way,

257
00:13:52,940 --> 00:13:57,630
I now have a page that uses external
style sheets and looks really good.

258
00:13:57,630 --> 00:14:00,760
So all this code is gonna be available for
you to look at it, but

259
00:14:00,760 --> 00:14:03,220
I want you to kind of play
with it as much as you can.

260
00:14:03,220 --> 00:14:06,090
But, I wanna use this
final example to help

261
00:14:06,090 --> 00:14:08,480
you kind of understand
how the cascading works.

262
00:14:08,480 --> 00:14:11,240
So right here,
I have my external style sheet.

263
00:14:11,240 --> 00:14:12,957
I'm gonna go over here for just a second.

264
00:14:15,406 --> 00:14:21,798
Go to my, and I'm going to add,
One last thing.

265
00:14:27,036 --> 00:14:27,640
Sorry, this is gonna be awkward.

266
00:14:33,113 --> 00:14:34,475
And I'm gonna say you know what?

267
00:14:34,475 --> 00:14:39,750
Instead, I want that font to
be black again, and I end it.

268
00:14:39,750 --> 00:14:41,710
I'm gonna show you what happens
when you mess up really quickly.

269
00:14:41,710 --> 00:14:46,830
I'm gonna save it, I'm gonna reload
my page And everything disappeared.

270
00:14:46,830 --> 00:14:48,060
This was what I was talking about.

271
00:14:48,060 --> 00:14:50,420
You really wanna make sure
you include that style tag.

272
00:14:50,420 --> 00:14:52,278
Do it.
Make sure you close it up.

273
00:14:56,700 --> 00:14:57,502
All right.

274
00:14:57,502 --> 00:15:02,010
So now what I have going on here is
my browser has its browser default.

275
00:15:02,010 --> 00:15:06,190
It has an external style sheet, and
now it also has an internal one.

276
00:15:06,190 --> 00:15:07,940
So let's see what color it's going to be,

277
00:15:07,940 --> 00:15:10,220
if it's going to be blue or
if it's going to be black.

278
00:15:10,220 --> 00:15:11,860
And as you can see, it's black.

279
00:15:11,860 --> 00:15:14,680
So as you start styling, it's going
to be very important that you look at

280
00:15:14,680 --> 00:15:17,730
different ways for separating your
content from your formatting.

281
00:15:17,730 --> 00:15:21,210
As well as looking at the different
ways that you can do that formatting.

282
00:15:21,210 --> 00:15:23,870
So, one of the first things
I want you to think about

283
00:15:23,870 --> 00:15:25,580
is how this idea of external and

284
00:15:25,580 --> 00:15:30,380
internal style sheets really plays into
the separation of content from formatting.

285
00:15:30,380 --> 00:15:32,960
And at the same time I want you to
understand that we don't always

286
00:15:32,960 --> 00:15:33,794
follow every rule.

287
00:15:35,025 --> 00:15:36,945
In the beginning we always
have to start with really,

288
00:15:36,945 --> 00:15:41,425
really simple examples to help you guys
solidify what's going on with CSS.

289
00:15:41,425 --> 00:15:43,815
So I'm just going to end
this now with a brief,

290
00:15:43,815 --> 00:15:48,445
brief demo from an example they
have at csszengarden.com because

291
00:15:48,445 --> 00:15:52,005
I think it really brings home the idea
that CSS can be very powerful.

292
00:15:52,005 --> 00:15:53,510
So let's take a look.

293
00:15:53,510 --> 00:15:54,580
So at this site,

294
00:15:54,580 --> 00:15:58,320
CSS Zen Garden, They've actually
done a really great job of showing

295
00:15:58,320 --> 00:16:02,420
all the different ways you can format
an exact same file but in different ways.

296
00:16:02,420 --> 00:16:07,680
So up here, if you take a look, you can
see that this is one person's style sheet

297
00:16:07,680 --> 00:16:10,540
for decorating or styling this document.

298
00:16:10,540 --> 00:16:14,780
Now, without changing any of the HTML at
all, someone else came in and said, hey,

299
00:16:14,780 --> 00:16:18,430
you know what, that's nice, but
I'm going to style it this way.

300
00:16:18,430 --> 00:16:20,100
It looks completely different.

301
00:16:20,100 --> 00:16:23,430
It's the same exact HTML but
it looks completely different.

302
00:16:23,430 --> 00:16:28,040
In the same way, we've got this
one right here, same exact HTML.

303
00:16:28,040 --> 00:16:29,790
But you couldn't look any different,

304
00:16:29,790 --> 00:16:33,370
because they've added some CSS and
JavaScript to it that's different.

305
00:16:33,370 --> 00:16:34,950
So come on with me.

306
00:16:34,950 --> 00:16:36,550
We're gonna code a lot in this course.

307
00:16:36,550 --> 00:16:38,350
We're gonna be playing
a lot with this course.

308
00:16:38,350 --> 00:16:40,620
You're gonna be messing
up a lot in this course.

309
00:16:40,620 --> 00:16:41,410
But I can't wait for

310
00:16:41,410 --> 00:16:45,400
you to develop something that really
reflects how you want your page to look.

311
00:16:45,400 --> 00:16:45,900
Thanks.