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.
TAG STYLE
<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:pink;}
</style>
</head>
<body>
<p>questa è una pagina dallo sfondo rosa</p>
</body>
</html>
LINK AL 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 DI BASE
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).
PROPERTY E VALUE : sono sempre divise da → : , inoltre sono sempre racchiuse tra parentesi graffe che ne determinano l’inizio e la fine.
E’ possibile assegnare più proprietà ad un elemento accodandosi al precedente separando con un ; come da esempio
