I CSS (Cascading Style Sheet) sono usati per descrivere l’aspetto di una pagina (X)HTML e sono stati creati dal W3C per separare i contenuti di una pagina web dalla presentazione (l’aspetto) e permettere una migliore e più semplice programmazione. Questa mini-guida è pensata per introdurre i neofiti all’arte del web-design e sarà l’inizio di una lunga serie di articoli.

Innanzitutto, occupiamoci di come includere i CSS nelle nostre pagine web. Possiamo farlo in due modi, vediamo quali sono:

Fogli esterni:
Si crea un file con estensione .css esterno alla pagina html e si richiama con il codice

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

Nota:
Per fogli di stile multipli basta aggiungere un’altra stringa cambiando il nome del foglio di stile.

Fogli interni:

Per stili di poche righe, è possibile includere il codice css direttamente nel tag head

<style>
*codice css*
</style>

Nota:
Assolutamente da evitare il css inline, ovvero lo scrivere lo stile di ogni elemento, direttamente all’interno del suo tag, come attributo della proprietà style:

<div style="width: 100px; height: 100px; border: 2px solid red;">
*contenuto*
</div>

I CSS sono formati da set di regole applicate a selettori.

<tag id="mioId" class="miaClasse">

tag{
proprietà: valore;
proprietà: valore, valore;
}
 
#id{
 proprietà: valore;
}
 
.classe{
 proprietà: valore;
}

Tipi di Selettori:

Selettori di tipo

body{
...
}
 
p{
...
}

Applicano le regole a tutti gli elementi di un certo tipo (associati ai tag html)

Classi

<div class="miaClasse">
Questo testo sarà sottoposto alle regole di chiarate per la classe miaClasse
</div>

.miaClasse{
...
}
 
.miaClasse2{
...
}

Identificatori

Vengono applicano univocamente all’elemento con l’identificatore (ID) definito:

<div id="mioId">* contenuto*</div>
<div id="mioId2">* contenuto*</div>

#mioId{
...
}
 
#mioId2{
...
}

Pseudoselettori:

Si tratta di selettori particolari che applicano le regole ad un elemento solo in determinate condizioni, ad esempio:

a:hover{
...
}

Applica le regole di stile all’elemento quando il puntatore ci si trova sopra.

Selettori di discendenza:

Sono selettori che applicano le regole solo ad un elemento parente che si trovi all’interno di un elemento contenitore

<p>
 Le regole NON saranno applicate a questo paragagrafo.
</p>
 
<div id="contenitore">
	<p> Le regole saranno applicate a questo paragrafo.</p>
</div>

#contenitore{
...
}

L’effetto sarebbe identico anche se p non fosse direttamente all’interno di contenitore

<div>
	<span>
             <p>
                 Le regole saranno applicate a questo paragrafo.
             </p>
         </span>
</div>

Priorità dei selettori:

Se allo stesso elemento vengono associati più selettori, l’id avrà priorità assoluta, seguito dalla classe e dal selettore di elemento.
Ad esempio:

p{
color: red;
}
 
.miaClasse{
color: black;
}
 
#mioId{
color: white;
}

Si possono associare più classi ad un solo elemento e in caso di sovrapposizione delle regole, saranno applicate quelle più in fondo nel file di testo (che quindi saranno lette dopo dal browser).
Esempio:

<p class="miaClasse1,miaClasse2">Contenuto</p>

.miaClasse1{
color: red;
font-size: 30px;
}
 
.miaClasse2{
color:black;
font-size: 20px;
}

Saranno applicate le regole di miaClasse2 perchè si trovano più in fondo rispetto a miaClasse1.

Commenti

Chiudo con un piccolo esempio sulla sintassi per i commenti in css, cioè porzioni di testo che non vengono interpretate dal browser.

 
/* Commenterà 
tutto il testo 
compreso.   
*/

Questo è solo l’inizio, c’è ancora molto da dire ma queste sono le basi che vi serviranno per seguire quello che verrà successivamente. Per domande, critiche, suggerimenti, minacce di morte, regali, dichiarazioni d’amore e tutto, usate i commenti.

Articoli simili

• Drawter layout con due click
• Artist from the WEB: ShinyBinary
• 5 Siti (e un contest) “da non perdere”
• Sito del Giorno: QuitDoingIt
• Sito del Giorno : SensiSoft