Halo Sob! Kali ini admin akan menjelaskan mengenai CSS. Tetapi sebelum membahas lebih jauh Apa Itu CSS, kalian harus memahami terlebih dahulu basic dasar dari HTML, kenapa demikian? karena keduanya mempunyai hubungan yang saling terikat satu sama lain.
Baca Juga: Apa Itu HTML? Pelajari Semuanya, Secara Lengkap
CSS merupakan bagian dari web desain yang tak terpisahkan. Dengan CSS kita bisa merubah perwajahan (front-end) atau tampilan sebuah halaman web. Jika sebuah halaman web tidak menggunakan CSS, maka tampilannya akan membosankan dan tidak menarik. Oke langsung saja kita ke pembahasannya Cekidot!
DAFTAR ISI
Apa Itu CSS?
CSS adalah kepanjangan dari “Casing Style Sheets” merupakan bahasa desain sederhana yang dimaksudkan untuk menyederhanakan proses pembuatan halaman website dan CSS juga merupakan kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.
CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, kita tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah kita membuat sebuah style sheet, kita dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Sejarah CSS
CSS pertama kali diusulkan oleh Hakon Wium Lie pada 10 Oktober 1994. Pada saat itu, Lie bekerja dengan Tim Berners-Lee di CERN . Beberapa bahasa style sheet lain untuk web diusulkan sekitar waktu yang sama, dan pada saat mendiskusikan di sebuah forum publik. Akhirnya World Wide Web Consortium menghasilkan W3C CSS Recommendation (CSS1) pertama yang dirilis pada tahun 1996. . Kemudian W3C menetapkan CSS sebagai style sheet standart dalam pembuatan sebuah website. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explore, karena pada saat itu kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web. Setelah CSS distandarisasikan oleh W3C, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Perkembangan CSS
CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan padiing.
CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
CSS 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
Fitur terbaru CSS 3 :
1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.
2. Beberapa efek teks, seperti teks berbayang, kolom koran dan “Word-Wrap”.
3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.
Hubungan CSS Dengan HTML
Pada HTML, terdapat fasilitas standar seperti yang sudah dituliskan, tapi bagaimana jika kita mempunyai banyak halaman dalam sebuah situs? disinilah CSS diajak untuk bergabung dan bekerjasama. CSS dibuat terpisah, dalam artian bahwa satu set kode CSS dapat dipanggil atau dipakai dalam beberapa halaman web, dengan demikian tidak perlu repot mengatur tiap halaman paga kode HTML nya. Intinya adalah walaupun HTML juga bisa dibuat untuk mengatur tampilan halaman, tetapi si CSS akan lebih mempraktiskannya. Ini tak berarti bahwa si HTML kurang berguna, justru untuk dapat diakses maka diperlukannya HTML. Kerjasama dalam membangun sebuah web yang lebih maknyus, Sama seperti kerjasama halnya manusia.
Fungsi CSS
Fungsi utama Casing Style Sheets atau biasa disebut CSS pada dasarnya adalah, berfungsi untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website. CSS dapat bekerja dan berlaku melalui tag HTML. Dengan adanya CSS, tag HTML yang sederhana dapat diubah sehingga tampilan laman website pun menjadi terlihat lebih menarik dan efisien.
Cara Kerja CSS
CSS beroperasi melalui tag <style> dengan atribut class warna. Dengan adanya CSS pada HTML tersebut maka pengaturan warna teks akan menjadi lebih mudah. Saat kamu ingin mengganti warna teks cukup mengetikkan tag <span> tanpa harus menulis ulang perintah. Jadi bisa disimpulkan bahwa CSS akan menghemat waktumu dengan perintah-perintah yang efisien.
Hal ini bisa terjadi karena CSS sendiri dikembangkan untuk bisa mengubah tampilan laman website tanpa harus mengganti isi konten. Jika kembali pada perumpamaan manusia dan pakaian di poin sebelumnya, dengan CSS kamu tidak mengubah bentuk manusianya tapi hanya mengganti pakaiannya. Dengan begitu untuk mengubah dan memprogram ulang tampilan website pun bisa dilakukan dalam waktu cepat.
Kelebihan CSS
- CSS sangat mudah untuk dipelajari dan digunakan
- CSS memisahkan antara Desain dan Konten Web/Blog
- Pengaturan Desain dapat dilakukan seefisien mungkin
- Karena satu css dapat dipakai beberapa kali ,maka dapat menghemat penulisan kode
- Mempersingkat waktu kerja, baik saat membuat maupun saat modifikasi halaman Web/Blog
- Ukuran file HTML jadi lebih kecil, karena biasanya CSS disimpan di file terpisah (External Stylesheet)
Kekurangan
- CSS sangat menyita waktu karena tidak semua browser mengartikan sintaks-sintaks CSS yang sama
- Kadang desain sudah terlihat rapih di suatu browser namun ketika dicoba di browser lain malah jadi acak-acakan
- Kekurangan tersebut dapat diatasi dengan script-script khusu(CSS Hack)
Jenis-Jenis CSS
1. CSS Style Internal
Style ini diload setiap kali website di-refresh, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman. Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam sharing template untuk pratinjau (preview) karena CSS hanya ada di satu halaman.
2. CSS Style External
External merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file .css. Styling dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.
3. CSS Style Inline
Style yang menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-stylize, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat. Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.
Baca Juga: Perbedaan Antara Inline, External, dan Internal Di CSS
Kesimpulan
Jadi Apa Itu CSS? CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. Yang dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996. Versi terbarunya adalah CSS3. CSS memiliki hubungan erat dengan HTML. dan Fungsi utamanya adalah untuk mendesain, membentuk, serta mengubah tampilan halaman sebuah website.
Sekian artikel Apa Itu CSS? Pelajari Semuanya, Secara Lengkap. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih