Hands On Practice 3.8 Exercise

Click Here to View Finished Exercise

 


Chapter 3

Configuring Color and Text with CSS

Hands On Practice 3.8 P.101

In this exercise I learned how to center my content on a web page. This can be done simply through CSS.

The first thing I did was apply an Id Selector called "wrapper" to my external css page. See code below.

#wrapper { width: 700px;
margin-left: auto;
margin-right: auto;
}

Then I applied that code from the external CSS page to the main body of the html web page by using this code. I used a div tag.

<body>
<div id="wrapper">
..... page content goes here
</div>
</body>

Then I created a new Id Selector called "container".

#container { margin-left: auto;
margin-right:auto;
width:80%;
}

I replaced the old Id Selector "wrapper" with the new one "container". I am assuming that this was done because now the page is centered and we want to even out the page a little bit. Please see code below.

<body>
<div id="container">
..... page content goes here
</div>
</body>