can link to an external CSS style sheet like we did earlier. Either way is fine. Again, we'll present it as though it's in a
separate CSS file. Modify your code as shown:
CODE TO TYPE:
First, we style the <p> element s o that the text is aligned to be centered and the widt h of the element is 400px.
The widt h property sets the width of block elem ents to a certain size. Even if you decrease the width o f the element
relative to the current size of the brows er windo w, the elements that fo llow that block element will still be located on the
The t ext -align property affects the <im g> elem ent as well as the text because the <im g> elem ent is an inline element;
text-align (despite its name) actually affects the alignment of any inline element, as well as text that is nested in the
element to which it is applied. (This com es in pretty handy som etimes .)
Preview your HTML page. It's lo oking m ore like we want it to, but all of the content is s till over on the left side o f the
page. Let's move it to where we want it, in the center of the page. Modify your code as shown:
CODE TO TYPE:
Preview the HTML page. Everything has magically moved to the center of the browser! Try res izing yo ur browser
window. You'll s ee that whether you make your browser windo w narro w or wide, the content s tays in the center. Let's
trace ho w this works.
We style the <div> elem ent with the id "content." To get a centered layo ut like this, we need a <div> element that
contains all of o ur content, because we want to center all of our content by setting a m argin between that <div> and the
<body>. Remem ber that a margin is the space between elements, so by setting a margin on this <div> we're adding
space between the edge of the body (which contains the <div>) and the edge o f the <div>.
We could have set the left margin to a fixed size, like 20 0px, and if the browser is open to 800 px wide, then the content
would be located exactly in the center (200px m argin + 400px wide co ntent + 200px s pace on the right places your
content in the m iddle). We don't do that though becaus e we have no idea how wide the user's browser is going to be.
Using m argin: aut o; we instruct the browser to set the margin itself automatically. And it turns out that almos t all
major browsers set it automatically so that the left and right margins are equal in size. This is a useful trick yo u can us e
to get co ntent into the m iddle o f your page.
Yo u might see different results with some brows ers; mo st will center the content page as described.
We set the width of the <div> to the sam e as that of the <p> so that the content will be centered exactly on the page (if
we made the <div> wider than the <p> we'd have to add some margin to the <p> to make sure it remains centered).
We also added some padding to the to p to give the co ntent a little breathing ro om at the top o f the page.
Did you notice that the content o f the heading is not centered? You can fix that. Just add the text-align property to a rule
for the <h1> element too . Modify your code as shown: