Dan Levy

Quiz: Conosci i fondamenti CSS? (2025)

Sei abbastanza front‑end?

Quiz: Conosci il CSS?

1. 

Riscaldamento: Font

Seleziona l’UNICO NON VALIDO ❌ font-size:

10cx è errato perché cx non è un’unità CSS reale. (Almeno al momento della stesura.)

Le unità più comuni includono le familiari px, rem, em.

Le unità più recenti sono utili per layout dinamici e responsivi.

  • ch - larghezza del carattere 0
  • vmin - minimo del viewport
  • vmax - massimo del viewport
  • vh - altezza del viewport
  • vw - larghezza del viewport

Esistono anche diverse unità che sono sempre state disponibili ma sono raramente usate, come cm per centimetri, mm, in per pollici, pt per punti

2. 

Riscaldamento: Colori

Riesci a individuare il UNICO codice esadecimale valido 👍?

I codici esadecimali possono essere usati per rappresentare colori in CSS. Sono preceduti da # e devono contenere 3, 4, 6 o 8 cifre esadecimali.

Il codice esadecimale a 3 caratteri è una forma abbreviata del codice a 6 caratteri, dove ogni carattere è ripetuto. Il codice a 4 caratteri include un canale alfa per la trasparenza.

Ad esempio #ABC è lo stesso di #AABBCC, e #ABCD è lo stesso di #AABBCCDD. Per saperne di più su come gestire i valori esadecimali, dai un’occhiata al mio quiz sui numeri JavaScript.

3. 

Riscaldamento: Unità

Quale di queste unità NON è una valida unità CSS ❌?

Le nuove unità come ch, vmin, vmax, vh, vw sono molto utili per layout dinamici/responsive.

Ci sono anche diverse unità che esistono da sempre ma sono raramente usate, come cm per i centimetri, mm, in per i pollici, pt per i punti, pc, cap per la dimensione delle lettere maiuscole, e ex che è pari all’altezza della lettera x.

Le unità più popolari includono il familiare px per i pixel, em relativo alla dimensione del font dell’elemento, e rem è in realtà un omaggio segreto al gruppo degli anni ‘90 R.E.M. (ok, non è vero, è semplicemente un’unità em relativa che fa riferimento all’elemento radice).

4. 

Selettore: Fondamentali

Quale selettore corrisponde meglio al seguente HTML?

  <a id="home" name="home" href="/home">Home</a>

La risposta corretta è a#home[name='home'], che corrisponde sia all’attributo id sia a quello name. In HTML in modalità standard, i valori degli ID distinguono maiuscole e minuscole, quindi #Home non corrisponde a home. Lo spazio è un combinatore di discendenza: a [id='home'] cerca un discendente dell’elemento a, non l’elemento stesso.

Il selettore :contains() non è un selettore CSS standard, ma è disponibile in alcune librerie JS.

5. 

Selettore: Fondamentali

Quale selettore corrisponde al seguente pulsante HTML?

  <button onclick="openModal()">Contact</button>

La risposta corretta è button[onclick], che seleziona la presenza dell’attributo onclick.

Nota che :link seleziona solo i link href non visitati, ::click non è un pseudo‑elemento valido, e :focus seleziona solo l’elemento focalizzato.

6. 

Selettore: Fondamentali

Quale di questi selettori è invalido?

Il selettore c > > d {} è non valido perché il combinatore figlio è ripetuto senza un selettore tra i due caratteri >.

Gli altri selettori sono validi. Un selettore di tipo come c {} è sintatticamente valido CSS anche se c non è un elemento HTML standard.

7. 

Quale selettore corrisponde all’ultimo link nel seguente HTML?

  <nav>
    <a name="home" href="/home">Home</a>
    <a name="login" href="/login">Login</a>
    <a name="help" href="/help">Help</a>
  </nav>

Il selettore corretto è a:last-child, che corrisponde all’ultimo <a> quando è anche l’ultimo figlio del suo genitore. nav:nth-child(3) corrisponderebbe a un elemento <nav> che è il terzo figlio del suo genitore.

8. 

Selettore: Specificità

Quale selettore avrà la priorità?

Il selettore a#quote ha la priorità perché l’ID ha una specificità più alta rispetto ai selettori basati su tag o classe.

9. 

Layout: Centratura

Quale dichiarazione centra orizzontalmente il testo inline all’interno di un elemento block?

text-align: center; centra il testo inline all’interno del blocco. align e text-content non sono proprietà CSS valide. margin: 0 auto; può centrare il blocco stesso quando la sua larghezza lo consente; align-content allinea il contenuto secondo il modello di layout, non sostituisce text-align per questo caso.

10. 

Layout: Centratura

Come centri il contenuto verticalmente all’interno di un contenitore block nel layout di flusso moderno?

Usare align-content è il modo moderno per centrare verticalmente i contenuti di un contenitore block nel layout di flusso.

Le proprietà align-items e justify-content sono usate per layout flexbox e grid, ma non per il flusso.

Sia margin: 0 auto; che margin: auto; centrano un elemento block orizzontalmente, ma non verticalmente.

11. 

Layout: Unità

Qual è la dimensione in pixel del testo del link <a> nel seguente HTML?

  <body style="font-size: 40px !important;">
    <nav style="font-size: 50%;">
      <a style="font-size: 25%;">HOME</a>
    </nav>
  </body>

La font-size per <a> si calcola come 5px: 40px (body) * 50% (nav) = 20px, poi 20px * 25% = 5px.

12. 

Unità: REM

Qual sarà la dimensione in pixel di 1.2rem per il link “HOME” nel seguente HTML?

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2rem;">HOME</a>
    </body>
  </html>

1.2rem si traduce in 12px perché le unità rem fanno riferimento alla dimensione del font radice o <html>, impostata qui a 10px.

13. 

Unità: EM

Simile alla domanda precedente, qual è la dimensione in pixel di 1.2em per il link “HOME” nel seguente HTML?

  <html style="font-size: 10px;">
    <body style="font-size: 20px;">
      <a style="font-size: 1.2em;">HOME</a>
    </body>
  </html>

1.2em corrisponde a 24px perché le unità em fanno riferimento alla dimensione del font ereditata, impostata qui a 20px.

14. 

Selettore: Specificità

Quale selettore ha la specificità più bassa?

:where(.card) .title ha la specificità più bassa. La pseudo‑classe :where() e tutto ciò che contiene contribuisce 0-0-0, quindi conta solo .title. :is(.card) .title mantiene la specificità di .card, .card .title ha due classi, e #card .title include un ID.

Loading comments...