COS’ E’ CSS

CSS è un linguaggio utilizzato nella costruzione di pagine Web, che agisce in maniera complementare al linguaggio Html , le cui regole di composizione sono sono contenute in un insieme di direttive, stilate dal W3C.

Mentre HTML è un linguaggio ormai utilizzato per definire la struttura di una pagina, il CSS (foglio di stile) è responsabile per il suo aspetto, come il posizionamento degli elementi, i colori e tutto ciò che rende il sito visivamente più accattivante.

Come è avvenuto per html , anche il linguaggio CSS è stato implementato nel corso degli anni , arrivando alla sua più recente versione , la 3.

L’introduzione del CSS si è resa via via sempre più indispensabile per permettere una programmazione più comprensibile e semplice da utilizzare.
E’ possibile applicare le regole Css ai documenti html in 3 differenti maniere:

Attraverso l’ attributo style
Attraverso il tag style
Attraverso un link al foglio di stile

ATTRIBUTO STYLE

Capiamo subito attraverso un semplice esempio come utilizzare il css attraverso l’ attributo style.

Nell’ esempio che segue , lo utilizzeremo per applicare uno sfondo azzurro alla nostra pagina html (che abbiamo precedentemente creato e a cui abbiamo assegnato il nome tutorial.html).

<!DOCTYPE html>
<html>
<body style = “background-color : aqua;“>
<p> questa è una pagina blu </p>
</body>
</html>

E’ possibile anche integrare il CSS nel nostro documento HTML attraverso il tag style, che come abbiamo visto nel nostro tutorial HTML , va inserito nel tag head.

Nell’ esempio che segue , lo utilizzeremo per applicare uno sfondo rosa alla nostra pagina html.

LINK AD UN FOGLIO DI STILE

Questo è il metodo che utilizzeremo per la continuazione del nostro tutorial e consiste nel lavorare con due documenti separati :

(Entrambi i documenti devono essere salvati nella stessa directory).

Necessario :

Una pagina HTML
Un documento CSS ( che conterrà tutte le nostre informazioni del layout del primo)

Creiamo a questo punto una pagina che chiameremo style.css, Il cui link va inserito nel tag <head> della nostra pagina html.

Nell’ esempio sottostante utilizzeremo il link ad un foglio di stile per creare una pagina dallo sfondo azzurro.

1. PAGINA HTML :

<!DOCTYPE html>
<html>
<head>
<link rel = “stylesheet” type = “text/css” href = “style.css”/></head>
<body>
<p>questa è una pagina dallo sfondo azzurro</p>
</body>
</html>

2. DOCUMENTO CSS :

body {
background-color : aqua;
}

Sintassi

La sintassi di una regola CSS vede coinvolti 3 elementi principali : selector , property e value (esempio di seguito) :

selector : rappresenta l’ elemento html a cui fa riferimento la regola stessa
property: rappresenta la proprietà da applicare al selector (che nell’ esempio sopra è il colore dello sfondo)
value: valore attribuito alla property (che nel nostro esempio è un colore per il nostro sfondo).