I CSS ovvero Cascading Style Sheets

sono ormai diventati molto comuni sul web, e servono per migliorare l'aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti , grandi o piccoli che possano essere ; se combinati con un linguaggio di Scripting, quale il JavaScript , danno vita all' HTML Dinamico conosciuto anche come DHTML, consentendo di superare quelli che erano considerati i limiti di html standard. W3C - HTML4.01 - Markup Validation Service .
In questa Breve ed esauriente, descrizione dedicata ai fogli di style o CSS. Non o certo la pretesa di insegnare le molteplici tecniche legate a questo nuovo modo di programmare le pagine web, tenuto conto che anch' io sono l'ultimo arrivato, ma vuole con tutta semplicità essere una piccola introduzione , per rendere meglio l'idea di cosa siano, come si adoperano e a cosa servono i CSS , visto poi che sempre più siti ne fanno uso. E poi di queste guide in rete ne troverete a pacchi.
E' persino possibile creare delle vere e proprie animazioni sfruttando l'elevata versatilità offerta dal Posizionamento degli oggetti sullo schermo , siano essi grafici o no, posizionamento che è possibile fare con accurata precisione.
Tanto per rendere un po' meglio l'idea , non si limitano a giustificare il testo o a stabilirne i rientri. Pensate alle dimensioni dei caratteri dove non esistono più limiti. Parlando di immagini queste possono essere sovrapposte come se si trattasse di piani, ad ognuno è possibile assegnare una diversa priorità di visualizzazione per cui le possibilità offerte sono davvero notevoli.
Non tutti i browser li supportano , non allo stesso modo almeno , fra alcuni di questi ci sono differenze a volte davvero sorprendenti tali da scoraggiare chi ha deciso di farne uso.
Per prima cosa hanno un loro elemento (tag) che viene specificato in html , si tratta dell'elemento: <style> e relativa chiusura </style> questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al suo interno , comprese immagini e links , dipende soltanto dalle combinazioni che se ne vorrà fare.
Fondamentalmente sono tre i modi di usare i CSS , quale sia il migliore dipende soltanto da voi , e dalle vostre reali esigenze :

NB Tenete presente che non tutti i Browser interpretano i Css allo stesso Modo.

.. ► - Direttamente in Linea nella Pagina : .. ► - Ad inizio pagina a stile incorporato : .. ► - Nel collegamento ad un foglio di stile esterno : ..

in Linea nella Pagina

In linea  o meglio quando si ha la necessità che lo stile sia relativo al solo blocco che stiamo trattando, senza cioè 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:

<p style="text-align : justify; text-indent : 12px;">

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 motivo non vengono mai adoperati. Con i CSS si adoperano 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 si poteva ottenere la stessa cosa nidificando un contenitore all'interno dell'elemento P a questo modo:

<div style="text-align : justify; text-indent : 12px;"><p>
tutto il testo del paragrafo</p></div>

Stile incorporato nella Pagina

Con style incorporato Cioè quando allo stesso stile fanno riferimento diversi elementi (tags) html. Sarebbe molto dispersivo, e laborioso, definire lo stesso stile più volte all'interno della stessa pagina quando poi servirebbe sempre per lo stesso identico scopo. Molto meglio definirlo una sola volta, ad inizio pagina. Così facendo tutti gli elementi interessati seguiranno quello stesso stile.
In questo caso le istruzioni non saranno più inserite all'interno del singolo elemento (tag) , ma ad inizio pagina dichiarate dagli elementi (tags) <style> e </style> posti all'interno della sezione <head> </head>
Questo metodo non impedisce però di fare uso anche di eventuali definizioni di stile in linea, le quali avrebbero priorità sulle dichiarazioni di stile inserite ad inizio pagina.

<head>

<style type="text/css">

<!--

p {

text-align : justify; 

text-indent : 12px;

}

-->

</style>

</head>

Ora tutto ciò che si troverà all'interno di qualsiasi paragrafo definito con il "tag   <p></p> subirà lo stile impostato a inizio pagina, a meno che non ne venga creato uno in linea il quale , avrebbe la priorità rispetto all'altro.
E importantissimo non dimenticare mai di chiudere il "tag che si era aperto, anche nei casi in cui si trattasse di "Tag come <p> che in html non necessitano della relativa chiusura </p>.
In questo contesto sono proprio loro, i tags chiusi, a decretare la fine dello style oltre che quella del paragrafo.
I due elementi <!-- e --> posti ad inizio e fine blocco, sono gli stessi adoperati in html e servono a far ignorare lo style a tutti quei browser che non dovessero supportarli. Questi elementi infatti così come in html hanno significato di commento, servono cioè soltanto come note, etichette, senza influenzare in alcun modo il browser.
Nell'esempio è stato adoperato il (tag) <p> ma potevamo usare qualsiasi altro elemento valido di html.
Molti usano i "Tag - <h1>, <h2>, <h3>, ecc. ecc. che di solito non vengono mai adoperati? (anch' io li uso poco).  Inoltre si possono usare anche le "classi" .
Non esistono limiti al numero di elementi definibili dall'utente

Segue:>>>  ( Collegamento ad un FOGLIO di STILE ESTERNO: )

► - Per chi non avesse tempo di creare un Foglio di stile di sana pianta, esistono anche degli appositi programmi che potete trovare in rete, molti anche a gratis.

►
►
►
►