Figure 5-1
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.
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>
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 ...
Get HTML5 For Dummies® Quick Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
