Lo stile CSS
Aggiungi un tocco di colore e stile alle pagine HTML.
Grazie al CSS in questo contesto � possibile formattare la struttura del contenuto HTML.
Per iniziare, quello che devi sapere, � che il foglio di stile pu� essere creato "inline" nel file HTML includendolo tra <style> e </style>
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
<style>body { background: #cc0000; }</style>
</head>
<body>
Hallo World! (Sono rosso)
</body>
</html>oppure creato come un file a s� stante (esempio: esterno.css)
#esterno.css
body { background: #cc0000; }
e incluso come risorsa esterna dentro la pagina HTML tramite link.
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
<link rel="stylesheet" href="/percorso/esterno.css">
</head>
<body>
Hallo World! (Sono sempre rosso)
</body>
</html>In un sito web spesso molti elementi stilistici si ripetono tra le pagine e dunque includendo il file esterno si evita di inserire lo stesso codice in tutte le pagine. La questione ha ramificazioni pi� complesse, ma non � di primaria importanza ora per lo scopo di questa guida.
In questa guida non ti spiegher� troppa teoria e sintassi dei fogli di stile che puoi gi� trovare in rete in grande quantit� come ad esempio qui, ma cercher� di spiegarti in modo davvero semplice i concetti di base per farti capire il funzionamento in quanto oggi gli editor (come Brackets) aiutano moltissimo per quanto riguarda la sintassi.
Prendiamo come riferimento il file finale che hai prodotto nella guida HTML precedente.
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
<img
src="https://www.gtmasterclub.it/css/img/logo.png"
alt="logo gt master club"
width="288" height="291"
>
<h1>Intestazione primaria</h1>
<h2>Intestazione secondaria</h2>
<iframe
width="560" height="315"
src="//www.youtube.com/embed/zZSnpHIXRvo?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
<div>
<p>Paragrafo che inizia e poi inserisce un elenco puntato con:
<ul>
<li><i>un corsivo</i>,</li>
<li><b>un neretto</b>,</li>
<li>una <u>sottolineatura</u></li>
</ul>
</p>
</div>
</body>
</html>Grazie al CSS puoi dare stile ai singoli elementi presenti nel documento HTML.
1. Allinea l'immagine img a destra
img { text-align: right; }2. Colora di blue l'intestazione primaria h1
h1 { color: #000066; }3. Colora di grigio l'intestazione secondaria h2 e rendila corsiva
h2 { color: #666666; font-style:italic; }4. Rendi il video di Youtube fluido e dunque con la larghezza di tutto lo schermo
iframe { width: 100%; }5. Colora lo sfondo del div di azzurro chiaro e imposta il padding a 13 pixel
div { background-color: #66cccc; padding: 13px; }6. Imposta la dimensione del font dell'elenco puntato a 9px;
ul li { font-size: 9px; }Mettiamo insieme i pezzi e includiamoli nel documento HTML.
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
<style>
img { float: right; }
h1 { color: #000066; }
h2 { color: #666666; font-style:italic; }
iframe { width: 100%; }
div { background-color: #66cccc; padding:13px; }
ul li { font-size: 9px; }
</style>
</head>
<body>
<img
src="https://www.gtmasterclub.it/css/img/logo.png"
alt="logo gt master club"
width="288" height="291"
>
<h1>Intestazione primaria</h1>
<h2>Intestazione secondaria</h2>
<iframe
width="560" height="315"
src="//www.youtube.com/embed/zZSnpHIXRvo?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
<div>
<p>Paragrafo che inizia e poi inserisce un elenco puntato con:
<ul>
<li><i>un corsivo</i>,</li>
<li><b>un neretto</b>,</li>
<li>una <u>sottolineatura</u></li>
</ul>
</p>
</div>
</body>
</html>Quello che ottieni caricando la pagina sul server e aprendola con il Browser � il seguente risultato
Sulla destra dell'immagine puoi vedere l'inspector di Chrome che ti consente di fare modifiche al volo agli elementi della pagina e fare eventuali test prima di fare effettivamente le modifiche al file.
Oltre agli elementi puoi definire lo stile di altri selettori come classi e id (tra gli altri) che possono essere comodi quando devi applicare uno stile specifico per un determinato elemento univoco della pagina
- nell'HTML definito con
id="logo" - nel CSS definito con
#logo
oppure uno stile riusabile su pi� elementi e dunque da condividere
- nell'HTML definito con
class="rosso" - nel CSS definito con
.rosso
Va detto che non esiste una regola sintattica di base per l'applicazione dello stile ai vari selettori, ma ragionando sul significato di ognuno di essi � possibile mantenere una logica di realizzazione pi� consona possibile.
Nel paragrafo iniziale di questo capitoletto puoi vedere come ho usato una classe per definire un aspetto prettamente visuale, mentre un id per definire un elemento anche strutturale e definire tutti gli elementi al suo interno in modo specifico.
Senza dilungarmi troppo vado al dunque e ti mostro come in pratica puoi usare questi due selettori.
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
<style>
#logo { background-color:green; padding:30px; text-align:center; }
#logo p { color:white; }
.rosso { color: red; }
</style>
</head>
<body>
<h1><span class="rosso">Intestazione</span> primaria</h1>
<h2>Intestazione <span class="rosso">secondaria</span></h2>
<p>p fuori dal div logo</p>
<div id="logo">
<img
src="https://www.gtmasterclub.it/css/img/logo.png"
alt="logo gt master club"
width="288" height="291"
>
<p>Il mio logo</p>
</div>
</body>
</html>Quello che ottieni caricando la pagina sul server e aprendola con il Browser � il seguente risultato.
Come puoi facilmente intuire grazie alle classi puoi assegnare comportamenti comuni a pi� elementi e tramite gli id puoi definire comportamenti esclusivi e intercettare anche sottoelementi di tale elemento identificato in modo univoco.
NB: attenzione perch� il ragionamento fatto per gli id sui sottoelementi si applica anche alle classi e in questo caso il punto che voglio farti notare � che pu� avere senso usare gli id come identificatori e dunque con un suo senso logico. Spesso infatti si fa l'errore di approcciare classi e id allo stesso modo quando invece � bene mantenere la logica del significato del termine. Per semplificare la comprensione alla base del ragionamento pensa che ci si pu� riferire ad un id all'interno di una pagina HTML aggiungendo all'URL "#nomeid".
In sintesi puoi stilizzare direttamente gli elementi della tua pagina HTML oppure stilizzare gli elementi associando ad essi id e/o classi e/o altri selettori.