In questa prima lezione sui CSS impareremo che ci sono due tipi di fogli di stile: esterni e interni; inoltre vedremo come inserire dei css interni alla nostra pagina HTML tramite il tag link.

Avevamo già accennato che i CSS sono fortemente legati al linguaggio html. E infatti, ecco che ci compare subito il primo tag. Ma andiamo con ordine.

I fogli di stile possono essere uniti con il codice html, in modo da usare entrambi i linguaggi per ottenere effetti migliori. Ci sono due tipi di fogli di stile. Quelli esterni e quelli interni. Vediamo le differenze:

• CSS interni : un foglio di stile si dice interno quando il suo codice è contenuto tra quello html con cui collabora.
• CSS esterno : un fogli di stile si dice esterno quando rappresenta un file totalmente a parte dal codice html. In questo caso, tramite un tag, il codice html richiama quello css contenuto nel file a parte.

In questa lezione vedremo come inserire un foglio di stile esterno.

Per fare ciò ci basta utilizzare il tag link, un tag di collegamento che non va chiuso. Questo tag va inserito all’interno della testata (head) e ha quattro principali proprietà. Ma vediamo prima il codice:

Ed ecco le quattro proprietà (solo tre presenti nell’esempio) :

• rel : É un tag obbligatorio. Sono possibili solo due opzioni, ma le analizzeremo in seguito… per ora limitatevi ad inserire stylesheet
• type : indica il tipo ed è pure lui obbligatorio. Per i css è possibile solo text/css come opzioni.
• href : indica il nome del file nel quale è contenuto il codice. E’ naturalmente più che obbligatorio.
• Media : per ora mi limiterò ad un accenno, che sarà poi approfondito nelle prossime lezioni. Indica la periferica al quale si applice il foglio di stile (allo schermo, alla stampante). Non è obbligatorio.

Avrete notato che nel attributo href viene richiesto l’indirizzo di un file, che ovviamente va creato. Per crearlo seguiamo lo stesso procedimento che usiamo per creare un file html. Apriamo il blocco note e salviamo con l’estensione .css …

Bene, alla prossima

Tags: cascading styles sheets, CSS, inserire-foglio-stile