Come formattare HTML mediante CSS: un modo semplice e pratico


Pubblicato il: 04-04-2022 15:43 , Ultimo aggiornamento: 04-04-2022 22:26

Non sai come formattare la tua pagina HTML e stai impazzendo con l’uso dei tag e del CSS? Come primo suggerimento, dovresti dare un occhio alla guida HTML che abbiamo pubblicato nel nostro sito, che ti fornirà gli elementi basilari da conoscere. Subito dopo puoi iniziare a leggere la nostra rapida e praticissima guida per formattare HTML come desideri.

Ogni esempio contiene uno snippet di codice che potete riutilizzare a vostro piacimento. Buon lavoro!

Suggerimenti per organizzare al meglio HTML, CSS e JS

In genere la pagina HTML viene suddivisa in head e body, dove nell’head mettiamo la parte CSS mentre nel body, sul fondo, in genere mettiamo il codice Javascript. Questa regola non è obbligatoria al 100% ma tendenzialmente è meglio rispettarla che evitare di farlo.

Quando andiamo a stilizzare un pezzo di HTML dobbiamo anzitutto definire un “contenitore” (container) che deve essere visto come un “delimitatore” della zona che vogliamo essere affetta dall’effetto. Ci sono due modi per farlo: usare un container implicito come un tag (quindi ad esempio <strong>, <u> e così via), oppure definirne uno esplicito, del tipo <span>, associarci una classe oppure un id, ad esempio <span id=”pippo123″> oppure <span class=”peppe123″>, e poi delimitarlo all’interno del testo desiderato: se abbiamo

Testo originale senza formattazione, voglio applicare una formattazione del testo qui.

lo riscriviamo come:

Testo originale con formattazione, voglio applicare una formattazione del testo <span id="pippo123">qui</span>.

Nel CSS sarà immediato creare una regola del tipo:

#pippo123{ ... }

ed inserire al posto dei tre puntini l’effetto che vogliamo ottenere, nel formato:

etichetta_css: valore;

(attenzione ai due punti e al punto e virgola finale!), quindi avremo, ad esempio:

#pippo123{ font-weight: bold; }

che renderà il testo di cui sopra in questo modo:

Testo originale con formattazione, voglio applicare una formattazione del testo qui.

Come fare il grassetto/bold in HTML

Il grassetto o bold su un carattere, una stringa o una porzione di testo si può ottenere in due modi: con il tag <strong> oppure con il tag <b>. L’effetto è identico, cambia solo leggermente il contesto (il primo è HTML semantico 5, il secondo è HTML 4).

Esempio

testo in <strong> grassetto </strong>

testo in grassetto

Come fare il corsivo in HTML

Il corsivo su un carattere, una stringa o una porzione di testo si può ottenere in due modi: con il tag <em> oppure con il tag <i>. L’effetto è identico, cambia solo leggermente il contesto (il primo è HTML semantico 5, il secondo è HTML 4).

Esempio

testo in <em> corsivo </em>

testo in corsivo

Come togliere il grassetto/corsivo in CSS

Non mancano i casi pratici in cui è necessario rimuovere l’effetto e “normalizzare” il testo; in questi casi è necessario creare una regola CSS del tipo:

font-weight: normal;

oppure, se non dovesse funzionare, potete provare così:

font-weight: normal!important;

Testo tutto in maiuscolo (CSS)

<!DOCTYPE html>
<html>
<head>

<style type=”text/css”>
#pippo123{ text-transform:uppercase; }
</style>
</head>
<body>
<p id="pippo123">Testo che sarà reso in Maiuscolo, anche se è SCRITTO diversamente. </p>
</body>
</html>

Testo interamente in minuscolo (CSS)

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#pippo123{ text-transform:lowercase; }
</style>
</head>
<body>
<p id="pippo123">Testo che sarà reso in MINUSCOLO, anche se è SCRITTO diversamente. </p>
</body>
</html>

Testo con la prima lettera maiuscola (capitalize, CSS)

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#pippo123{ text-transform:capitalize; }
</style>
</head>
<body>
<p id="pippo123">Testo che sarà reso con la prima iniziale maiuscola, anche se è SCRITTO diversamente. </p>
</body>
</html>

Questo articolo contiene 486 parole – Questo blog esiste da 3.764 giorni.
5/5 (2)

Che te ne pare?

Grazie per aver letto Come formattare HTML mediante CSS: un modo semplice e pratico di Salvatore su Trovalost.it
Come formattare HTML mediante CSS: un modo semplice e pratico (Guide)

Articoli più letti su questi argomenti: