Miniguida WordPress – Lezione 5: Cenni di CSS

Stiamo inserendo articoli nel nostro blog creato con WordPress, abbiamo scelto un tema e abbiamo organizzato il sito in modo gerarchico, suddividendo i post per categorie.
Abbiamo installato un plug-in anti spam, un widget per aggregare i post o per permettere di effettuare una ricerca.
Ma ci stupisce la velocità con cui, cambiando un tema, viene modificato l’aspetto del nostro blog e facendo click sulla barra a sinistra, andando a selezionare la voce Theme options sotto la voce Aspetto, per personalizzare il tema che abbiamo scelto, abbiamo visto una voce Editor, che abbiamo cliccato una volta per sbaglio, tornando poi a Theme options per le personalizzazioni che il tema permette di effettuare.

Questa volta andiamo a vedere espressamente la voce di menù Editor. Facciamo click su Aspetto e poi su Editor.

Quello che si apre è il foglio di stile del tema che abbiamo selezionato.

I fogli di stile, ovvero i CSS, che sta per Cascade Style Sheets, sono file che definiscono le proprietà visuali degli oggetti.

Il contenuto del nostro blog, i titoli, i testi, i post, vengono memorizzati solo come contenuto informativo, senza le impostazioni grafiche per la visualizzazione, che sono invece memorizzate dei fogli di stile.

I file css definiscono le modalità di visualizzazione degli elementi a cui viene associato un determinato stile ed hanno la caratteristica di essere strutturati in maniera gerarchica, a cascata.

Questo significa che se nell’elemento main viene definita una proprietà font-family, che seleziona un certo font da utilizzare per visualizzare gli elementi, tutti gli elementi successivi utilizzeranno, senza bisogno di doverlo dichiarare, lo stesso font dell’elemento superiore. Lo stesso vale ovviamente per tutte le altre proprietà.

#myblog-main{

background: #F9F3DD;

margin:0 auto;

font-size: 13px;

font-family: Arial, ‘Arial Unicode MS’, Helvetica, Sans-Serif;

font-weight: normal;

font-style: normal;

position: relative;

width: 100%;

min-height: 100%;

left: 0;

top: 0;

cursor:default;

overflow:hidden;

}

Date le impostazioni di base che abbiamo visto, se vogliamo visualizzare una parte di testo utilizzando un carattere diverso dall’Arial, occorrerà creare uno stile specifico, definendo il font da utilizzare, che applicheremo all’elemento da visualizzare.

Ad esempio è facile trovare una linea simile a questa. L’header del post avrà quindi lo stesso font dei post, ma la dimensione dei caratteri del titolo sarà superiore a quella dei caratteri del post.

.myblog-postheader a

{

   font-size: 24px;

}

A seconda del tema selezionato, avremo un foglio di stile che contiene definizioni diverse, ma potremo pian piano imparare a riconoscere le varie parti di un foglio di stile, in modo non solo da personalizzare un tema già esistente attraverso i parametri che vengono messi a disposizione dagli sviluppatori, ma potremo sviluppare temi personali, completamente definiti da noi, partendo da un tema semplice ed inserendo via via tutte le diverse caratteristiche di stile.

Leggi le altre lezioni :

Miniguida WordPress – Lezione 1: Cosa è e come si installa WordPress

Miniguida WordPress – Lezione 2: Scegliere un tema

Miniguida WordPress – Lezione 3: Creare un blog

Miniguida WordPress – Lezione 4 :Installare Plug-in e Widget