Guida CSS3: introduzione e selettori

Benvenuto! Quest’oggi inauguriamo un nuovo filone di articoli che andrà, progressivamente, a formare un’esaustiva guida ai CSS3. Poiché in passato le pagine virtuali di Your Inspiration hanno ospitato la mia guida all’HTML5, mi è sembrato naturale tentar di completare il percorso parlando dei fogli di stile nella loro più recente versione.

Anatomia di un foglio di stile

Come molti di voi sapranno, un file CSS — acronimo di Cascading Style Sheets — contiene tutte le regole necessarie per impaginare correttamente un documento HTML, o meglio, indica al browser l’aspetto grafico da attribuire a ogni elemento della nostra pagina web. Cominciamo ad analizzare le parti fondamentali di cui ogni regola contenuta nei fogli di stile è indiscutibilmente composta:

  • Selettore: il selettore serve a identificare e selezionare a quale elemento della pagina ci stiamo riferendo.
  • Blocco di dichiarazione: come in altri linguaggi le dichiarazioni, le proprietà e i valori, sono racchiusi tra parentesi graffe.
  • Proprietà: il primo elemento racchiuso all’interno di ogni blocco di dichiarazione è una proprietà. Una proprietà indica quale modifica stiamo apportando e quale effetto vogliamo dare al selettore prescelto.
  • Valore: il valore, come suggerisce il termine, indica in che misura e secondo quali parametri la proprietà dev’essere applicata al selettore.

Per capire meglio quanto appena descritto, analizziamo la seguente regola CSS:

    h1 {color: #000; font-size: 16px; text-decoration: underline;}

In questo caso il selettore è rappresentato da h1 e si riferisce all’elemento heading di primo livello; color, font-size e text-decoration sono delle proprietà che indicano il colore del font, la sua grandezza e la sua particolare decorazione. Allo stesso modo, #FFF, 14px e underline costituiscono i valori delle rispettive proprietà. Nota bene che, a chiusura di ogni binomio proprietà-valore, troviamo il segno punto e virgola “;“.

Bene, adesso abbiamo chiaro qual è l’aspetto di una regola e sappiamo cosa ci troveremo davanti una volta aperto un file CSS. Ma adesso la domanda che sorge spontanea è: come collegare il nostro foglio di stile al documento HTML che deve utilizzarlo?

Fogli di stile interni ed esterni

Presto detto! Esistono due metodi per utilizzare i fogli di stile: internamente al file HTML ed esternamente in un file dedicato con estensione .css. Il primo di questi due metodi prevede l’utilizzo del tag <style>, il quale racchiude tutte le regole necessarie ad abbellire la nostra pagina web. All’interno del tag <head> del nostro documento HTML troveremo, per esempio:

    <style>
        h1 {
             color: #000;
             font-size: 16px;
                            text-decoration: underline;
        }
        p {
             color: #CCC;
             font-size: 14px;
        }
    </style>

Tuttavia, la pratica generalmente più corretta è quella di separare le regole CSS dalla struttura HTML. Per fare ciò ci basterà trasferire quanto messo all’interno del tag <style> in un apposito documento con estensione .css al quale ci collegheremo, dalla nostra pagina HTML tramite il tag:

<link rel=”stylesheet” href=”./css/style.css”>

dove l’attributo href contiene il percorso dov’è situato il file CSS, mentre rel specifica che stiamo richiamando, per l’appunto, un file di tipo CSS. In realtà esiste una terza modalità per utilizzare una regola CSS, chiamata css inline, ed è quella di attribuirla direttamente al tag HTML che vogliamo tramite l’utilizzo dell’attributo style:

    <h1 style="color: #000; font-size: 16px; text-decoration: underline;">

Qualsiasi sia la nostra scelta, il risultato non cambierà:

css3-1

Validazione

Così come per i documenti HTML, anche per i fogli di stile esistono dei parametri, delle regole, da seguire per accertarsi di essere il più possibile in linea con gli standard. Un comodo strumento online per verificare che tutto vada secondo i piani è accessibile al link: https://jigsaw.w3.org/css-validator/

Proprio come per i documenti HTML, è possibile caricare il file CSS da verificare, inserire il suo URL oppure incollare direttamente una porzione di codice. L’operazione restituirà eventuali avvisi, imprecisioni e errori presenti nel codice, indicando il numero di riga specifico da correggere e suggerendo lo standard corretto da utilizzare. Un ipotetico risultato di verifica potrebbe essere simile al seguente:

css3-2

Ogni regola CSS che si rispetti è composta da almeno un selettore e un blocco di dichiarazione contenente le proprietà e i rispettivi valori. Ma i selettori cosa sono esattamente? Con quali modalità possiamo riferirci ad essi? Scopriamolo subito!

Le classi

Nel costruire una pagina HTML, ti sarai di certo imbattuto in un attributo di tipo class. Ebbene proprio l’attributo class permette di collegare un elemento HTML a una regola CSS ed è il primo dei selettori che andremo ad analizzare. Ammettiamo di avere un tag con un attributo class nella nostra pagina HTML:

    <div class=”box”></div>

Nel nostro CSS possiamo fare riferimento a questo semplicemente richiamando il nome della classe preceduto da un punto.

    .box {
        height: 200px;
        background-color: #CCC;
        /* altre proprietà ... */
    }

Possiamo utilizzare qualsiasi nome desideriamo per creare una classe, purché rispetti alcune semplici regole:

  • I nomi delle classi sono case sensitive, quindi .BOX è una classe differente da .box.
  • I nomi delle classi possono contenere numeri, lettere, trattini alti e trattini bassi (ovvero l’underscore), ma devono obbligatoriamente iniziare con una lettera. Pertanto .box è una classe valida come .box3 contrariamente a .3box o ._box.
  • I nomi delle classi devono, ovviamente, iniziare sempre con un punto.

Attenzione: il punto prima del nome della classe è richiesto nella sola sintassi del CSS e non in quella dell’HTML pertanto, l’attributo class che andremo ad associare al tag conterrà il nome della classe senza il punto.

I tag

È possibile riferirci anche direttamente ai tag, senza bisogno di specificare ulteriormente una classe. Ad esempio, se volessimo modificare l’aspetto di tutti i tag h1 potremmo scrivere:

    h1 {
        font-size: 18px;
        color: #000;
        text-decoration: underline;
    }

Questa modalità ovviamente è comoda unicamente quando intendiamo riferirci a tutti i tag, senza selezionarne manualmente alcuni come avviene con l’utilizzo delle classi.

Gli id

Se invece volessimo modificare un singolo elemento sulla pagina e non un gruppo di elementi, come avviene quando si utilizzano le classi o i tag come selettori? In questo caso ci vengono incontro gli id. Per riferirci a un id in CSS useremo non più il punto come nelle classi, ma il simbolo #. Scriveremo quindi:

    #banner {
        background-color: red;
    }

che si riferirà, nella corrispettiva pagina HTML, a un tag del tipo:

    <div id=”banner”></div>

Anche in questo caso, come avviene per le classi, il simbolo # va utilizzato unicamente nel documento CSS e non in quello HTML dove il nome associato all’id viene semplicemente specificato nell’attributo id.

Raggruppare i selettori

Se dobbiamo associare le stesse proprietà con gli stessi valori a più elementi, non abbiamo bisogno di creare regole separate per ognuno di essi. Possiamo, infatti, utilizzare più selettori contemporaneamente a patto di separarli da una virgola. Ad esempio potremmo scrivere:

    h1, h2, h3, p {
        font-weight: bold;
    }

per applicare la proprietà font-weight a tutti i tag h1, h2, h3 e p. Ovviamente non è necessario che gli elementi a cui ci riferiamo siano esclusivamente tag. Possiamo, ad esempio, riferirci contemporaneamente a un tag, a una classe e a un id:

    .box, #banner, h1 {
        font-weight: bold;
    }

Selettori globali

Potrebbe anche capitare di voler settare una proprietà che valga per tutti, ma proprio per tutti, gli elementi presenti nei nostri documenti HTML. Per fare ciò ci basta utilizzare il simbolo * che rappresenta un cosiddetto selettore globale. Decidiamo, ad esempio, che ogni testo nella nostra pagina, salvo ulteriori specifiche, deve essere in corsivo. Scriviamo quindi:

* {
    font-style: italic;    
}

Seguire il flusso

Immaginiamo di trovarci di fronte a una struttura HTML simile alla seguente:

    <div id=banner”>
        <h1>titolo</h1>
        <p>contenuto … </p>
    </div>
    <h1>titolo fuori da box</h1>

Come abbiamo appena imparato, possiamo riferirci al div utilizzando come selettore l’id #banner. Ma come cambiare l’aspetto del tag h1 contenuto nel div e lasciare invariato quello fuori dallo stesso div? Potremmo associare ad uno di esso una classe, ad esempio:

    <div id=”banner”>
        <h1 class=”inside”>titolo</h1>
        <p>contenuto … </p>
    </div>
    <h1>titolo fuori da box</h1>

Tuttavia questa procedura, oltre ad essere poco ortodossa, è inutile e ridondante. Ci basta, infatti, seguire la struttura HTML per riferirci agli elementi “nidificati”. Quindi, se vogliamo modificare solo l’h1 nidificato in #banner, ci basterà scrivere:

    #banner h1 {
        color: red;
    }

Conclusioni

Come avrai potuto capire, questa guida si rivolge principalmente a un pubblico di neofiti, che approccia per la prima volta all’argomento CSS. Tuttavia, se fai parte della schiera che già conosce le versioni precedenti, e sei solo curioso di scoprire le novità introdotte nel CSS3, tranquillo: ci sarà pane per i tuoi denti! Infatti, dopo le prime lezioni introduttive dedicate alla spiegazione dei concetti basilari, daremo ampio spazio alle nuove proprietà, come border-radius o box-shadow, l’introduzione di valori rgba (che quindi aprono le porte all’elemento alpha e alla proprietà opacity) o ancora alla creazione di vere e proprie animazioni senza scrivere una riga di JavaScript!

Prima di darti appuntamento al prossimo articolo ci tengo a precisare che tutte le parti di codice HTML seguono gli standard dell’HTML5. Se non conosci a sufficienza l’argomento ti suggerisco, ancora una volta, di approfondire seguendo la guida che trovi su questo portale. Come consuetudine puoi scaricare il codice completo dell’introduzione da qui, mentre trovi qui quello relativo ai selettori. Alla prossima!

GUIDA CSS3: INDICE LEZIONI
1) Introduzione e selettori
2) Pseudo classi e pseudo elementi
3) Ereditarietà
4) I font – parte prima

Tag: , , , ,

L'autore

Da sempre appassionato di nuove tecnologie, guadagno il pane quotidiano scrivendo fiumi di funzioni, tonnellate di script, sciami di variabili: insomma un infinità di codice! Amante dei viaggi e del viaggio, scompongo le mie esperienze lontano da casa in complesse logiche procedurali e in stupendi design. Ancora in cerca del tag giusto per descrivere la mia vita.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo