Cara Mudah Mengedit Cascading Style Sheet (CSS)

 Cara Mudah Mengedit Cascading Style Sheet (CSS)
Riska Islaminati
[email protected] :: http://www.komputeran.com/2012/04/cara-mudahmengedit-cascading-style.html
Abstrak
CSS 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.
Kata Kunci: CSS, HTML
Pendahuluan
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur
dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft
Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer,
images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file.
Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat
dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna
body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse
over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter
Lisensi
Dokumen:
Copyright
©
2008-2014
ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Lisensi Dokumen:
Copyright © 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda.
Pembahasan
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
Lisensi Dokumen:
Copyright © 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
definitions hingga baris sebelum </b:template-skin>. Paste kode yang tersalin ke
jendela TopStyle Lite yang telah terbuka.
Kini Anda cukup mengubah-ubah nilai atau menambahkan property baru beserta valuenya. 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.
Lisensi Dokumen:
Copyright © 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
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 fontfamily Anda isi sans-serif. Hasilnya body blog Anda akan menggunakan font Sansserif, 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.
Lisensi Dokumen:
Copyright © 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Penutup
Pada pembahasan tersebut merupakan pengertian dan cara menggunakan program CSS
pada Wordpress dan semoga bermanfaat bagi para pembaca.
Referensi
Sumber referensi yang digunakan untuk menulis artikel ini melalui internet
Biografi
Riska Islaminati
Teknik Informatika
Artificial Informatics (D3)
AMIK Perguruan Tinggi Raharja
Email: [email protected]
Add my pin : 2A675A12
Lisensi Dokumen:
Copyright © 2008-2014 ilmuti.org
Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
(nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org