This may be one of those things that has little practical value, but since it’s been presented to me I have to know how to do it correctly.
I’m working my way through HTML, XHTML and CSS for Dummies. On pp 163-164, it states:
"You can apply a background color to a block of text - for example, a paragraph - just like you define a background color for the entire page.
You use ‘background’ as a shorthand property for all individual background properties or ‘background-color’ to set just the color, like this:
selector {background: value value value;}"
For practice, I decided to try coloring the five paragraphs in my document 5 different colors. I thought from the above language that I could do this. So I put the following in my document:
p {background: lime aqua fuchsia silver teal;}
The background remained white. But, when I changed it to this:
p {background: lime;}
all the paragraphs changed to lime while the headers and general background remained white.
Did I misunderstand the book? Did the book get something wrong? Did I make a mistake in my code? Please let me know. Thanks!
I can’t seem to attach the file, so here is the code:
<!DOCTYPE html PUBLIC “-//W#C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 10 Practice</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />
<style type=“text/css”>
body {color: olive; font-family: Verdana, sans-serif; font-size: 85%}
hr {text-align: center;}
h1 {color: #808000}
p {background: lime aqua fuchsia silver teal;}
a:link {color: #FF0000;}
a:visited {color: green;}
a:focus {color: blue;}
a:hover {color: purple;}
a:active {color: black;}
</style>
<body>
<h1>This is Heading 1</h1>
<p>This is a paragraph. It's just something I threw together. This sentence
contains <a href="http://www.w3.org/">a link</a> to W3C, which you have
probably visited. This sentence contains a link to <a href=
"http://www.foo.net/">someplace else</a>. This is <a href=
"http://www.htmlhelp.com/" class="offsite">an offsite link</a>. In the
beginning was the word. And the word wrapped. I'll be looking soon for
opportunities to style this text. In the meantime it will do merely to
occupy space.</p>
<h2>I'm Heading 2</h2>
<p>This is a paragraph. It's just something I threw together. In the
beginning was the word. And the word wrapped. I'll be looking soon for
opportunities to style this text. In the meantime it will do merely to
occupy space.</p>
<h3>Heading 3 here</h3>
<p>This is a paragraph. It's just something I threw together. In the
beginning was the word. And the word wrapped. I'll be looking soon for
opportunities to style this text. In the meantime it will do merely to
occupy space.</p>
<h4>Heading 4: the final insult</h4>
<p>This is a paragraph. It's just something I threw together. In the
beginning was the word. And the word wrapped. I'll be looking soon for
opportunities to style this text. In the meantime it will do merely to
occupy space.</p>
<h5>Heading 5 I Am said Sam. In the Mosaic browser default stylesheet, I'm
one step smaller than normal paragraph text. In the Core Style Project, I
am still one step larger.</h5>
<p>This is a paragraph. It's just something I threw together. In the
beginning was the word. And the word wrapped. I'll be looking soon for
opportunities to style this text. In the meantime it will do merely to
occupy space.</p>
<h6>Heading 6, extended to produce a line break, so as to be able to
determine line-height. This ought to do it, what? In the Mosaic browser
default stylesheet, I'm two steps smaller than normal paragraph text
(perverse!). In the Core Style Project, I am the same size.</h6>
<hr />
</body>
</html>