Come creare uno stile personalizzato con i CSS

Come creare delle classi di stile per personalizzare dei paragrafi da evidenziare nei post di Blogger o di Wordpress.

Le piattaforme utilizzate per la creazione di siti come Blogger e Wordpress, offrono diversi strumenti per personalizzare alcuni aspetti dei Temi in generale e, in particolare, per quello che concerne il corpo della pagina, come il colore del testo, le dimensioni dei caratteri, la famiglia di font, il colore dei link.

Nella realizzazione di un articolo, potrebbero però sussistere delle esigenze particolari per evidenziare in modo diverso un dato paragrafo, che si ripete in più articoli. In questo sito per esempio ho creato uno stile per il codice, uno stile per le intestazioni, uno stile per un elenco e uno stile per una tabella responsive.  Ricordo anche un interessante post che ho dedicato alla personalizzazione dello stile delle citazioni nei blog letterari.

In questo articolo vedremo come creare uno stile personalizzato per dei paragrafi di testo che vogliamo evidenziare in modo efficace e riprenderò il tema della creazione di uno stile per pubblicare codici di linguaggi di programmazione in modo da renderli immediatamente riconoscibili rispetto al resto dei contenuti.

Evidentemente occorre una sia pur minima conoscenza di quelli che sono i linguaggi di markup HTML e CSS. Chi non avesse neppure una infarinatura al riguardo, può scaricarsi gratuitamente il mio ebook Guida all'HTML e al CSS che è in formato PDF e quindi consultabile con tutti i dispositivi.

CREARE UNO STILE PER POSTARE CODICI

In questo blog ho incollato questo codice

.codice {
margin : 15px 35px 15px 25px;
padding : 20px 30px 10px 20px;
clear : both;
list-style-type : none;
background : #EEFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_oIqimXqztTYWJiNw03rsoMFD9wkT4dLWMEr71Dje82jj16xXCDjwamo1WQHdyuLCG7eoxxgJOTOz267vxNVtD2uRifSE96IHTCiY0IU_S273r6XhzQEPNvr9_uKR-mPlnS5ExyHLqzg/s160/codice-verde.png) no-repeat right bottom;
border : 1px solid #008250;
color : #003366;
}

su Tema -> Modifica HTML, subito sopra alla riga ]]></b:skin>. Come vedete viene mostrato il mio nome aggiunto con una immagine di background posizionata in basso a destra, il cui URL è colorato di viola. Si può usare questo codice come base per creare uno stile personalizzato, modificando i codici dei colori, i margini esterni e interni (rispettivamente con i tag margin e padding) e l'URL  della immagine di sfondo che possiamo per esempio sostituire con quella che ha questo URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_9SdczN2QDOL0Z2UKCDXVnV9PxQn9z-6UMkY6hMT1-nXzRYjifermHv1ZtjdMm0Y7kSqPgo5TjP2AE2mRWl8Urs8yzuYWupcDdl9ZicYvMb6XYC0k3i_Z_z6fPa0g34jV3Bq94DvS6k/s1600/codice-1.gif

Il risultato sarà il seguente

Il codice dovrà essere pubblicato nei post con questo struttura:

<div class="codice">
Codice da visualizzare nel riquadro
</div>

o con quest'altra

<p class="codice">
Codice da visualizzare nel riquadro
</p>

Nella pratica, un utente di Blogger, per prima cosa salva il Tema dopo aver aggiunto il codice; quindi incolla il codice da evidenziare in Modalità Scrivi. Passa poi a Modalità HTML e aggiunge le righe evidenziate di giallo. Se i tag <p> o <div> fossero già presenti, basterà aggiungere class="codice" nel tag di apertura.

CREARE UNO STILE PERSONALIZZATO PER UN PARAGRAFO

Se si ha intenzione di pubblicare un solo paragrafo con uno stile personalizzato, si va nell'Editor di Blogger e, in Modalità HTML, si incolla un codice come il seguente

<style type="text/css">
.miostile1 { 
   width: 520px;
   text-align: justify;   
   line-height:1.3;
   margin:auto;
   font-family:Georgia;
   border-style: solid;
   border-width:2px;
   border-color:#036;
   font-size: 14px;
   padding: 6px;
   color:#8b4303;
   background-color:#a5ffaf;
}
</style> 
<div class="miostile1">Testo del paragrafo</div>

quindi si va in Modalità Scrivi, e al posto di Testo del paragrafo, si digita il contenuto che vogliamo racchiudere in un rettangolo evidenziato. Il risultato sarà il seguente:

Si possono modificare i parametri come si crede per adattare i colori di sfondo, testo e bordo, la famiglia di font e le dimensioni del rettangolo. Le righe di codice inserite servono per queste personalizzazioni:

1. Larghezza del contenitore (width: 520px;)
2. Giustificazione del testo (text-align: justify;)
3. Altezza della interlinea (line-height:1.3;)
4. Rettangolo centrato nel layout (margin:auto;)
5. Famiglia dei font (font-family:Georgia;)
6. Stile del bordo (border-style: solid;)
7. Spessore del bordo (border-width:2px;)
8. Colore del bordo (border-color:#036;)
9. Dimensione dei caratteri (font-size: 14px;)
10. Distanza del testo dal bordo (padding: 6px;)
11. Colore del testo (color:#8b4303;)
12. Colore di sfondo (background-color:#a5ffaf;).

Possiamo inserire nel modello questo stile, per usarlo altre volte senza dover digitare sempre lo stesso codice. Si va su Tema -> Modifica HTML e si incolla sopra alla riga ]]></b:skin> il codice precedente compreso tra le righe <style type="text/css"> e </style> escluse. Per pubblicare un paragrafo con tale stile, dovremo usare questa sintassi

<div class="miostile1">
Testo da visualizzare nel riquadro
</div>

oppure quest'altra

<p class="miostile1">
Testo da visualizzare nel riquadro
</p>

Oltre al miostile1 possiamo creare anche un miostile2, un miostile3, ecc per poi incollarli nel modello e pubblicare i paragrafi con tale stile solo riprendendone le classi CSS. Ho preso la piattaforma Blogger come riferimento ma, tutti i codici presentati, possono essere usati anche su Wordpress.