4. Regole di ereditarietà
Benché non sia immediatamente visibile, il linguaggio HTML nasce con una gerarchia interna nei propri marcatori che prevede le seguenti tre categorie, in ordine decrescente d'importanza:
Elementi di blocco
Elementi in linea (inline)
Elementi invisibili
Gli elementi di blocco sono riconoscibili perché sono preceduti e seguiti da una riga vuota, in pratica delimitano con precisione un blocco di testo e lo isolano dal resto del documento. Fanno parte di questa categoria i seguenti marcatori: <body> che raggruppa l'intero documento, <h1> e tutti gli altri livelli di titolo, il paragrafo <p>, le liste: <ol>, <ul> e <li>, il marcatore divisionale <div> che seleziona una porzione del documento, e anche i marcatori vuoti come <br> e <hr> che inseriscono rispettivamente un ritorno a capo e una riga di separazione.
Gli elementi in linea sono invece contenuti all'interno di un blocco e descrivono le caratteristiche di una particolare porzione di quest'ultimo. Classici esempi sono <strong> per il grassetto, <img> per l'inserimento delle immagini, <a> per l'inserimento di un'ancora per link ipertestuale.
Infine gli elementi invisibili contengono informazioni non visualizzate sulla pagina, come <title>, <style> e <link>.
Se disegnassimo una gerarchia di questi vari elementi otterremmo una struttura ad albero, dove in cima comparirebbero gli elementi di blocco più generali e poi, a mano a mano che si scende, quelli sempre più particolari fino a giungere agli elementi in linea. Ciò crea una relazione di discendenza con genitori che specificano parametri ereditati dai figli.
Tale gerarchia è determinante per stabilire le regole di ereditarietà usate dai CSS all'interno di un documento che contenga regole stilistiche applicate a più elementi. Una regola stilistica impostata a livello d'intero documento mediante l'elemento <body> si applicherà a tutti gli elementi che esso contiene senza il bisogno di ulteriore definizione, se tuttavia impostassimo una regola conflittuale a livello di paragrafo o di titolo questa avrà la precedenza rispetto alle indicazioni contenute in body. Inoltre se inserissimo una regola in linea ancora più vicina al contenuto, e perciò più specifica, questa avrebbe il sopravvento su qualsiasi parametro ereditato dagli elementi di livello superiore.
Nel caso esistano stili di pari livello in conflitto, ad esempio
p { color: blu} e p { color: red } entrambi riferiti allo stesso selettore p, ha la precedenza quello scritto per ultimo.
Struttura ad albero degli elementi HTML
I marcatori o elementi HTML si dividono in tre grandi categorie, come altrettante scatole cinesi. I più ampi e importanti sono gli elementi di blocco che delimitano porzioni ben definite del documento. Seguono gli elementi invisibili, che non vengono visualizzati sulla pagina finale, e gli elementi in linea che si collocano all'interno di una riga contenuta in un blocco.

|