Il tag style in HTML

Il tag <style> può essere usato all’interno di un file HTML per inserire delle regole di stile che personalizzino la pagina web.

In genere non è più appropriato inserire delle regole CSS all’interno di un file HTML ma creare un vero e proprio foglio di stile allegato. In questo modo il file HTML viene usato esclusivamente per scrivere il contenuto e inserire le risorse esterne.

Comunque sia, quando si vuole inserire delle regole CSS all’interno del file HTML basta utilizzare l’elemento style all’interno di <head>, dato che sono informazioni che interessano ai browser e non a chi legge il sito web.

Il tag <style> funziona proprio come un file CSS. Si indicano i selettori da modificare e poi all’interno delle parentesi graffe si inseriscono le varie regole.

<head>
 <style>
   aside {background-color:lightgray;}
   h2.appr {color:blue;}
 </style>
</head>
<body>
 <!--Qui scriviamo l'articolo-->
 <aside>
  <h2 class="appr";>Sezione di approfondimento</h2>
  <p>...</p>
 </aside>   

Nell’esempio sopra viene mostrato come modificare il sottotitolo di un articolo per dargli il colore rosso ma anche per creare una sezione secondaria e assegnargli un colore di sfondo. Per saperne di più, leggi l’articolo sul tag <aside> disponibile qui.

Per modificare soltanto un sottotitolo o un paragrafo e non tutti i tag dello stesso elemento bisogna assegnargli una classe. In questo esempio, soltanto il tag h2 con la classe appr sarà di colore rosso mentre se aggiungiamo altri tag h2 senza la classe saranno colorati come al solito.