Lezione 9 - Corso Intermedio Html

Introduzione ai Fogli di Stile CSS


I Fogli di Stile CSS

I fogli di stile CSS detti anche Fogli di Stile in Cascata sono semplicemente un tipo di linguaggio che viene utilizzato per formattare le pagine web (rendere più bello l'aspetto estetico della pagina).

Quindi l'html si occupa di capire di che tipo di oggetti si parla: testo, immagini, tabelle o altro, mentre il Foglio di Stile Css si occupa di definire quale sarà il suo aspetto estetico e dove, questi oggetti, verranno posizionati all'interno della pagina.

La Regola Css va inseritia nel tag <style> </style> che come vediamo va aperto e chiuso.

Il tag <style> </style> , a sua volta, può essere inserito sia nel tag <head> </head> che nel tag <body> </body>

La Regola Css è fatta in questo modo:
per primo mettiamo un selettore (il selettore indica quale elemento deve essere interessato dallo stile) nel caso che stiamo per vedere questo elemento sarà p

Dopo inseriamo il cosidetto Blocco delle Dichiarazioni, che sarà rachiuso in delle Parentesi Graffe { }

Ogni Blocco di Dichiarazioni può avere una o più Regole

Ogni Regola, viene chiusa da un Punto e Virgola ;
Il Punto e Virgola ; ci permette di inserire più Regole in maniera consecutiva in un'unico Blocco delle Dichiarazioni.

Sintassi:
selettore { regola 1; regola 2; ecc}

Ora passiamo al codice:
<html>                      
 <head>			    
  <title>Introduzione ai CSS</title>
   <style>
	 p {color:red;}
   </style>
 </head>
 <body>			    
	<h1 style="color:blue">Introduzione ai CSS</h1>
	<p>Paragrafo UNO</p>
	<p>Paragrafo DUE</p>
	<p style="color:green">Paragrafo TRE</p>
 </body>                
</html>                    

Qello che vedremo sul nostro schermo sarà:

Introduzione ai CSS

Paragrafo UNO

Paragrafo DUE

Paragrafo TRE

Il risultato del codice è quello di colorare di rosso il testo dei paragrafi UNO e DUE, mentre il testo del paragrafo TRE è colorato di verde, e h1 colorato di blu. Questo perché si può inserire uno style direttamento all'interno di un tag e si dice Stile in Linea.
Quindi il primo caso è un Foglio di Stile Incorporato nella pagina.
Il secondo caso è un Foglio di Stile in Linea del Tag.