Tutorial CSS: in­tro­du­zio­ne ai fogli di stile a cascata

I CSS servono a definire l’aspetto e la grafica delle pagine web. Con i fogli di stile a cascata separi il design dai contenuti e ga­ran­ti­sci così una struttura chiara e fles­si­bi­le. In questo tutorial scoprirai come usare i CSS per con­trol­la­re in modo mirato il layout, i colori e la ti­po­gra­fia del tuo sito.

Se­pa­ra­zio­ne di contenuto e pre­sen­ta­zio­ne

In com­bi­na­zio­ne con HTML, il CSS serve alla se­pa­ra­zio­ne di contenuto e pre­sen­ta­zio­ne.

L’Hypertext Markup Language (HTML) in­ter­vie­ne per ar­ric­chi­re documenti di testo con in­for­ma­zio­ni che sono ne­ces­sa­rie per la strut­tu­ra­zio­ne semantica degli elementi di testo. Il lin­guag­gio di markup crea quindi la base di qualsiasi sito web: il codice HTML. Quest’ultimo offre la de­scri­zio­ne degli elementi HTML che vanno a comporre un documento (ad esempio, <body>, <header>, <footer>) e di come devono essere in­ter­pre­ta­te le in­for­ma­zio­ni (come titolo <h1> o paragrafo <p>).

In origine anche il lin­guag­gio HTML offriva istru­zio­ni per l’al­le­sti­men­to degli elementi che com­pon­go­no il progetto, ma nell’attuale HTML5 risultano superate e sarebbe meglio evitarle. Per gestire le direttive ri­guar­dan­ti la rap­pre­sen­ta­zio­ne sti­li­sti­ca in maniera separata si utilizza invece il lin­guag­gio dei fogli di stile CSS (Cascading Style Sheets).

Cos’è CSS?

Come è il caso di HTML, anche il CSS viene scritto sotto forma di testo. Ciò può avvenire di­ret­ta­men­te su un documento HTML, inline per ogni documento oppure una volta sola per tutti i documenti scrivendo all’interno del tag <head>. Di norma, però, i web designer integrano i documenti CSS se­pa­ra­ta­men­te per pro­get­ta­re siti web. Il risultato è un codice sorgente chiaro in cui le istru­zio­ni di pro­get­ta­zio­ne vengono evitate tramite rinvii a fogli di stile separati. Meno ri­pe­ti­zio­ni ci sono, più leggero sarà il codice sorgente.

Nel caso in cui fosse ne­ces­sa­rio adattare il design, si lavora di­ret­ta­men­te sui file CSS, evitando, in questo modo, di scan­da­glia­re e ria­dat­ta­re ogni singolo documento HTML. Essendo un co­sid­det­to “living standard”, ovvero uno standard vivente, il CSS viene re­go­lar­men­te svi­lup­pa­to dal World Wide Web Con­sor­tium (W3C).

Struttura di base: la sintassi del CSS

Il compito prin­ci­pa­le del CSS è di definire il design di un sito web: a questo scopo vengono assegnati de­ter­mi­na­ti valori agli elementi HTML con l’aiuto delle proprietà del lin­guag­gio di stile. La struttura di base di una direttiva cor­ri­spon­de al seguente schema:

selettore { dichiarazione }

Il selettore altro non è che una rap­pre­sen­ta­zio­ne dell’elemento HTML al quale fa ri­fe­ri­men­to l’istru­zio­ne. La di­chia­ra­zio­ne consiste di una com­bi­na­zio­ne tra proprietà e valore che viene annotata tra due parentesi graffe. Ogni di­chia­ra­zio­ne finisce con un punto e virgola:

elemento HTML { proprietà: valore; }

Secondo questo schema è possibile, ad esempio, applicare un de­ter­mi­na­to colore all’in­te­sta­zio­ne, ad esempio rosso:

h2 { color: red; }

I web designer hanno la pos­si­bi­li­tà di applicare una singola proprietà al selettore oppure di definire ampi blocchi di di­chia­ra­zio­ni che con­ten­ga­no regole det­ta­glia­te. Per una questione di leg­gi­bi­li­tà si è affermata una scrittura in cui tutte le proprietà di un blocco di di­chia­ra­zio­ni vengono annotate una sotto all’altra:

selettore {
proprietà1: valore;
proprietà2: valore;
proprietà3: valore;
}

Nella pratica un blocco di di­chia­ra­zio­ni simili potrebbe apparire come segue:

h2 {
color: #ff0000;
font-family: Helvetica, sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}

Un blocco di di­chia­ra­zio­ni può servire a spe­ci­fi­ca­re più selettori alla volta: in tal caso basterà separarli con una virgola prima della di­chia­ra­zio­ne:

selettore1, selettore2 { dichiarazione }

Selettori CSS

Il CSS supporta diversi selettori in grado di assegnare istru­zio­ni di stile per­so­na­liz­za­te. Tuttavia, per chi si approccia al CSS per la prima volta, basterà che prenda con­fi­den­za con i selettori di tipo, classe, ID e quelli uni­ver­sa­li. Tieni presente che i CSS di­stin­guo­no tra maiuscole e minuscole, quindi la scrittura in maiuscolo o minuscolo ha un ruolo de­ter­mi­nan­te.

Selettore di tipo

L’ap­pli­ca­zio­ne di diversi selettori CSS risulta più chiara uti­liz­zan­do esempi concreti. Il codice seguente illustra il selettore h2 con la di­chia­ra­zio­ne:

h2 {
color: #305796;
font-family: Helvetica, sans-serif;
}

L’ap­pli­ca­zio­ne di stile è relativa a tutti gli elementi HTML del tipo h2.

Selettore di classe

In al­ter­na­ti­va, l’ap­pli­ca­zio­ne dello stile può avvenire tramite un selettore di classe. Questo permette ai web designer di munire gli elementi HTML delle stesse istru­zio­ni, in­di­pen­den­te­men­te dal gruppo di ap­par­te­nen­za.

