Come aggiungere CSS

Quando il browser legge il foglio di stile, formatta il documento HTML in base alle informazioni nel foglio di stile.

Tre metodi per utilizzare CSS

Ci sono tre metodi per inserire fogli di stile:

  • CSS Esterno
  • CSS interno
  • CSS inline

CSS Esterno

Utilizzando fogli di stile esterni, è sufficiente modificare un file per cambiare l'aspetto dell'intero sito!

Ogni pagina HTML deve includere una referenza al file di foglio di stile esterno all'interno dell'elemento <link> della sezione head.

esempio

L'estilo esterno viene definito all'interno dell'elemento <link> nella sezione <head> della pagina HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1Questo è un titolo</h1>
<pQuesto è un paragrafo.</p>
</body>
</html>

Prova personalmente

La tabella di stili esterna può essere scritta in qualsiasi editor di testo e deve essere salvata con l'estensione .css.

Il file .css esterno non dovrebbe contenere alcun tag HTML.

"mystyle.css" è così:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

attenzione:Non aggiungere spazi tra il valore dell'attributo e l'unità (ad esempio margin-left: 20 px;). La scrittura corretta è:margin-left: 20px;

CSS interno

Se una pagina HTML ha uno stile unico, allora può essere utilizzata una tabella di stili interna.

Lo stile interno viene definito nell'elemento <style> nella sezione <head>.

esempio

Lo stile interno viene definito nell'elemento <style> nella sezione <head> della pagina HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1Questo è un titolo</h1>
<pQuesto è un paragrafo.</p>
</body>
</html>

Prova personalmente

CSS inline

Lo stile inline (noto anche come stile inline) può essere utilizzato per applicare uno stile unico a un singolo elemento.

Per utilizzare lo stile inline, aggiungere l'attributo style all'elemento relativo. L'attributo style può contenere qualsiasi attributo CSS.

esempio

Lo stile inline viene definito nell'attributo "style" dell'elemento relativo:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Questo è un titolo</h1>
<p style="color:red;">Questo è un paragrafo.</p>
</body>
</html>

Prova personalmente

suggerimento:lo stile inline perde molti vantaggi della tabella di stili (mixando il contenuto con la presentazione). Utilizzare questo metodo con cautela.

tabelle di stili multiple

se sono stati definiti alcuni attributi per lo stesso selettore (elemento) in diverse tabelle di stili, allora verranno utilizzati i valori della tabella di stili letta ultimamente.

supponiamo che ci siatabella di stili esternalo stile impostato per l'elemento <h1> è il seguente:

h1 {
  color: navy;
}

supponiamo che ci siatabella di stili internaha anche impostato lo stile seguente per l'elemento <h1>:

h1 {
  color: orange;    
}

esempio

se lo stile interno è collegato a una tabella di stili esternadopose definito, l'elemento <h1> sarà arancione:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Prova personalmente

esempio

ma, se collegato a una tabella di stili esternaprimaDefinisce uno stile interno, quindi l'elemento <h1> sarà blu scuro:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Prova personalmente

Ordine di sovrapposizione

Quando si assegnano più stili a un elemento HTML, quale stile verrà utilizzato?

Tutti gli stili nella pagina seguiranno le seguenti regole di 'cascading' per formare un nuovo 'virtuale' tavolo di stili, dove la priorità più alta è la prima:

  1. Stili inline (negli elementi HTML)
  2. Tabelle di stili esterni e interni (nel sezione head)
  3. Stili predefiniti del browser

Pertanto, lo stile inline ha la priorità più alta e copre gli stili esterni e interni e gli stili predefiniti del browser.

Prova personalmente