>> SPEAKER: It turns out that HTML is not the only language you can use inside
of a web page.
You can use something called CSS, or Cascading Style Sheets, as well.
CSS allows you to specify much more precisely the aesthetics of a web
page, including layout and sizes and colors and fonts and much more.
For instance, let's create a web page here called CSS0 that represents a
home page for, say, John Harvard.
>> On this page, we'll have John Harvard's name, beneath which will be
a nice message for his visitors, beneath which will be a footer, with
say, some copyright information.
To do this, let's define three divisions for the page using a tag
called div.
Open bracket div, John Harvard, close bracket div, another open bracket div,
and now we'll specify something like, welcome to my home page!
And let's close this div, as well.
>> And now a third and final div, copyright.
Just to be fancy, let me use now an HTML entity, a symbol that represents
a character that you couldn't otherwise type on your keyboard.
In particular, I'm going to do ampersand, pound, 169, semicolon.
Turns out that is the numeric code for the copyright symbol.
Then let's specify John Harvard here at the bottom.
Let's close the div and save the file.
>> Now, what is this div tag?
The div tag simply defines a division of the page, which is essentially a
rectangular region.
So at this moment in time, I have three rectangular regions, one on top
of the other.
So for now, the effect is almost as though I had three paragraphs.
But we won't see quite as much white space in between them.
>> Let's save this file, change its permissions, and take a look for a
moment in Chrome.
Chmod a+r CSS0.html.
Let's now open up Chrome and visit http://localhost.CSS0.html.
Indeed, here's a home page for John Harvard.
Let's now stylize it a little more precisely using some CSS.
>> Back in gedit, let's go into this first div tag and add a style
attribute specifying that I'd like a font size of, say, 36 pixels, or px.
And I'd like the weight of this font to be bold rather than the default,
which is normal.
For the second div, let's specify another style attribute that has a
font size of 24 pixels, so a little bit smaller.
Close quotes after the semicolon.
>> Lastly, in this third div, let's do style equals quote, font size, and
let's say 12 pixels this time.
Close quote after the semicolon.
Notice then that I seem to have specified a bit of stylization for
each of these three divs using, it turns out, CSS.
In fact, the syntax that you see in between those double quotes is CSS,
specifically CSS properties with values.
And for that first tag, where I had two such properties, font size and
font weight, I simply separated them with a semicolon.
>> Now, just for style's sake, I also included semicolons at
the end of each line.
But they're not strictly necessary, particularly when you only have one
property defined.
Let's now save the file and reload in Chrome, and see what
the net effect is.
Back in Chrome here, let's click Reload.
>> Now we have a slightly more interesting home page for John
Harvard, whereby the first line with his name, which is inside of that
first div, is 36 pixels tall and also boldface, whereby the second line,
which is in that second div, is 24 pixels tall, but not boldface.
And whereby the third line in that third div is 12 pixels tall and also
not boldface.
But suppose now I'd like to shift all of this text over
such that it's centered.
>> I could align each of the individual divs as being centered.
But more easily, could I wrap those three divs inside of a fourth div, a
parent div, so to speak, and specify that that div and all of its
descendants should be text aligned center?
Let's take a look.
>> Inside of gedit, let's go back to my body and add a new div up top with
div, style equals quote unquote text align center, close
quote after the semicolon.
And now, let's go ahead and indent all of those lines that we typed before.
And below that third div, let's close this new div.
>> In other words, because those three original divs are now children, so to
speak, of a new parent div and I've specified that I'd like to align the
text of that parent div in the center of the page, that property will be
inherited by all of those children.
Indeed, let's save the file and take a look in a browser.
Let's reload in Chrome.
And there we have it, an even nicer home page for John Harvard.