.content {
color: #ff0000;
font-family: Helvetica, sans-serif;
}

L’ap­pli­ca­zio­ne fa ri­fe­ri­men­to a tutti gli elementi HTML ai quali è stata applicata la classe .content. Questa as­se­gna­zio­ne avviene secondo il seguente schema nel codice HTML:

<p class="special-text">Esempio di testo</p>

Selettore ID

Se un’istru­zio­ne dovesse far ri­fe­ri­men­to esclu­si­va­men­te a un singolo elemento all’interno del codice sorgente HTML, allora si adatta bene il selettore ID. Il seguente esempio mostra l’ap­pli­ca­zio­ne dello stile di una barra di na­vi­ga­zio­ne:

#navigation {
font-family: Helvetica, sans-serif;
background-color: #8ad8d4;
border: 2px solid #448278;
}

L’as­se­gna­zio­ne di uno stile avviene nel codice sorgente HTML senza l’hashtag:

<div id="navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="contatti.htm">Contatti</a></li>
</ul>
</div>

Il vantaggio dei selettori ID è che a prima vista appare subito evidente quali sezioni del codice sorgente sono campi che ricorrono una volta sola.

Selettore uni­ver­sa­le

Se un’istru­zio­ne dovesse riferirsi a tutti gli elementi di un documento HTML, allora in­ter­ver­reb­be l’asterisco (*):

* {
font-family: Helvetica, sans-serif;
}

In questo modo tutti gli elementi di testo verranno rap­pre­sen­ta­ti sul browser con il font Helvetica.

Integrare il CSS in HTML

Per per­met­te­re che un browser possa prendere in con­si­de­ra­zio­ne ap­pli­ca­zio­ni di stile CSS, le istru­zio­ni devono essere collegate al codice sorgente HTML. A questo scopo esistono tre pos­si­bi­li­tà:

• L’in­te­gra­zio­ne diretta della di­chia­ra­zio­ne CSS nei tag HTML
• L’as­se­gna­zio­ne CSS all’interno del tag head HTML
• Il rinvio a un foglio di stile separato

L’ultima soluzione proposta rap­pre­sen­ta la scor­cia­to­ia ideale: nella pratica i fogli di stile vengono aggiunti come file di testo esterni e suc­ces­si­va­men­te collegati al progetto.

Di­chia­ra­zio­ne CSS all’interno dei tag HTML

Se una di­chia­ra­zio­ne CSS definisce lo stile di una singola parte del codice sorgente, allora le istru­zio­ni di stile possono venire di­ret­ta­men­te applicate sul tag dell’elemento HTML grazie all’attributo style. In questo caso si parla di inline-style, o anche stile in linea.

<h2 style="color: red;">Sottotitolo</h2>

Questo metodo ha i vantaggi che non è ne­ces­sa­rio con­fi­gu­ra­re un foglio di stile apposito, che il selettore sparisce e che una tale istru­zio­ne ha una priorità elevata (valore 1000). Solamente nel momento in cui deve essere applicato un blocco di di­chia­ra­zio­ni, allora questo metodo di stile risulta poco chiaro e ri­don­dan­te.

As­se­gna­zio­ne del CSS nell’head HTML

Se un’istru­zio­ne di stile che si trova all’interno di un documento HTML è valida più volte per lo stesso elemento, come ad esempio per tutti gli h2 del sito web, la di­chia­ra­zio­ne CSS integrata nel tag HTML diventa inef­fi­cien­te. Piuttosto risulta più con­ve­nien­te definire le relative regole una volta sola all’interno dell’head HTML del documento grazie all’elemento style:

<!DOCTYPE html>
<html lang="it">
<head>
<style>
h2 {
color: #ff0000;
font-family: 'Helvetica Neue', sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Sottotitolo1</h2>
[…]
<h2>Sottotitolo2</h2>
[…]
</body>
</html>

Il blocco di di­chia­ra­zio­ni all’interno dell’elemento style viene applicato au­to­ma­ti­ca­men­te su tutti gli elementi h2 che seguono. Se l’elemento h2 deve essere applicato con le stesse istru­zio­ni qui definite anche ad altre pagine dello stesso progetto online, puoi definire sem­pli­ce­men­te l’istru­zio­ne dal file CSS centrale.

Rimando a un foglio di stile separato

Se le istru­zio­ni di stile vengono definite in un foglio di stile separato, allora quest’ultimo va collegato al documento HTML di base. Questo avviene uti­liz­zan­do l’elemento HTML <link>.

<link rel="stylesheet" href="esempio.css">

L’elemento link contiene gli attributi ob­bli­ga­to­ri rel e href e può essere com­ple­ta­to ideal­men­te con gli attributi type e media.

I colori CSS

Come accennato nel capitolo in­tro­dut­ti­vo, le as­se­gna­zio­ni cro­ma­ti­che tramite CSS sono possibili uti­liz­zan­do i nomi dei colori in inglese. In realtà tali istru­zio­ni di stile si trovano molto raramente, perché so­li­ta­men­te viene applicato il modello RGB: esso offre infatti de­ci­sa­men­te più sfumature e permette quindi a chi gestisce un sito web di con­fi­gu­ra­re im­po­sta­zio­ni cro­ma­ti­che det­ta­glia­te. I codici cor­ri­spon­den­ti possono essere rin­trac­cia­ti con l’aiuto di un selettore colore, offerto, ad esempio, da Google sotto forma di Quick Answer.

Close

Nel modello RGB le quantità di colore vengono definite at­tra­ver­so valori decimali tra 0 e 255. Mentre un valore di 0 significa che un colore non ha alcuna quota del colore primario in questione, al contrario, il valore 255 indica il valore massimo della quota.

A partire dalla versione CSS3 i valori RGB possono essere ampliati di un valore, il co­sid­det­to canale alfa (a): questo, infatti, descrive il grado di tra­spa­ren­za/opacità di un colore uti­liz­zan­do valori da 0 a 1 (ad esempio 0.8). I colori RGB vengono quindi definiti in CSS come segue:

rgba(valore di rosso, valore di giallo, valore di blu, opacità/trasparenza)

In questo modo, per il colore primario blu, i seguenti valori RGBA danno come risultato una tra­spa­ren­za del 50 %.

rgba(0, 0, 255, 0.5)

Le proprietà CSS più im­por­tan­ti

Con il CSS hai a di­spo­si­zio­ne molte proprietà con le quali è possibile definire istru­zio­ni per gli elementi HTML. Ogni proprietà accetta un blocco di valori stabilito nella spe­ci­fi­ca­zio­ne. Per garantire chiarezza, le proprietà CSS vengono rag­grup­pa­te in campi di ap­pli­ca­zio­ne. Qui ci con­cen­tria­mo sulle proprietà più im­por­tan­ti.

Aspetto grafico del testo

L’aspetto grafico del testo ap­par­tie­ne alle ca­rat­te­ri­sti­che fon­da­men­ta­li di un sito web. Il CSS ti offre diverse pos­si­bi­li­tà di for­mat­ta­re gli elementi di testo di una pagina HTML.

font-family

Se per gli elementi di testo di una pagina web deve essere definito un de­ter­mi­na­to tipo di carattere (font), si utilizza la proprietà CSS font-family. Questa ti consente di creare un co­sid­det­to stack di caratteri (font stack). Si tratta di un elenco prio­ri­ta­rio di font adatti. Gli stack di caratteri sono strut­tu­ra­ti in modo che per primo venga indicato il tipo di carattere de­si­de­ra­to e, a seguire, un elenco di al­ter­na­ti­ve di vi­sua­liz­za­zio­ne adatte:

.content {
font-family: Georgia, Garamond, serif;
}

L’esempio mostra un’istru­zio­ne nel file CSS.

Il font prio­ri­ta­rio definito è Georgia, come font al­ter­na­ti­vo abbiamo Garamond. Così facendo il browser avrà il compito di rap­pre­sen­ta­re il testo con Garamond nel momento in cui il font prio­ri­ta­rio Georgia non sia in­stal­la­to sul sistema.

font-style

La proprietà CSS font-style si riferisce allo stile di scrittura di un paragrafo di testo e ti offre la pos­si­bi­li­tà di definire l’in­cli­na­zio­ne del testo in base a uno dei tre valori seguenti:

Il seguente esempio mostra un’istru­zio­ne per lo stile di font in corsivo:

.special-content {
font-family: Arial;
font-style: italic;
}

font-variant

La proprietà CSS font-variant in­ter­vie­ne per definire varianti di scrittura.

Il seguente esempio determina una variante di scrittura small-caps:

.content {
font-family: Arial;
font-variant: small-caps;
}

font-size

Con la proprietà CSS font-size viene definita la di­men­sio­ne degli elementi di testo. Ciò può avvenire sia con valori assoluti oppure re­la­ti­va­men­te agli elementi cir­co­stan­ti. Viene indicata l’altezza dei caratteri, ovvero il corpo del carattere. I web designer avranno a di­spo­si­zio­ne vari metodi di scrittura e unità di misura.

Unità di misura assolute

Le unità di misura assolute si orientano secondo misure di lunghezza fisiche. Sullo schermo i browser tramutano tutte queste unità in pixel ri­por­tan­do una ri­so­lu­zio­ne di 96 dpi. Oltre che per i px, le unità di misura assolute non giocano alcun ruolo fon­da­men­ta­le nel mondo del web design: il loro vero senso è tutt’al più per la pub­bli­ca­zio­ne su carta.

Inoltre, è possibile definire la di­men­sio­ne del carattere tramite parole chiave assolute:

Unità di misura relative

Per quanto riguarda le unità di misura relative, si tratta di in­di­ca­zio­ni che si ri­fe­ri­sco­no alla di­men­sio­ne del carattere e che vengono de­ter­mi­na­te a seconda di una di­men­sio­ne pre­sta­bi­li­ta. Gli elementi HTML ereditano la loro di­men­sio­ne del font dagli elementi genitore. Inoltre, un ri­fe­ri­men­to per la di­men­sio­ne relativa del font può essere un valore tecnico in­di­ca­ti­vo, come la di­men­sio­ne del display di un di­spo­si­ti­vo o un valore standard sul browser.

La di­men­sio­ne del carattere può essere definita anche tramite parole chiave relative. Come ri­fe­ri­men­to vale la di­men­sio­ne del carattere pre­de­fi­ni­ta del browser.

Per as­si­cu­ra­re una rap­pre­sen­ta­zio­ne ottimale della di­men­sio­ne del font su diversi di­spo­si­ti­vi è rac­co­man­da­bi­le uti­liz­za­re unità di misura relative come em oppure %.

Lo schema di base della for­mat­ta­zio­ne della di­men­sio­ne del font tramite CSS cor­ri­spon­de al seguente esempio di codice:

.content {
font-size: 19em;
}

line-height

La proprietà CSS line-height viene uti­liz­za­ta per definire l’altezza delle righe di un paragrafo di testo. Valgono le stesse unità di misura di font-size, anche se le in­di­ca­zio­ni di per­cen­tua­le font-size si ri­fe­ri­sco­no ai relativi testi. In al­ter­na­ti­va è possibile indicare l’elemento line-height in cifre senza unità di misura. Ulteriori valori possibili sono normal (im­po­sta­zio­ne standard) e inherit (cor­ri­spon­den­te all’elemento genitore).

Ad esempio, una line-height di 1.5 cor­ri­spon­de a un’altezza di riga del 150% della relativa altezza di font oppure a 1.5 em.

.content {
line-height: 1.5;
}

font-weight

La proprietà CSS font-weight definisce lo spessore del tratto di un elemento di testo. I web designer lo uti­liz­za­no per rap­pre­sen­ta­re parti testuali in grassetto. I valori sono in­di­ca­bi­li in termini assoluti o relativi rispetto all’elemento genitore.

Le cifre hanno rilevanza solamente nei font web, per cui di norma bastano solamente due dif­fe­ren­ti spessori del tratto: normal e bold.

.content {
font-weight: normal;
}
.content {
font-weight: bold;
}

I valori relativi della proprietà CSS font-weight de­fi­ni­sco­no il peso del carattere di un elemento di testo in relazione allo spessore del tratto ereditato dell’elemento genitore.

For­mat­ta­zio­ne del testo

Accanto alla for­mat­ta­zio­ne dell’aspetto grafico carattere, il CSS mette a di­spo­si­zio­ne diverse proprietà per la for­mat­ta­zio­ne testuale. Queste per­met­to­no di applicare im­po­sta­zio­ni ri­guar­dan­ti l’al­li­nea­men­to del testo e la distanza tra caratteri e parole oppure di decorare elementi di testo.

text-align

La proprietà CSS text-align serve a po­si­zio­na­re elementi di testo e inline, questi ultimi sono quegli elementi contenuti all’interno del flusso testuale, come possono essere immagini o pulsanti. I valori usuali sono:

• left (al­li­nea­men­to a sinistra)
• right (al­li­nea­men­to a destra)
• center (centrato)
• justify (giu­sti­fi­ca­to)
• inherit(come l’elemento genitore).

Il codice seguente porta a un al­li­nea­men­to centrale dell’esempio testuale:

.content {
text-align: center;
}

Esistono, inoltre, valori relativi alla proprietà text-align per la de­fi­ni­zio­ne dell’al­li­nea­men­to testuale in relazione alla direzione di un testo (direction).

Il valore start è con­si­de­ra­to il valore standard.

Tutti i browser in uso po­si­zio­na­no l’ultima riga dell’al­li­nea­men­to giu­sti­fi­ca­to au­to­ma­ti­ca­men­te a sinistra. Se però questo risultato non è de­si­de­ra­to, può venire for­mat­ta­to se­pa­ra­ta­men­te grazie alla proprietà CSS text-align-last. I possibili valori cor­ri­spon­do­no a quelli della proprietà text-align.

hyphens

In aggiunta, il CSS offre la pos­si­bi­li­tà di dividere au­to­ma­ti­ca­men­te le sillabe con l’aiuto della proprietà hyphens. Il lin­guag­gio di stile mette a di­spo­si­zio­ne i seguenti valori per la proprietà in questione:

word-spacing

La proprietà CSS word-spacing regola la distanza tra le parole all’interno di un elemento testuale; in questo modo i gestori delle pagine web hanno la pos­si­bi­li­tà di definire le distanze che in­ter­cor­ro­no tra le parole definendo in­di­ca­zio­ni delle di­men­sio­ni. A questo scopo sono a di­spo­si­zio­ne le unità di misura rap­pre­sen­ta­te nella proprietà font-size, esclusa l’in­di­ca­zio­ne della per­cen­tua­le. In aggiunta sono di­spo­ni­bi­li anche i valori normal (im­po­sta­zio­ne standard) e inherit (cor­ri­spon­den­te all’elemento genitore).

L’esempio di codice che segue definisce una distanza tra le parole di 2 em, che va ad ag­giun­ger­si alla distanza pre­de­fi­ni­ta.

.content {
word-spacing: 2em;
}

letter-spacing

Se non è la distanza tra le parole a dover essere definita, bensì quella tra le lettere, allora entra in gioco la proprietà CSS letter-spacing. Anche in questo caso si può disporre dei valori normal e inherit, sempre esclu­den­do il valore per­cen­tua­le.

L’esempio di codice che segue mostra una parte di testo in cui una parola viene messa in evidenza da una distanza tra le lettere di 1 em.

.special-content {
letter-spacing: 1em;
}

text-indent

Con la proprietà CSS text-indent hai la pos­si­bi­li­tà di indentare esclu­si­va­men­te la prima riga di un paragrafo, ovvero as­se­gnar­le un rientro sinistro. I valori possibili sono positivi e negativi, come anche in­di­ca­zio­ni di per­cen­tua­le in relazione alla larghezza del blocco di testo in questione.

L’esempio di codice seguente definisce un’in­den­ta­tu­ra del 5% della prima riga. La classe viene assegnata nel codice sorgente HTML tramite elementi span:

.content {
text-indent: 5%;
}

Per definire un capoverso, viene applicato un valore negativo alla proprietà text-indent.

text-decoration

La proprietà CSS text-decoration ti offre la pos­si­bi­li­tà di decorare gli elementi di testo ad esempio con sot­to­li­nea­tu­re. I valori possibili sono:

L’esempio di codice che segue definisce le sot­to­li­nea­tu­re per gruppi di parole scelti all’interno del paragrafo.

.content-underline {
text-decoration: underline;
}

text-transform

La proprietà text-transform permette di attuare tra­sfor­ma­zio­ni usando il CSS. In questo modo è possibile rap­pre­sen­ta­re parti testuali in maiuscolo o minuscolo senza dover adattare anche la base testuale. La proprietà consente le seguenti tra­sfor­ma­zio­ni:

Se le lettere iniziali di un paragrafo devono essere ri­pro­dot­te in­di­pen­den­te­men­te dal testo di origine e con lettere maiuscole, allora la seguente for­mat­ta­zio­ne sarà l’ideale:

.content {
text-transform: capitalize;
}

Colori del font e dello sfondo

Nella scelta dei colori del font e dello sfondo i web designer di norma attingono ai codici colore in scrittura decimale o esa­de­ci­ma­le pre­ce­den­te­men­te spiegati. Ci sono tutta una serie di proprietà che usano questi codici colore.

color

La proprietà CSS color è utile per la for­mat­ta­zio­ne del colore del font. I valori usuali sono in­di­ca­zio­ni cro­ma­ti­che in forma di valori RGB, codici HEX o indici HSL. Oltre a ciò, i valori transparent e opacity riescono a rap­pre­sen­ta­re gli elementi tra­spa­ren­ti. L’esempio di codice che segue mostra la for­mat­ta­zio­ne cromatica sulla base di un codice colore HEX:

.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
}

