Guide per aspiranti programmatori

Giunto a questo punto avrai sicuramente assimilato i concetti cardine basilari del linguaggio CSS.
Andiamo, adesso, ad esplorarne le proprietà.

Le proprietà CSS non sono altro che quelle caratteristiche a cui andremo ad assegnare dei valori che definiranno lo stile concreto dei nostri elementi html.
Ne abbiamo già parlato quando ti abbiamo parlato della sintassi del CSS. Ricordi che cos’è una dichiarazione? Esatto! Una coppia proprietà-valore.
Rinfreschiamoci la memoria con questo esempio:

selettore {
proprietà: valore;
}

I valori da assegnare alle proprietà CSS sono diversi e numerosi. Per facilitarne l’apprendimento, li suddivideremo in delle macro-categorie.

Colori CSS

I valori che puoi dare alla proprietà “color” nel linguaggio CSS possono essere espressi in diverse modalità:

• la proprietà css “color:” + il nome del colore
  esempio:

  h1 {
     color: red;
  }

• la proprietà css “color:” + valore esadecimale
  esempio:

  h1 {
     color: #ff0000;
  }

• la proprietà css “color:” + valore esadecimale con trasparenza che si applica aggiungendo due cifre che vanno da 00 (completamente trasparente) a ff (completamente opaco) all’esadecimale
  esempio:
  

  h1 {
     color: #ff000088;
  }

• la proprietà css “color:” + valore rgb (i valori vanno da 0 a 255 e vanno separati da una virgola)
  esempio:

  h1 {
     color: rgb(255,0,0);
  }

• la proprietà css “color:” + valore rgba (il valore “a” conferisce la trasparenza, che va da 0 – completamente trasparente – a 1 – completamente opaco -)
  esempio:

  h1 {
     color: rgba(255,0,0,0.5);
  }

Keywords CSS

Un tipo di valore composto da parole chiave che sono specifiche di una determinata proprietà.
Elencarle tutte sarebbe impossibile, le vedremo via via nel corso dell’esplorazione delle proprietà del CSS.

Stringhe di testo CSS

Un esempio ottimale per comprendere un valore espresso attraverso stringhe di testo è quello del valore attribuito alla proprietà font-family nel nostro documento CSS.
La suddetta proprietà ci permette di indicare alla nostra pagina web quale sarà il font da utilizzare.
Vediamone la sintassi:

* {
font-family: ‘Montserrat’, sans-serif;
}

La stringa di testo, in questo caso, è il nome del font, vale a dire il ‘Montserrat’.
Sans serif, a seguire, è invece una keyword della proprietà font-family.
Sta ad indicare che, qualora il link al font Montserrat mancasse, il font da utilizzare sarebbe il sans-serif (dunque un font privo di grazie) di default del browser utilizzato.

Numeri CSS

Interi o con la virgola, potrebbe non venirti immediatamente in mente l’utilità di un valore espresso in numeri senza un’unità di misura.
Un esempio concreto potrebbe essere il valore da assegnare alla proprietà z-index, una proprietà che permette di stabilire quale elemento della nostra pagina web sarà in primo piano e quale andrà dietro.
Immagina di avere due elementi ai quali hai assegnato un valore della proprietà z-index differente.
Hai assegnato all’elemento 1 uno z-index pari a “10”, all’elemento 2 uno z-index pari a “11”.
L’elemento 1 sarà disposto dietro l’elemento 2.

Unità di misura CSS

Questo tipo di valore viene assegnato per caratterizzare proprietà inerenti alle dimensioni, distanze e spazi in genere. Questo valore viene espresso in numeri, seguiti immediatamente dall’unità di misura – senza spazi!! –
Le unità di misura sono svariate, tuttavia, ai fini di un apprendimento più pratico, vedremo esclusivamente le più utilizzate sul web:

