Solo con gli oggetti html la pagina verrebbe letta come un foglio di testo tipo word dall’alto verso il basso.

Per vestire graficamente la pagina ci vengono incontro i CSS.

I CSS danno istruzioni agli oggetti HTML su come devono essere visualizzati a livello di layout e grafico.

Per riconoscere gli oggetti che vogliamo formattare tramite CSS è necessario identificarli con un selettore: Il selettore identifica l’oggetto HTML che vogliamo formattare.

Avremo quindi nell'HTML una serie di oggetti identificabili (tramite tag o tramite classe), e nel foglio CSS una serie di "regole" che danno istruzioni ai selettori su come devono essere formattati.

Una regola css consiste in un selettore e un blocco di dichiarazioni.
Sintassi:
selettore {proprietà:valore; proprietà:valore }

il selettore può essere un qualsiasi tag HTML oppure una classe CSS creata da noi:
tag HTML:
h1{}
div{}
p{}

Classe CSS:
.myclass-01{}
.myclass-02{}
...
con le classi abbiamo la possibilità di dare un nome (classe) a qualsiasi oggetto HTML in modo che possa essere riconosciuto e richiamato come selettore .

la classe CSS è una proprietà che viene data all’ oggetto HTML

CSS
<style>
.myclass-01{color: red}
</style>

HTML
<div class=”myclass-01”>

È bene organizzare i CSS con una logica di gerarchia e di ereditarietà, in modo di evitare ripetizioni e regole ridondanti e incrociate, partendo da macro-indicazioni per poi scendere a cascata (per quello si chiamano così) nello specifico.

Esempio 01:

Tutti i titoli (h1) avranno una dimensione di 20px e colore blu, ma solo un alcuni casi avranno un margine e un bordo sotto.

CSS
<style>
h1{font-size:20px}
.my-border{margin: 0 0 20px 0; border-bottom: 3px solid blue}
</style>

HTML
<h1>titolo normale</h1>
<h1 class=”my-border”>titolo con bordo</h1>

Esempio 02:

Tutti i paragrafi avranno una dimensione di 14px, ma solo quelli inseriti in un contenitore con classe”.paragrafo-speciale”, saranno in corsivo e bold

CSS
<style>
p{font-size:14px}
.paragrafo-speciale p{font-style: italic; font-weight: bold}
</style>

HTML
<p>paragrafo normale</p>
<div class=”paragrafo-speciale”> <p>Testo paragrafo speciale</p>
</div>

in questo caso abbiamo sfruttato il concetto di ereditarietà, perchè siamo andati a cercare un oggetto figlio di un altro oggetto ( il “p” dentro il “paragrafo-speciale” )