background-color

La proprietà CSS background-color entra in azione quando a un elemento va at­tri­bui­to un colore di sfondo. I possibili valori cor­ri­spon­do­no agli stessi della proprietà color.

L’esempio di codice che segue mostra una for­mat­ta­zio­ne del colore di font e sfondo:

.content {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
}

La for­mat­ta­zio­ne indica al browser che tutti gli elementi di testo della classe content vanno rap­pre­sen­ta­ti in rosso magenta (#d82451) e il loro sfondo in turchese (#24d8ab).

background-image

In al­ter­na­ti­va a un colore si può decidere di caricare una grafica come sfondo. Per fare questo i web designer sfruttano la proprietà background-image, che nel valore contiene il percorso relativo alla grafica se­le­zio­na­ta:

.content {
background-image:
url (percorso al file di immagine);
}

Invece di background-image o di background-color è possibile anche adoperare la dicitura più breve background.

Oltre a ciò, il CSS offre la pos­si­bi­li­tà di definire come sfondo dei gradienti di colori:

Nella nostra in­tro­du­zio­ne al CSS ci limitiamo a uti­liz­za­re la funzione linear-gradient() come esempio. Se a un elemento va apposto uno sfondo con gradiente di colore lineare, allora si utilizza la funzione linear-gradient() come valore per la proprietà background, la quale necessita di almeno due in­di­ca­zio­ni di colore. La modalità di scrittura con la quale vengono definiti i colori non è rilevante.

.content {
width: 400px;
height: 400px;
background: linear-gradient( green, yellow );
}

Bordi

Il CSS ti permette anche di applicare un bordo agli elementi HTML. È par­ti­co­lar­men­te con­si­glia­to per i co­sid­det­ti “elementi a livello di blocco”, come i titoli, i paragrafi, i con­te­ni­to­ri div o le tabelle HTML, che appaiono all’interno dell’elemento body. Senza che sia ne­ces­sa­ria un’ulteriore for­mat­ta­zio­ne, questi elementi di contenuto vanno a pro­lun­gar­si su tutta la larghezza possibile e si po­si­zio­na­no seguendo uno sotto l’altro.

Gli elementi di blocco non vanno confusi con gli elementi inline come <b>, <i>, <a> o <span>. Questi elementi sono presenti esclu­si­va­men­te all’interno degli elementi di blocco. La larghezza di un elemento inline viene de­ter­mi­na­ta solamente dal suo contenuto.

Se un bordo deve in­cor­ni­cia­re un intero elemento di blocco o inline, allora ci si serve della proprietà borders. In al­ter­na­ti­va puoi definire l’im­po­sta­zio­ne del bordo per ogni singolo lato dell’elemento.

Sia la proprietà border che le proprietà spe­ci­fi­che per i singoli bordi possono essere ul­te­rior­men­te spe­ci­fi­ca­te. I valori cor­ri­spet­ti­vi vengono separati da uno spazio e annotati secondo il seguente schema dopo la proprietà:

.content {
border: style width color;
}
.content {
border: solid 4px #ff0000;
}

Inoltre la proprietà border-radius offre la pos­si­bi­li­tà di ar­ro­ton­da­re gli spigoli del bordo.

Tipologia di bordo

Con la scelta della tipologia di bordo definisci un bordo de­co­ra­ti­vo per l’elemento di blocco o inline in questione. Alcune tipologie sono ef­fet­ti­va­men­te visibili solo quando viene indicata una di­men­sio­ne del bordo adeguata.

La seguente grafica mette a confronto le tipologie di bordo CSS:

Close

L’in­di­ca­zio­ne della tipologia di bordo è ob­bli­ga­to­ria, quindi se non viene inserita il browser non la rap­pre­sen­te­rà, anche se sono presenti valori per lo spessore o i colori dei bordi.

Spessore del bordo

Lo spessore del bordo definisce lo spessore della linea che in­ter­cor­re lungo il bordo.

Colore del bordo

Le im­po­sta­zio­ni di colore per la proprietà border-color cor­ri­spon­do­no a quelle delle proprietà color e background-color.

Il seguente esempio di codice combina la proprietà border con le for­mat­ta­zio­ni dei colori del font e dello sfondo. Il blocco di regole viene definito all’interno del file CSS per la classe bordo:

.bordo {
font-family: Arial;
font-size: 5em;
color: #d82451;
background-color: #24d8ab;
border: 10px ridge #d82451;
}

border-radius

La proprietà border-radius permette di ar­ro­ton­da­re gli spigoli di un bordo sia a cerchio che a ellisse. Un qualsiasi sfondo verrà quindi tagliato lungo la curva definita; ciò funziona anche se l’elemento non ha un bordo. Infine, con border-radius è possibile anche inserire fa­cil­men­te forme geo­me­tri­che.

I valori possibili per la proprietà border hanno fino a quattro in­di­ca­zio­ni di di­men­sio­ne che stanno ognuna per un angolo del bordo. L’as­se­gna­zio­ne può avvenire a scelta tramite uno, due, tre o quattro valori.

I singoli valori per il raggio del bordo sono separati da spazi e annotati dopo la proprietà border-radius. In questo modo la di­chia­ra­zio­ne risulta nel seguente schema (i valori numerici sono esempi):

border-radius: 4em 2em 3em 1em;

La proprietà border-radius può essere definita all’interno della stessa regola della proprietà border o, in al­ter­na­ti­va, in classi separate.

Il blocco di regole seguente definisce un bordo con un border-radius di 2 em:

.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
}

