Selera desain adalah salah satu pembeda yang paling terlihat pada blog, meskipun tanpa konten berkualitas temtu tidak akan banyak membantu pemilik blog untuk menarik pengunjung. Namun, jika biayanya tidak mahal, biasanya selalu baik untuk melakukan perbaikan terus-menerus pada desain blog, betapapun kecilnya.
Biaya yang tidak boleh dikeluarkan pemilik blog terkait dengan desain blog adalah jika itu akan mengorbankan kecepatan loading halaman secara agak signifikan. Kecepatan adalah salah satu faktor penting yang harus selalu diingat setiap kali memiliki godaan untuk membuat perubahan pada pengaturan blog saat ini.
Cara paling sederhana untuk menyorot frasa kalimat memakai CSS adalah hanya dengan menggunakan kode background-color seperti,
CSS:
.hightlight{background-color:#555;color:#fff;padding:5px}
HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>
Bagaimana Cara Membuat Background Color
Tapi, seperti terlihat di atas, warna latar mengisi lebar seluruh baris.Ada beberapa cara ketika menggunakan CSS untuk mengatur warna latar belakang menjadi lebar teks yang sama, bukan seluruh panjang baris. Yang paling sederhana adalah menggunakan
<span>
alih-alih <div>
seperti,CSS:
.hightlight{background-color:#777;color:#fff;padding:5px}
HTML:
<span class="highlight">Bagaimana Cara Membuat Background Color</span>
Bagaimana Cara Membuat Background Color
Pilihan lain adalah memakai,
display: table;
CSS:
h1{display:table;background-color:#999;color:#fff;padding:10px;font-size:1em}
HTML:
<h1>Bagaimana Cara Membuat Background Color</h1>
Bagaimana Cara Membuat Background Color
Pilihan berikutnya adalah menggunakan
display: inline-flex;
CSS:
.hightlight{display:inline-flex;background-color:#222;color:#fff;padding:7px;font-size:1.2em}
HTML:
<div class="highlight">Bagaimana Cara Membuat Background Color</div>
Bagaimana Cara Membuat Background Color
Ada beberapa cara lain untuk mengatur background color untuk membuatnya selebar teks, namun sebagian besar bisa dikatakan agak kurang praktis. Namun, silahkan melihatnya sendiri di sini.Diubah: Mei 20, 2020.
Label: Blogger, CSS, Inspirasi, Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.