CSS Cascading Style Sheets (Fogli di stile)

CSS sta per (Cascading Style Sheets) è un linguaggio di informatica per formattare testo e impaginazione dei file HTML di siti, blog e applicazioni Web. Iniziando a studiare il linguaggio HTML sorge spontaneo chiedersi come stilizzare le pagine Web; la risposta è semplice, consiste nell’assegnare regole di stile con la formula (Proprietà attributo) agli elementi che compongono il file HTML.

I CSS

Sviluppato dal W3C (World Wide Web Consortium) e pubblicato per la prima volta il 17/12/96 non è un vero è proprio linguaggio di programmazione per il Web come JavaScript ma è impostato sulla stessa logica dell’HTML; esegue delle direttive di stile sui tag del documento HTML. Questa operazione si può effettuare in tre modalità diverse:

  • Direttamente nel Tag di apertura degli elementi HTML.
  • Tra i Tag di apertura e chiusura Head.
  • In un file esterno, separato richiamato nel documento.

A differenza di una formattazione diretta tra i Tag HTML stile Web 1.0; i fogli di stile consentono una maggiore flessibilità e gestione del design. Un esempio pratico è creare delle classi e richiamarle senza dover riscrivere nuovamente il codice o fare copia e incolla in ogni singola pagina Web del sito.

Inserire CSS nei Tag HTML

Possiamo inserire lo stile nelle pagine Web tra i tags, indipendentemente come mostrato di seguito:

<h1 style="color:red; background-color:gold">TITOLO </h1>

abbiamo assegnato al titolo di una ipotetica pagine web: uno sfondo di colore giallo con il font di colore rosso.

Impostare regole CSS nel file HTML

Il metodo abbastanza diffuso per impostare lo stile di una pagina HTML è quello di inserire il riferimento tra i tags nel marcatore head:

<head> <style> h1{color: green; background-color: gold;} </style> </head>

Così facendo, tutte le volte che nel body della pagina inseriremo un tag <h1> verrà evidenziato con lo sfondo oro e con il font di colore verde; senza dover ogni volta assegnare nuovamente lo stile ma farlo solo quando personalizziamo singole sezioni con un ID o una classe differente.

CSS esterni con link rel HREF

La tecnica più diffusa per stilizzare le pagine Web è quella di richiamare i fogli di stile esternamente; dal tag head. Creiamo un un file css “style.css” ed assegniamo delle proprietà e degli attributi per i tag di titoli e paragrafi; poi creiamo una pagina html che useremo per richiamare il foglio di stile.

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

i due file “HTML” & “CSS” in questo caso devono essere posizionati nella stessa directory per funzionare. Oltre ai fogli di style posizionati sul nostro server; si possono richiamare anche esternamente al nostro! Un tipico esempio è quello di reperire i CSS dalle CDN (Content delivery network).

Richiamare i fogli di stile CSS con @import

Per importare i fogli di stile in un sito o una pagina Web si può utilizzare anche la sintassi (@import). Questo tipo di approccio solitamente è utilizzato per richiamare parti di template in applicazioni Web e APP. Di seguito un esempio per effettuare questa operazione sia per un link relativo che assoluto:

<head> @import "mystyle.css"; </head> <head> @import url("http://miosito/mystyle.css"); </head>

Precedenze per le regole di stile CSS

Le direttive impartite allo stile di una pagina Web con i CSS hanno delle regole di rispettare per quanto riguarda le precedenze:

  • Le regole di stile CSS assegnate direttamente tra i TAG nel BODY hanno la precedenza assoluta su tutti gli altri.
  • Gli attributi di stile assegnati tra gli <head> hanno la precedenza su quelli richiamati esternamente.

Quindi ricapitolando, le regole CSS dei fogli di stile richiamati tramite “link rel”; non hanno precedenza ne sul CSS inserito nei i tag del BODY e ne sulle regole definite nel tag HEAD interni alle pagine Web.

CSS: Come assegnare lo stile alle pagine web
CSS – Cascading style sheets

Consigli

A questo punto hai iniziato a capire “come si assegnano le regole di stile CSS” ma sarebbe meglio approfondire, prima di creare il tuo primo sito Web.