Close

In al­ter­na­ti­va è possibile definire dif­fe­ren­ti valori per ogni singolo angolo:

.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em 1em 3em 4em;
}

Close

In entrambi i casi gli angoli del bordo vengono ar­ro­ton­da­ti. Può però venire applicato un ar­ro­ton­da­men­to a ellisse, per cui per ogni angolo vengono richiesti due valori. La di­chia­ra­zio­ne di un bordo ar­ro­ton­da­to el­lit­ti­ca­men­te può avere fino a otto valori:

border-radius: 1em 4em 1em 4em / 4em 1em 4em 1em;

I valori pre­ce­den­ti alla barra obliqua (/) de­fi­ni­sco­no il raggio sul semiasse oriz­zon­ta­le dell’ellisse, i valori dopo la barra obliqua, invece, il raggio sul semiasse verticale.

.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 1em 4em / 4em 1em;
}

Close

Un eventuale sfondo viene tagliato au­to­ma­ti­ca­men­te lungo la curva.

.bordo {
height: 100px;
width: 600px;
border: solid 10px #d82451;
border-radius: 2em;
background-color: #24d8ab;
}

Close

Questo vale sia per i colori sia per le immagini di sfondo, ma non per gli elementi di testo.

Close

Po­si­zio­na­men­to

