Abbiamo tre modi per inserire CSS nell'HTML: vedremo che quello migliore è l'ultimo, perché permette di tenere il codice più in ordine.
CSS in linea
L'attributo style viene utilizzato per inserire dentro un tag del codice CSS per modificare l'estetica dell'elemento.
Come possiamo notare dalla foto, se voglio cambiare per esempio il colore della scritta basta inserire l'attributo style con elemento COLOR per cambiare colore testo, e BACKGROUND-COLOR per cambiare colore sfondo.
Questo metodo è da usare solo in casi particolari: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS incorporati (sconsigliato)
Possiamo inserire le nostre regole direttamente nel file HTML, nella sezione di intestazione (head). Si usa una coppia di tag <style> ... </style> dentro ai quali vengono inserite le regole:
Questo metodo è sconsigliato: è sempre meglio tenere il CSS in un file distinto per questioni di ordine e leggibilità.
CSS collegati
Possiamo dire alla nostra pagina html dove trovare un foglio di stile. Questo link va inserito dentro l'elemento head. Per fare ciò dobbiamo utilizzare il tag link con attributo href. nella foto vediamo che dentro l'attributo href c'è inserito il nome file del css. Mentre con l'attributo rel, diciamo che è un foglio di stile.
Denominazione dei file CSS
I fogli di stile possono essere chiamati in qualunque modo, ma solitamente si usa:
main.css per il foglio di stile principale, che contiene le regole da applicare a tutto il sito
nome_pagina.css per le regole aggiuntive, da applicare solo a una specifica pagina
Fogli a Cascata
Il nome CSS significa "Fogli di Stile a Cascata", nel senso che le regole vengono lette a cascata una dopo l'altra, e le regole lette per ultime prevalgono. Ad esempio potremmo mettere nel main.css una regola che dice che tutti i titoli devono essere blu, ma in una particolare pagina molto pericolosa potremmo farli diventare rossi. È importante allora importare i fogli nell'ordine corretto: Nell'esempio per prima cosa abbiamo importato il foglio di stile di Boostrap. Successivamente il file main.css ci permette di personalizzare gli stili proposti da Bootstrap specificando le nostre regole per tutto il sito. Infine solo all'interno della pagina pericolo.html importiamo delle regole molto specifiche che valgono solo per quella pagina.
Il foglio di Bootstrap dice che i titoli devono essere neri. main.css dice che per tutto il sito devono essere rossi. Per ultimo arriva pericolo.css che dice che per quella particolare pagina però devono essere blu. L'ultimo che arriva vince!
Se applichi degli stili a livello di singolo elemento con l'attributo style, questi avranno la priorità su tutto.
