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

Applying Styles to More Specific Parts of the Page

To give you an idea of the web page design we’re aiming to create, take a look at Figure 8-8, which shows our finished web page.

What you’ve learned about CSS so far is fine if you want all your paragraphs, headings, and images to be styled the same. Often you do, because inconsistency is distracting and looks untidy. But in the case of our example, we’ve got two very different images on the page: one that is used as a banner across the top of the page, and a smaller one in the section about Sean’s latest trip. We’ve got two quite different lists too: one that will act as a navigation bar, and one that’s a collection of top tips. How can we give each of these pieces of content its own style instructions?

When you’re doing anything creative on a computer, there are often several solutions, and this situation is no exception. Consider styling the image in the middle of the page first. We want it to sit on the right of the page, with the text flowing around it on the left (as you can see in Figure 8-8). You can use a CSS property called float to achieve that, and using a left margin to put some empty space between the text and the picture is also a good idea. Here’s the CSS for the <img> tag:

img { float: right;

margin-left: 8px; }

9781118554234-fg0808.tif

The Midori browser is written by Christian Dywan with artwork by Nancy Runge

Figure 8-8: Our finished ...

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