Fogli di stile CSS: cosa sono e come applicarli
...anche a documenti HTML già esistenti, per lavorare sempre meno!
Cosa sono i fogli di stile CSS e come si possono applicare a un documento HTML? Lo scopo di questo articolo è di spiegare con semplicità questi utilissimi codici facendo qualche esempio.
Impareremo tre modi diversi di assegnare i CSS agli oggetti (testi, immagini, ecc...) contenuti in una pagina HTML, ciascuno con i suoi pro e i suoi contro.
Per farlo partiamo questa semplice pagina HTML:
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
</head>
<body>
<h1>Titolo della pagina</h1>
<h2>Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2>Paragrafo 2</h2>
<p>Testo paragrafo 2</p>
</body>
</html>
Cosa sono i CSS
L'acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata).
I CSS permettono di modificare il formato, l'aspetto di un elemento HTML e se opportunamente configurati, ci permettono di applicare al nostro intero sito degli
Per esempio, se abbiamo inizialmente deciso che tutti gli header
Ma procediamo per gradi...
Ann.
Ring Intercom di Amazon | Rendi smart il tuo citofono, apertura a distanza, compatibile con Alexa, audio bidirezionale (verificare la compatibilità)
- Rendi smart il tuo citofono (audio o video): puoi parlare con i visitatori e aprire il portone dell'edificio con l'app Ring. (funziona solo con i citofoni compatibili)
- Ricevi avvisi in tempo reale ogni volta che un visitatore suona al citofono e apri l'ingresso dell'edificio, direttamente dall'app Ring. La funzione di apertura a distanza ti consente di aprire il portone senza interrompere una riunione importante, sia che lavori a casa o in ufficio.
- Ring Intercom è compatibile con Alexa, quindi puoi parlare con chi suona al citofono e aprire il portone utilizzando i comandi vocali.
- Fai entrare amici e parenti in casa a orari prestabiliti: invia loro una Chiave ospite con la funzione di Verifica automatica degli ospiti.
- Progettato per l'installazione fai-da-te, Ring Intercom si collega al citofono esistente. Non comporta nessuna modifica funzionale al sistema citofonico del condominio.
- Che si tratti dei tuoi bambini, amici, familiari o di un fattorino Amazon, puoi utilizzare la
Le tre diverse modalità
Come accennato nell'introduzione, esistono tre modi per applicare i CSS a un documento HTML:
- Stile "in linea"
- Fogli di stile interni
- Fogli di stile esterni
Lo stile in linea
Lo stile "in linea" è uno stile applicato direttamente all'elemento HTML che vogliamo formattare.
Se, per esempio, vogliamo fare in modo che l'elemento
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
</head>
<body>
<h1 style="color: #ff0000;" >Titolo della pagina</h1>
<h2>Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2>Paragrafo 2</h2>
<p>Testo paragrafo 2</p>
</body>
</html>
Così facendo otterremo questo risultato:
Allo stesso modo, volendo cambiare il colore degli elementi
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
</head>
<body>
<h1 style="color: #ff0000;" >Titolo della pagina</h1>
<h2 style="color: #0000ff;" >Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2 style="color: #0000ff;" >Paragrafo 2</h2>
<p>Testo paragrafo 2</p>
</body>
</html>
Ecco il risultato:
Titolo della pagina
Paragrafo 1
Testo paragrafo 1
Paragrafo 2
Come puoi renderti conto, pur funzionando perfettamente, questo metodo è poco pratico quando, per esempio, desidero formattare allo stesso modo decine di elementi simili come, per esempio, i paragrafi che possono essere tantissimi all'interno di una pagina HTML.
Ecco che ci vengono in aiuto i
I fogli di stile "interni"
Partendo dall'esempio precedente, volendo far diventare di colore ciano il testo dei paragrafi, mi sarà sufficiente definire all'interno della sezione
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
<style>
p {color: #00ffff;}
</style>
</head>
<body>
<h1 style="color: #ff0000;" >Titolo della pagina</h1>
<h2 style="color: #0000ff;" >Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2 style="color: #0000ff;" >Paragrafo 2</h2>
<p>Testo paragrafo 2</p>
</body>
</html>
In questo modo ho stabilito che tutti i paragrafi, delimitati dai tag
Titolo della pagina
Paragrafo 1
Testo paragrafo 1
Paragrafo 2
Testo paragrafo 2
Ovviamente possiamo fare la stessa cosa con i tag
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
<style>
p {color: #00ffff;}
h1 {color: #ff0000;}
h2 {color: #0000ff;}
</style>
</head>
<body>
<h1>Titolo della pagina</h1>
<h2>Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2>Paragrafo 2</h2>
<p>Testo paragrafo 2</p>
</body>
</html>
Ma le potenzialità di questo metodo non finiscono qui: se, per esempio, volessimo formattare gli oggetti in modo diverso, anche se sono dello stesso tipo (due paragrafi di colore diverso, per esempio), possiamo utilizzare le
Una
Facendo riferimento all'esempio precedente, dichiariamo la classe
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
<style>
p {color: #00ffff;}
h1 {color: #ff0000;}
h2 {color: #0000ff;}
.sfondogiallo {background-color: #ffff00;}
</style>
</head>
<body>
<h1>Titolo della pagina</h1>
<h2>Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2>Paragrafo 2</h2>
<p class="sfondogiallo" >Testo paragrafo 2</p>
</body>
</html>
Come possiamo vedere il secondo paragrafo ha mantenuto lo stile dichiarato per tutti i paragrafi ma soltanto lui ha "ereditato" lo stile della classe
Titolo della pagina
Paragrafo 1
Testo paragrafo 1
Paragrafo 2
Testo paragrafo 2
Come puoi facilmente intuire in questo modo è possibile modificare contemporaneamente tutti gli stili dell'intera pagina HTML semplicemente modificando i codici all'interno della sezione
Ma come si può ottenere lo stesso vantaggio per tutte le pagine HTML di un intero sito?
È molto semplice: si ricorre all'utilizzo dei
I fogli di stile "esterni"
In pratica non si fa altro che scrivere lo stesso codice finora utilizzato nella sezione
p {
color: #00ffff;
}
h1 {
color: #ff0000;
}
h2 {
color: #0000ff;
}
.sfondogiallo {
background-color: #ffff00;
}
Nella sezione head del nostro documento HTML sostituiremo il codice css con un collegamento al file appena creato, in questo modo:
<!DOCTYPE html>
<html>
<head>
<title>Pagina esempio</title>
<link href="esempio.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Titolo della pagina</h1>
<h2>Paragrafo 1</h2>
<p>Testo paragrafo 1</p>
<h2>Paragrafo 2</h2>
<p class="sfondogiallo">Testo paragrafo 2</p>
</body>
</html>
Inserendo il comando
Comodo, vero?
Ovviamente il file
Conclusioni
Abbiamo visto com'è possibile formattare i contenuti di una pagina o di un intero Sito Web, tramite l'utilizzo dei CSS. Ma i CSS possono fare molto, molto di più!
Esercitati facendo qualche modifica da solo e vedrai che, una volta provati i CSS, non li lascerai più e ti verrà voglia di approfondirne la conoscenza!
Vuoi un libro sul CSS?
- Articoli correlati: Codici colore HTML+CSS ● Testi e immagini con HTML e CSS
Ann.
Bose QuietComfort Headphones con cancellazione del rumore wireless, Bluetooth cuffie over-ear con durata della batteria fino a 24 ore, Bianco
- CANCELLAZIONE DEL RUMORE LEGGENDARIA: Combina senza la minima difficoltà le cuffie con cancellazione del rumore con funzionalità passive, così potrai escludere il mondo esterno, silenziare le distrazioni e andare oltre il ritmo
- MASSIMO COMFORT: I morbidi cuscinetti auricolari avvolgono delicatamente le orecchie, mentre l’archetto comodo e stabile mantiene le tue cuffie over-ear in posizione per le sessioni di ascolto più lunghe
- 2 MODALITÀ DI ASCOLTO: Queste cuffie wireless Bluetooth sono dotate di Quiet e Aware Mode che permettono di passare dalla cancellazione del rumore completa alla piena consapevolezza di ciò che ti circonda, per un controllo del suono ottimizzato
- AUDIO/CONTROLLO EQ AD ALTA FEDELTÀ: Goditi al meglio le tue tracce preferite con audio ad alta fedeltà ed equalizzazione regolabile per controllare bassi, medi e alti, per un impareggiabile suono audace
- BATTERIA CHE DURA TUTTO IL GIORNO: Le Bose QuietComfort wireless headphones offrono una durata della batteria fino a 24
Ann.
