Introduzione CSS

I CSS sono uno degli strumenti più importanti per progettare e abbellire l'aspetto di un sito web. Ti insegneremo le basi e come usare i CSS

CSS può cambiare lo stile HTML Beauty

CSS è il linguaggio che utilizziamo per lo stile di una pagina Web.

Cos'è CSS?

CSS sta per Cascading Style Sheets
CSS descrive come gli elementi HTML devono essere visualizzati su schermo, carta o in altri media
CSS fa risparmiare molto lavoro. Può controllare il layout di più pagine Web contemporaneamente
I fogli di stile esterni sono archiviati in file CSS

CSS Demo - Una pagina HTML - Stili multipli!

Qui mostreremo una pagina HTML visualizzata con quattro diversi fogli di stile. Fare clic sui collegamenti "Foglio di stile 1", "Foglio di stile 2", "Foglio di stile 3", "Foglio di stile 4" di seguito per visualizzare i diversi stili:

Perché usare CSS?

I CSS vengono utilizzati per definire gli stili per le tue pagine web, inclusi il design, il layout e le variazioni di visualizzazione per diversi dispositivi e dimensioni dello schermo.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS ha risolto un grosso problema

L'HTML non è MAI stato concepito per contenere tag per la formattazione di una pagina web!

L'HTML è stato creato per descrivere il contenuto di una pagina web, come:

<h1> Questa è un'intestazione </h1>

<p> Questo è un paragrafo.</p>

Quando tag come <font> e attributi di colore sono stati aggiunti alla specifica HTML 3.2, è iniziato un incubo per gli sviluppatori web. Lo sviluppo di siti Web di grandi dimensioni, in cui i caratteri e le informazioni sui colori venivano aggiunti a ogni singola pagina, è diventato un processo lungo e costoso.

Per risolvere questo problema, il World Wide Web Consortium (W3C) ha creato CSS.

I CSS hanno rimosso la formattazione dello stile dalla pagina HTML!

CSS fa risparmiare molto lavoro!

Le definizioni di stile vengono normalmente salvate in file .css esterni.

Con un file di foglio di stile esterno, puoi cambiare l'aspetto di un intero sito web cambiando solo un file!

Sintassi CSS

Una regola CSS è composta da un selettore e un blocco di dichiarazione.

Il selettore punta all'elemento HTML a cui vuoi applicare lo stile.

Il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola.

Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti.

Più dichiarazioni CSS sono separate da punto e virgola e i blocchi di dichiarazione sono racchiusi tra parentesi graffe.

p {
  color: red;
  text-align: center;
}

Esempio spiegato

p è un selettore in CSS (punta all'elemento HTML a cui vuoi applicare lo stile: <p>).
color è una proprietà e red è il valore della proprietà
text-align è una proprietà e center è il valore della proprietà