Kupas Tuntas Apa Itu CSS, Fungsi & Contohnya

Tanpa CSS, sebuah halaman web atau blog, akan datar tanpa warna dan penataan apapun. Bahkan, bisa berantakan. Dan tak kan ada pengunjung yang betah bersalancar pada web dan blog yang demikian. Kenapa?






CSS adalah singkatan dari Cascading Style Sheet. Secara gamblang, artinya gaya tampilan halaman. Dikeluarkan oleh Consorsium W3C pada tahun 1996. Tujuannya, menetapkan standar penulisan bahasa script dalam menata sebuah halaman web. Tanpa merujuk pada acuan tersebut, maka sebuah halaman web atau blog, tidak akan bisa diubah sesuai desain atau layout yang diharapkan. Jadi dibutuhkan kode-kode tertentu, agar sebuah elemen bisa diutak atik agar menjadi menarik secara visual. Misalnya anda ingin membuat sebuah kata atau teks berwarna merah, maka anda tidak akan bisa melakukannya seperti saat bekerja pada aplikasi Microsoft Word, dimana semua warna, sudah tesedia dan anda tinggal klik untuk mengganti warna sebuah kata. Pada halaman web, Anda harus menggunakan kode CSS tertentu agar kata yang anda inginkan, bisa berubah menjadi warna merah. Perintah atau kode untuk menampilkan warna merah tersebut, sudah ada acuannya, sudah ada standarnya.

Jika demikian, berarti dibutuhkan sangat banyak kode CSS untuk menata tampilan sebuah halaman web? Tentu saja. Itu sebabnya, CSS itu terus berkembang dari waktu ke waktu, baik dari segi jumlah kode, maupun dari cara penulisannya. Hingga tulisan ini saya luncurkan, CSS sudah sampai pada versi 3 atau dikenal dengan istilah CSS3. Tujuannya, agar pengelolaan sebuah Web atau blog dari sisi desain tampilan, semakin mudah dan dinamis. Akan mendukung untuk setiap perangkat dan aplikasi yang relevan, khususnya terhadap beragam Sistem Operasi dan Browser. Saat sebuah halaman Web dibuka dengan browser yang berbeda, bahkan melalui sistem operasi yang berbeda, maka berkat CSS yang valid, tampilannya akan tetap sama.


Tapi jangan lupa,
CSS tidak bisa berdiri sendiri tanpa bahasa script lain, terutama HTML sebagai bahasa dasar dan utama dalam membangun halaman web. Karena ibaratnya, CSS itu adalah tukang hias. Tanpa ada sebuah elemen atau struktur sebuah bangunan, yang akan dihias apanya. Jadi kode untuk membuat sebuah elemen pada sebuah web atau blog, adalah HTML. Lalu, baru CSS dibutuhkan untuk menata elemen tersebut. Mulai dari berapa ukurannya, posisinya, warnanya, dan efek-efek visual tertentu. HTML itu, laksanan lahan tandus. Hanya frame dan kapling-kapling kosong. Sedang CSS itu laksana tukang dan Desainer yang mengisi dan menghias lahan tersebut menjadi sesuatu yang indah dan mempesona.



CSS itu adalah bahasa pemrograman yang fungsinya untuk menata desain tampilan sebuah halaman web atau blog.


Silahkan cermati dibawah ini:




Nah itulah contoh kode CSS.
Lalu apa arti dari kode tersebut?

#header-wrapper adalah elemen header pada sebuah halaman web. Tepatnya, itu adalah penamaan salah satu struktur dari template Blogger. Maka semua kode CSS dibawahnya, fungsinya adalah untuk memerintahkan penataan terhadap elemen header tersebut. Kode height: 120px itu artinya adalah untuk memerintahkan bahwa tinggi elemen header tersebut adalah 120 pixles. Kemudian semua kode padding, adalah untuk memerintahkan bahwa setiap elemen yang ada pada kolom header tersebut, berjarak sebanyak 30 pixles, baik dari kiri, dari kanan, dari atas sampai dari bawah. Selanjutnya, background: #000000 artinya perintah bahwa space header tersebut, latar belakangnya berwarna hitam. Dan kode color: #ffffff artinya setiap huruf atau teks yang ada pada header tersebut, akan berwarna putih. Contoh tampilannya lebih kurang akan menjadi seperti ini:



Ya terserah anda. Mau baca baca dulu tulisan yang lain, atau langsung minggat dari sini. Saya pikir sebaiknya minggat sajalah.