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

Using CSS to Change Your Page’s Appearance

So far, then, we’ve built a HTML page that includes marked-up text with headings, links, images, and lists. The problem is that it looks rather dull and it’s hard to read. Figure 8-6 shows the example web page so far, and it has to be said, it’s a bit of a mess. But that’s okay. That’s what CSS is for. As we’ll show you, you can use it to add a splash of color, change the fonts, and generally tidy up your layout.

remember.eps If you want to try this, but haven’t made your own HTML yet, you can use the example file from the book’s website. For more on the book’s companion website, see the Introduction.

Adding a style sheet to your web page

Our style instructions are stored in a style sheet, which is a separate text file to the HTML file. We need to tell the browser which CSS file goes with our HTML file, so in your HTML file, between the <head> and </head> tags, add the following:

<link rel=”stylesheet” href=”main.css”>

9781118554234-fg0806.tif

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

Figure 8-6: Some well marked-up HTML without any CSS.

Your HTML header might look something like this now:

<head>

<meta charset=”utf-8” />

<title>Raspberry Photography: Travel photography site

</title>

<link rel=”stylesheet” href=”main.css”>

</head>

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