Dietro ai siti web che quotidianamente navighiamo ci sono righe e righe di codici studiati da un programmatore per permetterci di svolgere determinate azioni. Alla base di tutto c’è HTML, il cosiddetto linguaggio “base” che delinea la struttura di tutta la pagina. Per far sì che il sito sia unico, colorato, creativo e accattivante, però, non basta HTML. A quel punto, infatti, bisogna ricorrere a CSS. Per questo oggi cercheremo di spiegare che cos’è e come funziona.
CSS è quello strumento che ci permette di personalizzare, in ogni dettaglio, una pagina web.
Nato negli anni ’90 grazie a Håkon Wium Lie, CSS ha l’obiettivo di poter applicare il design ai siti. Senza HTML, però, sarebbe nullo: servono infatti i cosiddetti <tag> per poter costruire la struttura che poi in un secondo momento possa essere personalizzabile tramite i fogli di stile, quindi tramite CSS.
La prima cosa da fare, perciò, è quella di definire come si vogliono posizionare i diversi contenuti come i titoli, i paragrafi di testo (<body>), le immagini (<img>). A questo punto acquistano importanza i tag, che hanno degli attributi: esiste quello per heading (i titoli), quello per i link e quello per inserire gli elenchi puntati. Ogni dettaglio, quindi, è definito da un tag. Di base, però, hanno una rappresentazione standard, per questo nel foglio HTML si possono scrivere delle regole che il browser deve interpretare. Impostazione dopo impostazione, la pagina viene disegnata e resa più bella in base alle nostre idee e alla nostra creatività.
Per farlo, tuttavia, serve prima svolgere due azioni: trovare uno spazio dove scrivere le regole e delimitare le porzioni di codice, così da evitare che tutto venga personalizzato allo stesso modo. Senza le delimitazioni, infatti, applicare regole diverse a porzioni di pagina creerebbe un problema. Proprio per questo motivo si usano i tag <style>, che permettono di avere una zona dove andare a scrivere tutte le personalizzazioni. Se sono molte, è possibile scriverle in un foglio esterno, e dire alla pagina HTML dove pescarle. In un secondo momento, poi, è importante utilizzare il tag <div>, il quale crea un contenitore dove scrivere il codice al quale assegnare la personalizzazione che sarà valida solamente per il contenuto del contenitore selezionato.
Cosa serve per utilizzare il linguaggio CSS?
Per utilizzare il linguaggio CSS, quindi per poter scrivere i codici di personalizzazione, è sufficiente un qualsiasi editor di testo. Non servono programmi specifici e complessi!
Se si vuole utilizzare uno strumento più completo, ma gratuito, ci si può affidare a Microsoft Visual Studio, oppure a Atom. Si può infine scrivere un codice e vederne il risultato direttamente sul proprio browser grazie a codesandbox.io, un tool dove poter sperimentare senza dover installare niente.
Ti è stato utile questo articolo?
Alla prossima!
Develhope.
