1
00:00:00,000 --> 00:00:00,260

2
00:00:00,260 --> 00:00:01,900
>> DAVID MALAN: So I've been making
my own search engine.

3
00:00:01,900 --> 00:00:04,100
And at the moment, it looks like this.

4
00:00:04,100 --> 00:00:05,265
I have here the title of the page.

5
00:00:05,265 --> 00:00:06,580
It's CS50 Search.

6
00:00:06,580 --> 00:00:10,380
I have an HTML form inside of which
appears to be an input whose type is

7
00:00:10,380 --> 00:00:13,650
text and another input
whose type is submit.

8
00:00:13,650 --> 00:00:17,180
>> If we now take a look at the source for
this page, notice that, indeed, we

9
00:00:17,180 --> 00:00:20,260
have an h1 and a title tag that
are conveying that this

10
00:00:20,260 --> 00:00:22,020
is indeed CS50 Search.

11
00:00:22,020 --> 00:00:25,940
We have a form tag that's specifying
that the form should be submitted to

12
00:00:25,940 --> 00:00:27,140
our friends at Google.

13
00:00:27,140 --> 00:00:30,430
And inside of that form, we have
those two input types.

14
00:00:30,430 --> 00:00:33,770
>> But notice now toward the top of the
page, inside of the page's head,

15
00:00:33,770 --> 00:00:36,750
there's a style tag, inside of
which is a CSS property for

16
00:00:36,750 --> 00:00:38,570
the body of the page.

17
00:00:38,570 --> 00:00:41,580
What if, though, we wanted to
make all of the text aligned

18
00:00:41,580 --> 00:00:43,050
across multiple pages?

19
00:00:43,050 --> 00:00:46,640
In other words, I wanted to reuse this
CSS property again and again and again

20
00:00:46,640 --> 00:00:50,030
in different web pages, all
of whom have body tag?

21
00:00:50,030 --> 00:00:53,660
Well I could certainly copy and paste
the CSS into each of those pages, but

22
00:00:53,660 --> 00:00:57,730
it'd be better design to factor this
out into some central file and then

23
00:00:57,730 --> 00:01:01,100
somehow include that file in all of
those pages so that if I ever want to

24
00:01:01,100 --> 00:01:04,840
make a change and align my text on the
left or align my text on the right, I

25
00:01:04,840 --> 00:01:07,220
can do that much more easily.

26
00:01:07,220 --> 00:01:08,860
Let's try to do this.

27
00:01:08,860 --> 00:01:12,520
>> First, let's cut out this
style tag altogether.

28
00:01:12,520 --> 00:01:16,820
And now let's open a file called,
say, search-3.css and put that

29
00:01:16,820 --> 00:01:18,970
same CSS in this file.

30
00:01:18,970 --> 00:01:23,500
body is going to have
text-align: center;.

31
00:01:23,500 --> 00:01:24,760
Let's save that file.

32
00:01:24,760 --> 00:01:30,950
>> Let's now go back to search-3.html and,
in the head again, add a link tag

33
00:01:30,950 --> 00:01:33,630
specifying a hyper-reference
of search-3.css.

34
00:01:33,630 --> 00:01:38,650
CSS And let's specify that the relation
that this file has with the

35
00:01:38,650 --> 00:01:41,880
page is to serve as its style sheet.

36
00:01:41,880 --> 00:01:44,840
Let's now close this tag, save
the file, and reload

37
00:01:44,840 --> 00:01:46,910
this page in the browser.

38
00:01:46,910 --> 00:01:49,700
>> It realigned the text on the
left as though the CSS

39
00:01:49,700 --> 00:01:50,905
property wasn't even applied.

40
00:01:50,905 --> 00:01:53,020
Now why might that be?

41
00:01:53,020 --> 00:01:54,590
Let's take a look at the
file's permissions--

42
00:01:54,590 --> 00:01:58,630
not the HTML file's permissions,
but the CSS file's permissions.

43
00:01:58,630 --> 00:02:02,740
>> Back here in gedit, let's go down to
the terminal window and type ls-l

44
00:02:02,740 --> 00:02:04,720
search-3.css.

45
00:02:04,720 --> 00:02:09,810
Ah, indeed, even though I, the file's
owner, can read and write this file,

46
00:02:09,810 --> 00:02:11,110
no one else can read it.

47
00:02:11,110 --> 00:02:17,570
But we can fix this with chmod a+r
search-3.css, and now let's re-execute

48
00:02:17,570 --> 00:02:20,970
ls-l search-3.css--

49
00:02:20,970 --> 00:02:21,910
and much better.

50
00:02:21,910 --> 00:02:24,380
Now the whole world can
read this file.

51
00:02:24,380 --> 00:02:26,950
>> Let's go back to the browser, reload.

52
00:02:26,950 --> 00:02:29,220
Voila, we're back to a centered
search engine.

53
00:02:29,220 --> 00:02:32,450
Of course, this is where we began the
story, with our text already centered.

54
00:02:32,450 --> 00:02:36,000
But what's better design now is that
we've factored out that CSS into a

55
00:02:36,000 --> 00:02:39,690
central file, someplace that we can then
include in other web pages that

56
00:02:39,690 --> 00:02:41,580
we might happen to make in the future.

57
00:02:41,580 --> 00:02:45,430
So if we ever want to recenter or
restylize more generally our pages, we

58
00:02:45,430 --> 00:02:48,570
can do it very simply in
one central place.

59
00:02:48,570 --> 00:02:50,902