Menambahkan warna background pada paragraf tulisan artikel

Sebagai penulis artikel blog, kita harus mengetahui teknik-teknik manipulasi artikel yang mana salah satunya yaitu membuat tulisan dengan background berwarna.

Selain untuk memperindah gaya penulisan, ini juga berfungsi sebagai pembeda antara tulisan utama dan tulisan yang ditekankan atau istilah dalam tata bahasa disebut sebagai emphasize atau penekanan.

Berbeda halnya dengan teknik penggunaan bold, penggunaan background umumnya digunakan untuk paragraf per paragraf sedangkan bold untuk kata per kata.

Untuk melakukan trik ini kita bisa saja menggunakan fitur blockquote di mana warna backgroundnya dapat diatur melalui CSS seperti ini :

blockquote {background:#d3ecd2}

Namun, biasanya blockquote hanya digunakan untuk kutipan dengan menyertakan tanda kutip dan penggunaannya pun hanya sekali dalam satu artikel.

Sedangkan dalam hal ini kita tidak berbicara tentang kutipan melainkan penekanan, bahkan penggunaannya pun akan cukup sering sehingga akan menjadi kurang tepat jika menggunakan blockquote.

Sebagai gantinya kita harus membuat elemen baru, baik itu menggunakan div maupun p dan lain sebagainya yang penting elemen tersebut memiliki nilai block sebagai property defaultnya.

Baik, cara membuatnya adalah seperti ini :

Simpan pengaturan CSS di bawah ini ke dalam template dan letakkan di atas atau sebelum kode </head> atau &lt;!--<head/>--&gt;

.bg-artikel {background:#d3ecd2;margin:10px 0;padding:10px}

Cara menggunakannya yaitu ketika kita membuat tulisan di editor postingan maka ubah mode penulisan menjadi HTML dan masukkan kode seperti di bawah ini.

<div class="bg-artikel">
<p>Blok artikel yang diberi background diletakkan di dalam elemen ini.</p>
</div>

Kode tersebut dapat digunakan sesering mungkin dan dapat diletakkan di manapun di dalam artikel sesuai keinginan.

Contohnya akan menjadi seperti pada gambar di bawah ini :

Catatan

• Silakan ubah kode warna background pada pengaturan CSS sesuai keinginan.

• Apabila di blog terdapat iklan dan iklan tersebut secara otomatis masuk ke dalam elemen, maka untuk menghindarinya overflow, coba tambahkan box-sizing:border-box atau ubah padding horizontal menjadi 0 pada pengaturan CSS elemen.

• Bilamana ingin mengikuti aturan w3c, jangan pernah menempatkan div di dalam p.

© Blogizty