Archivi tag: stile

CSS3 Base – 3.3 – Stile del testo

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-style
Uso di font-style
Esempio
Esempio

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.

Video

CSS3 Base – 3.2 – Dimensione del testo

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
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
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
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.

L’uso di em è raccomandato dal W3C.

Reset delle dimensioni

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
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.

Video

CSS3 Base – 3.1 – Tipo di carattere

In questa lezione vi spiego:

  • come modificare il tipo di font per i testi della vostra pagina;
  • quali tipi di caratteri potete utilizzare.

Famiglie di caratteri

Quando create una pagina web usando solo codice HTML e la visualizzate su un browser, quest’ultimo decide che tipo di carattere usare per i testi.

Normalmente questa scelta viene fatta in base alle impostazioni predefinite dal browser: nella maggior parte dei casi viene scelto il carattere Times New Roman.

E’ possibile cambiare il tipo di carattere, o font, tramite i CSS.

Esistono diverse “famiglie” di caratteri, ovvero gruppi di font che hanno caratteristiche comuni.

Le 3 principali famiglie sono:

  • caratteri serif:
    • Times New Roman
    • Georgia
  • caratteri sans-serif:
    • Arial
    • Verdana
  • caratteri monospace:
    • Courier New
    • Lucida Console

I caratteri di tipo serif sono quelli che hanno le grazie sulle lettere, ovvero quelle estremità affusolate e curve, come in questo caso:

Lettera A con grazie
Lettera A con grazie

I caratteri sans-serif non presentano le grazie, quindi hanno spigoli netti:

Caratteri senza grazie
Caratteri senza grazie

Infine, i caratteri monospace hanno lettere con la stessa larghezza (anche gli spazi):

Caratteri monospace
Caratteri monospace

font-family

Il tipo di font può essere modificato utilizzando la proprietà font-family:

Uso di font-family
Uso di font-family

Questa proprietà accetta sia il tipo di carattere, sia la famiglia di appartenenza.

Ad esempio:

font-family: verdana;

Indica che il tipo di carattere scelto è il Verdana, mentre:

font-family: sans-serif;

indica che possiamo usare qualsiasi carattere senza grazie (il browser ne sceglierà uno).

Notare che se il nome del carattere è composto da più di una parola, andrà scritto tra doppi apici:

font-family: "Times New Roman";

Nell’immagine di esempio vedete che font-family ha diversi valori:

font-family: verdana, arial, helvetica, sans-serif;

Può succedere che il sistema operativo su cui viene visto il sito non abbia tutti i caratteri necessari (pensate ad uno smartphone), così è buona norma dare una scelta più ampia di caratteri tra cui scegliere. Il browser sceglierà uno di questi font partendo da sinistra verso destra, in base alla disponibilità di font del sistema:

  1. prima cercherà il font Verdana;
  2. se non c’è cercherà il font Arial;
  3. se non lo trova andrà bene Helvetica;
  4. se non trova nemmeno questo, sceglierà un font qualsiasi, purché di tipo sans-serif.

Video

CSS3 Base – 2.7 – Applicare uno stile esterno

In questa lezione vi mostro come inserire un CSS esterno e quali sono i suoi vantaggi.

CSS Esterni

Un foglio di stile esterno è un insieme di regole che risiedono su un documento separato dalla pagina web, un file esterno appunto.

Per prima cosa, create un documento di testo a cui darete l’estensione .CSS

Quindi, inserite al suo interno le regole CSS come di consueto ma senza includere il tag <style>.

Infine, dovete collegare il file esterno alle pagine del vostro sito.

Per farlo, vi basta inserire all’interno di <head> il tag <link>, come nell’esempio sottostante:

CSS esterno
CSS esterno

L’attributo href indica il percorso ed il nome del documento su cui risiede il CSS esterno.

Quando si usa un CSS esterno e quando un CSS interno?

Se volete formattare una sola pagina web, inserite un CSS incorporato:

  • il CSS è relativo solo a quella pagina;
  • se volete personalizzare un elemento HTML nello specifico, vi basterà aggiungere un eventuale CSS in linea direttamente nel suo tag.

Se volete formattare un sito composto da più pagine, tutte con caratteristiche simili, allora la soluzione migliore è il CSS esterno:

  • vi basta creare una sola volta il CSS e collegarlo con <link> a tutte le pagine;
  • una modifica al CSS si ripercuote su tutte le pagine del sito;
  • se volete poi andare a modificare lo stile di una determinata pagina (senza modificare le altre) vi basterà inserire un CSS incorporato in quella o eventuali CSS in linea.

