css nozioni base

Che cos’è il CSS? Come si applica all’HTML? In questo tutorial troverai le risposte a queste domande, metteremo le basi sul come far apparire belle le pagine web.

Il CSS (Cascading Style Sheets) possiamo tradurlo in italiano come  linguaggio di stile a cascata. Il CSS, come l’HTML, non è un linguaggio di programmazione ma un linguaggio di marcatori, mark-up language,  in parole spicce è un insieme di direttive che diamo al browser su come mostrare gli elementi HTML sullo schermo.

Ogni browser mostra gli elementi con uno schema predefinito, grazie al CSS possiamo modificare questo schema e personalizzare secondo necessità colori, disposizioni degli elementi, caratteri e via dicendo.

Come l’HTML anche il CSS ha bisogno di una determinata sintassi affinchè il browser possa interpretare quanto scritto.

Esempio di sintassi in CSS

La direttiva che diamo al browser  è composta da un selettore, selector, ovvero l’elemento o a cui vogliamo applicare lo stile e da una dichiarazione, declaration, che a sua volta ha una proprietà e uno o più valori. Tutte le parti presenti nell’esempio sono necessarie affinche’ il browser capisca cosa deve fare: dentro le parentesi graffe inseriamo tutte le dichiarazione per il selettore che vogliamo modificare, e il punto e virgola va messo alla fine di ogni dichiarazione.

Abbiamo tre modi per applicare il CSS all’HTML:

  1. direttamente all’interno dell’elemento, inline styles
  2. all’interno del file, internal stylesheet
  3. tramite un file esterno: external stylesheet

INLINE STYLES

L’inline styles si applica nell’elemento tramite l’attributo style nel tag di apertura.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS - Primi Passi</title>
  </head>
  <body>
    <h1 style="color: red">Titolo</h1> <!-- Inline Styles -->
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa
      aperiam magnam laboriosam fuga, minima modi! Minus vero aut eveniet.
    </p>
    <h2>Sottotitolo</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore recusandae
      laborum illum numquam iure perferendis, ullam quos repellat suscipit saepe
      ea alias laudantium consequuntur eum perspiciatis, laboriosam molestiae
      adipisci possimus?
    </p>
  </body>
</html>

INTERNAL STYLESHEET

L’internal stylesheet, chiamato anche embedded, ovvero incorporato, si applica con il tag style all’interno del tag head.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS - Primi Passi</title>
    <style>  <!-- Internal Stylesheet -->
      h2 {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>Titolo</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa
      aperiam magnam laboriosam fuga, minima modi! Minus vero aut eveniet.
    </p>
    <h2>Sottotitolo</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore recusandae
      laborum illum numquam iure perferendis, ullam quos repellat suscipit saepe
      ea alias laudantium consequuntur eum perspiciatis, laboriosam molestiae
      adipisci possimus?
    </p>
  </body>
</html>

EXTERNAL STYLESHEET – Come collegare CSS a HTML

L’external stylesheet si applica collegandosi ad un file esterno, questo file deve avere l’estensione .css così il browser capisce di che tipo di file si tratta. Mentre al file possiamo dare il nominativo che vogliamo, ma anche in questo caso, come per l’html, è buona pratica seguire gli standard, il file css viene di solito nominato style.css o main.css, questo perchè se altri sviluppatori hanno a che farlo con il codice gli è subito chiaro che file è ed inoltre si mantiente il tutto più in ordine anche per noi stessi. Quindi nominarlo luigi.css avrebbe poco senso.

Poi bisogna collegare il file .css al file .html, questo si fa tramite un link tag all’interno del head tag del file .html. Nel link tag servono due attributi: rel, indica la relezione fra i file, in questo caso è sylesheet, e href, che specifica il percorso che il browser deve fare per trovare il file da collegare.

File: index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS - Primi Passi</title>
    <link rel="stylesheet" href="style.css" /> <!-- External Stylesheet -->
  </head>
  <body>
    <h1>Titolo</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit culpa
      aperiam magnam laboriosam fuga, minima modi! Minus vero aut eveniet.
    </p>
    <h2>Sottotitolo</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore recusandae
      laborum illum numquam iure perferendis, ullam quos repellat suscipit saepe
      ea alias laudantium consequuntur eum perspiciatis, laboriosam molestiae
      adipisci possimus?
    </p>
  </body>
</html>

File: style.css

p {
  font-size: 1.2em;
  color: blue;
}

Fra i tre metodi si sconisigla di usare l’inline style, ci sono vari motivi: l’inline si applica solo ad un singolo elemento, e lo si fa all’interno di quest’ultimo, mentre è buona pratica mantenere lo stile e il contenuto separati. Di conseguenza diventa difficile anche per una questione di manutenzione, avere il CSS tutto in un posto e non sparso per tutto il documento HTML ci facilita il lavoro. Inoltre per via dell’hereditance, l’eredità, l’inline style sovrascrive gli altri due metodi, il che rende il tutto ancora più complicato.

Con l’inline applichiamo il CSS elemento per elemento, con l’internal stylesheet si dovrebbe ricopiare lo style pagina per pagina, partendo dal presupposto che la maggior parte dei siti web sono formati da più pagine anche questo avrebbe poco senso perchè rende il processo di scrittura del codice ripetitivo senza un motivo valido.

Quello da utilizzare è l’external stylesheet. Con l’external stylesheet possiamo riusare lo stile per tutte le pagine del sito senza ricopiarlo pagina per pagina, se un giorno decidiamo che vogliamo cambiare il colore dei bottoni oppure il font ci basterà apportare una singola modifca.

Come in molti altri settori anche in quello dello sviluppo web bisogna cercar di raggiungere il miglior risultato possibile con il minimo sforzo, ovvero raggiungere l’obbiettivo prefissato con meno codice possibile.

Per questo tutorial è tutto, ricordati che per lavorare con il web ci vuole tanta pratica e che Everyday is a Learning day.


Guarda il video:

Scarica i file del video.

Articoli simili