HTML serve a definire la struttura di una pagina web, ma non il suo aspetto grafico. Per modificare colori, dimensioni, spaziature, caratteri e molti altri elementi si utilizza il linguaggio CSS (Cascading Style Sheets). In questa lezione vedremo i principali modi per applicare gli stili a una pagina HTML.
Il tag <style> permette di scrivere codice CSS direttamente all'interno del file HTML. Deve essere inserito nel tag <head> ed è utile soprattutto per pagine semplici o per fare prove durante lo sviluppo.
Ad esempio, se vogliamo cambiare il colore del testo contenuto in un elemento <span>, possiamo selezionarlo tramite il suo attributo id=”valore”. In CSS gli ID vengono preceduti dal simbolo #.
<!DOCTYPE html>
<html>
<head>
<style>
#esempio{
color:green;
}
</style>
</head>
<body>
<p>Puoi colorare la scritta <span id="esempio">Ciao a tutti</span></p>
</body>
</html>
Nelle applicazioni reali è preferibile utilizzare il tag <style> solo quando necessario. Per progetti di grandi dimensioni è consigliato utilizzare un file CSS separato.
Il metodo più utilizzato consiste nel salvare gli stili in un file con estensione .css e collegarlo alla pagina HTML tramite il tag <link>, da inserire all'interno di <head>. In questo modo lo stesso file CSS può essere condiviso da più pagine del sito.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<p>Collegare un file CSS.</p>
</body>
</html>
Questa soluzione rende il codice più ordinato, facilita la manutenzione e permette di aggiornare lo stile del sito modificando un solo file.
È possibile applicare uno stile direttamente a un elemento HTML utilizzando l'attributo style=”valore”. In questo caso il codice CSS viene scritto all'interno del tag interessato.
<p style="color:green">Una scritta verde.</p>
Questo metodo è molto pratico per eseguire test veloci o modificare un singolo elemento. Tuttavia, nelle pagine complete è consigliabile utilizzare un file CSS esterno oppure il tag <style>, così da mantenere codice organizzato e più semplice da aggiornare.