Ricordatevi che, siccome il CSS funziona in cascata, l’ordine di priorità è il seguente:

  • il CSS in linea vince sul CSS incorporato;
  • il CSS incorporato vince sul CSS esterno.

Video

CSS3 Base – 2.6 – Applicare uno stile incorporato 

In questa lezione vi insegno ad applicare uno stile incorporato nella pagina.

CSS incorporati

Un foglio di stile incorporato è un CSS che fa parte di una pagina web e vale solo per tale pagina.

All’interno del tag <head> inserite il tag <style>, che conterrà il codice CSS:

CSS Incorporato
CSS Incorporato

Tale codice avrà selettori in grado di individuare gli elementi HTML contenuti all’interno della pagina corrente, per poter modificare la loro formattazione.

Il CSS incorporato può essere poi arricchito da stili in linea.

Nell’immagine di esempio ho assegnato il colore blu a tutti i paragrafi della pagina: come faccio a colorarne uno di nero?

Applico uno stile in linea sul tag HTML proprio di quel determinato paragrafo:

<p style=" color:black "> testo del paragrafo </p>

Lo stile del CSS in linea è più specifica del CSS incorporato, perciò avrà la meglio.

Video

CSS3 Base – 2.5 – Applicare uno stile in linea

In questa lezione vi mostro come si applica uno stile interno alla pagina, in particolare uno stile in linea.

CSS in linea

Lo stile in linea, come indica il nome, viene inserito in linea col codice HTML, cioè direttamente nel tag dell’elemento a cui viene applicato.

CSS In linea
CSS In linea

L’inserimento avviene con l’attributo style, che determina lo stile per quel determinato tag.

Il valore dell’attributo style sarà poi il blocco delle dichiarazioni CSS.

Esempio:

<p style=" color:blue "> testo del paragrafo </p>

In questo esempio, il CSS è inserito nel tag del paragrafo e la dichiarazione

color:blue

modifica il colore del testo solo per quel determinato elemento: gli eventuali altri paragrafi della pagina non vengono alterati.

Ecco il vantaggio di questo tipo di CSS: applica lo stile solo dove serve.

Ovviamente, se avessimo 10 paragrafi nella pagina e li volessimo tutti di colore blu, lo stile in linea sarebbe troppo macchinoso da applicare e scomodo in caso di aggiornamenti (ad esempio cambiare il colore in futuro): ecco perché esistono altri modi per inserire lo stile.

Il CSS in linea è utile quando volete applicarlo a pochi elementi, senza interferire con gli altri.

Video

CSS3 Base – 2.4 – Commenti

Questa lezione è dedicata ai commenti: vediamo cosa sono, perché si mettono nei CSS e dove vanno.

Commenti

Un commento è un testo che potete posizionare all’interno di un foglio di stile per descrivere lo scopo di una o più regole o come promemoria.

L’inserimento avviene all’interno del tag <style>, proprio come per il codice CSS.

Il commento comincia con /* e termina con */, in questo modo:

/* testo del commento */

Il commento può essere scritto su più righe, basta che venga aperto all’inizio e chiuso alla fine dell’ultima riga che occupa.

Fate però attenzione a non mischiare le due cose: il codice CSS che inserite dentro ad un commento non avrà valore!

Se oggi lavorate ad un foglio di stile e poi non lo riaprirete per molto tempo, forse è meglio inserire al suo interno un commento per ricordarvi in futuro lo scopo di quei comandi CSS.

Video

CSS3 Base – 2.3 – Elementi di un foglio di stile

In questa lezione vi spiego:

  • come è strutturato un foglio di stile;
  • da quali parti è composto.

Regole

Un foglio di stile CSS è un insieme di regole, ovvero una collezione di stili già pronti, i quali vengono assegnati a diversi elementi della pagina (paragrafi, immagini, elenchi, ecc.).

Una regola è una espressione che definisce uno stile per la formattazione.

Ogni regola presenta la seguente struttura:

selettore { blocco delle dichiarazioni }

Esempio:

p { color:green; text-align:center; }

Selettori

Un selettore ha il compito di individuare gli elementi a cui è destinata la regola.

Ad esempio, se vogliamo colorare il testo di tutti i paragrafi della pagina, dobbiamo creare una regola che venga applicata soltanto ai paragrafi, senza toccare altri elementi.

Nell’esempio che vi ho fatto, per individuare solo i paragrafi, usiamo il selettore “p” che, appunto, rappresenta il tag per i paragrafi nel linguaggio HTML.

