1
00:00:00,000 --> 00:00:00,300

2
00:00:00,300 --> 00:00:04,840
>> SPEAKER: So it's actually not the best
design to intermingle CSS with HTML.

3
00:00:04,840 --> 00:00:08,700
Rather, it's best to factor out your
CSS, put it somewhere central, and

4
00:00:08,700 --> 00:00:11,430
somehow apply it to the
tags in your web page.

5
00:00:11,430 --> 00:00:15,290
To achieve this, we can actually stop
using the Style attribute and instead

6
00:00:15,290 --> 00:00:19,290
use a Style tag, which belongs in the
head of a web page alongside, for

7
00:00:19,290 --> 00:00:20,700
instance, your title.

8
00:00:20,700 --> 00:00:24,400
>> Let's give this a try and re-implement
a home page for John Harvard

9
00:00:24,400 --> 00:00:26,410
using the Style tag.

10
00:00:26,410 --> 00:00:28,930
I've already gotten us started
here with three divs for

11
00:00:28,930 --> 00:00:30,260
John Harvard's homepage.

12
00:00:30,260 --> 00:00:33,990
But let's first now go up to this first
div and add a new attribute,

13
00:00:33,990 --> 00:00:38,680
namely ID, and specify that a unique
identifier for this particular div

14
00:00:38,680 --> 00:00:42,390
shall be, for instance, quote unquote
"top," an arbitrary name, but

15
00:00:42,390 --> 00:00:45,840
descriptive in that this div is
indeed at the top of my page.

16
00:00:45,840 --> 00:00:48,920
>> For the next div, let's give it a
different ID of quote unquote

17
00:00:48,920 --> 00:00:54,080
"middle," and let's give the third div
an ID of quote unquote "bottom." We

18
00:00:54,080 --> 00:00:57,740
now have three unique identifier
to which we can apply some CSS

19
00:00:57,740 --> 00:01:01,210
properties, but first, let's return
to the head of this page.

20
00:01:01,210 --> 00:01:04,760
Just above the title here, I'll
go ahead and define style

21
00:01:04,760 --> 00:01:07,120
and then close style.

22
00:01:07,120 --> 00:01:10,340
>> Inside of this now, I'm going to define
some CSS properties, namely the

23
00:01:10,340 --> 00:01:14,550
same ones I previously had in Style
attributes, but here they'll be

24
00:01:14,550 --> 00:01:16,320
centrally defined.

25
00:01:16,320 --> 00:01:20,880
To do so, I'm going to specify the pound
symbol followed by top, thereby

26
00:01:20,880 --> 00:01:24,710
specifying that the following CSS
properties should apply to whatever

27
00:01:24,710 --> 00:01:28,800
HTML element has the unique
identifier of top.

28
00:01:28,800 --> 00:01:32,240
I'm then going to have some open and
closed curly braces, and I'm going to

29
00:01:32,240 --> 00:01:39,170
specify, say, font size shall be 36
pixels, font weight shall be bold.

30
00:01:39,170 --> 00:01:41,810
>> To keep things clean, I'm putting each
of these properties now on its own

31
00:01:41,810 --> 00:01:44,610
line, but that's just a
stylistic convention.

32
00:01:44,610 --> 00:01:47,830
Below this, let's now define another
selector, so to speak.

33
00:01:47,830 --> 00:01:52,680
This one for the HTML tag that has
unique identifier of middle.

34
00:01:52,680 --> 00:01:57,540
And in here, let's specify a font size
of 24 pixels, below that another

35
00:01:57,540 --> 00:02:01,520
selector for bottom, and inside
of that, let's specify a

36
00:02:01,520 --> 00:02:03,850
font size of 12 pixels.

37
00:02:03,850 --> 00:02:09,350
>> Let's now save, change the permissions
on, and load this page in a browser,

38
00:02:09,350 --> 00:02:14,230
chmod a plus r css-1.html.

39
00:02:14,230 --> 00:02:22,260
Let's open up Chrome and visit
http://localhost/css-1.html.

40
00:02:22,260 --> 00:02:22,960
Not bad.

41
00:02:22,960 --> 00:02:26,930
Exactly as I intended, but I'd like to
take things one step further now and

42
00:02:26,930 --> 00:02:29,050
center John Harvard's text.

43
00:02:29,050 --> 00:02:32,080
Now to do so, I could wrap the
whole page in a div as I

44
00:02:32,080 --> 00:02:33,800
did an earlier example.

45
00:02:33,800 --> 00:02:37,820
Or I can be more clever and realize that
all of these divs are inside of

46
00:02:37,820 --> 00:02:42,420
my page's body, so why not just apply
one or more CSS properties to the body

47
00:02:42,420 --> 00:02:43,850
tag itself?

48
00:02:43,850 --> 00:02:45,460
>> To do so, let's do this.

49
00:02:45,460 --> 00:02:47,650
Let's go back to gedit here.

50
00:02:47,650 --> 00:02:52,460
Let's scroll back up to the Style tag,
and let's specify a selector just

51
00:02:52,460 --> 00:02:54,520
using that tag's name, Body.

52
00:02:54,520 --> 00:03:00,580
Below that, let's put our curly braces
followed by text-align center.

53
00:03:00,580 --> 00:03:05,580
Let's now save the page and reload
it inside of that browser.

54
00:03:05,580 --> 00:03:08,090
Reload in Chrome, and voila.

55
00:03:08,090 --> 00:03:11,000
We now have John Harvard's page
centered as we intended.

56
00:03:11,000 --> 00:03:12,619