Ciao a tutti.
Sto iniziando ora, a studiare il CSS e seguendo un libro della Apress mi trovo subito in un dilemma.
Il seguente codice, secondo il libro, dovrebbe produrre un div "container" con paragrafo in grigio scuro, mentre il paragrafo del secondo div dovrebbe essere rosso.
Il risultato è che tutti e due i paragrafi sono grigio scuro.
<!DOCTYPE html PUBLIC "-//W3C//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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contenuto</title>
<style type="text/css">
#container{
padding:20px;
border:1px black solid;
background: #ccc;
}
#container p{
color:#333;
}
.box{
margin:10px;
padding:20px;
border:1px #000 solid;
}
.box p{
color: #F00;
}
</style>
</head>
<body>
<div id="container">
Testo grigio</p>
<div class="box">
tesTesto in rosso</p>
</div>
</div>
</body>
</html>
Ho provato con IE7, Opera 9.1 e FF2. Per cui sono abbastanza convinto che sono io che non ho compreso qualcosa.
In particolare l'editor CSS mi segnala proprio che il color della classe BOX viene sovrascritto dal color dell'ID container.
Perchè accade questo? l'ID è più importante della classe anche se la classe è dichiarata direttamente nel secondo DIV?
Spero che qualcuno mi possa dare una mano in questo mio inizio nel mondo del CSS a comprendere perchè l'ID sovrascrive la Class.
Grazie,
Rispondi quotando