Oltre ai nomi dei tag HTML, un selettore prevede anche altri comandi, che vedremo in seguito, come ad esempio classi e ID.

Dichiarazioni

Nella regola CSS, dopo il selettore viene scritta una coppia di parentesi graffe:

selettore { ... }

Nelle graffe vanno inserite le dichiarazioni, ovvero espressioni di stile che modificano un singolo aspetto dell’elemento a cui è rivolta la regola: possono modificare la posizione, la dimensione, il colore, ecc.

Ciascuna dichiarazione è così strutturata:

proprietà: valore;

Esempio:

color: green;

 

Ciascuna proprietà ha particolari tipi di valori ammessi: alcune proprietà prevedono valori numerici con o senza unità di misura, altre prevedono parole, codici, ecc.

Esempio:

  • text-align: center;
  • font-size: 2em;
  • width: 60%;
  • color:#DC3;

Il punto e virgola alla fine della dichiarazione non è obbligatorio solo se è presente una sola dichiarazione nelle graffe, altrimenti è indispensabile perché le separa tra di loro.

Le dichiarazioni possono essere scritte in orizzontale:

p { color:green; text-align:center; }

oppure in verticale, usando una opportuna indentazione (rientro):

p {
  color:green;
  text-align:center;
}

L’indentazione viene usata più che altro per tenere il codice ordinato.

Video

CSS3 Base – 2.2 – Dove posizionare il CSS

In questa lezione vediamo dove collocare un foglio di stile nel nostro sito web.

Un foglio di stile può essere:

  • interno alla pagina web
  • esterno alla pagina web

CSS Esterni

Un foglio di stile esterno, viene legato alla pagina HTML mediante questo tag:

<link rel="stylesheet" type="text/css" href="fogliostile.css">

il tag <link> va posizionato dentro <head> del documento e l’attributo “href” indica il percorso ed il nome del foglio di stile.

Siccome è un file esterno, possiamo modificarlo senza dover toccare la pagina a cui è associato.

Se il foglio esterno è lo stesso per tutte le pagine di un sito, modificare lo stile significa cambiare l’aspetto dell’intero sito.

CSS Interni

Un foglio di stile si dice interno, quando è compreso nel codice della pagina a cui è associato, cioè risiede nello stesso file.

I CSS interni si dividono ulteriormente in:

  • stili incorporati, quando vanno inseriti nel tag <head> della pagina;
  • stili in linea, quando sono inseriti direttamente dentro il tag dell’elemento HTML che vogliono modificare.

Esempio di stile incorporato:

CSS Incorporato
CSS Incorporato

 

 

Esempio di stile in linea:

CSS In linea
CSS In linea

Stili in cascata

Cosa significa foglio di stile in cascata?

Significa che:

  • se definisco uno stile per tutto il sito, questo sarà ereditato da tutte le pagine che lo implementano;
  • se applico uno stile ad un elemento HTML mediante un CSS esterno, posso ridefinire tale stile inserendo un CSS interno;
  • se applico uno stile ad un elemento HTML mediante un CSS incorporato, posso ridefinirlo inserendo un CSS in linea nel tag dell’elemento.

In pratica, lo stile che definisco a monte per elementi generici può essere cambiato a valle, negli elementi più specifici.

Nelle prossime lezioni vedremo degli esempi su come posizionare ciascun tipo di CSS.

Video

CSS3 Base – 2.1 – Cosa sono i CSS

In questa lezione vi spiego cosa sono i fogli di stile CSS.

Formattazione

Una pagina web può contenere diversi elementi (testi, immagini, tabelle, ecc.): questi elementi possono essere formattati, ovvero possono essere modificati nell’aspetto, nella dimensione e nella posizione mediante l’applicazione di appositi stili.

Il codice HTML viene usato per inserire oggetti nella pagina, non per formattarli, ecco perché occorre un linguaggio appositamente per questo scopo: il CSS!

CSS si unisce quindi al codice HTML per rendere le pagine web più ricche e più piacevoli dal punto di vista estetico/funzionale.

Per farvi un esempio, guardate come cambia questa pagina semplicemente aggiungendo lo stile CSS:

Pagina solo HTML
Pagina solo HTML
Pagina HTML e CSS
Pagina HTML e CSS

CSS

L’acronimo CSS sta per Cascading Style Sheet, ovvero foglio di stile in cascata.

Si tratta di un linguaggio per descrivere stili di formattazione per gli elementi HTML: imparare questo linguaggio vi permetterà di personalizzare gli elementi delle vostre pagine web.

Il termine “in cascata” ha diverse valenze, ne parlerò nelle prossime lezioni.

Video