La proprietà CSS position serve a rimuovere un box dal flusso degli elementi e a po­si­zio­nar­la in un punto del sito web a scelta. Altri box, che siano interni al flusso o che siano anch’essi po­si­zio­na­ti, non hanno alcuna influenza sulla posizione di un box che viene for­mat­ta­to con questa modalità.

La proprietà position ha diversi valori, che possono essere spe­ci­fi­ca­ti più pre­ci­sa­men­te tramite le proprietà left, right, top e bottom e i relativi valori come unità di misura:

Po­si­zio­na­men­to assoluto

Con position: absolute il box viene rimosso dal flusso degli elementi e po­si­zio­na­to nel punto definito dalle proprietà riportate di seguito. I valori sono in relazione all’elemento antenato più vicino di livello superiore, anch’esso spe­ci­fi­ca­to tramite la proprietà position. Se un tale elemento non esiste, come punto di ri­fe­ri­men­to viene usato l’elemento radice <html>. I box con la di­chia­ra­zio­ne position: absolute non in­flui­sco­no sulla posizione degli altri elementi e li so­vrap­pon­go­no oppure vengono so­vrap­po­sti da questi.

Le seguenti regole con­ten­go­no in­di­ca­zio­ni assolute di po­si­zio­na­men­to dei box CSS .rosso, .blu e .verde all’interno dell’elemento genitore background.

.background {
height: 500px;
width: 500px;
border: solid grey
}
.rosso {
height: 150px;
width: 150px;
background-color: rgba(255,0,0,0.5);
position: absolute;
top: 100px;
left: 100px;
}
.blu {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: absolute;
top: 150px;
left: 150px;
}
.verde {
height: 150px;
width: 150px;
background-color: rgba(0,255,0,0.5);
position: absolute;
top: 200px;
left: 200px;
}

I content box .rosso, .blu e .verde sono stati for­mat­ta­ti come superfici se­mi­tra­spa­ren­ti con le misure 150 px x 150 px. Il content box background con le misure 500 px x 500 px è in­cor­ni­cia­to da un bordo grigio.

Le in­di­ca­zio­ni di im­pa­gi­na­zio­ne sono integrate tramite classi nel codice HTML.

<div class="background">
<p class="rosso"> </p>
<p class="blu"> </p>
<p class="verde"> </p>
</div>

La vi­sua­liz­za­zio­ne sul browser mostra i dif­fe­ren­ti po­si­zio­na­men­ti dei box all’interno dell’elemento <div>. Gli elementi vengono spostati di 50 px in basso a destra. L’ap­pli­ca­zio­ne del colore tra­spa­ren­te evidenzia la pos­si­bi­li­tà di una so­vrap­po­si­zio­ne usando il po­si­zio­na­men­to assoluto.

Close

Po­si­zio­na­men­to relativo

Con il po­si­zio­na­men­to relativo, il box rimane integrato nel flusso naturale degli elementi, ma può essere spostato tramite in­di­ca­zio­ni di po­si­zio­na­men­to. Il box viene quindi allineato rispetto a se stesso. Gli elementi pre­ce­den­ti e suc­ces­si­vi nel flusso si com­por­ta­no come se il box non fosse stato spostato.

Per allineare un box partendo dalla sua posizione nel flusso degli elementi, il relativo set di regole viene ampliato con la di­chia­ra­zio­ne position: relative e con le in­di­ca­zio­ni di posizione de­si­de­ra­te.

Il seguente blocco di codice lo dimostra prendendo come esempio il box blu:

.blu {
height: 150px;
width: 150px;
background-color: rgba(0,0,255,0.5);
position: relative;
left: 50px;
}

L’istru­zio­ne di stile position: relative con l’in­di­ca­zio­ne di posizione left: 50px comporta, nella vi­sua­liz­za­zio­ne del browser, uno spo­sta­men­to del box blu di 50 px verso sinistra.

Close

Il po­si­zio­na­men­to relativo può venire applicato anche a elementi con il float.

Box CSS fissi

L’im­po­sta­zio­ne di box fissi avviene, come già per il po­si­zio­na­men­to assoluto, a pre­scin­de­re dal flusso di elementi. Tutte le in­di­ca­zio­ni di po­si­zio­na­men­to sono in relazione al campo visivo dell’utente finale. Un box fissato in questo modo appare sempre nella stessa posizione sullo schermo, anche quando un utente scorre la pagina web. In questo modo è possibile fissare nel campo visivo elementi di na­vi­ga­zio­ne come menu o pulsanti di blocco (ad esempio “Torna all’inizio della pagina”).

