Come aggiungere CSS
Quando un browser legge un foglio di stile, formatterà il documento HTML in base alle informazioni nel foglio di stile.
Tre modi per inserire CSS
Esistono tre modi per inserire un foglio di stile:
- CSS esterno
- CSS interno
- CSS in linea
CSS esterno
Con un foglio di stile esterno, puoi cambiare l'aspetto di un intero sito web cambiando solo un file!
Ogni pagina HTML deve includere un riferimento al file del foglio di stile esterno all'interno dell'elemento <link>, all'interno della sezione head.
Esempio
Gli stili esterni sono definiti all'interno dell'elemento <link>, all'interno della sezione <head> di una pagina HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Un foglio di stile esterno può essere scritto in qualsiasi editor di testo e deve essere salvato con estensione .css.
Il file .css esterno non deve contenere alcun tag HTML.
Ecco come appare il file "mystyle.css":
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Nota: non aggiungere uno spazio tra il valore della proprietà e l'unità: Errato
(spazio): margin-left: 20 px;
Corretto (nessuno spazio):margin-left: 20px;
CSS interno
Un foglio di stile interno può essere utilizzato se una singola pagina HTML ha uno stile unico.
Lo stile interno è definito all'interno dell'elemento <style>, all'interno della sezione head.
Esempio
Gli stili interni sono definiti all'interno dell'elemento <style>, all'interno della sezione <head> di una pagina HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS in linea
Uno stile in linea può essere utilizzato per applicare uno stile unico a un singolo elemento.
Per utilizzare gli stili in linea, aggiungi l'attributo style all'elemento pertinente. L'attributo style può contenere qualsiasi proprietà CSS.
Esempio
Gli stili in linea sono definiti all'interno dell'attributo "stile" dell'elemento pertinente:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Suggerimento: uno stile in linea perde molti dei vantaggi di un foglio di stile (mescolando il contenuto con la presentazione). Usa questo metodo con parsimonia.
Fogli di stile multipli
Se alcune proprietà sono state definite per lo stesso selettore (elemento) in fogli di stile diversi, verrà utilizzato il valore dell'ultimo foglio di stile letto.
Si supponga che un foglio di stile esterno abbia il seguente stile per l'elemento <h1>:
h1
{
color: navy;
}Quindi, supponiamo che un foglio di stile interno abbia anche il seguente stile per l'elemento <h1>:
h1
{
color: orange;
}Esempio
Se lo stile interno è definito dopo il collegamento al foglio di stile esterno, gli elementi <h1> saranno "arancioni":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Esempio
Tuttavia, se lo stile interno è definito prima del collegamento al foglio di stile esterno, gli elementi <h1> saranno "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Ordine a cascata
Quale stile verrà utilizzato quando è specificato più di uno stile per un elemento HTML?
Tutti gli stili in una pagina verranno "a cascata" in un nuovo foglio di stile "virtuale" in base alle seguenti regole, dove il numero uno ha la priorità più alta:
- Stile in linea (all'interno di un elemento HTML)
- Fogli di stile esterni ed interni (nella sezione head)
- Impostazione predefinita del browser
Pertanto, uno stile inline ha la priorità più alta e sovrascriverà gli stili esterni e interni e le impostazioni predefinite del browser.
Mai sentito parlare di W3Schools Spaces ? Qui puoi creare il tuo sito Web o salvare frammenti di codice per un uso successivo, gratuitamente.
Inizia gratuitamente ❯* nessuna carta di credito richiesta