I fogli di stile sono suddivisibili in tre tipologia:

Quando scriviamo del codice in HTML, andiamo a formattare i testi con i fogli di stile (CSS). Questi, possono essere richiamati in 3 modi:

• in linea (“basso” livello), quando applichiamo il riferimento ad un elemento specifico;

• interni (“medio” livello), quando definisco uno stile nell’head e lo richiamo per una parte della pagina; per farlo utilizzo la seguente dicitura:

.classe {attributi e parametri}

• esterno, foglio di stile salvato in un'altra parte (qualcosa di esterno che viene richiamato e caricato).

I CSS ESTERNI

Come si ragiona: nei fogli di stile ci si basa su selettori che permettono di puntare a determinate parti di pagina. Vediamo alcuni tipi di selettori.

Selettore Universale

Posizionando * davanti ad una parentesi graffa si indica il selettore universale, ovvero applicherò a tutti gli elementi le caratteristiche che seguiranno.

Selettori di Tipo

Questa tipologia di selettore sfrutta i tag del HTML, applicando a specifici tag specifiche caratteristiche.

Selettori di Classe

Nel foglio di stile definisci la classe, che verrà istanziata all’interno del file HTML. Vediamo come fare:

1. definisco la classe, attribuendole un determinato nome:

.nome_classe {caratteristiche della classe}

2. creo l’istanza della classe per un elemento nel documento HTML:

<p class="nome_classe"> </p>

Selettore con ID

Con i tipi di selettore visti sopra è possibile istanziare una classe tutte le volte che lo si desidera, con gli ID no. Si può infatti creare un ID per cui si caratterizza uno specifico tag, si usa la sintassi:

#nome_id {caratteristiche}

Per poter applicare l’ID a un tag si dovrà seguire la seguente sintassi:

<p id="nome_id"> </p>

Note

Se il foglio di stile è esterno può essere utilizzato per diverse pagine, e in questo caso per effettuare una modifica basterà aggiornare il foglio di stile con i nuovi parametri.

Per connettere il foglio di stile e il file HTML uso un link, secondo la seguente sintassi:

<link rel="stylesheet" href="percorso file" type="text/css">

Dove i parametri sono:

• rel → indica la relazione tra il file connesso al link e il file HTML;

• href → è il percorso del file (se il foglio è nella stessa cartella del file html basta inserire il nome, se invece il foglio non è nella stessa cartella occorre il percorso assoluto);

• type → è un tag per specificare la tipologia di file.