>> DAVID MALAN: So I've been making my own search engine.
And at the moment, it looks like this.
I have here the title of the page.
It's CS50 Search.
I have an HTML form inside of which appears to be an input whose type is
text and another input whose type is submit.
>> If we now take a look at the source for this page, notice that, indeed, we
have an h1 and a title tag that are conveying that this
is indeed CS50 Search.
We have a form tag that's specifying that the form should be submitted to
our friends at Google.
And inside of that form, we have those two input types.
>> But notice now toward the top of the page, inside of the page's head,
there's a style tag, inside of which is a CSS property for
the body of the page.
What if, though, we wanted to make all of the text aligned
across multiple pages?
In other words, I wanted to reuse this CSS property again and again and again
in different web pages, all of whom have body tag?
Well I could certainly copy and paste the CSS into each of those pages, but
it'd be better design to factor this out into some central file and then
somehow include that file in all of those pages so that if I ever want to
make a change and align my text on the left or align my text on the right, I
can do that much more easily.
Let's try to do this.
>> First, let's cut out this style tag altogether.
And now let's open a file called, say, search-3.css and put that
same CSS in this file.
body is going to have text-align: center;.
Let's save that file.
>> Let's now go back to search-3.html and, in the head again, add a link tag
specifying a hyper-reference of search-3.css.
CSS And let's specify that the relation that this file has with the
page is to serve as its style sheet.
Let's now close this tag, save the file, and reload
this page in the browser.
>> It realigned the text on the left as though the CSS
property wasn't even applied.
Now why might that be?
Let's take a look at the file's permissions--
not the HTML file's permissions, but the CSS file's permissions.
>> Back here in gedit, let's go down to the terminal window and type ls-l
search-3.css.
Ah, indeed, even though I, the file's owner, can read and write this file,
no one else can read it.
But we can fix this with chmod a+r search-3.css, and now let's re-execute
ls-l search-3.css--
and much better.
Now the whole world can read this file.
>> Let's go back to the browser, reload.
Voila, we're back to a centered search engine.
Of course, this is where we began the story, with our text already centered.
But what's better design now is that we've factored out that CSS into a
central file, someplace that we can then include in other web pages that
we might happen to make in the future.
So if we ever want to recenter or restylize more generally our pages, we
can do it very simply in one central place.