Ciao a tutti,
sto leggendo un libro sui CSS e ho subito trovato un primo inconveniente... questo il codice HTML

codice:
<html>
 <head>
  <title>Titolo qui</title>
  <link rel="stylesheet" type="text/css" href="div1.css" /> 
 </head>
 
 <body>
  <div id="container"> 
 

This is our content area.</p> 
  <div class="box"> 
   

I'm in a box!</p> 
  </div> 
  <div class="box"> 
   

I'm also in a box!</p> 
  </div> 
</div>
 </body>
</html>
e questo il CSS

codice:
#container{
  padding: 20px;
  border: 1px solid #000;
  background: #CCC
}
.box{
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}
#container p { 
  color: #333; 
  } 
 .box p { 
  color: #F00; 
  }
Quindi, il primo DIV ha id container e gli viene applicato il css #container.
I DIV interni hanno class box e gli viene applicato il relativo css .box.

Ora, viene definito un altro stile #container p il quale viene applicato a tutti i tag che hanno id container e al loro interno hanno un tag p.

L'altra definizione .box p è analoga.. applicata a tutti i tag che hanno classe box e al loro interno hanno un tag p.

Però, i tre testi vengono visualizzati tutti in grigio, mentre mi aspettavo che i testi interni ( i'm a box e i'm also a box ) venissero visualizzati in rosso.

Cosa ho sbagliato ?