Fondamenti del linguaggio CSS

Abbiamo già analizzato i tag principali del linguaggio HTML ed è ora di mettere bellezza. Vorremmo avere la possibilità di cambiare il colore del testo, la sua dimensione, lo sfondo e molto altro. Questo viene fatto utilizzando il linguaggio CSS.

Di norma, i comandi CSS (stili) sono memorizzati in un file separato, che viene collegato con un apposito tag a tutte le pagine HTML del nostro sito.

Il vantaggio di questo approccio è che il file CSS è uno, mentre i file HTML possono essere in qualsiasi quantità, anche mille. Se facciamo una modifica in un punto del file CSS, ad esempio, coloriamo tutti i paragrafi in rosso, queste modifiche verranno applicate a tutte le mille pagine HTML a cui è collegato il nostro file CSS. Molto comodo e veloce.

Il file degli stili deve avere l'estensione .css. Per collegare tale file a una pagina HTML, nel tag head si dovrebbe scrivere la seguente costruzione:

html<link rel="stylesheet" href="fileName.css">

Nel seguente esempio, al nostro file HTML viene collegato il file CSS styles.css:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>
      This is a paragraph with text.
    </p>
  </body>
</html>