Cosa studiare per diventare web designer: I CSS
Studiare i CSS (acronimo per Cascade Style Sheet) è un aspetto del web design il cui approfondimento viene spesso messo in secondo piano rispetto ad altre competenze. I CSS si occupano di definire la presentazione e la grafica delle pagine web che compongono un sito.
In cosa si differenziano quindi i CSS dall’HTML? I due linguaggi sono in realtà strettamente correlati. Mentre l’HTML si concentra sul distinguere gli elementi di una pagina web (ovvero di effettuare la marcatura), i CSS determinano l’aspetto visivo che gli elementi avranno per l’utente finale. In altre parole, possiamo modificare la presentazione di una pagina anche tramite HTML (un titolo e un paragrafo definiti attraverso la marcatura HTML si presenteranno in modo diverso agli occhi degli utenti), ma i CSS consentono di ottenere risultati completamente diversi applicando stili specifici a uno stesso codice HTML.
Un esempio che illustra perfettamente questo concetto è CSS Zen Garden. Questo sito presenta una pagina con un codice HTML statico, che può essere reso in centinaia di presentazioni grafiche differenti grazie all’applicazione di diversi CSS. CSS Zen Garden mira proprio a dimostrare le straordinarie potenzialità di personalizzazione offerte dai CSS.
A cosa serve studiare i CSS?
Studiare i CSS consente un controllo completo sull’aspetto visivo di ogni elemento presente sulla pagina web, compresi colori, dimensioni, caratteri, spaziature, posizioni, margini, trasparenza e tanto altro ancora. I CSS possono essere impiegati anche per animare gli elementi di una pagina web, sebbene l’ambito dell’animazione sul web sia stato a lungo circoscritto a Javascript. Javascript si occupa, generalmente, di gestire l’interattività di una pagina e per questo è stato spesso impiegato anche per realizzare le animazioni. Per molti versi ci sono tutt’ora determinate animazioni che possiamo realizzare solo con questo linguaggio. Tuttavia, grazie agli sviluppi dei CSS, oggi è possibile creare animazioni così complesse da rendere difficile anche agli esperti del settore capire come sia stato possibile realizzarle senza l’uso di JavaScript.
See the Pen Animated cube slider by Hrtzt (@hrtzt) on CodePen.
Questi sono esempi di autentici virtuosismi del CSS e, ovviamente, non è necessario avere una padronanza simile per poterli utilizzare professionalmente. Li definisco virtuosismi perché per un professionista ci sono certamente metodi più lineari per ottenere risultati simili. Tuttavia questi esempi sono stati realizzati appositamente per mostrare fino a che punto i CSS possono essere utilizzati per personalizzare una pagina web.
Personalmente, ho personalizzato i CSS di ogni singolo sito web che ho realizzato nella mia carriera, ma non mi sognerei mai di tentare di realizzare qualcosa di simile utilizzando solo i CSS. Inoltre, non considererei un utilizzo dei CSS di questo tipo così utile o praticabile professionalmente.
A chi serve studiare i CSS?
Studiare i CSS è fondamentale per tutti i professionisti che si occupano della presentazione di pagine web. Nel vastissimo ambito dello sviluppo web ci sono certamente professionisti specializzati che non necessitano di una conoscenza approfondita dei CSS. Tuttavia, per coloro che realizzano siti web come freelance, sviluppatori front-end e web designer, i CSS rappresentano uno strumento che, anche se impegnativo da padroneggiare del tutto, è assolutamente indispensabile.
Come funzionano i CSS?
Anche se questa non vuole essere una guida esaustiva sull’argomento, è utile fornire alcuni cenni su come funzionano i CSS per offrire un riferimento più concreto rispetto a quanto visto finora e per introdurre l’argomento a coloro che lo affrontano per la prima volta.
Ogni elemento HTML è contrassegnato da tag, come <h1>, <h2>, <p>, <strong>, <hr>, ecc. In HTML, questi tag servono a distinguere i titoli, i paragrafi, il testo in grassetto, ecc. Utilizzando solo HTML, tutti gli elementi con lo stesso tag verranno visualizzati dall’utente con la stessa presentazione grafica. Ad esempio, tutti i paragrafi appariranno con testo non in grassetto e con un carattere di dimensione inferiore rispetto ai titoli.
Ma se volessimo, all’interno della nostra pagina web, che i paragrafi abbiano il colore rosso, il testo in grassetto e una dimensione specifica? I CSS ci permettono di selezionare elementi specifici all’interno di una pagina e controllarne la visualizzazione. In questo caso, il nostro CSS sarebbe il seguente:
p { color: red; font-weight: bold; font-size: 24px; }
Tradotto, ciò significa: seleziona tutti gli elementi di tipo <p>, ovvero i paragrafi (p {…}), e applica loro le istruzioni contenute tra le parentesi graffe. In questo caso:
- color: red; // Imposta il colore rosso
- font-weight: bold; // Rendi il testo in grassetto
- font-size: 24px; // Imposta la dimensione del carattere a 24px
Ovviamente, questo è solo un semplice esempio. Le opzioni per selezionare elementi più specifici rispetto al semplice tag sono molteplici. La flessibilità dei CSS ci consente di definire la presentazione di numerosi elementi del sito con una sola regola. Ad esempio, all’interno di una pagina HTML che contiene un articolo, potremmo definire una sezione (definita dal tag <section>) all’interno della quale vogliamo che i paragrafi siano blu. In questo caso, potremmo scrivere una regola del tipo:
section p { color: blue; }
Il significato di questa regola è: rendi blu il colore di tutti i paragrafi presenti all’interno di un elemento <section>.
Poiché le regole applicate a un elemento contenitore si propagano ai suoi elementi interni o figli, con un meccanismo “a cascata”, i CSS prendono il nome di Cascade Style Sheet, ovvero fogli di stile a cascata. Pertanto, se scrivessimo una regola del tipo:
section {
color: blue;
}
Il colore blu verrebbe applicato a tutti gli elementi contenuti all’interno della sezione, che siano paragrafi (<p>), titoli (<h1>,<h2>,<h3>) o di qualsiasi altro tipo.
Oltre alla selezione degli elementi basata sui tag, i CSS offrono la possibilità di selezionare elementi in base a caratteristiche specifiche degli attributi HTML. Gli attributi HTML forniscono informazioni aggiuntive sugli elementi di una pagina web. Tra questi attributi, i più comuni per la selezione degli elementi sono class e id. L’attributo class consente di assegnare una classe a uno o più elementi, mentre l’attributo id identifica un elemento in modo univoco all’interno di una pagina. Questi attributi sono estremamente utili per applicare stili specifici a elementi particolari o raggruppare elementi simili. Ad esempio, possiamo definire una regola CSS che si applicherà solo agli elementi con una determinata classe o identificatore, consentendo una personalizzazione più precisa e mirata.
Supponiamo di avere il seguente HTML:
<p class="introduzione" id="titolo">Benvenuti nel nostro sito web!</p> <p class="testo">Questo è un paragrafo di testo.</p>
Ecco come potremmo applicare stili CSS specifici utilizzando i selettori di class e id:
.introduzione {
color: blue;
font-size: 20px;
}
#titolo {
font-weight: bold;
}
.testo {
font-style: italic;
}
Nell’esempio sopra, abbiamo definito una class chiamata “introduzione” che modifica il colore del testo in blu e imposta la dimensione del carattere a 20 pixel. Inoltre, abbiamo un id chiamato “titolo” che rende il testo in grassetto. Infine, abbiamo una class chiamata “testo” che imposta lo stile del carattere su corsivo.
Utilizzando i selettori class e id, possiamo applicare stili specifici a elementi selezionati, permettendo una personalizzazione precisa degli stili sulla pagina web.
Conclusioni
Apprendere il linguaggio dei CSS significa comprendere come i diversi client organizzano le istruzioni per trasformare il codice sorgente in una pagina visualizzata dall’utente. Per lo studio dei CSS si applica lo stesso principio illustrato nel nostro articolo sull’HTML: anche se è possibile creare un sito web senza conoscere i CSS, non è un valido motivo per trascurarli. I CSS sono uno strumento indispensabile per controllare nei dettagli la presentazione grafica di una pagina web.
Possiamo considerare i CSS come la fase finale del percorso che va dalla richiesta inviata al server fino al risultato effettivamente visualizzato dall’utente. Una padronanza dei CSS ci offre un vantaggio rispetto ai designer che utilizzano soluzioni già pronte per semplificarsi il lavoro a scapito di una vera capacità di personalizzazione del risultato finale.
Studiare i CSS ci consente di apportare piccole modifiche su misura che possono rispondere con estrema precisione alle richieste del cliente riguardo alla presentazione. Inoltre, possono essere utili per correggere problemi di presentazione causati da conflitti tra diversi strumenti di terze parti o per uniformare la presentazione secondo la grafica scelta per il nostro progetto. In altre parole, se comprendiamo il livello finale che determina la presentazione di una pagina web per l’utente, sapremo sempre cosa verrà mostrato a chi visita il nostro sito web.
In conclusione, studiare i CSS è essenziale per ottimizzare la presentazione grafica di un sito web, offrendo un maggiore controllo e la capacità di personalizzare i dettagli in base alle specifiche esigenze del progetto e del cliente.
Continua la lettura della nostra “Guida alle competenze di base del Web Design” con il prossimo articolo:
