Pengembangan website menggunakan HTML atau PHP saja belum cukup. akan membutuhkan CSS yang bisa mengatur seluruh tampilan website sehingga terlihat lebih menarik dan sesuai kebutuhan pengguna. Saat ini hampir setiap website menggunakan CSS sebagai tools untuk mengatur berbagai tampilan di dalamnya. CSS (Cascading Style Sheet) biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman, hanya perlu menulis markup untuk situs. Tags, seperti < font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website dengan berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Maka, W3C membuat CSS untuk menyelesaikan masalah ini. HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website.
Pengertian CSS
CSS (Cascading Style Sheets) berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen yang tertulis di bahasa markup. CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). Ada banyak hal yang dapat dilakukan menggunakan CSS dibandingkan dengan bahasa pemrograman inti seperti HTML dan PHP. Ketika menggunakan CSS, maka dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai. CSS juga bisa untuk mendesain layout, variasi tampilan di berbagai perangkat yang berbeda, dan berbagai efek yang dipakai di dalam website. CSS sangat mudah dipelajari, tapi juga powerful karena dapat mengontrol penyajian tampilan dari dokumen HTML. Mulai dari yang simpel sampai kompleks. Tidak heran jika saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP.
Hubungan Antara CSS dan HTML
HTML dengan CSS, keduanya sangat berhubungan erat. CSS adalah kode-kode yang dipakai untuk mendesain sebuah laman HTML. Jika HTML diibaratkan sebagai seorang manusia, maka CSS adalah pakaian yang membuat penampilan menjadi semakin menarik. CSS akan membantu para web designer untuk mengubah tampilan teks (baik bentuk dan ukuran font maupun warnanya), menambahkan gambar, hingga mengubah latar belakang sebuah halaman HTML. Keberadaan CSS bisa terlihat dengan adanya atribut warna teks. Di sini CSS memberi perintah berupa teks berwarna biru melalui tag < span> dengan atribut class=”warna”. Jadi setiap tag <span > muncul, teks yang mengikutinya akan berwarna biru. Saat ingin mengganti warnanya, tinggal mengganti CSS pada tag <style > dari “blue” ke warna lain, maka teks yang awalnya berwarna biru akan berubah warna.
Kelebihan dan keuntungan CSS
Mudah untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak. Saat ingin membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML. Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah. Dengan CSS, dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain. Dengan CSS tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang, dan tidak akan membuang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir. Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan untuk menerapkan berbagai macam style pada satu halaman HTML.
Dengan belajar CSS, sebagai seorang web designer akan bisa lebih mudah mengendalikan website, karena tidak harus mengutak-atik HTML saat harus memprogram ulang tampilan laman. Bahkan pada CSS tingkat lanjut, bisa mengatur website lewat medium yang lain seperti suara. Keuntungan lain dari belajar CSS adalah tingkat compatibility yang tinggi. CSS kompatibel dengan kebanyakan browsers dan sangat user-friendly. Menguasai CSS bahkan bisa mendapatkan pemasukan tambahan, dengan menjadi seorang freelance web designer atau bahkan menjual jasa pada pihak yang membutuhkan. CSS juga akan melatih untuk membuat website yang beragam. Jadi bisa membuat bervariasi website tanpa harus menghabiskan waktu untuk belajar ulang.
Cara kerja dan Peran CSS
CSS beroperasi melalui tag <style > dengan atribut class warna. Dengan adanya CSS pada HTML maka pengaturan warna teks akan menjadi lebih mudah. Saat warna teks ingin diganti, cukup mengetikkan tag <span > tanpa harus menulis ulang perintah. Jadi bisa disimpulkan bahwa CSS akan menghemat waktu dengan perintah-perintah yang efisien. Hal ini bisa terjadi karena CSS sendiri dikembangkan untuk bisa mengubah tampilan laman website tanpa harus mengganti isi konten. Dengan CSS untuk mengubah dan memprogram ulang tampilan website pun bisa dilakukan dalam waktu cepat.
Peran CSS untuk website sangatlah penting, karena tanpa adanya CSS, tampilan website akan membosankan atau bahkan membutuhkan waktu lama untuk loading. Jika hanya bisa bergantung pada HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” tapi juga butuh waktu lebih lama karena harus berulang kali mengetikkan perintah.
Baca juga : Customer Relationship Management (CRM) Untuk Bisnis
Macam-macam CSS
1. Inline style sheet
CSS model ini adalah CSS dengan perintah pemrograman yang letaknya ada pada objek. Misalnya saat mengubah sebuah tulisan pada laman tertentu di website, inline style sheet CSS harus menempel pada elemen tulisan tersebut. Tambahkan tag <style > saja untuk menerapkan CSS ini. Inline CSS adalah penempatan CSS yang langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Contohnya.
| < h1 style=”font-size:30px;color:blue;”>Cek beritama utama ini!< /h1> |
CSS di atas berarti hanya akan mempengaruhi paragraf yang spesifik di dalam satu file .html dan muncul dengan warna biru (blue) ukuran font 30px.
2. External style sheet
CSS ini letaknya berbeda dengan laman yang akan diubah. Cara ini lebih praktis daripada inline style sheet karena bisa menghemat ruang dan bisa digunakan berulang-ulang untuk laman web yang berbeda. CSS tipe ini bisa dikenali lewat tag <link rel >. Tag ini akan menghubungkan halaman coding pada external style sheet CSS yang terpisah. External CSS adalah penempatan baris kode CSS menggunakan file .css. ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan website secara keseluruhan. Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML yang ingin diatur tampilannya. Jika menggunakan penempatan secara eksternal, harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di bawah ini.
| < head> < link rel=”stylesheet” type=”text/css” href=fileCSSAnda.css”> < /head> |
Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh file CSS menggunakan nama ‘fileCSSAnda.css’ yang dapat disesuaikan dengan letak file CSS di dalam direktori website. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.
3. Embedded style sheet
CSS model ini sama seperti inline style sheet, sama-sama berada pada satu laman coding. Maka tidak mengherankan jika embedded style sheet terkadang disebut dengan internal style sheet. Biasanya CSS ini diapit oleh tag <head > </head > dan diawali dengan tag <style >. Embedded style sheet sering digunakan untuk mengatur laman web dengan tampilan yang unik. Misalnya dalam satu paragraf tulisan ada kalimat yang berbeda dan hal tersebut terus berulang. Untuk penempatan CSS menggunakan cara internal sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa file CSS terpisah. Namun di dalam penggunaan CSS secara internal, baris kode HTML dituliskan di bagian atas (header) file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. CSS ini bisa dipakai untuk menciptakan tampilan yang unik. Contohnya seperti di bawah ini.
| < head> < style> Body { background-color:blue; } P { font-size:20px; color:mediumblue; } < /style> < /head> |
Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 20px, dan ‘medium blue’ font ke dalam satu halaman HTML.
Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk mengimplementasikan CSS ke dalam website. Cara ini juga paling populer atau sering dipakai oleh banyak pengembangan website dibandingkan dengan cara yang lainnya. Sedangkan cara internal dan inline juga bisa dipakai untuk menambahkan format konten yang khusus atau berbeda dengan konten yang lainnya.
Baca juga : Content Management System (CMS) Untuk Pemula
Fungsi CSS
Jika sudah pernah mencoba mengembangkan website menggunakan HTML atau PHP, pasti akan merasa sedikit kesulitan untuk mendesain tampilannya. Apalagi jika membuat tampilan yang cukup kompleks di proyek yang besar. HTML memang bukan dikembangkan untuk mendesain tampilan depan website. Untuk membuat tampilan website yang menarik dan mudah, menggunakan CSS bisa menjadi salah satu solusinya. CSS tentu tidak hanya mengatur tombol saja. Namun juga bisa mendesain berbagai macam tampilan sehingga sesuai dengan kebutuhan. Ada beberapa keuntungan lain yang bisa didapatkan ketika menggunakan CSS, seperti:
1. Mempercepat Proses Desain
Dengan CSS, saat menggunakan desain yang sama di beberapa halaman HTML, tidak perlu menyalin satu per satu ke setiap file halaman. Cukup mengetikkan satu kali fungsi CSS kemudian menggunakannya di berbagai halaman HTML. Fungsi CSS yang dibuat dalam satu file dapat dipanggil ke berbagai halaman web tanpa harus menyalin baris kode fungsi berkali-kali.
2. Halaman Lebih Cepat Dimuat
Dengan menggunakan CSS, tidak perlu menuliskan atribut tag HTML di setiap file. Cukup menulis satu aturan CSS dan menerapkannya di berbagai file yang membutuhkannya hanya dengan memanggilnya. Jadi satu file hanya mengandung sedikit baris kode yang dimuat, yang akan membuat proses download menjadi lebih cepat.
3. Proses Pemeliharaan Mudah
CSS memudahkan dalam mengubah tampilan di berbagai halaman. Hanya dengan mengubah fungsi style di file CSS maka seluruh tampilan yang menggunakan fungsi tersebut akan berubah secara otomatis.
4. Style Lebih Beragam Dibanding HTML
CSS mempunyai atribut lebih beragam dibandingkan dengan HTML. Keuntungannya yaitu akan mempunyai lebih banyak pilihan tampilan halaman website.
5. Kompatibel Dengan Berbagai Macam Perangkat
CSS memungkinkan konten dapat dioptimasi di lebih dari satu perangkat. Misalnya, ketika memproses sebuah dokumen. Jika menggunakan CSS, bisa menyesuaikan tampilan dokumen di perangkat versi lama sekaligus di versi yang baru.
6. CSS Menjadi Standar Pengembangan Website
Hampir seluruh website yang ada di internet menggunakan CSS. Selain tampilannya yang lebih menarik, kebanyakan browser populer saat ini juga mendukung CSS. Jika ingin mengembangkan website yang sesuai standar browser populer, sebaiknya gunakan CSS.
Cara Kerja CSS
CSS membuat style di dalam halaman web, dapat berinteraksi dengan elemen HTML. Elemen merupakan komponen HTML dari sebuah halaman web. Berikut adalah salah satu contoh elemen di HTML:
| <p >This is my paragraph!</p > |
Jika ingin membuat paragraf muncul dengan warna lain dan bold, bisa menambahkan baris CSS ini:
| p { color:pink; font-weight:bold; } |
Pada contoh di atas, “p” (paragraf) merupakan bagian baris kode CSS untuk menspesifikasikan elemen HTML atau biasa dikenal dengan nama ‘selector’. Di dalam CSS, selector ditulis di bagian kiri sebelum tanda kurung kurawal (curly bracket) pertama. Sedangkan informasi yang ada di dalam tanda kurung kurawal merupakan sebuah deklarasi yang di dalamnya mengandung properti dan nilai yang diaplikasikan ke dalam selector. Contoh dari properti adalah ukuran font, warna, layout, format, dan lain sebagainya. Sedangkan nilai yang dimaksud adalah pengaturan yang diterapkan ke dalam properti. Misalnya dari contoh di atas, “color” dan “font-weight” merupakan properti, sedangkan “pink” dan “bold” merupakan sebuah nilai. Jadi seluruh baris kode di dalam tanda kurung kurawal merupakan sebuah deklarasi, sedangkan “p” (HTML paragraf) merupakan sebuah selector. Baik deklarasi dan selector merupakan prinsip dasar dari penggunaan CSS dan HTML. Prinsip ini juga dapat digunakan untuk mengatur ukuran font, warna background, format teks, dan lain sebagainya.
Baca juga : Ide Bisnis di Bulan Ramadhan dan Momen Spesial untuk Bisnis Anda
Jika Anda pebisnis yang menjual produk/jasa apapun dan ingin meningkatkan penjualan bisnis, maka Anda perlu memiliki situs website toko online untuk mempromosikan produk. Anda dapat membuat website toko online di Jasa Pembuatan Website Toko Online Profesional. Dengan bantuan dari jasa pembuatan website akan membatu anda untuk mewujudkan situs website yang di dambakan.
Terimakasih dan semoga bermanfaat… Salam sukses untuk kita semua ?
