Come scrivere un CSS

Il CSS, Cascading Style Sheet, è il linguaggio utilizzato per la progettazione e la presentazione delle pagine HTML. Questo sistema è stato sviluppato nel 1996 dal World Wild Web Consortium; lo scopo è quello di distinguere e separare gli aspetti della formattazione di una pagina, vale a dire tutte le caratteristiche legate all’estetica come: colori, font, dimensioni e al contenuto vero e proprio della pagina web.

In questa breve guida daremo maggiori informazioni riguardo i fogli di stile CSS, quali sono i vantaggi, le principali caratteristiche, tipologie e usi.

La creazione dei fogli di stile CSS è molto facile. Il CSS è infatti realizzato sotto forma di testo, sia direttamente in un documento HTML oppure utilizzando un qualsiasi editor di testo e provvedendo successivamente alla sua integrazione al’interno pagina web. Quest’ultima è la modalità più utilizzata dai web designer: in questo modo si crea un codice sorgente che rinvia a fogli di stile separati. Il codice sorgente è più leggero se presenta meno ripetizioni e questo incide anche sulla velocità di download e di visualizzazione del sito.

Il processo di realizzazione di un file di questo tipo è molto semplice.
Occorre, innanzitutto, individuare l’editor di testo da utilizzare; anche il Blocco Note è sufficiente e, dopo aver realizzato il testo, bisogna salvarlo con l’estensione .css.

A questo punto, dopo aver creato e organizzato ordinatamente tutti i fogli nelle apposite cartelle, è necessario importare il file CSS all’interno del sito e sarà collegato alle pagine HTML,le quali presenteranno le regole di stile presenti nel file caricato.

Il CSS si basa su una struttura predefinita, basata su selettori e dichiarazioni, cioè delle rappresentazioni, dei codici che definiscono le pagine HTML: si tratta di un insieme di proprietà scritte tra due parentesi graffe e che terminano con punto e virgola. La dichiarazione a sua volta, si compone di altri due dati: proprietà e valore, i quali permetto di individuare uno specifico elemento da modificare, secondo il valore che più si preferisce. Questi sono separati dai due punti, mentre le dichiarazioni sempre da un punto e virgola Quindi, un esempio di CSS per stabilire lo stile di un testo, può essere il seguente:
p: {font: 14px Perpetua, verdana;}

I selettori di un CSS sono:

• di tipologia: servono a individuare uno specifico elemento HTML e consente di selezionare tutti gli elementi dello stesso tipo presenti all’interno del documento;
• classe: si riferisce a una classe specifica e si scrive con un punto (.) e un nome a propria discrezione;
• ID: si riferisce a un ID specifico e si inserisce all’interno del codice sorgente proprio con la dicitura “id=”;
• universale: è il selettore che si riferisce a tutti gli elementi HTML ed è rappresentato con un asterisco.

Quali sono i tre tipi di CSS?

I fogli di stile CSS sono tre . Nello specifico, si distinguono in:

• esterni: riguardano gli oggetti presenti sulle varie pagine del sito;
• interni: si riferiscono a una sola pagina;
• in linea: sono i CSS che controllano anche una singola parola di una specifica pagina web.

È possibile optare anche per una combinazione di queste tipologie, ma bisogna tenere presente che i fogli di stile CSS in linea hanno la precedenza sui fogli interni e questi ultimi, a loro volta, su quelli esterni.

Cosa si può fare con il CSS?

I fogli di stile CSS possiamo dire che siano fondamentali per arricchire l’estetica, l’aspetto visivo e la presentazione di un qualsiasi sito. Con i CSS, quindi, si interviene sul layout: si stabilisce il posizionamento della grafica, la scelta dei colori, il font e tutti gli elementi ottici che permettono di distinguere la pagina.

Ciò che è alla base della funzione di un file CSS è l’idea di dividere il tema e l’oggetto di una pagina dalla sua presentazione.