Mengenal Cascading Style Sheet (CSS) untuk Mempercantik Halaman Web dan Blog

Anda punya website atau blog ? Ingin mempercantik tampilannya 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.

Cascading Style Sheet (CSS) adalah salah satu teknik untuk
menata layout dan mempercantik tampilan halaman web.
Penataan layout dan kontrol keseragaman tampilan seluruh
halaman di website atau blog dapat dilakukan via kode CSS.
CSS dikembangkan untuk melengkapi kemampuan HTML yang
mengalami keterbatasan dalam hal penataan layout. Dengan
mengkombinasikan kode HTML dan CSS, sebuah tampilan
halaman web dapat dibuat artistik, penuh warna, dan tetap
ringan. Pewarnaan dan posisi tampilan diatur melalui kodekode
dan bukan dengan menyisipkan file-file gambar atau
animasi ke halaman web karena memberatkan pengunjung.
Dalam contoh kasus di awal, Anda cukup mengedit kode CSS
setiap kali ingin mengganti warna, ukuran, atau posisi
elemen-elemen penyusun halaman web Anda.

Seperti Apa Kode CSS itu ?
Berikut contoh sebaris kode CSS dan penjelasannya
:
H2 {
font-family: Arial;
font-style: italic;
color: green
}
Baris kode di atas digunakan untuk mengatur
lebih lanjut tag html
di halaman web.
Jika di halaman web ditemukan baris teks
yang menggunakan tag html heading 2 (h2),
maka teks tersebut secara otomatis akan ditampilkan
dengan font Arial yang diberi efek
cetak miring dan berwarna hijau.
Bayangkan, jika di sebuah halaman web terdapat
10 sub judul artikel yang menggunakan
heading 2
, maka Anda tidak perlu repot
mengatur jenis font dan warnanya satu per
satu. Apalagi jika kode CSS di atas Anda
terapkan ke seluruh halaman website atau
blog Anda, sangat efisien !
Secara umum, berikut rumusan kode CSS :
Selector1 {
Property1: value1;
Property1: value2;
Property#: value#;
}
Selector2 {
Property1: value1;
Property1: value2;
Property#: value#;
}
Selector3 {
Property1: value1;
Property1: value2;
Property#: value#;
}

Setiap item pengaturan CSS selalu diawali
dengan Selector. Selector bisa berupa tag
html biasa (seperti h2 di atas), atau bisa juga
didefinisikan sendiri namanya menjadi sebuah
Class, misalnya .header, #footer, atau
frase lainnya yang mudah Anda ingat.
Adapun isi pengaturan CSS disebut dengan
Declarations. Pendeklarasian isi pengaturan
sebuah Selector CSS diawali simbol { dan
diakhiri dengan simbol }. Masing-masing item
pengaturan di dalam Declaration disusun
dengan cara menyebutkan nama-property:
diikuti value; (perhatikan contoh rumusan).
Sebagai catatan, jika selector yang Anda
gunakan adalah tag HTML biasa, maka penerapan
CSS akan dilakukan secara otomatis
ke setiap tag HTML di halaman web. Namun,
jika Anda mendefinisikan sendiri namanya
menjadi Class, maka untuk menerapkannya
ke halaman web Anda harus memanggil Class
tersebut di tag html yang akan Anda atur.
Sebagai contoh, jika Anda ingin mengatur
teks khusus untuk header atau footer, maka
buat kode CSS, misalnya sebagai berikut :
.header {
font-family: Tahoma;
font-style: italic;
color: red
}
#footer{
font-family: Tahoma;
font-style: italic;
color: blue
}
Selanjutnya di bagian kode html untuk menuliskan
header atau footer, Anda sisipkan
pemanggilan Class seperti berikut :
Ini sebaris kalimat yang akan
muncul sebagai header di halaman web dengan font
Tahoma, dicetak miring, dan berwarna merah.

--------
Ini footer dengan font Tahoma, cetak
miring, dan berwarna biru.


Bagaimana Menyisipkan CSS ke HTML ?
Ada beberapa teknik yang bisa dipakai untuk
menerapkan kode CSS :
• Inline: menerapkan kode CSS secara
langsung ke dalam halaman web di selasela
kode HTML. Penyisipannya menggunakan
atribut Style. Contoh :

Paragraf
diatur berwarna merah dan dicetak miring.

Cara ini tidak disarankan, karena kontrol
dan pengeditannya akan sama repotnya
seperti saat mengedit tag html-nya.
• Internal: mendeklarasikan kode-kode CSS
di bagian dengan tag

Cara ini bisa digunakan pada model website
atau blog berbasis template. Contoh
penerapannya bisa Anda temukan pada
template-template Blogger (Blogspot).
• External: mendeklarasikan kode CSS
pada file .css tersendiri, lalu memanggilnya
melalui tag di dalam tag
HTML. Contoh :



Cara ini paling ideal untuk diterapkan di
berbagai jenis website. Cara ini sangat
disarankan, karena kontrol dan pengeditan
layout seluruh halaman web cukup
diatur melalui satu file .css.

Contoh letak folder dan file .css yang
digunakan oleh beberapa CMS populer antara
lain :
• Joomla : /templates/namatemplate/
css/
• Drupal : /themes/namatemplate/
style.css
• Wordpress : /wp-content/themes/namatheme/
style.css
Jika Anda menggunakan salah satu CMS di
atas, maka Anda cukup mengedit file .css di
lokasi tersebut. Inilah yang dilakukan oleh
para pembuat template gratis yang banyak
ditawarkan di internet itu.
Tool untuk Membuat dan Mengedit CSS
secara Cepat dan Mudah
Anda sudah sedikit tahu apa itu CSS dan
bagaimana strukturnya. Anda juga sudah
paham cara meletakkan kode CSS di halaman
web dan contoh filenya di beberapa CMS
populer.
Persoalan Anda mungkin kembali ke masalah
teknis. Apa saja tag html untuk Selector ? apa
saja property dan value yang harus Anda
pakai ? bagaimana cara menyusun kode CSS
yang baik ? dan seterusnya.
Jangan keburu mengurungkan semangat. Ada
banyak tool gratis untuk membuat atau
mengedit file CSS. Anda tidak perlu menghapal
nama-nama teknis pengkodean, cukup
klik dan preview, file CSS siap Anda pakai.
Salah satu tool yang penulis sarankan adalah
tool gratis TopStyle Lite :
http://topstyle.en.softonic.com/download
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 >
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 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.
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 .
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.


Selamat mencoba !

(sumber : www.buletindo.com)

Posted in: Komputer