Il CSS si basa sulla scrittura di attributi e valori specifici, i quali molto spesso sono simili tra loro e ciò ci aiuta a facilitare la scrittura dei nostri progetti. Per imparare a scrivere in CSS è necessaria molta pratica ed esercizio, ed è bene imparare a memoria tutti i comandi o keywords più comuni.
Simile all’HTML con i tag, il CSS ha i suoi valori prestabiliti, ed ognuno con una determinata funzione o caratteristica. Ogni modifica grafica presente in un sito web è dettata dal linguaggio CSS, e senza di esso in una pagina HTML vedresti esclusivamente scritte nere su uno sfondo bianco.
Per iniziare a prendere confidenza con il linguaggio di stile non c’è niente di meglio che la formattazione del testo. Questi attributi simulano le stesse funzioni che troveresti in un generico editor di testo (Notepad o Word ad esempio) così da avere chiaro fin da subito il loro funzionamento.
Capire gli attributi e i valori per la formattazione del testo è molto semplice, ciò inoltre aiuta a comprendere in che modo sia possibile lavorare con il CSS anche per altri elementi e tag.
Prima di iniziare, dobbiamo stabilire quale elemento presente nella pagina HTML andare a modificare. Per farlo ci basterà richiamare l’apposito tag HTML o un selettore specifico.
Per esempio:
/* tutti i paragrafi */p { }
/* tutti gli headings h3 */h3 { }
/* tutti gli elementi del documento*/* { }
/* una classe */.myCLass { }
/* un id */#myId { }Per rendere più facile la comprensione del codice, qui andrò ad agire sul tag <p> dei paragrafi.
Per altre informazioni sulla scrittura dei tag e selettori nei fogli di stile, leggi qui.
Dopo aver deciso quale sarà l’elemento dove apportare le modifiche di stile tramite CSS, inizieremo subito a scrivere i nostri attributi seguiti dai valori personali.
Qui la lista dei più comuni:
L’attributo “font-size“, come facilmente intuibile, serve a modificare la grandezza dei caratteri dell’elemento. Il valore che segue questo attributo sarà la cifra (numerica) delle dimensioni del font che noi stessi saremo a decidere.
Ogni valore sarà seguito dall’unità di misura: in pixel (px), punto (pt), unita relativa (em) o percentuale (%);
Altri valori prestabiliti: x-small, medium, large, x-large, xx-large, initial, inherit.
Qui in esempio:
p{
font-size:25pt;
}Questo codice, se visualizzato in una pagina HTML, risulterà così:
Hello world!
“color” è un attributo che serve a specificare il colore del testo. Il valore che segue questo attributo CSS può essere determinato in vario modo:
Esempio:
p{
color:#ff0000;
/*
Stessi effetti, codici differenti:
color:#f00;
color:rgb(255,0,0);
color:red;
*/}“Questo testo è rosso”
Prova il nostro color picker per trovare i tuoi colori:.
Questo attributo CSS determina l’allineamento del testo riferito al suo contenitore. Proprio come in un editor di testo dove puoi allinearlo in base alle tue esigenze, anche con il CSS puoi ottenere gli stessi risultati.
I valori sono: left; center, right, justify.
p{
text-align:center;
}“testo centrato”
L’attributo “font-style” racchiude una serie di valori per la stilizzazione dei caratteri e del testo. I valori più comuni rispecchiano quelli che in genere chiamiamo corsivo e obliquo, infatti, font-style ha solo questo compito.
I valori: italic, oblique, normal.
p{
font-style:italic;
}“font-weight” letteralmente “peso del carattere” è utilizzato per la trasformazione del testo in grassetto o neretto.
L’utilizzo principale (o unico direi) di questo attributo infatti è quello di evidenziale i caratteri con il grassetto (o bold), come nei comuni editor di testo.
p{
font-weight:bold;
}“testo in grassetto“
Questo attributo determina un effetto stilistico del testo, ovvero l’ombra esterna che circonda ogni carattere. Può essere usato in qualsiasi momento e può in molti casi migliorare la leggibilità del testo soprattutto con uno sfondo poco contrastante.
Spesso accade anche il caso contrario però: se l’ombra e il colore del testo sono molto simili, l’effetto finale potrebbe risultare molto spiacevole alla vista.
I valori da configurare per text-shadow seguono in questo modo:
Un esempio pratico:
p{
text-shadow: 2px 2px 5px #000;
}“Testo con ombra”
“line-height“, letteralmente altezza della linea, indica la dimensione verticale della linea di testo. Questa è indifferente alla dimensione del font, in quanto il valore immesso in questo attributo determina solo l’altezza della line che contiene il testo.
Infatti, con un valore (in px, pt o %) più piccolo rispetto al font-size, parte del testo verrà nascosto/tagliato fuori.
Questo attributo è utile per migliorare la visualizzazione del testo in determinati contenitori e facilitare l’allineamento verticale.
p{
line-height: 20px;
}Esercitati ora a formattare il testo della tua pagina web HTML con il CSS, prova tutti gli attributi in questa pagina e migliora lo stile dei caratteri come preferisci.
Esercitati con il nostro evoluto editor Codewith.it e salva rapidamente i tuoi progetti.
Vuoi altri consigli su questo argomento? Scrivici un commento in basso.
Torna al corso HTML e CSS completo
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti: