In questa lezione vi parlo di cosa sono gli ID e di come vengono usati nei CSS.
ID
Come per la classe, anche l’ID viene usato per etichettare gli elementi HTML a cui applicare un determinato stile ma, a differenza della classe, l’ID si applica ad un unico elemento.
Per prima cosa applichiamo l’ID all’elemento univoco nel codice HTML:
Applicazione dell’ID
In questo caso è stato applicato solo al paragrafo 2, l’unico che deve avere quello stile.
Poi creiamo nel CSS un selettore apposito formato da un cancelletto (#) seguito dal nome dell’ID:
ID nel CSS
Il risultato finale dimostra che soltanto il paragrafo 2 è interessato dallo stile:
Esempio
Si poteva ottenere un risultato analogo andando ad inserire un CSS in linea nel tag del paragrafo 2, tuttavia in questo caso sarebbe stato più scomodo da aggiornare (ad esempio se volevamo poi cambiare il colore).
In questa lezione vediamo come applicare un rientro al testo.
text-indent
La proprietà text-indent serve per applicare un rientro al testo, rispetto al suo margine sinistro.
Questa proprietà accetta valori numerici positivi o negativi, fissi (con varie unità di misura come: px, pt, cm, em) o relativi alla dimensione del contenitore (%):
Uso di text-indent
Il rientro viene applicato soltanto alla prima riga del testo: se si vuole spostare l’intero blocco dobbiamo usare le proprietà margin e padding, che spiegherò nel corso CSS intermedio.
In questa lezione vi spiego come allineare il testo in orizzontale.
text-align
Come in tutti i programmi di videoscrittura, es: Word, anche in un documento web potete avere il testo allineato a sinistra, al centro o a destra della pagina.
L’allineamento del testo si applica ad un elemento di blocco, ovvero un elemento HTML che fa da contenitore di altri elementi, come ad esempio <p>, <h1>, <div>, ecc.
La proprietà text-align permette di modificare l’allineamento del testo per l’elemento a cui è associata:
In questa lezione vi spiego come rendere più spessi i caratteri.
font-weight
La proprietà font-weight serve per impostare uno spessore al testo, per renderlo più marcato rispetto al resto del testo della pagina.
Uso di font-weight
Questa proprietà accetta i seguenti valori:
normal – testo normale, non inspessito;
bold – testo in grassetto;
bolder – testo più spesso rispetto al normale (valore relativo);
lighter – testo meno spesso rispetto al normale (valore relativo).
Esempio
In alternativa ai valori testuali, è possibile usare dei valori numerici da 100 a 900, che specificano lo spessore del testo:
100
200
…
900
Il valore 400 corrisponde a normal, mentre 700 a bold.
Nota: spesso non si nota la differenza tra alcuni valori numerici in quanto la maggior parte dei font supportano soltanto la versione normale (400) o grassetto (700).
In questa lezione vediamo come impostare lo stile del testo.
Come abbiamo già visto nel corso base HTML, possiamo modificare lo stile di alcune parole per metterle in risalto rispetto al resto del testo.
font-style
La proprietà font-style permette di variare lo stile tipografico del testo, in base ai seguenti valori:
normal – testo normale, non inclinato;
italic – testo in corsivo;
oblique – testo inclinato, simile al corsivo.
Uso di font-styleEsempio
La differenza tra italic e oblique è che il primo è un carattere che viene proprio salvato con le lettere già inclinate, mentre il secondo si ottiene inclinando “a forza” le lettere di un carattere normale: nella gran parte dei casi il risultato è identico.
In questa lezione vi parlo di come si modifica la dimensione del testo.
font-size
La proprietà font-size modifica la dimensione del testo a cui viene applicata la regola.
Uso di font-size
La proprietà accetta:
valori assoluti, ovvero valori con unità di misura fisse;
valori relativi, ovvero valori che dipendono da altri fattori.
Valori in pixel
Assegnando un valore assoluto, ad esempio il pixel, il carattere diventerà alto esattamente di quanto avete specificato:
font-size: 22px;
I pixel, indicati con px, sono intesi come valori assoluti, nel senso che sono indipendenti dalla larghezza della pagina o dalla dimensione di altri elementi (anche se i pixel possono essere più o meno grandi a seconda dello schermo su cui vengono visualizzati).
La dimensione predefinita del testo di una pagina web (testo del paragrafo) è di 16 pixel.
Dimensioni in pixel
Valori relativi
E’ possibile impostare la grandezza del testo usando valori relativi, come ad esempio em e percentuali.
Impostando la dimensione del testo in percentuale (%), lo si obbliga ad avere una grandezza relativa a quella del testo per l’elemento che lo contiene.
font-size: 200%;
Per fare un esempio, se un paragrafo si trova dentro ad un div (un contenitore di elementi), scrivendo il seguente stile:
Uso delle percentuali
il testo del paragrafo dentro al div sarà grande 64 pixel, ovvero il doppio della dimensione del testo nel suo contenitore (32 pixel).
Quindi il testo con grandezza indicata in valori relativi è variabile al variare della dimensione del testo del contenitore che lo contiene.
L’unità di misura em indica la grandezza predefinita del font, che di norma abbiamo detto essere di 16 pixel.
Quindi:
1em = 16px
Come per la percentuale, è una unità di misura relativa, in quanto se noi andiamo a cambiare la dimensione standard del testo, gli em variano di conseguenza.
Per esigenze di leggibilità, magari dettate dalla visualizzazione del sito su dispositivi diversi, possiamo impostare un criterio per determinare una dimensione standard per la pagina web e farla usare come riferimento per tutti gli elementi testuali contenuti in essa.
Per cambiare la dimensione del testo standard, ovvero per effettuare un reset delle dimensioni dei caratteri, possiamo usare diversi modi.
Un sistema largamente utilizzato è quello di re-impostare la dimensione standard del font della pagina (del body, cioè il contenitore di livello principale) a 100%, quindi si imposta la dimensione di tutti gli altri elementi di testo utilizzati nella pagina con valori relativi (in em):
Reset dimensioni
Se vogliamo rendere il testo più grande, ci basterà variare il valore di font-size per il body (ad esempio portandolo a 120% o 80%) e tutte le altre dimensioni varieranno di conseguenza.
In questa lezione vi parlo di come rendere accessibile il vostro sito usando un testo alternativo per le immagini.
Se volete rendere il vostro sito alla portata di tutti, comprese persone che presentano disabilità visive, dovete inserire un testo alternativo per ciascuna immagine di ogni pagina.
Testo alternativo
Il testo alternativo va inserito come valore dell’attributo alt, all’interno del tag <img>:
<img src"foto.jpg" alt="descrizione della foto">
Le persone che hanno disabilità visive possono usare un programma speciale che, anziché mostrare le immagini, va a leggere le descrizioni che esse contengono.
