Centering text content using with CSS

Centering text content

we start with our three HTML files And make sure that as you examine these files. If you have followed any of the videos that I've been doing, make sure that there are not any inline styles or any embedded styles in any of these three HTML files. And then what we want to do is to create a fourth file that's going to be our stylesheet. Click to open explorer Find my folder

where I want to create this file ?

Right click, select new file, call it styles.css, ENTER So now I have that file open. Now remember that this file containing all of your CSS styles is not going to do you any good whatsoever if you don't have it linked to the HTML files. So, the very first thing we want to do is come into the head section of each of our documents. Right below the title, it really     doesn't matter where you put this in the head section. For convenience right now we'll put it right below the title. I'll type link and then TAB so that Emmet can create the link element. The only thing we have left to do is to type in the href attribute. And that is going to be styles. Notice as I start typing it that the Intellisense function here in Visual Studio Code pops up and says I have something by that name.

Do you want me to use it?

You can just press TAB and select that and then it keeps you from misspelling the thing. Because if you misspell it then the style rules that you create in the external stylesheet will never work on that page. I’ll just press CTRL+S to save that file. Go back to Constitution, do the same thing. It’s such a short thing to create, I'm just creating it each place but you could just as easily CTRL +C to copy. Come back into this third HTML file and paste it. It works either way. Alright, so whatever we create now in our styles.css file. Should be rendered here in this live preview.I'm going to start by trying to just center all of this text. All of the content of the body section. I’m going to try to just center it on the page now to do that I'm going to start with body element. So, body is our selector. Then I create my opening and closing curly braces and I will type here the width of the page that I want. I want it be 80% of the total width. and if I save that CTRL+S to save. Now you can see that this page now declaration in the browser. It's got a very narrow left margin. It's got a really wide margin on the right, and that's because I told it to take up only 80% of the width of the window. But if I want it to be centered in the page, I have to give it a margin setting of auto and that will allow the browser to do the math and find out what the margins need to be in order to occupy a width of 80%. So CTRL+S to save that. Alright, we have our content centered on our page and we have created a link to each of the files. Just to make sure that this is working I'll click on Constitution and you can see that everything is centered here in the middle of the page. text-align: center; Click on amendments. We should have the same thing. 80% width all looks good. Come back to Declaration. One thing I noticed as I go from page to page is that the width of this H1 element. It just doesn't look attractive at the top of the page. And it is going to give us a problem later when we try to center this and do something a little bit more sophisticated with the content of this page. So, I want us to go in and make a change to this H1 element in each of the three HTML files. And I’ll start here with Constitution and what we'll do is come down to the H1 element that we see here. And I want to put BR tags in here.   So, if I just type BR, make sure there's no space before or after.You can just copy that BR tag copy. Come right here after Constitution, paste it in. Then, right after “of the” paste it in. And then, United States of America but here, after United States of America, we're going to take that date out. And the reason is that we need that date in another location so that when we work with JavaScript later we can do some math with that date. So right below the H1 element in Constitution, I’m going to create a paragraph. And I'm going to put that 1789 date there, but I'm going to extend it because I know that the Constitution of the United States went into effect on March 4, 1789 It was ratified 1st and then it took effect on March 4, 1789. We want to do is to select all of that date. CTRL+SHFIT+A to wrap that in a time element and then come to the opening time tag. We're going to create an attribute that's called datetime. Equals, then you have to have it in this order If you have the month, date, and year, you have to put the year first. Dash, and then the new month, which would be 03 for March then the date of 04. CTRL+S to save that, Now in Constitution you can see a date line in a paragraph below the H1 element. And this is going to be important later when we want to do JavaScript. Plus, this is the correct way to do dates inside of an HTML page. I’m going to do a similar thing in the Declaration of Independence. Even though we have the date in its own paragraph already on line 26 with where it says “in gress, July 4th, 1776”. So, I don't have to create a paragraph here, but I do need to wrap that date in a time element. Then I need to come into that opening time element tag, and create a datetime attribute. This has to be “1776-07-04”. July 4th, 1776. CTRL+S to save that. And we also want to come in here and put the BR tags in here again. So, I’m going to put the BR tag after the word “The”. Put it after the words Declaration of Independence. And then after “of the” and then leave United States of America whole. CTRL+S to save that we did the Constitution and saved it. We’ll come to Amendments and right after “Amendments” well paste in our BR and then “to the” BR and then US Constitution. CTRL+S to save that. Now, there's only one more thing that I want to do on this page for this week. And that is to try to center up the text on these pages. We reduced the width of the page to 80% and then centered it vertically in the browser window. And now I want to center this text at least the text of the H1 elements, not the text of the paragraphs. In order to do that, I'll come back into the styles, then after the closing curly brace for the body selector. We add a blank space a couple of times so I can start this on a new row. And I'm going to select all of the each H1s, all of the H2s, and all of the H3s. And whenever you're going to assign the same style rule to more than one element or more than one selector, then you can type in the H1 and put a comma between them. Don't put a comma after the last one. But then, for the property value pair we’ll just put it down here text-align: center; And then CTRL+S to save and see that looks a lot better. We have the big headings now in the center of our page. Looks better in the Declaration of Independence. See the benefit that we get by putting the BR tag inside of these big title elements. And the Amendments page, all of these are center aligned. Looks a lot better - and we'll pick up there next time.