CSS adalah singkatan dari
Cascading Style Sheets, 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 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.
Keuntungan Penggunaan CSS
- Mempermudah Pengaturan Web.
Penulisan kode kode CSS akan dipisahkan dengan kode html sehingga
pemilik web tidak akan bingung untuk mengganti dan memperbaiki tata
letak maupun postingan yang dipublikasikan. Oleh karena itu CSS
menjadikan halaman lebih menarik dan nyaman untuk dikunjungi.
- Memperingan Penggunaan Bandwith. Semakin lenggangnya kuota bandwith akan memberi dampak kepada banyaknya pengunjung dalam waktu bersamaan tanpa lelet aksesnya.
- Mempercepat Web Browser Untuk Mengakses Situs Kita. Pencarian situs browser atau serch engine
akan mendeteksi melewati kode kode bahasa pemograman yang kita gunakan,
disini CSS berperan sebagai penyederhana bahasa pemograman sehingga
akses search engine yang menuju ke halaman web kita akan lebih cepat
tersorot dan memungkinkan web kita untuk nangkring di nomor satu atau
paling tidak halaman pertama.
- Reformatting atau Progressive Enhancement.
Dengan perubahan sederhana dari satu baris, sebuah stylesheet yang
berbeda dapat digunakan untuk halaman yang sama. Ini memiliki keunggulan
untuk aksesibilitas, serta memberikan kemampuan untuk menyesuaikan
halaman atau situs ke perangkat target yang berbeda. Selain itu,
perangkat tidak dapat memahami styling masih akan menampilkan konten.
- Fleksibilitas. Dengan menggabungkan
CSS dengan fungsionalitas sebuah Content Management System, cukup
banyak fleksibilitas dapat diprogram ke dalam bentuk pengirenentukan
nilai properti sebagai ekspresi sederhana (seperti margin-left: 10% -
3em + 4px ;). Hal ini berguna dalam berbagai kasus, seperti menghitung
ukuran kolom dikenakan kendala pada jumlah semua kolom.
Kekurangan Penggunaan CSS
- Kurangnya Variabel. CSS tidak
berisi variabel. Hal ini membuat perlu untuk melakukan "mengganti semua"
ketika salah satu keinginan untuk mengubah fundamental konstan, seperti
skema warna atau berbagai ketinggian dan lebar.
- Browser Dukungan konsisten. Tidak
semua browser mengartikan kode CSS dengan cara yang sama. Jadi
kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang
satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa
tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode
khusus browser tertentu jika memang dibutuhkan agar tampilan web anda
terlihat baik di semua browser.
- Batasan Kontrol Vertikal. Meskipun
penempatan horisontal unsur-unsur umumnya mudah untuk mengontrol,
penempatan vertikal sering unintuitive, berbelit-belit, atau tidak
mungkin. Tugas-tugas sederhana, seperti berpusat elemen vertikal atau
mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah
viewport, baik memerlukan aturan style rumit dan unintuitive, atau
aturan sederhana namun banyak yang tidak didukung.
- Pengendalian Bentuk Elemen. CSS
saat ini hanya menawarkan bentuk persegi panjang. Sudut bulat atau
bentuk lainnya mungkin memerlukan non-semanurangan, dan kelemahan yang
ditemukan melalui penggunaan CSS "murni", kegunaannya dalam web desain
masih terlihat dengan cara lain. Karena aksesibilitas, konten web untuk
ponsel ponsel dan PDA menjadi dapat diakses karena CSS. CSS mengkonsumsi
bandwidth lebih rendah. Dan dengan CSS, hampir semua informasi tata
letak tinggal di satu tempat: dokumen CSS. Karena informasi tata letak
yang terpusat, perubahan ini dapat dilakukan dengan cepat dan global
secara default.
Menuliskan CSS Dengan Baik
Saat pertama kali menggunakan CSS, menuliskan kodenya memang akan terasa
melelahkan dan sangat rumit jika sebelumnya anda sudah terbiasa membuat
sebuah website hanya dengan menggunakan table. Bagaimanapun juga
setelah kita mengetahui pembuatan website dengan table bukanlah standar
web yang baik, kita pun akan mulai beralih dan mempelajari CSS.
Saya rasa semua orang pasti bisa menuliskan CSS, bahkan saat ini banyak
sekali perusahaan yang bergerak dibidang converting PSD ke HTML dengan
CSS. Tapi satu hal yang jadi pertanyaan, "Apakah CSS yang dituliskan
cukup baik?". Oleh sebab itu disini saya akan membahas tentang cara
menuliskan kode CSS yang baik.
- Memberikan indentasi (jarak) setiap menuliskan properti CSS
Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara
properti yang satu dengan yang lainnya. Pemberian jarak akan membuat
kode CSS terorganisasi dengan baik sehingga dapat dengan mudah dicari.
Contoh:
Body {
background: url(images.jpg);
font: 12px arial;
height: auto;
left: 0;
margin: 0 auto;
padding: 0;
top: 0;
width: 100%;
}
- Disusun Secara Alphabetical
Penyusunan tulisan properti CSS secara alphabetical juga adalah cara
yang baik dan mempermudah pencarian properti yang mau kita rubah
nilainya. Perhatikan pada properti CSS pada poin sebelumnya, pada
dreamweaver fasilitas ini sudah disediakan dengan menekan CTRL + Space.
- Penulisan Kode Secara CSS Secara Singkat
Contoh:
.sample {
border-color: #000;
border-style: solid;
border-width: 1px;
}
Anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada
penulisan properti border diatas ini adalah contoh penulisan yang kurang
baik, Seharusnya properti diatas dapat dibuat singkat dengan
menuliskannya seperti contoh dibawah,
.sample {
border: 1px solid #000;
}
Penulisan kode yang pendek akan mempercepat proses penulisannya, selain
itu juga akan mempercepat tingkat cluseter dalam CSS sehingga bisa lebih
cepat juga dirender oleh browser.
Contoh:
html, body {
height:100%;
min-height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan
berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan
CSS, sehingga kode anda tidak terpengaruhi browser dan browser
menampilkan item CSS anda dengan benar. Di atas adalah beberapa contoh
untuk mereset CSS pada beberapa elemen.
- Membuat Pernyataan Comments
Contoh:
/*membuat layout*/
.layout {
}
/*membuat sidebar*/
.sidebar{
}
Membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk
membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini
juga membantu anda untuk mempermudah penelusuran kode.
- Hapus Semua Kode CSS Yang Tidak Terpakai
Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi
dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai
atau pisahkan dalam file referensi yang berbeda. Apabila anda
belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan
banyaknya atribut class dan ID yang sudah tidak digunakan.
Ok sekian tips dari saya dalam menuliskan CSS yang baik, hal-hal kecil
yang sering dilupakan namun sangat berarti bila diterapkan.
Mudah-mudahan bisa bermanfaat dan bisa di amalkan.
