Cara Mudah Mengedit Cascading Style Sheet (CSS)

Ingin mempercantik tampilan website atau blog tanpa harus menggunakan banyak gambar dan objek lainnya yang akan memberatkan akses ke website atau blog Anda ? Mudah, gunakan saja style atau Cascading Style Sheet (CSS). CSS adalah salah satu teknik yang sudah lazim digunakan dalam mendesain dan menata layout halaman web. Melalui CSS, penataan tampilan halaman web dapat dilakukan secara mudah, praktis, dan terkontrol, langsung melalui HTML - tanpa banyak membutuhkan ‘bantuan’ objek lain seperti gambar dan animasi untuk mempercantik halaman web. Hasilnya, halaman web dan blog secara konsisten dapat tampil cantik, artistik, sekaligus ringan diakses, sesuai tuntutan pengunjung internet.

Contoh letak folder dan file .css yang digunakan oleh beberapa CMS dan blog engine populer antara lain:

• Joomla : /templates/nama-template/css/ 
• Drupal : /themes/nama-template/style.css 
• WordPress : /wp-content/themes/nama-theme/style.css 

Jika situs Anda menggunakan salah satu CMS di atas, maka Anda cukup mengedit file .css di lokasi tersebut. Adapun bagi Anda pengguna Blogger (Blogspot), kode CSS disisipkan langsung pada bagian header file template blog Anda via Edit HTML.

Ada banyak tool gratis untuk membuat atau mengedit file CSS. Anda tidak perlu menghapal kode-kode CSS, cukup klik, edit, dan preview, file CSS siap Anda pakai. Salah satu tool yang penulis sarankan adalah tool gratis TopStyle Lite. TopStyle Lite versi 3.x bisa Anda peroleh secara gratis di alamat : http://topstyle.en.softonic.com/ (atau cari di Google dengan kata kunci TopStyle Lite), ukuran file installer sekitar 1,5 MB. Adapun versi terbaru (4.x) masih dibatasi penggunaannya dan hanya disediakan dalam bentuk shareware atau uji coba gratis.

Download dan install TopStyle Lite ke komputer. Selanjutnya buat atau edit file .css yang Anda maksud. Sebagai contoh, untuk Blogger (Blogspot), salin kode style template Anda di Layout / Template > Edit HTML. Salin mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Paste kode yang tersalin ke jendela TopStyle Lite yang telah terbuka.

TopStyle Lite

Kini Anda cukup mengubah-ubah nilai atau menambahkan property baru beserta value-nya. Caranya lakukan klik pada kelompok Selector yang ingin Anda edit di kolom kiri, misalnya pada bagian selector body. Perhatikan, daftar property dan value yang sudah ada akan muncul di kolom Style Inspector di sebelah kanan. Pada kolom bawah, Anda dapat melihat hasil tampilan yang Anda atur.

Style Inspector

Untuk mengubah nilai, klik item property, misalnya edit property background. Lalu ubah nilainya, misalnya dari green menjadi blue. Perhatikan perubahannya pada tampilan Preview.

Untuk menambahkan property baru, klik pilihan property baru, misalnya font. Berikan nilainya, misalnya font-style Anda isi italic, font-weight Anda isi Bold, dan font-family Anda isi sans-serif. Hasilnya body blog Anda akan menggunakan font Sans-serif, dengan efek cetak miring dan cetak tebal. Untuk memasang ke blog Anda, salin seluruh kode hasil pengeditan, lalu timpakan kembali ke template Blogger Anda menggantikan kode lama, yaitu mulai baris /* Variable definitions hingga baris sebelum </b:template-skin>. Simpan perubahan.

Jika file yang Anda edit adalah file CSS template sebuah CMS, misalnya file style.css Drupal atau Wordpress, maka Anda cukup mengupload file hasil edit dan timpakan ke file lama. Kini tampilan blog Anda sudah cantik sesuai selera Anda.