Il box model CSS

Il box model CSS descrive come i browser vi­sua­liz­za­no e po­si­zio­na­no gli elementi HTML come superfici ret­tan­go­la­ri (“box”). Ogni sito web consiste es­sen­zial­men­te in un’in­te­ra­zio­ne di questi box, la cui di­spo­si­zio­ne è de­ter­mi­na­ta dal co­sid­det­to flusso degli elementi: per im­po­sta­zio­ne pre­de­fi­ni­ta, gli elementi vengono po­si­zio­na­ti da sinistra a destra e dall’alto verso il basso.

Il CSS distingue in questo caso tra due diversi tipi di con­te­ni­to­ri:

• I box a blocco (div, p) che occupano per im­po­sta­zio­ne pre­de­fi­ni­ta l’intera larghezza del loro elemento genitore e iniziano sempre in una nuova riga.
• I box inline (span, b, i) che vengono vi­sua­liz­za­ti nel flusso del testo e si adattano al contenuto.

Nelle seguenti grafiche è possibile vedere il flusso di elementi di box a blocco e inline:

Close

I box a blocco strut­tu­ra­no il layout, mentre i box inline sono re­spon­sa­bi­li del testo e degli elementi inline. I con­te­ni­to­ri vuoti come <div> servono spesso solo per il rag­grup­pa­men­to e la for­mat­ta­zio­ne tramite CSS.

Se tutti i quattro angoli di un box devono essere for­mat­ta­ti con­tem­po­ra­nea­men­te, allora vengono attivate le proprietà padding, border e margin.

I possibili valori per le proprietà di cui sopra sono in­di­ca­zio­ni di di­men­sio­ne come inherit, il quale cor­ri­spon­de all’elemento genitore. I margini esterni sono inoltre de­fi­ni­bi­li grazie al valore auto.

La grafica seguente illustra in maniera sche­ma­ti­ca la struttura di un box CSS:

Close

Il CSS box model in azione

Per capire come funziona il CSS box model basta ag­giun­ge­re a un content box i vari livelli passo per passo. Il punto di partenza è una breve porzione di testo la quale, ad esempio, va for­mat­ta­ta tramite il selettore di classe:

<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>

Il blocco di regole seguente decide le di­men­sio­ni per il content box: 150px x 150px. Ulteriori for­mat­ta­zio­ni de­fi­ni­sco­no il font di colore nero su sfondo grigio. In più, l’al­li­nea­men­to del testo va giu­sti­fi­ca­to:

.content {
height: 150px;
width: 150px;
color: #000000;
text-align: justify;
background-color: #808080;
}

Se ap­pli­chia­mo le in­di­ca­zio­ni di im­pa­gi­na­zio­ne alla porzione di testo, sul browser avremo questa vi­sua­liz­za­zio­ne:

Close

La porzione di testo appare in con­for­mi­tà del flusso di elementi nell’angolo in alto a sinistra del suo elemento genitore. Il testo e il colore di sfondo co­min­cia­no senza margine nella parte sinistra della finestra del browser e coprono l’intera su­per­fi­cie di­spo­ni­bi­le. Lo sfondo si chiude di­ret­ta­men­te con il corpo del testo.

Una simile im­pa­gi­na­zio­ne è brutta a vedersi e ap­pe­san­ti­sce la lettura. La proprietà padding permette quindi ai web designer di definire un margine interno per di­stan­zia­re gli elementi di testo da elementi di im­pa­gi­na­zio­ne adiacenti.

.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
}

Aggiunta al blocco di regole, la di­chia­ra­zio­ne padding: 10px; porta alla seguente va­ria­zio­ne di vi­sua­liz­za­zio­ne sul front end:

Close

Il browser aggiunge a tutti e quattro i lati del content box un margine interno di 10px. Come ulteriore elemento di design è possibile uti­liz­za­re un bordo.

.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
}

Nel codice di esempio viene uti­liz­za­ta la proprietà border per ag­giun­ge­re all’elemento un bordo continuo rosso bordeaux.

Close

Tramite il valore del padding, il bordo si distanzia dal contenuto.

Conforme al naturale flusso di elementi, il box for­mat­ta­to in questa maniera si posiziona senza distanza all’angolo in alto a sinistra dell’elemento genitore. La proprietà margin fa in modo che il design di un sito web venga reso più piacevole alla vista con l’aiuto di un margine esterno.

A questo scopo viene aggiunta la cor­ri­spet­ti­va di­chia­ra­zio­ne alla regola già esistente:

.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 10px;
border: 5px solid #d82451;
margin: 40px;
}

Sul browser un simile margine esterno di 40px viene reso come segue:

Close

In al­ter­na­ti­va alle in­di­ca­zio­ni delle di­men­sio­ni, alla proprietà margin può essere applicato il valore auto. In questo caso il box si orienta au­to­ma­ti­ca­men­te in oriz­zon­ta­le al centro dell’elemento genitore. Il valore auto non prevede l’al­li­nea­men­to in verticale.

For­mat­ta­zio­ne del box con float

Se per quanto riguarda il box da for­mat­ta­re si tratta di un box a blocco, allora i box che seguono finiranno au­to­ma­ti­ca­men­te nella riga suc­ces­si­va, con­for­me­men­te al flusso di elementi.

Nella pratica, l’in­ter­ru­zio­ne di riga au­to­ma­ti­ca in seguito a un box a blocco non è sempre de­si­de­ra­ta e può essere perciò impedita tramite la proprietà float: questa, infatti, libera i box a blocco dal normale flusso e li posiziona in un punto specifico.

Il box con for­mat­ta­zio­ne float si chiamerà Float.

Se diversi Float si in­con­tra­no verranno allineati nell’ordine in cui appaiono nel codice sorgente HTML, da sinistra a destra (float: left) o da destra a sinistra (float: right).

Il seguente esempio di codice mostra una regola con­te­nen­te la proprietà float:

.content {
height: 150px;
width: 150px;
color: #000000;
background-color: #808080;
text-align: justify;
padding: 20px;
border: 5px solid #d82451;
margin: 40px;
float: left;
}

Se viene applicato a due elementi HTML, questi vengono rimossi dal flusso degli elementi e disposti af­fian­ca­ti, allineati a sinistra:

<p class="content">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctusest Lorem ipsum dolor sit amet.</p>
<p class="content">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>

Close

La distanza che in­ter­cor­re tra i due elementi è data dal fatto che viene aggiunto il margine esterno di ogni box. Senza Float, i margini esterni degli elementi vicini non ri­sul­te­reb­be­ro.

Web design re­spon­si­ve con CSS

Per creare un web design re­spon­si­ve con CSS, il lin­guag­gio dei fogli di stile offre due moderne tecniche di layout: flexbox e grid. Entrambi i sistemi adattano di­na­mi­ca­men­te i contenuti a diverse di­men­sio­ni dello schermo. In com­bi­na­zio­ne con le media query CSS, i layout possono essere adattati in modo mirato anche a diversi di­spo­si­ti­vi e larghezze dello schermo.

Flexbox

Con CSS flexbox (Flexible Box Layout) puoi rea­liz­za­re layout mo­no­di­men­sio­na­li in modo par­ti­co­lar­men­te semplice. Flexbox dispone i contenuti in oriz­zon­ta­le o in verticale ed è quindi adatto alla na­vi­ga­zio­ne, alle gallerie o alle aree di contenuto modulari.

Un co­sid­det­to container flex è definito dalla proprietà display: flex;. Tutti gli elementi figli diretti diventano au­to­ma­ti­ca­men­te flex item, la cui posizione, ordine e di­men­sio­ne possono essere gestiti in modo fles­si­bi­le.

Un semplice esempio mostra la di­spo­si­zio­ne oriz­zon­ta­le degli elementi con spa­zia­tu­ra uniforme:

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;

Le regole vengono applicate al seguente HTML:

<div class="container">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>

Inoltre, puoi gestire in modo in­di­pen­den­te anche il com­por­ta­men­to dei singoli flex items. Con la proprietà flex puoi ad esempio stabilire quanto un elemento, rispetto agli altri, possa in­gran­dir­si o ridursi. In questo caso, il valore 2 indica un raddoppio:

.item1 {flex: 2; }

Layout a griglia

Con un CSS grid i contenuti di una pagina web possono essere disposti in una griglia bi­di­men­sio­na­le. Il sistema a griglia consente un controllo preciso di righe e colonne, per­met­ten­do di rea­liz­za­re layout complessi in modo semplice e fles­si­bi­le. Per creare una griglia, si assegna a un elemento genitore la proprietà display: grid;. Tutti gli elementi figli diretti di questo con­te­ni­to­re diventano au­to­ma­ti­ca­men­te elementi della griglia. Suc­ces­si­va­men­te, la griglia può essere per­so­na­liz­za­ta con un’ampia varietà di proprietà.

Un esempio mostra la struttura di una griglia con tre colonne di uguale larghezza e due righe uti­liz­zan­do valori fr uniformi:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}

Ogni elemento della griglia può inoltre essere po­si­zio­na­to in modo mirato, per esten­der­si ad esempio su più colonne o righe. A questo scopo sono di­spo­ni­bi­li le proprietà grid-column e grid-row. Qui si indicano la riga iniziale (inclusa) e la riga finale (esclusa), separate da una barra (/). Nel seguente esempio, l’elemento si estende su due colonne e una riga.

.item1 {
grid-column: 1 / 3; 
grid-row: 1; 
}

Media query

Le media query con­sen­to­no di applicare regole CSS in base alle ca­rat­te­ri­sti­che del di­spo­si­ti­vo. In questo modo, il layout può avere un aspetto diverso su smart­pho­ne, tablet e schermi desktop, senza dover uti­liz­za­re più file HTML. Con una media query puoi attivare o so­vra­scri­ve­re in modo mirato gli stili non appena vengono sod­di­sfat­te de­ter­mi­na­te con­di­zio­ni. L’ap­pli­ca­zio­ne più comune è l’adat­ta­men­to a diverse larghezze del viewport, per cui sono necessari i seguenti valori:

Un esempio mostra come si possa uti­liz­za­re una media query per mo­di­fi­ca­re il layout al di sotto di una de­ter­mi­na­ta larghezza:

/ *Layout standard per schermi più grandi* /
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/ *Adattamento per schermi più piccoli* /
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}

Più con­di­zio­ni si possono anche combinare, ad esempio per mo­di­fi­ca­re i layout solo sui tablet in formato verticale:

@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
body {
font-size: 1.1em;
}
}

Variabili CSS

Le variabili CSS (chiamate anche custom pro­per­ties) per­met­to­no di salvare valori in modo cen­tra­liz­za­to e di riu­ti­liz­zar­li più volte nel foglio di stile. In questo modo puoi mo­di­fi­ca­re colori, spa­zia­tu­re o di­men­sio­ni dei caratteri in un solo punto, senza dover adattare l’intero CSS. Il codice risulta così più chiaro, facile da mantenere e coerente.

Le variabili CSS vengono definite con un doppio trattino (--) e ri­chia­ma­te con la funzione var().

Un esempio mostra come le variabili vengono definite e uti­liz­za­te:

:root {
--main-color: #ff4081;
--text-color: #333;
--padding: 10px;
}
button {
background-color: var(--main-color);
color: var(--text-color);
padding: var(--padding);
}

Qui vengono definite le variabili --main-color, --text-color e --padding in :root, quindi glo­bal­men­te per tutta la pagina. Il pulsante usa queste variabili con var(), in modo che colore di sfondo, colore del testo e spa­zia­tu­ra vengano adottati au­to­ma­ti­ca­men­te dai valori delle variabili.