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.