COS’ E’ CSS


Attributo style

Tag style

Link al foglio di stile

Sintassi di base


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:


  1. Attraverso l’ attributo style
  2. Attraverso il tag style 
  3. 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 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 :

  1. Una pagina HTML
  2. 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) :

  1. selector : rappresenta l’ elemento html a cui fa riferimento la regola stessa
  2. property: rappresenta la proprietà da applicare al selector (che nell’ esempio sopra è il colore dello sfondo) 
  3. 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