05. Tag di stile

Tag di stile

Di seguito sono descritti i tag utilizzati per includere le regole di stile di CSS e per delimitare delle parti del documento alle quali applicare specifiche regole.

STYLE

<style> </style>

Il tag style in HTML è utilizzato per incorporare regole di stile CSS all'interno di un documento HTML. Le regole di stile definite all'interno della sezione delimitata dai tag <style> e </style> vengono applicate agli elementi HTML all'interno della pagina web, consentendo di controllare l'aspetto e la formattazione del contenuto.

Questa sezione, se presente, deve essere inclusa nella sezione HEAD.

E' possibile includere opzionalmente nel tag <style>  l'attributo type con valore text/css per indicare esplicitamente che il contenuto all'interno del tag è di tipo CSS.

Esempio:

<style>

    p {

        color: blue;

        font-size: 16px;

    }

</style>

DIV

<div> </div>

La coppia di tag <div> e </div> creano una sezione di tipo "divisione", utilizzata per raggruppare e organizzare altri elementi HTML all'interno di una struttura gerarchica. 

Il tag <div> non fornisce alcuna formattazione o stile di default, ma è ampiamente utilizzato per applicare stili CSS, definire layout e gestire la struttura del contenuto di una pagina web. Da tener presente che questa coppia di tag definisce una sezione che viene interpretata come un elemento di blocco, separato dagli altri. Gli elementi di blocco occupano tutto lo spazio orizzontale disponibile e iniziano su una nuova riga, creando una divisione netta tra i contenuti che precedono e che seguono.

Questa sezione può essere posizionata in qualsiasi punto del BODY, anche all'interno di un'altra sezione DIV, e può essere utilizzata più volte all'interno di una pagina.

Esempio:

 <div id="contenuto">

     <h1>Benvenuti nel sito web di esempio</h1>

     <p>Ecco un paragrafo all'interno di un DIV.</p>

</div>

SPAN

<span> </span>

La coppia di tag <span> e </span> è utilizzata per delimitare porzioni di testo o dei contenuti all'interno di una riga di testo senza creare divisioni o blocchi separati.

Il tag span non fornisce alcuna formattazione o stile di default, ma è ampiamente utilizzato per applicare stili CSS. Da tener presente che questa coppia di tag definisce un elemento di tipo inline. Questo tipo di elemento occupa solo lo spazio necessario per il loro contenuto e non si posiziona su una nuova riga.

Questo elemento può essere posizionato in qualsiasi punto del BODY, anche all'interno di un'altra coppia di tag <span> e </span>, e può essere utilizzata più volte all'interno di una pagina.

Esempio:

<p>Questo è un esempio di testo con una <span style="color: blue;">parola colorata</span>.</p>

LINK

<link>

Il tag link è utilizzato per collegare un documento HTML a risorse esterne come fogli di stile CSS, icone e altri file relativi alla pagina. 

I principali attributi di questo tag sono:

• rel (attributo obbligatorio): specifica la relazione tra il documento HTML corrente e la risorsa collegata. Ad esempio, per collegare un foglio di stile CSS, il valore di rel sarà stylesheet.

• href (attributo obbligatorio): specifica l'URL della risorsa esterna da collegare al documento HTML. Questo URL può essere un percorso relativo o assoluto.

• type (attributo opzionale): specifica il tipo di contenuto della risorsa collegata. Ad esempio, per un foglio di stile CSS, il valore appropriato è text/css.

• media (attributo opzionale): specifica per quali tipi di dispositivi o supporti deve essere applicato il foglio di stile. Ad esempio, puoi limitare l'applicazione del foglio di stile ai dispositivi con schermo utilizzando screen.

Esempio:

<link rel="stylesheet" type="text/css" href="stile.css">

Attributo style

A molti tag HTML è possibile applicare l'attributo style che consente di associare uno stile particolare all'elemento al quale appartiene. Quando si usa questa tecnica si dice che lo stile dell'elemento è definito "inline".

Lo style è supportato, tra l'altro, dai tag inclusi nei gruppi "tag di formattazione", "tag multimediali", "tag di modulo" e dai tag <div>  e <span>.

Tramite l'attributo style è quindi possibile definire delle regole di stile CSS.

La sintassi generale per l'attributo style, per un generico tag,  è la seguente:

<tag style="property: value; property: value; ...">

Esempio:

<p style="color: blue; font-size: 16px;">Questo è un paragrafo con stile inline.</p>

Attributo class

Alla maggior parte dei tag HTML è possibile applicare l'attributo class che consente di associare una o più classi all'elemento al quale appartiene.

La sintassi generale per l'attributo class, per un generico tag, è la seguente:

<tag class="classe1 classe2 classe3 ...">

All'interno delle virgolette sono specificati i nomi di una o più classi CSS separate da spazi. E' possibile assegnare più classi separandole con spazi.

I nomi della classi possono essere scritti indifferentemente in maiuscolo o minuscolo perché non viene fatta alcuna distinzione  tra lettere maiuscole e minuscole.

Esempio:

<div class="box red-border large-text">Questo è un elemento con più classi CSS.</div>

Attributo id

Alla maggior parte dei tag HTML è possibile applicare l'attributo id che consente di associare un identificatore unico (ID) a un elemento di una pagina web.

Ogni elemento HTML può avere un solo ID all'interno del documento. L'attributo id è utilizzato principalmente per identificare specifici elementi HTML in modo che possano essere selezionati, manipolati o stilizzati in modo specifico tramite fogli di stile CSS o script JavaScript. 

Gli ID sono spesso utilizzati anche per creare ancoraggi all'interno di una pagina utilizzando gli elementi <a> (collegamenti ipertestuali). Questi ancoraggi consentono agli utenti di fare clic su un link e essere condotti direttamente a una sezione specifica della pagina.

Gli ID devono essere univoci all'interno di un documento HTML, questo significa che non è possibile assegnare lo stesso identificatore a più di un elemento nello stesso documento. Caratteri maiuscoli e minuscoli che compongono un ID sono considerati differenti.

Esempio:

<a href="#sezione-1">Vai a Sezione 1</a>

<div id="sezione-1">Contenuto della Sezione 1</div>

Sito:  7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 04. Tag HTML

Paragrafo: 05. Tag di stile 

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi 

Indice dei paragrafi: 01. Tag di struttura - 02. Tag di formattazione del testo - 03. Tag multimediali e di collegamento - 04. Tag di modulo - 05. Tag di stile