Il linguaggio CSS (Cascading Style Sheet) è uno dei linguaggi di programmazione web più indispensabili per lo sviluppatore web e permette di dare alle pagine l’aspetto desiderato. È quindi uno dei linguaggi indispensabili per uno sviluppatore front end, insieme al linguaggio HTML. Scopriamo allora qualcosa di più sul CSS e sul modo migliore per impararlo.
CSS: cos' è e come funziona
CSS si usa per definire l’aspetto visivo ed estetico di una pagina web, adattandola alle esigenze dei singoli progetti. Quando si impostano i diversi elementi con HTML, come titoli, link e paragrafi, si ottiene una pagina che segue le impostazioni standard dei browser: in una parola, uno stile blando e neutro. Per personalizzare lo stile entra in gioco CSS, tramite cui si può trasformare una pagina scegliendo colori e font, modificando il layout o aggiungendo animazioni e semplici elementi grafici.
Con CSS si stabiliscono delle regole di stile da applicare a elementi specifici, che dovranno apparire sulla pagina con un determinato aspetto. Vediamo per esempio come creare un titolo blu e di dimensioni più grandi rispetto al testo dei paragrafi:
h1 {
color: blue;
font-size: 18px;
}
Per prima cosa selezioniamo l’elemento HTML da modificare, in questo caso il titolo H1. All’interno delle parentesi graffe dichiariamo poi le proprietà da impostare (colore e dimensioni del font) e i valori che dovranno assumere (blu e 18 pixel). Un foglio di stile è formato da una serie di regole come questa, che permettono di modificare l’aspetto degli elementi desiderati.
Perché imparare CSS e quanto tempo serve?
Imparare CSS è utile per chiunque abbia un sito web personale o professionale, perché permette di modificarne lo stile a piacimento senza i limiti dei template preimpostati. Si sarà così in grado di creare un portfolio davvero in linea con la propria immagine professionale, oppure una pagina web che rappresenta al meglio il messaggio che vogliamo mandare.
Come accennato, CSS è poi uno dei linguaggi di base per chi vuole lavorare come front end developer o come web designer.
Imparare CSS a un livello di base è piuttosto semplice ed è possibile riuscirci in meno di un mese. Bisogna partire studiando i concetti principali di HTML, il che renderà facile capire la sintassi di CSS.
Tuttavia, è bene specificare che se le basi di CSS sono semplici, fare dei design complessi e articolati richiede esperienza e approfondimenti, oltre che una buona conoscenza dell’uso di framework di front end focalizzati su CSS come Bootstrap framework o Tailwind.
Naturalmente, per imparare CSS a livello professionale e lavorare come programmatore front end, serve un periodo di studio più intensivo di alcune ore al giorno che aiuterà a padroneggiare concetti più complessi.
I metodi migliori per imparare CSS online
Online esistono risorse valide per imparare CSS in modo indipendente, a patto di impegnarsi con regolarità negli studi e nelle esercitazioni. In base al proprio stile di apprendimento si possono utilizzare tutorial video, articoli di blog, oppure corsi più pratici che permettono di scrivere fin da subito il codice. Vista la natura di questa disciplina, i materiali interattivi per mettere immediatamente in azione ciò che si apprende sono consigliati. Alcuni siti da esplorare per imparare da soli le basi di CSS includono freeCodeCamp, Codecademy, Khan Academy e Udacity. Queste risorse sono ottime per chi voglia personalizzare il proprio sito web e desideri imparare CSS a un livello di base.
Se si vuole lavorare con CSS a tempo pieno come front end developer, Hackademy – il coding bootcamp intensivo di aulab – è, invece, una soluzione più efficiente a livello di tempo e approfondimenti offerti. In questo caso si ha anche il supporto di docenti dedicati, per risolvere in fretta ogni dubbio e progredire più velocemente.
Che si scelgano risorse online gratuite, oppure corsi formativi più strutturati, rimangono saldi alcuni passaggi da seguire per ottenere il massimo dai propri studi del linguaggio CSS.
Imparare i concetti di base di CSS
Quando si inizia a studiare CSS può venire la tentazione di buttarsi subito in un progetto ambizioso e complicato, ma prima di tutto è necessario capire i concetti di base di questo linguaggio. Tra questi citiamo:
- la sintassi di CSS, ovvero le regole che definiscono gli stili, da tenere a mente quando si scrive il codice;
- i selettori principali e il loro funzionamento, oltre alle regole per l’uso di classi, ID e tag;
- il box model, cioè le proprietà che definiscono la disposizione degli elementi sulla pagina;
- il posizionamento degli elementi tramite strumenti come Grid Layout o Flexbox;
- font e colori, e le relative opzioni e proprietà.
- la specificità di un regola CSS consente di districarsi nei problemi che possono emergere in un web design complesso
Una volta compresi a fondo questi argomenti si può passare a concetti avanzati e progetti complessi come ad esempio l’uso delle animazioni e dell'interazione usando solo CSS.
Costruire un progetto e sperimentare con gli stili
Dopo aver completato tutorial e guide si può passare a un progetto in linea con i propri interessi, per mettere in pratica in modo indipendente le proprie conoscenze di CSS. Grazie alla natura visiva di questo linguaggio, è facile creare un prodotto personalizzato in dettaglio secondo i propri gusti. In questo modo si può finalmente dare sfogo alla propria creatività, sperimentando al tempo stesso con nuovi stili per affinare le proprie abilità.
Adattare CSS ai diversi browser e dispositivi
Diventare esperti in CSS vuol dire anche conoscere le differenze nel funzionamento di questo linguaggio su diversi browser. I fogli di stile possono infatti essere interpretati in modo differente, e saper scrivere CSS che funziona bene sulla maggior parte dei browser è un’importante competenza per un programmatore.
Lo stesso vale per la compatibilità su diversi dispositivi, dagli schermi dei computer a quelli degli smartphone. Ai developer front end si chiede infatti di saper scrivere codice che crei pagine user-friendly e accessibili, indipendentemente dalla piattaforma.
Seguendo queste linee guida, imparare CSS e dare uno stile unico a pagine e siti web è a portata di mano. E magari all’orizzonte ci attende una carriera da front end developer.
Come creare un template HTML e CSS
È arrivato il momento di creare in autonomia il tuo primo template CSS. Come prima cosa crea sul tuo desktop un file esempio.html e copia al suo interno con un editor di testo (puoi utilizzare il notepad o un editor professionale come sublime text).
Poi incolla nel file questo contenuto:
<!doctype html>
<html lang="it">
<head>
<title>Esempio di HTML5 con stile CSS</title>
<meta name="description" content="Un semplice esempio di una pagina HTML5 stilata">
<style type="text/css">
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}
#hero {
background-color: #ffef0a;
border: 5px solid black;
padding: 20px;
}
#hero p {
font-size: 12pt;
}
h1 {
text-transform: uppercase;
font-size: 20pt;
}
.tag {
color: red;
font-weight: 600;
font-size: 14pt;
text-decoration: blue wavy underline;
}
</style>
</head>
<body>
<div class="container">
<div id="hero">
<h1>Esempio di una pagina HTML5 con CSS</h1>
<p>Questa è una pagina <span class="language">HTML</span> molto semplice con un po' di stile <span class="language">CSS</span>*.</p>
</div>
<p>* il CSS di questa pagina è caricato nell'<span>HEAD</span> della pagina.</p>
</div>
</body>
</html>
Ora salva il file e chiudilo. Fai doppio click sul file nel tuo desktop e si aprirà all'interno del browser il tuo primo template HTML e CSS! Adesso ti spieghiamo punto per punto il significato di ogni tag.
Analizziamo insieme la parte del CSS all’interno del template
I fogli di stile interni sono definiti nel tag head usando il tag <style>.
Una regola CSS si compone di due parti: un selettore e una o più dichiarazioni – selettore { proprietà: valore;} Il selettore specifica a quale elemento o elementi intendiamo applicare lo stile definito fra graffe. Ogni coppia “proprietà: valore” costituisce una dichiarazione.
Margini e max-width
Partiamo dal container che fa parte del grid system e rappresenta il contenitore al cui all’interno andremo ad inserire gli elementi figli.
.container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}
Lo abbiamo personalizzato nello style con:
- una max-width di 600 pixel che definisce la larghezza massima di un elemento
- un margin-left che definisce la distanza tra il lato sinistro di un elemento e gli elementi adiacenti
- un margin-right che definisce al contrario la distanza tra il lato destro di un elemento e gli elementi adiacenti
- un margin-top di 60 pixel che imposta la distanza tra il lato superiore di un elemento e gli elementi adiacenti. Si applica a tutti gli elementi e non è ereditata.
Background-color, border e padding
All'interno del div con classe container, abbiamo utilizzato il selettore id con valore “hero” che seleziona un elemento singolo, unico, presente come valore di un attributo id di un tag HTML.
#hero {
background-color: #ffef0a;
border: 5px solid black;
padding: 20px;
}
Serve per aggiungere a quella porzione di testo specifica uno stile ben preciso, per esempio:
- uno sfondo colorato (background-color) utilizzando un numero esadecimale per precisarne il colore
- un bordo con spessore di 5 pixel di colore nero
- un padding (imbottitura), una proprietà a sintassi abbreviata che viene utilizzata per definire lo spazio che deve essere lasciato tra i contenuti di un elemento e il suo bordo o il suo margine.
Stilare il testo: size, weight, transform e decoration
Analizziamo ora il nostro h1 richiamato nello style con un element type, che seleziona tutti gli elementi con il tag h1 indicato.
h1 {
font-size: 20pt;
text-transform: uppercase;
}
Al suo interno troviamo un font-size di 20 punti in cui la dimensione del carattere (font) è fissata con l’attributo size, e un text-transform che consente di variare il formato del testo con il valore uppercase (ogni lettera di ogni parola viene visualizzata come se fosse scritta in maiuscolo).
Per concludere abbiamo la classe language, richiamata all’interno dell’attributo class e del tag span che rappresenta un contenitore generico in linea, dove troviamo un color red che ci permette di dare un colore ben preciso al nostro testo, in questo caso alla parola CSS all’interno del tag span.
h1 {
font-size: 20pt;
text-transform: uppercase;
}
La proprietà font-weight di 600 gestisce l’aspetto di un testo aumentandone o riducendone lo spessore: abbiamo un font-size di 14 punti dove la dimensione del carattere è fissata con l’attributo size e una text-decoration proprietà che serve ad impostare o ad eliminare la sottolineatura ai link o ad elementi testuali in generale.
Underline invece imposta la sottolineatura in basso rispetto al testo wavy come una riga passante che indica che quella parte del testo è stata eliminata e possiamo aggiungerci anche un colore.
Selettori combinati
Abbiamo inoltre utilizzato un selettore combinato (di discendenza) per dare uno stile specifico a un elemento all'interno di un tag con un certo id.
h1 {
font-size: 20pt;
text-transform: uppercase;
}
In particolare, in questo caso il selettore combinato "#hero p" significa che solo i paragrafi della sezione hero verranno stilizzati con un font-size di 12 punti e la grandezza dei caratteri dei paragrafi sarà per tutti di 12 punti.
Altri selettori combinati si possono trovare in questa lista https://www.w3schools.com/cssref/css_selectors.asp e ci possono aiutare a stilare anche pagine molto complesse, indicando con precisione a quali elementi vogliamo dare un particolare stile.
Se vuoi saperne di più su questo mondo visita la nostra guida dedicata all'apprendimento dell'html e del CSS!
