Inserire gli stili per un elemento HTML con l'attributo STYLE complica notevolmente il codice della pagina,
soprattutto quando gli elementi sono molti e ciascuno ha stili propri.
Ad esempio il seguente menu è formato da un contenitore DIV che ha al suo interno 5 contenitori DIV, ciascuno dei quali contiene una voce di un menu.
Cos'è HTML
Storia dell'HTML
Struttura della pagina
Elementi HTML, HEAD e BODY
Il paragrafo
Il codice che realizza questa struttura è molto complicato, quasi illegibile:
<DIV STYLE="background-color:#CC6666;border:1 solid darkblue;font-size:13px;color:darkblue;font-weight:bold;width:230px;">
<DIV STYLE="background-color:#CCCCCC;margin:2px;padding:2px;border:1 solid darkblue">Cos'è HTML</DIV>
<DIV STYLE="background-color:#CCCCCC;margin:2px;padding:2px;border:1 solid darkblue">Storia dell'HTML</DIV>
<DIV STYLE="background-color:#CCCCCC;margin:2px;padding:2px;border:1 solid darkblue">Struttura della pagina</DIV>
<DIV STYLE="background-color:#CCCCCC;margin:2px;padding:2px;border:1 solid darkblue">Elementi HTML, HEAD e BODY</DIV>
<DIV STYLE="background-color:#CCCCCC;margin:2px;padding:2px;border:1 solid darkblue">Il paragrafo</DIV>
</DIV>
Come si vede, la gran parte del codice è lo stile CSS e la gran parte di codice è ripetuto (ogni volta per un DIV).
Inoltre, se si desidera cambiare uno stile per ciascuno dei 5 contenitori DIV interni, occorre fare la modifica per 5 volte!
I CSS risolvono il problema di separare lo stile dagli elementi, dando la possibilità di inserire lo stile degli elementi della pagina nell'HEAD.
Questo modo di inserire gli stili si chiama stili incorporati nella pagina.
Innanzitutto, occorre poter individuare gli elementi HTML della pagina.
Con gli stili incorporati, si definisce all'inizio della pagina (nell'HEAD) una sola volta come debbono essere tracciati i vari elementi della pagina.
