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="http://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&amp;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="http://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&amp;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

Render CSS HTML

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="http://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.

Classi ID CSS

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.

Scopri ora come creare un sito interattivo con Javascript

Vivi la prossima sfida