Wednesday, January 6, 2010

Section 8.27. Who gets the inheritance?










8.27. Who gets the inheritance?


Sniff, sniff; the <body> element has gone to that great browser in the sky. But he left behind a lot of descendants and a big inheritance of color "green". Below you'll find his family tree. Mark all the descendants that inherit the <body> element's color green. Don't forget to look at the CSS below first.



body
h1 p h2 p h2 blockquote
a em a img p p
em em a




body {
color: green;
}

Here's the CSS. Use this to determine which of the above elements hit the
jackpot and get the green (color).

p {
color: black;
}





8.27.1. BE the Browser



If you have errors in your CSS, usually what happens is all the rules below the error are ignored. So, get in the habit of looking for errors now, by doing this exercise.


Below, you'll find the CSS file "style.css", with some errors in it. Your job is to play like you're the browser and locate all the errors. After you've done the exercise look at the end of the chapter to see if you caught all the errors.




<style>
The file "style.css"
body {
background-color: white
h1, {
gray;
font-family: sans-serif;
}
h2, p {
color:
}
<em> {
font-style: italic;
}
</style>






The exercise got me thinking... is there a way to validate CSS like there is with HTML and XHTML?


Of course!


Those W3C boys and girls aren't just sitting around on their butts, they've been working hard. You can find their CSS validator at:


Type that URL in your browser and we think you'll feel quite at home when you get there. You're going to find a validator that works almost exactly like the HTML and XHTML validators. To use the CSS version, just point the validator to your CSS URL, upload a file with your CSS in it, or just paste it into the form and submit.


You shouldn't encounter any big surprises, like needing DOCTYPEs or character encodings with CSS. Go ahead, give it a try (like we're not going to make you do it on the next page, anyway).













No comments: