Cos’è il CSS? E’ un linguaggio usato per dire al browser come deve essere vista una pagina o un sito HTML su schermo. Il termine sta per: Cascading Style Sheet, in italiano fogli di stile a cascata.
All’inizio il colore, gli sfondi, le dimensioni dei vari elementi venivano stabiliti all’interno dello stesso file HTML ma era molto complicato. Bisognava quindi rifare tutto per ogni singola pagina e per ogni singolo articolo. Ecco perché alcuni siti meno recenti sono molto scarni, senza un tema grafico o un aspetto accattivante.
Adesso è possibile creare un file .css univoco da inserire come riferimento alle nostre pagine o inserire delle regole CSS nel tag <style> all’interno delle singole pagine.
Come funziona il CSS
Grazie ai fogli di stile, possiamo rendere i file HTML più snelli e puliti, indicando al browser solo il contenuto della pagina web.
Nei CSS possiamo indicare il design, il layout e anche come deve essere mostrato il sito su dispositivi e schermi diversi.
Ci sono tre modi per scrivere le regole CSS. Uno è quello di aggiungerli all’interno della nostra pagina all’interno del tag head.
<head> <title>Titolo del sito</title> <style> h1 { color: red; } </style> </head>
Un altro modo è quello di indicare al file HTML il file esterno contente le regole CSS
<head> <title>Titolo del sito</title> <link rel="stylesheet" type="text/css" href="nomefile.css"> </head>
Possiamo anche aggiungere una regole all’interno del tag di un elemento quando vogliamo modificarlo singolarmente.
<h1 style="color:green;">Sottotitolo1</h1>
Che dire se abbiamo più fogli di stile nello stesso documento? La regola scritta per ultimo sovrascriverà quella precedente
<head> <title>Titolo del sito</title> <link rel="stylesheet" type="text/css" href="nomefile.css"> <style> h1 { color: red; } </style> </head>
Come si scrive una regola CSS
Una regola CSS è formata da un selettore e da un blocco di dichiarazioni. Ciascuna dichiarazione è formata da una proprietà e da uno o più valori.
h1 /*selettore*/ { /*inizio blocco dichiarazione*/ color: red; /*proprietà e valore*/ } /*fine blocco dichiarazione*/
I commenti vanno inseriti tra /* e */.
Con i selettori indichiamo l’elemento HTML che vogliamo modificare. Con la proprietà indichiamo cosa vogliamo cambiare e con il valore come deve diventare.
Per imparare di più sui CSS consiglio di consultare le guide di HTML.it, W3school o Sololearn, come indicato nella mia guida su dove imparare l’HTML.
In seguito verranno aggiunti altri articoli sull’argomento. Se vuoi restare aggiornato attiva le notifiche cliccando sul lucchetto che trovi accanto all’indirizzo del sito in altro a sinistra o seguimi sui social.