• px : i pixel – li conosciamo tutti – sono l’unità di misura per eccellenza per gli schermi; fanno riferimento al reale pixel fisico dello schermo e hanno una dimensione fissa: prova a concepirli come i tasselli di un mosaico che vanno a formare l’immagine che vedi a schermo.
• percentuali: le unità di misura espresse in percentuale fanno riferimento al valore della proprietà del padre di quel determinato elemento.Cosa significa?
  Se abbiamo un <div> di colore rosso all’interno di un <div> di colore verde, e quello rosso ha un unità di misura per la sua proprietà “width” espressa in percentuale (ad esempio: 50%), il nostro div rosso non sarà grande il 50% dello schermo, ma occuperà esattamente il 50% del padre (ovvero il div verde.)

  L’unità di misura percentuale è un’unità meno stabile del pixel: non è fissa, è flessibile. Ciò significa che al cambiare della dimensione del padre, ovviamente, cambierà la sua dimensione.
  Vediamolo meglio: se il padre in questione è il body stesso, passando da un dispositivo desktop ad uno mobile – come il tuo cellulare – le dimensioni dello schermo si ridurranno. In quel caso, il 50% del div rosso preso in analisi poc’anzi, avendo come padre il body, non corrisponderanno sempre allo stesso numero di pixel, poiché lo schermo sarà più piccolo.

• em: è un’unità di misura relativa alla dimensione del font del padre del nostro elemento.
  Supponiamo di aver assegnato ai testi contenuti nel nostro header un font-size generico di 20px; se assegnamo ad un paragrafo contenuto nell’header un font-size di 2em il testo di quel paragrafo misurerà 40px.
• rem: funziona in maniera simile all’ em, ma contrariamente a quest’ultima, il rem è un’unità di misura che si basa sulla grandezza dei font presenti nella root, ovvero la “radice” del nostro documento html. Per molti browser questa misura corrisponde a 16px, ma se volessimo cambiarla ci basterebbe assegnare al body la font-size desiderata. Potremmo, dunque, dire che un rem è un em il cui padre è il body.
• viewport: la viewport è letteralmente la grandezza visibile della nostra pagina web, che cambia al cambiare del dispositivo di fruizione del sito. Vale a dire che se navighiamo su un sito web da cellulare, da tablet o da pc la viewport sarà diversa per ciascun mezzo.
  Ciò detto, le unità di misura relative alla viewport sono due, e sono vh e vw.
  “Vh” sta per “viewport height” – l’altezza del nostro documento – e “vw” sta per “viewport width” – la sua larghezza – e i loro valori corrispondono ad una percentuale della viewport.
  Ad esempio, se il valore di una proprietà di dimensione di un elemento assegnato sarà “75vh” l’ingombro del mio elemento occuperà il 75% dell’intera viewport height.

Variabili CSS

Menzione speciale va ai valori espressi richiamando le variabili.
È importantissimo, come avrai modo di esperire, imparare, fin da subito, ad assegnare delle variabili al tuo documento CSS.
Spieghiamoci meglio.

Col moderno CSS è possibile dichiarare delle variabili – solitamente all’inizio del foglio CSS, prima di ogni altra cosa – ed usarle, in seguito, come valori delle proprietà.

Per utilizzare una variabile occorre dichiararla.

La sintassi per dichiararla è la seguente:

:root {
 --nomevariabile: valore;
}

Quindi, ad esempio

:root {
 --nomevariabile: purple;
}

Quando, poi, vorrai utilizzarla in seguito, dovrai digitare il tuo codice – ad esempio – in questo modo:

h1 {
   color: var(--nomevarabile);
}

Ma perchè è fondamentale utilizzare le variabili? 

Immagina di utilizzarle per definire i colori principali del tuo sito web.
Il sito ti piace e sei veramente soddisfatto della tua palette! Ma il cliente ha, improvvisamente, cambiato idea e ti chiede di cambiare quei colori.
Senza l’utilizzo delle variabili tu dovresti andare a modificare, in questa spiacevole eventualità, il colore degli elementi uno ad uno. Un lavoraccio, non trovi?
Se, invece, hai utilizzato come valore delle tue proprietà inerenti al colore una variabile, ti basterà modificare il valore della variabile in questione per vedere mutare il colore in ogni punto in cui l’hai utilizzato: un risparmio di tempo incredibile! Che dici, vale la pena imparare ad utilizzarle?