Il tag <STYLE> in Html

In questa lezione del corso html ti spiego cos'è e a cosa serve il tag <style>

<style> </style>

Il tag <style> ti permette di creare il foglio di stile di una pagina web tramite il CSS (Cascading Style Sheets).

Tra il tag di apertura <style> e quello di chiusura </style> devi inserire le regole CSS che vuoi applicare alla pagina web.

A cosa serve? Tramite il tag <style> puoi modificare i colori, le dimensioni, i font, lo sfondo della pagina, lo stile dei link ecc.

Il tag <style> è inserito all'interno dell'elemento tag <head> del documento HTML.

Ti faccio un esempio pratico

<!DOCTYPE html>
<html>
<head>
<title>Questo è il titolo della pagina</title>
<style>
p {
color: red;
text-align: left;
font-size: 20px;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>

In questo esempio il tag <style> definisce lo stile del tag <p> applicando queste regole CSS.

La proprietà color:red colora il testo di rosso.
La proprietà text-align:left imposta l'allineamento del testo a sinistra.
La proprietà font-size:20px imposta la dimensione dei caratteri.

Cosa sono le regole CSS? Le regole CSS sono una serie di proprietà e valori. Ogni proprietà definisce un aspetto da modificare mentre il valore definisce il nuovo aspetto. Ad esempio, per definire il colore del testo devi usare la proprietà "color" con il valore "red" o "#FF0000".

Quando conviene usare il tag <style>?

Il tag <style> ti consente di creare fogli di stile CSS distinti per ogni pagina web del sito.

E' anche detto foglio di stile interno perché si trova all'interno del documento HTML.

Ad esempio è utile per creare fogli di stile separati per pagine web specifiche come la home page o le pagine di contatto, ecc.

Il tag <style> è utile per singole pagine o per siti web con poche pagine.

Viceversa, se il sito web ha molte pagine e vuoi applicare lo stesso stile a tutte le pagine, il tag <style> è poco pratico.

In quest'ultimo caso ti consiglio di definire un foglio di stile CSS esterno e richiamarlo nel documento HTML tramite il tag <link>.

In questo modo è più semplice modificare il design del sito web.

<!DOCTYPE html>
<html>
<head>
<title>Questo è il titolo della pagina</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>

Qual è la differenza tra il foglio di stile interno ed esterno?

Sono due modi alternativi per definire lo stile CSS di un documento HTML.

Il foglio di stile interno ottenuto tramite tag <style> è utile se devi definire alcuni stili specifici di una pagina web, ossia degli stili non utilizzati nelle altre pagine del sito.
Il foglio di stile esterno è utile se devi definire uno stile usato da molte pagine del sito web. Inoltre, ti consente di separare il contenuto della pagina HTML dal foglio di stile CSS. In questo modo puoi modificare il design di tutte le pagine del sito con una sola operazione.

In conclusione, la scelta tra il tag <style> e un foglio di stile esterno CSS dipende dalle caratteristiche specifiche della pagina web a cui vuoi applicare lo stile.