O'Reilly logo

Raspberry Pi For Dummies by Mike Cook, Sean McManus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding the Finishing Touches

If you’ve been following throughout the chapter, you now have a HTML page, where you can style the headings with borders, float the image in the content on the right, and turn the list at the top into a navigation bar, with big blue buttons to help people get around the site.

There are a few finishing touches to add to the web page. With computer monitors being so large today, it’s a good idea to limit the width of the page so that visitors can read it without losing their place. Immediately inside the <body> and </body> tags in the page’s HTML file, we’ve added a <div> called wrapper:

<body>

<div class=”wrapper”>

… all web page content here …

</div>

</body>

This has the effect of putting a box around all the web page content that we can style. In the CSS, we set its width to 800 pixels, and added a border so it looks like a box onscreen too. We also set the left and right margins to automatic, which has the effect of centering the content on the page. Here’s the CSS code:

.wrapper { margin-left: auto;

margin-right: auto;

width: 800px;

padding: 16px;

border: 1px black solid;

background: white;}

When the <body> background is set to gray and the wrapper <div> has a white background, it makes the web content stand out on the screen, as you can see in Figure 8-8.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required