Come inserire il CSS in HTML

Vuoi aggiungere del linguaggio CSS al tuo progetto? Perfetto! 
Ci sono 3 modi di incorporare il CSS all’interno della nostra pagina html: style in line, embedded, e link esterno.
Vediamoli!
 

Style in line

Quando parliamo di style in line, intendiamo inserire il css su un’unica riga: la stessa dell'elemento che andremo a modificare. In questo caso creeremo un attributo globale, l’attributo “style” all’interno del tag html, seguito dalla proprietà css che stiamo andando a modificare e dal valore di quella proprietà. 

<nav class="nav bg-container" style="border: 2px solid red;"></nav>

Questa modalità, in linea teorica, dovrebbe essere utilizzata per applicare alcuni stili o effetti ad un singolo elemento HTML, tuttavia non bisogna mai utilizzarla. Immagina, per esempio, che il cliente ti chieda di cambiare il colore a tutti i tag p della pagina: se hai utilizzato lo style in line per inserire il tuo css, dovrai modificare tutti i tag p presenti. uno ad uno. Un pò faticoso, no?
Inoltre, lo style in line penalizza la SEO del tuo sito web, quindi ricorda: non usarlo!

CSS Embedded

Il secondo metodo per incorporare il CSS nella tua pagina html è internamente: come funziona? All’ interno dell’ head della pagina html aprirai un tag “style” - che avrà, ovviamente, un’ apertura e una chiusura -  e, all’ interno di quest’ultimo, a sua volta, posizionerai il tuo selettore (ovvero l’ elemento del codice al quale andrà applicata la tua proprietà css: non temere, spiegheremo tutto nel dettaglio nelle prossime guide!)

La differenza, come puoi vedere nella foto sottostante, è proprio questa: col selettore potrai specificare a quale elemento vorrai applicare le tue proprietà CSS. Nel caso specifico del nostro esempio, ogni tag p presente nel nostro foglio html avrà il colore rosso. Ricorda, però: Il css embedded agisce solo sul documento in cui viene aggiunto.

<style>
   p {
      color : red;
   }
</style>

Link esterno

L’ultimo metodo per implementare il CSS nel tuo codice è l’inserimento di un link esterno. Si tratta del metodo più utilizzato e comune, per via della sua organizzazione ordinate e dello stile pulito, ma soprattutto per far fede al principio della separation of concerns, principio cardine della programmazione informatica. Per attuarlo, dobbiamo creare un nuovo file nel nostro editor di testo, che abbia estensione ".css" (la best practice è quella di chiamare il file “style.css”); in questo file scriveremo tutte le nostre regole CSS, e lo collegheremo al nostro file HTML mediante l’utilizzo di un tag "link", sempre nell’head del nostro documento HTML, come puoi vedere nella foto sottostante.

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

NB. Il CSS embedded ha la priorità sul CSS esterno, tuttavia è sempre preferibile, per i motivi di cui sopra, utilizzare un foglio di stile a parte collegandolo con questa terza metodologia.

Ora conosci tutte le modalità per implementare il linguaggio CSS nel codice del tuo sito web. Continua a scoprire di più sul mondo dello sviluppo web senza paura! Hai il coraggio?