Trouble with 9!


#1

I have no idea what I'm supposed to do here... help?


#2

@adreonac,

++++ CSS an Overview 9/26
If your Browser loads this HTML-document into memory

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>I Know Kung Fu (er, CSS)</title>
	</head>
	<body>
		<div>
			<h3>What's CSS for?</h3>
			<p>CSS is for styling HTML pages!</p>
			<h3>Why use it?</h3>
			<p>It makes webpages look <span>really rad</span>.</p>
			<h3>What do I think of it?</h3>
			<p>It's awesome!</p>
		</div>
	</body>
</html>

the Browser does the load
by using the Document Object Model

               html
                 |
       + - - - - + - - +
       |               |
      head            body
       |               |
   + - - - +           +
   |       |           |
 link    title        div     
                       |
     +- - - +- - -+- - +-+- - +- - - +
     |      |     |      |    |      |
    h3      p     h3     p    h3     p
                         |
                        span

+++
In DOM talk...
html Element has no parent, but is parent to a div Element.
The div Element is a descendant of html Element

div Element is a child of html,
AND is parent to 6 children

Those children are sibling's to each-other,
and are direct descendant of the div Element.

The second paragraph Tag, being the 4th child of the div Tag
is parent to a span Element.

In your link Element you defined
that the Styling specific's are defined
in the file 'stylesheet.css'

The CSS facility of your Browser will read this file
and will expect a specific syntax

css-Selector  {
     **a property**
     **property-key**: **property-Value**;
     }

For instance, we want all p-Tag to have the color red

 p {
    color: red;
 }

We want all span-Tags to be 'yellow'

span {
   color: yellow;
}

#3

h3
{ color: red; }
p{ font-family:Courier;
}
span {
background-color: yellow;
}

Like this