Guida alla realizzazione di un Theme WordPress – Parte 3

Indice guida

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
   

Oggi spiegheremo passo passo il codice css, scritto nell’articolo precedente.

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}
#header{
padding:40px 0;
}
#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;
 
}
#header #slogan{
float:left;
padding:15px 0 0 30px;
}
#header #logo em{
color:#69950F;
}

Prima di procedere, devo parlarvi di alcuni concetti chiave per la sintassi del css.
Per attribuire una determinata proprietà a un elemento html , si usano i selettori . Sono selettori, nel nostro caso :
‘body’,'#conteiner’,'#header’,'#header #logo’,'#header #slogan’ e ‘#header #logo em’.
Se non avete mai smanettato in css, vi starete chiedendo cosa è # ( sharp ) . Il simbolo sharp viene usato per selezionare un elemento della pagina HTML con un determinato id.

La prima regola che abbiamo scritto è :

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

1. Con il selettore ‘body’ , diciamo al browser , che le regole dichiarate all’interno delle parentesi graffe , valgono solo per il tag body.
2. Dichiariamo che il margine dell’elemento è uguale a 0
3. Dichiariamo che lo spazio tra bordo elemento e contenuto è uguale a 0
4. Diciamo di usare il font Arial per i testi

#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}

1. Conteiner è l’id che abbiamo attribuito al div principale
2. Impostiamo larghezza uguale a 999px
3. Impostiamo margine superiore e inferiore a zero e i margini laterali dinamici.  Impostando i margini laterali in dinamici, il div si centra dinamicamente nella pagina.
4. Dichiariamo un padding di 30 px per i bordi laterali

#header{
padding:40px 0;
}

1. Selezioniamo l’elemento con l’id header
2. Impostiamo un padding superiore e inferiore uguale a 40 px

#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;

1. Selezioniamo l’elemento logo che si trova all’interno dell’elemento header
2. Spostiamo l’elemento a sinistra
3. Impostiamo un padding di 30 px per il lato destro
4. Usiamo un font-family Times New Roman
5. Dichiariamo che il testo deve essere a 36px
6. Impostiamo il colore del testo in #3c3c30
7. Il bordo destro deve essere di 1px di colore #cccccc. Solid è il tipo di bordo.

#header #slogan{
float:left;
padding:15px 0 0 30px;
}

1. Selezioniamo l’elemento slogan , all’interno dell’elemento header
2. Spostiamo l’elemento a sinistra
3. Impostiamo padding superiore a 15px e padding laterale sinistro a 30px

#header #logo em{
color:#69950F;
}

1. Selezioniamo il tag em
2. Impostiamo il seguente colore : #69950f

Per chi non conosce il css , seguire i commenti, puo’ essere certamente utile , ma è consigliabile la lettura di una guida .

Ecco la migliore in circolazione : Guida css di base