>> SPEAKER: So it's actually not the best design to intermingle CSS with HTML.
Rather, it's best to factor out your CSS, put it somewhere central, and
somehow apply it to the tags in your web page.
To achieve this, we can actually stop using the Style attribute and instead
use a Style tag, which belongs in the head of a web page alongside, for
instance, your title.
>> Let's give this a try and re-implement a home page for John Harvard
using the Style tag.
I've already gotten us started here with three divs for
John Harvard's homepage.
But let's first now go up to this first div and add a new attribute,
namely ID, and specify that a unique identifier for this particular div
shall be, for instance, quote unquote "top," an arbitrary name, but
descriptive in that this div is indeed at the top of my page.
>> For the next div, let's give it a different ID of quote unquote
"middle," and let's give the third div an ID of quote unquote "bottom." We
now have three unique identifier to which we can apply some CSS
properties, but first, let's return to the head of this page.
Just above the title here, I'll go ahead and define style
and then close style.
>> Inside of this now, I'm going to define some CSS properties, namely the
same ones I previously had in Style attributes, but here they'll be
centrally defined.
To do so, I'm going to specify the pound symbol followed by top, thereby
specifying that the following CSS properties should apply to whatever
HTML element has the unique identifier of top.
I'm then going to have some open and closed curly braces, and I'm going to
specify, say, font size shall be 36 pixels, font weight shall be bold.
>> To keep things clean, I'm putting each of these properties now on its own
line, but that's just a stylistic convention.
Below this, let's now define another selector, so to speak.
This one for the HTML tag that has unique identifier of middle.
And in here, let's specify a font size of 24 pixels, below that another
selector for bottom, and inside of that, let's specify a
font size of 12 pixels.
>> Let's now save, change the permissions on, and load this page in a browser,
chmod a plus r css-1.html.
Let's open up Chrome and visit http://localhost/css-1.html.
Not bad.
Exactly as I intended, but I'd like to take things one step further now and
center John Harvard's text.
Now to do so, I could wrap the whole page in a div as I
did an earlier example.
Or I can be more clever and realize that all of these divs are inside of
my page's body, so why not just apply one or more CSS properties to the body
tag itself?
>> To do so, let's do this.
Let's go back to gedit here.
Let's scroll back up to the Style tag, and let's specify a selector just
using that tag's name, Body.
Below that, let's put our curly braces followed by text-align center.
Let's now save the page and reload it inside of that browser.
Reload in Chrome, and voila.
We now have John Harvard's page centered as we intended.