Css-Fogli di Style in linea 

Si usano i Css-Fogli di Syile In linea  quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando, senza che questo vada ad influire su altre parti dello stesso documento o pagina web.

Per esempio un paragrafo <p> che debba avere determinate caratteristiche ma con la certezza che queste non siano estese a tutti gli altri paragrafi <p> contenuti all'interno dello stesso documento.

Per riprendere lo stile dell'esempio precedente, abbiamo detto di volere una leggera indentazione con testo giustificato, essendo questa scelta voluta per un solo paragrafo, il modo più comodo e rapido è quello di associare lo stile al solo elemento <p> interessato.

Questo esempio pratico chiarirà sicuramente meglio:

Tutto ciò che sarà scritto tra l'elemento di apertura <p style= ..... > (paragrafo) e fino al suo elemento di chiusura </p> avrà come stile: giustificato con una indentazione di 12 pixel;

Si possono combinare fra di loro più stili, la sintassi corretta prevede di racchiudere il tutto fra doppi apici separando i vari attributi di stile con il punto e virgola.

I più attenti si saranno accorti e resi conto dell'importanza di fare uso dell'elemento (tag) di chiusura, in questo caso </p> che mentre per HTML non era indispensabile, lo diventa invece nel caso dei CSS. La chiusura di questo elemento infatti determina anche la chiusura e quindi la fine dello stile, per cui meglio prendere la sana abitudine di chiudere sempre l'elemento (tag) aperto.

Si noti come lo stile sia stato associato all'elemento <p>, semplicemente avendo introdotto lo stile all'interno delle sue stesse parentesi angolari <> allo stesso identico modo avrebbe potuto essere associato a qualsiasi altro elemento valido di HTML. Ne consegue la facile possibilità di personalizzare tutti gli elementi di html, anche quelli che non piacciono o servono a poco e magari proprio per questo non vengono mai adoperati. Con i CSS si adopera di solito due elementi di html che non hanno altro scopo se non quello di fare da contenitore, questi due elementi infatti non producono alcun effetto se adoperati da soli ma ad essi è possibile associare tutti vari styli, e sono rispettivamente <div></div> e <span></span>

 

Per cui avrei potuto ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo: