Utilizzo dei CSS
Usa uno dei tre modi per aggiungere stili a un documento HTML: inline, interno ed esterno. Scopri quando e come usare ciascuno di essi.
Esistono 3 modi per aggiungere stili CSS al documento HTML.
- Stile inline - assegnando un attributo style agli elementi HTML
- Stile interno - usando l'elemento
<style>nella sezione<head> - Stile esterno - creando un file CSS esterno
Stile inline
Per definire le regole di stile, puoi usare l'attributo style di qualsiasi elemento HTML. Puoi applicare queste regole solo a quell'elemento. L'attributo style può contenere qualsiasi proprietà CSS.
Esempio di creazione di uno stile inline per un documento HTML:
Esempio di stile inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Risultato
Ora spieghiamo l'esempio appena mostrato, in cui abbiamo usato lo stile inline. All'interno del tag <h2> abbiamo scritto style="color: #1c87c9", il che significa che il nostro titolo (heading) sarà #1c87c9.
Lo stesso abbiamo fatto con il tag <p>. Abbiamo scritto color: #8ebf42; font-size: 15px all'interno del nostro tag, il che significa che le informazioni comprese tra il tag <p> aperto e il tag </p> chiuso saranno di colore #8ebf42 e la dimensione del testo sarà di 15px.
Stile interno
Con lo stile interno, ogni file HTML contiene il codice CSS necessario per applicare lo stile a una pagina. Devi semplicemente inserire il codice CSS tra i tag <head> </head> di ogni file HTML a cui vuoi applicare lo stile. L'esempio seguente lo illustra.
Le modifiche apportate avranno effetto su una sola pagina. Se hai bisogno di applicare lo stile a più pagine, dovrai modificarle una per una.
L'esempio seguente mostra che il paragrafo sarà bianco e la pagina sarà #1c87c9.
Esempio di creazione di uno stile interno per un documento HTML:
Esempio di stile interno CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Stile esterno
Lo stile esterno è ampiamente usato per applicare stili generali all'intero sito web. Consiste nel creare un file CSS esterno che include tutte le informazioni di stile. Puoi creare questo tipo di file con qualsiasi editor di testo o editor HTML, come "Notepad" o "Sublime Text".
Un file CSS contiene solo CSS e basta salvarlo con l'estensione .css. Per collegare un foglio di stile esterno a una pagina web devi usare il tag <link> all'interno della sezione <head> del documento HTML. Ogni pagina web deve essere collegata al foglio di stile.
Quando si usa un foglio di stile esterno, tutti i file HTML sono collegati a un unico file CSS, ottenendo così un aspetto e uno stile coerenti. Se vuoi modificare lo stile delle pagine web, devi solo apportare le modifiche corrispondenti in un unico file .css.
Esempio di creazione di uno stile esterno per un documento HTML:
Esempio di stile esterno CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>