O'Reilly logo

HTML5 For Dummies® Quick Reference by Andy Harris

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

A Quick Overview of CSS

CSS works by describing certain parts of the page (one particular tag, all the tags of a specific type, or all tags sharing a particular characteristic). For each of these tag groups, you can then identify a number of rules. Each rule is a name/value pair. Take a look at the simple page displayed in Figure 5-1.

Figure 5-1

9781118012529-fg0501.eps

The code to produce this page is shown here:

<!DOCTYPE HTML>

<html lang = “en”>

<head>

  <title>cssColors.html</title>

  <meta charset = ”UTF-8” />

  <style type = ”text/css”>

    body {

      background-color: yellow;

    }

    

    h1 {

      color: red;

    }

    

    p {

      color: blue;

      background-color: white;

    }

  </style>

</head>

<body>

  <h1>CSS Colors</h1>

  

  <p>

    The heading is red, this paragraph is blue on white, and the page background is yellow.

  </p>

</body>

</html>

tip.eps It goes without saying that a page about colors is disappointing to view in a black-and-white book. As always, be sure to look on the book’s companion Web page (www.aharrisbooks.net/h5qr) to see this page in full and try it on your own machine.

The new elements are not terribly surprising, but they are quite powerful. Note that the colors are changed without changing anything in the HTML body. All the real action happens in a special part of ...

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