HTML - Foglio di stile

I Cascading Style Sheets (CSS) descrivono come i documenti vengono presentati sugli schermi, in stampa o forse come vengono pronunciati. Il W3C ha promosso attivamente l'uso dei fogli di stile sul Web sin dalla fondazione del consorzio nel 1994.

I fogli di stile CSS (Cascading Style Sheets) forniscono alternative facili ed efficaci per specificare vari attributi per i tag HTML. Utilizzando CSS, è possibile specificare una serie di proprietà di stile per un dato elemento HTML. Ogni proprietà ha un nome e un valore, separati da due punti (:). Ogni dichiarazione di proprietà è separata da un punto e virgola (;).

Esempio

Per prima cosa consideriamo un esempio di documento HTML che utilizza il tag <font> e gli attributi associati per specificare il colore del testo e la dimensione del carattere -

Note- Il tag del font è deprecato e dovrebbe essere rimosso in una futura versione di HTML. Quindi non dovrebbero essere usati piuttosto, si consiglia di utilizzare gli stili CSS per manipolare i caratteri. Ma sempre a scopo di apprendimento, questo capitolo lavorerà con un esempio utilizzando il tag font.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Possiamo riscrivere l'esempio sopra con l'aiuto del foglio di stile come segue:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

Questo produrrà il seguente risultato:

Puoi utilizzare CSS in tre modi nel tuo documento HTML:

  • External Style Sheet - Definisci le regole del foglio di stile in un file .css separato e poi includi quel file nel tuo documento HTML usando il tag HTML <link>.

  • Internal Style Sheet - Definisci le regole del foglio di stile nella sezione dell'intestazione del documento HTML utilizzando il tag <style>.

  • Inline Style Sheet - Definisci le regole del foglio di stile direttamente insieme agli elementi HTML utilizzando style attributo.

Vediamo uno per uno tutti e tre i casi con l'ausilio di opportuni esempi.

Foglio di stile esterno

Se è necessario utilizzare il foglio di stile per varie pagine, è sempre consigliabile definire un foglio di stile comune in un file separato. Un file di fogli di stile a cascata avrà l'estensione come.css e verrà incluso nei file HTML utilizzando il tag <link>.

Esempio

Considera di definire un file di foglio di stile style.css che ha le seguenti regole:

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Qui abbiamo definito tre regole CSS che saranno applicabili a tre diverse classi definite per i tag HTML. Ti suggerisco di non preoccuparti di come queste regole vengono definite perché le imparerai mentre studi CSS. Ora utilizziamo il file CSS esterno sopra nel nostro seguente documento HTML:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

Questo produrrà il seguente risultato:

Foglio di stile interno

Se desideri applicare le regole del foglio di stile solo a un singolo documento, puoi includere tali regole nella sezione dell'intestazione del documento HTML utilizzando il tag <style>.

Le regole definite nel foglio di stile interno sovrascrivono le regole definite in un file CSS esterno.

Esempio

Riscriviamo ancora una volta l'esempio precedente, ma qui scriveremo le regole del foglio di stile nello stesso documento HTML usando il tag <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

Questo produrrà il seguente risultato:

Foglio di stile in linea

È possibile applicare le regole del foglio di stile direttamente a qualsiasi elemento HTML utilizzando styleattributo del tag pertinente. Questo dovrebbe essere fatto solo quando sei interessato ad apportare una particolare modifica solo a qualsiasi elemento HTML.

Le regole definite in linea con l'elemento sovrascrivono le regole definite in un file CSS esterno così come le regole definite nell'elemento <style>.

Esempio

Riscriviamo ancora una volta l'esempio precedente, ma qui scriveremo le regole del foglio di stile insieme agli elementi HTML usando style attributo di questi elementi.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

Questo produrrà il seguente risultato: