1
00:00:00,000 --> 00:00:00,290

2
00:00:00,290 --> 00:00:03,310
>> SPEAKER: It turns out that HTML is not
the only language you can use inside

3
00:00:03,310 --> 00:00:03,895
of a web page.

4
00:00:03,895 --> 00:00:08,100
You can use something called CSS, or
Cascading Style Sheets, as well.

5
00:00:08,100 --> 00:00:12,120
CSS allows you to specify much more
precisely the aesthetics of a web

6
00:00:12,120 --> 00:00:16,930
page, including layout and sizes and
colors and fonts and much more.

7
00:00:16,930 --> 00:00:20,820
For instance, let's create a web page
here called CSS0 that represents a

8
00:00:20,820 --> 00:00:22,740
home page for, say, John Harvard.

9
00:00:22,740 --> 00:00:25,480
>> On this page, we'll have John Harvard's
name, beneath which will be

10
00:00:25,480 --> 00:00:28,500
a nice message for his visitors, beneath
which will be a footer, with

11
00:00:28,500 --> 00:00:30,590
say, some copyright information.

12
00:00:30,590 --> 00:00:34,650
To do this, let's define three divisions
for the page using a tag

13
00:00:34,650 --> 00:00:35,670
called div.

14
00:00:35,670 --> 00:00:43,880
Open bracket div, John Harvard, close
bracket div, another open bracket div,

15
00:00:43,880 --> 00:00:48,330
and now we'll specify something
like, welcome to my home page!

16
00:00:48,330 --> 00:00:50,420
And let's close this div, as well.

17
00:00:50,420 --> 00:00:53,700
>> And now a third and final
div, copyright.

18
00:00:53,700 --> 00:00:58,250
Just to be fancy, let me use now an HTML
entity, a symbol that represents

19
00:00:58,250 --> 00:01:01,140
a character that you couldn't otherwise
type on your keyboard.

20
00:01:01,140 --> 00:01:07,490
In particular, I'm going to do
ampersand, pound, 169, semicolon.

21
00:01:07,490 --> 00:01:10,620
Turns out that is the numeric code
for the copyright symbol.

22
00:01:10,620 --> 00:01:14,260
Then let's specify John Harvard
here at the bottom.

23
00:01:14,260 --> 00:01:17,180
Let's close the div and save the file.

24
00:01:17,180 --> 00:01:18,910
>> Now, what is this div tag?

25
00:01:18,910 --> 00:01:21,970
The div tag simply defines a division
of the page, which is essentially a

26
00:01:21,970 --> 00:01:23,310
rectangular region.

27
00:01:23,310 --> 00:01:26,850
So at this moment in time, I have three
rectangular regions, one on top

28
00:01:26,850 --> 00:01:27,620
of the other.

29
00:01:27,620 --> 00:01:30,610
So for now, the effect is almost as
though I had three paragraphs.

30
00:01:30,610 --> 00:01:33,490
But we won't see quite as much
white space in between them.

31
00:01:33,490 --> 00:01:36,170
>> Let's save this file, change its
permissions, and take a look for a

32
00:01:36,170 --> 00:01:37,990
moment in Chrome.

33
00:01:37,990 --> 00:01:43,040
Chmod a+r CSS0.html.

34
00:01:43,040 --> 00:01:52,440
Let's now open up Chrome and visit
http://localhost.CSS0.html.

35
00:01:52,440 --> 00:01:54,630
Indeed, here's a home page
for John Harvard.

36
00:01:54,630 --> 00:01:59,370
Let's now stylize it a little more
precisely using some CSS.

37
00:01:59,370 --> 00:02:03,510
>> Back in gedit, let's go into this
first div tag and add a style

38
00:02:03,510 --> 00:02:11,060
attribute specifying that I'd like a
font size of, say, 36 pixels, or px.

39
00:02:11,060 --> 00:02:15,650
And I'd like the weight of this font
to be bold rather than the default,

40
00:02:15,650 --> 00:02:16,980
which is normal.

41
00:02:16,980 --> 00:02:21,170
For the second div, let's specify
another style attribute that has a

42
00:02:21,170 --> 00:02:25,550
font size of 24 pixels, so
a little bit smaller.

