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


definitions hingga baris sebelum . 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.


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 . 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.


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


Cara Mudah Mengedit Cascading Style Sheet (CSS)

Recommend Documents