Styling the Container


Now that the <body> element has been styled, all content will be centered on the page. This can be overcome by setting the container to text-align: left.

For browsers that support auto margins, the correct centering method is then applied: margin: 0 auto.

The container can be set to a width of 700px. This width can be changed to suit your needs.

Finally, the container must be set with a white background using background: #fff as shown in Listing 18.4. The results can be seen in Figure 18.2.

Listing 18.4. CSS Code for Styling the Container
body {     margin: 0;     padding: 0;     text-align: center;     background: #B0BFC2;     color: #444; } #container {     text-align: left;     margin: 0 auto;     width: 700px;     background: #FFF; } 

Figure 18.2. Screenshot of styled container.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net