43
00:02:25,550 --> 00:02:28,410
Close quotes after the semicolon.

44
00:02:28,410 --> 00:02:33,255
>> Lastly, in this third div, let's do
style equals quote, font size, and

45
00:02:33,255 --> 00:02:35,340
let's say 12 pixels this time.

46
00:02:35,340 --> 00:02:37,280
Close quote after the semicolon.

47
00:02:37,280 --> 00:02:40,200
Notice then that I seem to have
specified a bit of stylization for

48
00:02:40,200 --> 00:02:43,770
each of these three divs using,
it turns out, CSS.

49
00:02:43,770 --> 00:02:47,820
In fact, the syntax that you see in
between those double quotes is CSS,

50
00:02:47,820 --> 00:02:50,620
specifically CSS properties
with values.

51
00:02:50,620 --> 00:02:53,910
And for that first tag, where I had
two such properties, font size and

52
00:02:53,910 --> 00:02:57,290
font weight, I simply separated
them with a semicolon.

53
00:02:57,290 --> 00:02:59,940
>> Now, just for style's sake, I
also included semicolons at

54
00:02:59,940 --> 00:03:00,880
the end of each line.

55
00:03:00,880 --> 00:03:04,270
But they're not strictly necessary,
particularly when you only have one

56
00:03:04,270 --> 00:03:05,580
property defined.

57
00:03:05,580 --> 00:03:08,370
Let's now save the file and reload
in Chrome, and see what

58
00:03:08,370 --> 00:03:11,000
the net effect is.

59
00:03:11,000 --> 00:03:13,470
Back in Chrome here,
let's click Reload.

60
00:03:13,470 --> 00:03:15,800
>> Now we have a slightly more interesting
home page for John

61
00:03:15,800 --> 00:03:19,000
Harvard, whereby the first line with
his name, which is inside of that

62
00:03:19,000 --> 00:03:23,470
first div, is 36 pixels tall and also
boldface, whereby the second line,

63
00:03:23,470 --> 00:03:27,340
which is in that second div, is 24
pixels tall, but not boldface.

64
00:03:27,340 --> 00:03:31,500
And whereby the third line in that third
div is 12 pixels tall and also

65
00:03:31,500 --> 00:03:32,610
not boldface.

66
00:03:32,610 --> 00:03:35,380
But suppose now I'd like to shift
all of this text over

67
00:03:35,380 --> 00:03:36,650
such that it's centered.

68
00:03:36,650 --> 00:03:40,480
>> I could align each of the individual
divs as being centered.

69
00:03:40,480 --> 00:03:45,330
But more easily, could I wrap those
three divs inside of a fourth div, a

70
00:03:45,330 --> 00:03:49,360
parent div, so to speak, and specify
that that div and all of its

71
00:03:49,360 --> 00:03:52,610
descendants should be
text aligned center?

72
00:03:52,610 --> 00:03:54,120
Let's take a look.

73
00:03:54,120 --> 00:03:58,510
>> Inside of gedit, let's go back to my
body and add a new div up top with

74
00:03:58,510 --> 00:04:04,460
div, style equals quote unquote
text align center, close

75
00:04:04,460 --> 00:04:06,250
quote after the semicolon.

76
00:04:06,250 --> 00:04:10,280
And now, let's go ahead and indent all
of those lines that we typed before.

77
00:04:10,280 --> 00:04:15,040
And below that third div, let's
close this new div.

78
00:04:15,040 --> 00:04:18,829
>> In other words, because those three
original divs are now children, so to

79
00:04:18,829 --> 00:04:22,110
speak, of a new parent div and I've
specified that I'd like to align the

80
00:04:22,110 --> 00:04:26,140
text of that parent div in the center
of the page, that property will be

81
00:04:26,140 --> 00:04:28,290
inherited by all of those children.

82
00:04:28,290 --> 00:04:32,370
Indeed, let's save the file and
take a look in a browser.

83
00:04:32,370 --> 00:04:34,650
Let's reload in Chrome.

84
00:04:34,650 --> 00:04:37,540
And there we have it, an even nicer
home page for John Harvard.

85
00:04:37,540 --> 00:04:39,872