Guida CSS

I CSS (Cascading Style Sheets) ovvero i Fogli di Stile sono ormai diffusissimi nelle pagine web per la fcilità con cui è possibile creare o aggiornare Siti di piccole, medie e grandi dimensioni. Essi servono innanzitutto a semplificare e migliorare l'aspetto estetico delle pagine creando persino delle vere e proprie animazioni se combinati con un linguaggio di scripting come il Javascript (DHTML ossia un HTML Dinamico).
Il loro inserimento nelle pagine Web avviene in diversi modi. Innanzitutto devono essere racchiusi nel Tag <style> </style> dal quale il Browser interpreta che si tratta di Fogli di Stile.

Modi di inserimento dei CSS nelle pagine Web:

In linea (alla parte interessata del codice o blocco)
Incorcopato nella Pagina (da inserire nella testata)
Foglio di Stile esterno (dichiarato nella testata)

Occupiamoci ora della Sintassi dei Css, cioè come inserirli correttamente nella pagina. Come abbiamo detto ci sono tre modi di inserimento. Per quando riguarda l'inserimento in linea, quì di seguito riporto un esempio di sintassi:

<Div style="width:100px; text-align:left; font-family: Verdana, Arial, Helvetica;"> Mio contenuto </Div>

Esaminando il codice sopra, notiamo che al Div abbiamo applicato uno stile riguardo la sua larghezza, allineamento e tipo di carattere. Lo stile si definisce con style= poi all'interno delle virgolette " " uno o più effetti di stile divisi da un ; e uno spazio.

Proviamo adesso ad inserire lo stesso codice ma incorporato nella pagina (questo avrà effetto su tutti i div della pagina stessa). Di seguito riporto il codice:

<style type="text/css">

Div {
width:100px;
text-align:left;
font-family: Verdana, Arial, Helvetica;
}

</style>

Il codice sopra riportato va inserito nella testata della pagina tra i tag <head> </head>, detto questo esaminiamo il codice. Con il tag <style> dichiariamo che si tratta di stile, poi c'è la scritta type="text/css" che ci informa del tipo di stile (può anche essere omesso); altri tipi di stile sono: media, screen (schermo), print (stampante), all, braille, handheld, etc. Poi indichiamo a quale elemento applicare lo stile, in questo caso i Div, successivamente definiamo lo stile del div che deve essere racchiuso tra parentesi graffe {}.

Nei Fogli di Stile esterni, utilizzeremo il tutto uguale al codice incorporato nella pagina con l'unica differenza di omettere i tag di apertura e chiusura (<style type="text/css"> e </style>) salvato in un file con estensione .css e richiamato dalla pagina web nel seguente modo (inserito tra i tag <head> </head>):

<link rel="stylesheet" href="mio_stile.css" type="text/css">

Sorge ora un'altra esigenza: se avessi dieci div e ne volessi solo alcuni ad esempio di larghezza 100px, come potrei fare? Per questo utilizzeremo due importanti proprietà degli elementi:

ID
CLASS

ID serve per identificare univocamente un elemento, ovvero il valore della proprietà ID identica univocamente l'elemento all'interno del documento. Viene contrassegnato con il simbolo # (sintassi: #nome_identificativo).
CLASS serve per far appartenere più elementi di un documento alla stessa classe. Facciamo appartenere elementi distinti ad una stessa classe quando riconosciamo loro una proprietà comune. Essa viena contrassegnata mediante un . (punto) (sintassi: elemento.nome_classe).

Esempio di utilizzo:

<!DOCTYPE html>
<html>
<head>
<style>

#contenitore {
width:100px;
text-align:left;
font-family: Verdana, Arial, Helvetica;
}

div.intro {
width:200px;
text-align:left;
font-family: Verdana, Arial, Helvetica;
}

</style>
</head>

<body> <h1>Benvenuti sulla mia Homepage</h1>

<div id="contenitore">Il mio nome è Alfredo.</div>
<div class="intro">Vivo a Napoli ... il mio migliore amico è Giacomo. </div>

</body>
</html>

Naturalmente tutte le proprietà dei css possono essere attribuite non solo ai div, ma anche a testo, immagini, tabelle, etc. Ora non ci resta che elencare le Proprietà dei CSS nel capitolo successivo.

pagina 1 2

- I Fogli di Stile -