Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
Vai al contenuto

Come usare il CSS su HTML

Tag:
5/5 (2)

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>

👇 Da non perdere 👇

Trovalost esiste da 4455 giorni (12 anni), e contiene ad oggi 5829 articoli (circa 4.663.200 parole in tutto) e 13 servizi online gratuiti. – Leggi un altro articolo a caso

Ti sembra utile o interessante? Vota e fammelo sapere.

Leggi anche:
Questo sito contribuisce alla audience di sè stesso.
Il nostro network informativo: Lipercubo.it - Pagare.online - Trovalost.it.