Originariamente inviato da Valeria75_bis
Spesse volte, guardando esempi di fogli di stile, mi capita di trovare situazioni nelle quali viene realizzato un foglio di stile "gerarchico" con una struttura del tipo padre.figlio; in quali è consigliabile questa soluzione??
Esempio:
<div> Con intestazione di un'area
<div> Con sottotiolo dell'area
<div> Con contenuti
... questo è un semplice esempio per capire come potrei realizzare una struttura "padre.figlio" per facilitare la lettura dei vari elementi nel file CSS
Detto così è un po' generico. Di solito si suddivide il contenuto della pagina in blocchi logici contenuti in un <div> (header, menù, navigazione. news, contenuto, ...) il tutto contenuto in un contenitore (scusa il gioco di parole )

Se invece intendi una struttura del blocco con la definizione dei vari tag, tipo questa:
codice:
CSS 
#contenuto .news {
	width: 240px;
	height: 246px;
	background: #fff url(Image.jpg) no-repeat 0 0;
	float: left;
	margin: 30px 22px 0px 0px; 
	padding: 0 0px 0 2px;
}
#contenuto .news p { margin: 0px 13px 15px 15px;}
#contenuto .news h3 { margin: 14px 7px 7px 15px; color: maroon; border: none;}
(X)HTML 
<dic id="contenuto">
    <div class="news"> 
      <h3>titolo</h3>
      


           testo descrittivo .....
      </p>
    </div>
</div>
di solito si utilizzano per dare caratteristiche diverse dal resto della pagina, utilizzando sempre i tag semanticamente corretti.

Mi spiego meglio: solitamente si attribuiscono caratteristiche generiche a tutti i tag hx impostando la dimensione descrescente del font a partire da h1, h2, ... e una dimensione/carattere/... al tag

, validi per tutto il sito.

Se poi devo costruire un box come quello che ti ho indicato come esempio, utilizzerò sempre un tag hx per indicare il titolo e un tag

per contenere la descrizione. Ma le definizioni generali probabilmente non vanno bene come font, dimensione o colore.

Ecco allora che limito la descrizione del tag interessato solo a quelli contenuti nel box in questione ("news").