I’ve copied and pasted this code out of a book but find that the css does not chnage the colour of div segment.
Can anyone see what is wrong ?
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<title>Example 2-2</title>
<style type=”text/css”>
div {
width: auto;
<background: black;
color: white;
}
</style>
</head>
<body>
<h1>How will this div react to auto width?</h1>
<div>
<h2>Jupiter</h2>
<p>Jupiter is the fifth planet from the Sun and the largest planet within
the Solar System. The Romans named the planet after the god Jupiter. It
is a gas giant with a mass two and a half times the mass of all the other
planets in our Solar System combined.</p>
</div>
</body>
</html>
You had a couple of problems
1/ Back ticks instead of " - may have something to do with me coping the code?
2/ The extra < here <background: black;
I also give the div a name incase you want more than one styled div on your page/site
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 2-2</title>
<style type="text/css">
.black {
width: auto;
background: black;
color: white;
}
</style>
</head>
<body>
<h1>How will this div react to auto width?</h1>
<div class="black">
<h2>Jupiter</h2>
<p>Jupiter is the fifth planet from the Sun and the largest planet within
the Solar System. The Romans named the planet after the god Jupiter. It
is a gas giant with a mass two and a half times the mass of all the other
planets in our Solar System combined.</p>
</div>
</body>
</html>
Yes, I agree with Rubble: it looks like you are either typing the double quotes improperly, or using a text editor like Word to create them (which is a bad idea). Just use straight quotes.
Where I would differ from Rubble is in using a class name like “black”, and you may decide to change the color later. Preferably, use class names that describe the purpose/role of the element.
Thanks everyone. I think the problem with html coding is that its not validated as you go. Compare it to say c# when where you have compile it first, at least you know straight away if there is syntax problem - as it won’t compile.
Cheers
MAtt
