CSS Tips & Tricks:

Differenza tra id e class
E' possibile assegnare caratteristiche grafiche tramite i CSS sia usando l'id di un elemento che la proprietà class.
Ricordatevi che per assegnare ad un elemento con id dovrete nel CSS indicare le proprietà anteponendo il carattere #nome_stile, mentre per assegnare una proprietà attraverso la classe dovrete anteporre il carattere .nome_stile.
La differenza tra i due ? In genere si usa assegnare uno stile mediante id se è unico e non si ripete, mentre la class quando lo stile va riutilizzato.

L'importanza del posizionamento degli elementi
E' possibile gestire il posizionamento di ogni elemento mediante la proprietà position. Di default ogni elemento ha come valore position: static. Questo significa che l'elemento si posiziona rispetto alla pagina esattamente dove è inserito nel codice.

position: relative
In questo caso è possibile assegnare i valori top, bottom, left, right per posizionare l'elemento relativamente alla posizione corrente.

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

sposterete l'elemento div_1 a 20px dall'alto e a -40px a sinistra rispetto alla posizione corrente.


position: absolute
In questo modo praticamente togliete l'elemento dal documento e lo posizionate esattamente dove indicato rispetto alla finestra del browser.

Il seguente elemento posiziona un elemento nell'angolo in alto a sinistra.

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

position: relative + position: absolute
Questa combinazione può essere usata per posizionare esattamente un elemento in una data posizione all'interno di un altro elemento.

#div-1 {
 background: green;
 position:relative;
}
#div-1a {
 background: red;
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

HTML

<div id="div-1">
   <p>lore ipsum</p>
   <div id="div-1a">
     <p>lore ipsum</p>
   </div>
</div>

position: fixed
In questo modo è possibile posizionare un elemento esattamente dove indicato (come absolute) con la differenza che in caso di scroll della pagina l'elemento rimarrà comunque visibile sempre nella posizione indicata

#div-1 {
 position:fixed;
 top:0;
 right:0;
 width:200px;
}

Testare il vostro codice direttamente online
Se volete testare la combinazione di codice HTML e CSS, ma anche javascript compresi vari framework, questo è il link dove poter effettuare le vostre prove.

http://jsfiddle.net/

Su come utilizzarlo ne parleremo approfonditamente nelle prossime lezioni, comunque cominciate a divertirvi.

Ciao