CSS: Introduzione ai Fogli di Stile

Scritto da ambrix on 04/05/2019. Postato in Coding, Corsi Programmazione, NotInHome

Lezione 01 In questa lezione di introduzione, analizzeremo le basi dei famigerati Fogli di Stile, al secolo CSS (Cascade Style Sheet), la ricetta segreta di ogni pagina web.

Nel mini-corso HTML, abbiamo usato l’attributo style per formattare gli elementi HTML. L’attributo style rappresenta una introduzione all’aspetto fondamentale dei fogli di stile, ossia la presentazione di una pagina web: se l’html ne definisce la struttura, i CSS si prendono cura del suo aspetto.

<!doctype html>
<html>
 <body style="font-family: courier; font-size:2em; color: red; background-color: grey">
  I Love CSS!
 </body>
</html>

I Love CSS!

In questo modo riusciamo ad applicare lo stile incorporandolo all’interno del tag <body>. E pertanto questa caratteristica definisce gli inline-styles . Gli stili incorporati nei tag come attributi, ci aiutano ad applicare uno stile unico per un singolo elemento HTML! Tuttavia, gli inline-styles hanno alcune limitazioni e perdono molti dei vantaggi dei fogli di stile. Infatti, volendo applicare lo stesso stile a due tag differenti, ad esempio a due paragrafi distinti, dobbiamo riscrivere il codice: si inizia ad avere dei duplicati nel listato!

La soluzione è pensare allo stile in modo alternativo. Prima come tag e poi come file. Per ottimizzare il codice, quindi, ci sono più strade. Una prima è quella di inserire lo stile all’interno del tag head , considerando style non più come attributo bensì come tag.

<!doctype html>
<html>
 <head>
  <style>
   p {
    color: red;
    font-size: 2em;
   }
  </style>
 </head>
 <body>
  <p>I Love CSS!</p>
  <p>Me too!</p>
 </body>
</html>

I Love CSS!

Mee too!

La strada appena percorsa si applica ad una singola pagina web, potremmo dire che è una “strada interna” che utilizza il tag <style>. Come vederemo più avanti, abbiamo una seconda strada, che è quella più indicata per la costruzione di un intero sito web, consistente nell’inserire il codice CSS all’interno di un file separato (per esempio styles.css) che viene richiamato all’interno del file html.

<!doctype html>
<html>
 <head>
  <link
 rel="stylesheet" type="text/css" href="https://www.sitoweb.org/cartella/styles.css">
 </head>
 <body>
   <p>I Love CSS!.</p> 
   <p>Me too!</p>
 </body>
</html>

/* file esterno styles.css */

p {
color: blue;
font-size: 12px;
}

I Love CSS!

Mee too!

Dal listato html di sopra si evince che si utilizza il tag link per collegarci al foglio di stile. Il file styles.css risiede all’indirizzo https indicato in href e va a stilizzare i paragrafi che avranno tutti font di 12px e di colore blu! Inoltre, il tag <link> presenta un attributo type, qui con valore “text / css”, un attributo rel che è “stylesheet” e un attributo href che punta al file CSS. Il percorso da attribuire al tag <link> può essere ridotto alla scrittura del solo nome del file, nel caso in cui quest’ultimo risiede nella stessa cartella del file html. (es. href=”styles.css” o anche href=”../styles.css”)

Nota: tutto ciò che scriviamo tra /* e */ è considerato come un commento e non ha effetti sul foglio di stile

In coda a questa parte introduttiva, parliamo del Cascading Order , ossia delle priorità che si hanno nei fogli di stile. Diamo un’occhiata al seguente esempio:

/* file styles.css interno alla cartella del file html */

p {
 color: yellow;
 font-size: 14px;
}

<!doctype html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <style>
   p { color: blue; }
  </style>
 </head>
 <body>
  <p>I Love CSS!</p>
  <p style="color:red;">Me too!</p>
 </body>
</html>

Quale colore verrà attribuito al testo del paragrafo? É evidente che c’è un “conflitto di colori”! Tuttavia, il foglio di stile interno sovrascrive quello esterno, pertanto al paragrafo verrà applicato con priorità più alta lo stile “più interno”, ossia il colore rosso, mentre sarà blu la scritta I Love CSS!

I Love CSS!

Mee too!

[]–> Vai alla successiva