Blogger Tips: Come inserire il testo in un riquadro colorato

Buongiorno lettori! Oggi sono qui per inaugurare una rubrica molto importante per me, ovvero quella dedicata all'html e alla grafica. Come primo tutorial ho deciso di spiegarvi come inserire il testo all'intero di vari tipi di riquadri, in seguito ad una richiesta avuta da una ragazza su instagram. Se volete richiedermi un tutorial, lasciate un commento sotto.

Per inserire il testo in un riquadro colorato come questo il codice che bisogna utilizzare è il seguente:

<div style="background-color: #ffe1e1; color: #00000; font-family: verdana; font-size: 10 px; text-align: center;"> <br /></div>

In cui background color è il colore dello sfondo del riquadro (un sito che vi fornisce tutti i codici html relativi ai colori è color hex. Ricordatevi sempre di non cancellare mai #l'asterisco e il ;punto e virgola, altrimenti il codice non sarà valido), color è il colore del testo, font-family: è il font del testo, font-size: è la grandezza del testo, text-align è l'allineamento del testo

Se a questo riquadro volete aggiungere il bordo superiore e inferiore di un'altro colore il codice da utilizzare sarà visualizzato cosi

<div style="background-color: #ffe1e1; border-bottom: 2px solid #922d2b; border-top: 2px solid #922d2b; font-family: verdana; font-size: 10 px; text-align: center;"> <br /></div>

In cui border botton si riferisce al bordo inferiore, 2px è lo spessore del bordo (più alto è il numero più spesso è il bordo) e solid significa che è un bordo solido e continuo. La stessa cosa ovviamente si ripete per il border-top che è il bordo superiore. 

Se, invece del bordo continuo, volete un bordo puntinato vi basterà sostituire solid con dotted, mentre se volete un bordo tratteggiato sostituite solid con dashed. 

Se invece volete proprio un riquadro vero e proprio con i bordi sia a destra che a sinistra, sia sotto che sopra, il codice da utilizzare è questo: 

<div style="background-color: white; border: 1px solid #000000; font-family: verdana; font-size: 17px; padding: 10px 20px 10px 30px; text-align: justify;"></div>

Come vedete, abbiamo utilizzato il comando border: una volta sola per il semplice motivo che tutti i bordi del nostro riquadro hanno le stesse impostazioni. Se invece vogliamo il lato superiore rosso e quello inferiore nero andremmo a scrivere una cosa di questo tipo: border-top: 1px solid #c40824, border-bottom: 1px solid #000000 e via cosi con gli altri bordi. 

Il padding serve per creare spazio tra i bordi del riquardo e il testo, più alto è il numero più distante sarà il testo dai bordi. In questo caso ho inserito quattro valori proprio per farvi vedere quello che vi ho spiegato prima: se vedete, la distanza tra il testo e il bordo sinistro è maggiore rispetto a quella tra il bordo destro e la fine del testo. Se vogliamo che la distanza tra tutti i bordi sia la stessa basterà inserire un solo valore. 

Eccoci alla fine di questo primo tutorial. E' il mio primo tutorial in assoluto quindi spero di essermi spiegata al meglio, se avete dubbi di qualsiasi tipo non esitate a lasciarmi un commento e scrivetemi anche se volete vedere qualche tutorial particolare! 

Alla prossima.