Come usare e creare le classi in HTML

L’attributo class è utilizzato per assegnare ad un oggetto HTML una classe. Una delle caratteristiche principali delle classi HTML è che possono essere assegnate a più elementi HTML.

Prima di partire con gli esempi e la pratica è bene comprendere cosa sia una classe in HTML. Immaginiamo di avere una collezione di libri che dobbiamo catalogare all’interno di una libreria suddividendola per generi. Alcune caratteristiche dei libri identificano la loro categoria. Ad esempio se nel racconto dovessimo incontrare fate, streghe, orchi, maghi, probabilmente si tratta di una fiaba. Lo stesso vale per le classi in HTML, alcune caratteristiche identificano una classe (i metodi) ed una classe può essere assegnata ad un oggetto HTML.

Le classi vengono create all’interno del tag <style>, vengono inizializzate con un punto “.” e le sue proprietà vengono racchiuse all’interno delle parentesi graffe avendo una sintassi simile alla seguente:

.nomeclasse { proprietà1; …}

ESEMPIO CLASSE HTML

<!DOCTYPE html>
<html>
	<head>
		<style>
			.Fantasy 
                         {
  				font-size: 18;
  				color: blue;
			}
                        .Fiaba
                        {
            	                font-size: 16;
                                color: yellow;
                        }
		</style>
	</head>
	<body>
		<p class="Fantasy">Harry Potter</p>
		<p class="Fiaba">La Sirenetta</p>
    </body>
</html>

In questo esempio abbiamo creato due classi “Fantasy” e “Fiaba” all’interno dei tag <style> e <style>. Quello che inseriamo all’interno di questi tag in realtà è del codice CSS e non HTML. Ritornando alle due classi, la prima ha la dimensione del testo impostata a 18 e il colore del testo blu, la seconda 16 e giallo.

Successivamente, all’interno del body abbiamo inserito due paragrafi <p> ai quali abbiamo assegnato le due classi utilizzando l’attributo style e fra gli apici abbiamo inserito il nome della classe assegnata che abbiamo assegnato. I due oggetti avranno quindi le caratteristiche abbiamo inserito all’interno della classe.

LINK UTILI

Pagina Instagram: https://www.instagram.com/developer_sumo/
I nostri corsi: https://www.developersumo.com/corsi/
Corso HTML: https://www.developersumo.com/html/
Scopri le nostre App su Google Play: https://play.google.com/store/apps/details?id=com.developersumo.app

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *