5 Hal Yang Wajib Diketahui Saat Mengedit CSS

Bagi sobat yang sedang gila gilanya edit tampilan blog, pasti tau yang namanya CSS, kan?? Memang tampilan visual sebuah blog sangat penting. Selain kenyamanan pembaca dan eye catching, kecepatan loading blog juga sangat ditentukan oleh tampilan blog itu sendiri. Salah satu pertimbangan Google untuk hasil SERP maksimal, selain sitelink dan hasil SEO lainnya adalah Loading Blog. Loading blog yang cepat punya kesempatan lebih besar dan lebih baik dimata Google. 

Kali ini saya akan share 5 hal yang sobat semua wajib ketahui saat mengedit tampilan atau CSS.

1.Letak. Yang ini saya akan mencoba angkat kembali. Pasti sobat udah tau, kan?? Letak CSS biasanya terletak dari <b:skin><![CDATA[ sampai ]]></b:skin>. Pengambarannya kira kira seperti ini..

<b:skin><![CDATA[
..............................................................................................................................................................................................................................................................................................

]]></b:skin>

Dititik titik itulah terdapat CSS, meskipun tidak menutup kemungkinannya terdapat langsung di elemennya. Lihat contoh di bawah..

<img src="http://websiteiniasemua.com/img/aaaaaaa.jpg" alt="belajar css" width="304" height="228" border="10px groove" />

Cara penempatan CSS seperti ini dinamakan inline style. Biasa digunakan untuk menjadi "pembeda" dari lain. Misalnya digunakan pada tulisan, judul atau elemen lain yang ingin dibedakan.

2. Margin and Padding. Banyak designer blogger yang masih salah kaprah tentang beda margin dan padding. Fungsinya sama untuk mengatur jarak atau posisi. Sebenarnya masih ada properti postion yang bisa digunakan. Fungsi Margin dan Padding sangatlah beda. Margin cenderung jarak di luar elemen sedangkan Padding jarak di dalam elemen dengan pusatnya(konten). Bingung??2 elemen ini dipecah oleh border. Berikut deskripsi amatirnya..

3. Property dan Value. Yang ini sobat semua wajib tau. Value yang sangat menentukan tampilan nantinya. Value ini harus sesuai dengan Propertynya. Meskipun property yang bisa value berbeda beda, namun intinya tetap sama. Misalnya, px dan %, em, pt dan lain lain. Saat mengedit CSS, lihat dulu propertynya, misalnya width, maka valuenya bisa dengan px, cm, auto dan juga %. Jadi, ketahui dulu value dari setiap property CSS yang akan digunakan. Sebaiknya bereksperimen dulu menggunakan developer tools dari setiap browser yang sobat pakai. Lihat hasilnya, betulkan valuenya maupun propertynya kemudian baru pasang di html sebenarnya..

4. ID dan Class sebagai CSS selector. ID  dan Class bisa sangat berbeda. Fungsinya bagi CSS sama, untuk menjadi selector atau bagian yang akan diubah oleh CSS yang kemudian diletakkan pada HTML. id bisa disebut dengan Individual, dalam artian bahwa elemen yang akan di rubah adalah tunggal. Lihat Contoh di bawah..

#belajarcss {
text-align: center;
background: whitesmoke;
}

Berdasarkan contoh di atas, maka elemen yang diubah adalah elemen dengan id="belajarcss" atau id='belajarcss' karena ada yang menggunakan petik 1 atau 2.
Catatan =

1. Jangan memulai id dengan angka karena tidak akan bekerja di Firefox / Mozilla Firefox.
2. Saat ingin memasang CSSnya, gunakan '#' sebagai atributnya. Lihat contoh di atas.

Sedangkan untuk attribut class yang dirubah adalah sekumpulan elemen yang tergabung dalam sebuah grup tertentu. Jadi, didalamnya terdapat banyak elemen. Lihat contoh di bawah..

.sidebar {
text-align: center;
background: whitesmoke;
}

Berdasarkan contoh di atas, maka elemen yang diubah adalah semua elemen yang tergabung dalam class="sidebar" atau class='sidebar'.
Catatan = 

1. Jangan memulai class dengan angka karena hanya bisa di Internet Explorer.
2. Saat ingin memasang CSSnya, gunakan '.' sebagai atributnya. Lihat contoh di atas.

5. Hasil. Hasil sangat penting untuk diketahui. Sobat harus lihat hasil atau preview sebelum kode CSS tersebut benar benar dipasang. Baca : Addons untuk edit blog.

CSS hanyalah menjadi pengiring konten dalam membentuk SEO. Cara di atas hanya menjadi Navigator. Selalu siapkan konten fresh, original dan penuh kreatifitas dalam perjalanannya.
Semoga beberapa hal "kecil" bisa membantu sobat dalam mengedit tampilan blog/web.

Have a nice blogging day..

reference : w3schools