Bahasa pemrograman menjalankan fungsi tertentu, salah satunya yaitu CSS atau Cascading Style Sheets. Cascading Style Sheets mengatur tata letak halaman website, termasuk warna teks, font, hingga jarak antar paragraf.
Untuk mengetahui lebih lanjut, pada artikel berikut kamu akan mengenal tentang CSS, jenis, cara kerja, hingga kelebihan dan kekurangannya.
Apa Itu CSS?
Sebelum mencari tahu pengertiannya, kamu perlu tahu juga kepanjangan CSS. CSS atau Cascading Style Sheets merupakan bahasa desain sederhana yang bertujuan untuk mengubah tampilan halaman web menjadi menarik.
Dengan CSS, kamu bisa mengatur warna teks, huruf, jarak antar paragraf, lebar kolom, gambar latar belakang hingga desain tata letak.
Cascading Style Sheets mudah dipelajari dan dipahami tetapi memberikan kendali yang kuat atas tampilan sebuah dokumen HTML. Biasanya, bahasa pemrograman ini digabungkan dengan bahasa markup HTML atau XHTML.
Fungsi CSS
CSS adalah bahasa yang digunakan untuk menentukan bagaimana dokumen disajikan kepada pengguna. Dalam hal ini mengatur tentang bagaimana gaya, tata letak, dan sebagainya.
Sebuah dokumen biasanya merupakan file teks yang terstruktur menggunakan bahasa markup. HTML adalah bahasa markup yang paling umum, tetapi kamu juga mungkin menemui bahasa markup lain seperti SVG atau XML.
Menyajikan dokumen kepada pengguna berarti mengkonversinya ke dalam bentuk yang dapat digunakan oleh audiens. Browser seperti Chrome, Firefox, atau Edge, berfungsi untuk menyajikan dokumen secara visual di layar komputer atau proyektor.
Nah, CSS berguna sebagai dasar gaya teks dokumen. Misalnya, mengubah warna dan ukuran judul dan tautan. Bahasa pemrograman ini berfungsi untuk membuat tata letak. Contoh, mengubah kolom teks menjadi tata letak dengan sidebar informasi.
Jenis-Jenis CSS
Cascading Style Sheet berfungsi untuk mengatur gaya dalam halaman web yang berisi elemen HTML. CSS menetapkan warna latar belakang, ukuran font, dan sebagainya pada elemen-elemen di halaman web.
Ada tiga jenis Cascading Style Sheets yaitu inline, internal, dan eksternal. Berikut penjelasannya:
Inline Cascading Style Sheets
Inline CSS merupakan metode penataan yang mana properti secara langsung diterapkan pada elemen HTML dalam bagian body dengan menggunakan atribut “style”. Metode ini memungkinkan penataan spesifik untuk setiap elemen.
Internal atau Embedded Cascading Style Sheets
Ini dapat digunakan ketika satu dokumen HTML harus memiliki gaya yang unik. Set aturan CSS harus ada dalam file HTML di bagian head yaitu CSS yang tersemat dalam tag `<style>` di dalam bagian head file HTML.
Eksternal Cascading Style Sheets
Eksternal CSS berisi file terpisah yang hanya berisi properti gaya dengan bantuan atribut tag (contohnya class, id, heading). Properti ini ditulis dalam file terpisah dengan ekstensi .css dan harus dihubungkan ke dokumen HTML menggunakan tag link.
Artinya, untuk setiap elemen, gaya hanya dapat diatur sekali dan akan diterapkan di seluruh halaman web. Dengan ketiga jenis Cascading Style Sheet tersebut, ada beberapa poin menarik yaitu:
- Inline Cascading Style Sheets memiliki prioritas tertinggi, diikuti oleh Internal/Embedded, diikuti oleh Eksternal CSS yang memiliki prioritas paling rendah.
- Banyak style sheet dapat didefinisikan dalam satu halaman.
- Jika tidak ada gaya yang ditentukan baik dalam inline atau internal style sheet, maka aturan external style sheet diterapkan pada tag HTML.
Berbagai jenis CSS tersebut adalah dasar dari halaman web dan digunakan untuk pengembangan halaman web dengan memperindah tampilan situs.
Cara Kerja CSS
Bagaimana Cascading Style Sheets bekerja? Pertama-tama, kita mendefinisikan beberapa kelas dalam bentuk aturan menggunakan CSS. Tujuannya untuk menerapkan beberapa gaya seperti jenis huruf, warna, ukuran, dan sebagainya.
Dalam berbagai kondisi, kita ingin agar terjadi hal-hal tertentu. Misalnya jika elemen X adalah anak dari elemen Y, terapkan gaya-gaya tersebut.
Selanjutnya, kelas-kelas ini ditambahkan ke elemen-elemen HTML. Browser kemudian mengambil aturan-aturan ini, menentukan mana yang berlaku di mana, dan menggunakannya untuk merender halaman.
Perbedaan HTML dan CSS
HTML atau HyperText Markup Language berfungsi untuk membuat aplikasi dan situs web. HTML sangat mirip dengan hyperlink, tetapi berisi teks yang mendasar, kalau kamu klik akan memulai pengalihan ke halaman web baru.
Lalu, apa bedanya dengan Cascading Style Sheets? Terdapat sejumlah aspek yang membedakannya yaitu sebagai berikut.
- Ketergantungan
HTML adalah bahasa markup untuk mendefinisikan struktur atau organisasi halaman web. Alhasil, HTML lebih tergantung pada struktur dan integrasi dengan bahasa lain.
Sebaliknya, CSS independen, bisa kamu pakai dengan banyak bahasa markup berbasis XML.
- Implementasi
Implementasi HTML yaitu untuk mendefinisikan struktur dan konten halaman web. Sementara itu, implementasi CSS khusus untuk desain dan presentasi saja.
- Arsitektur
HTML bergantung pada tag untuk menyusun konten dan elemen lain dari halaman web. Sebaliknya, CSS hanya menggunakan elemen terpilih untuk mengatur elemen lainnya.
- Pendekatan
HTML berfungsi untuk menempatkan konten inti atau konten dasar yang tampil pada halaman web. Sementara itu, Cascading Style Sheets, pendekatannya menentukan lokasi yang tepat dari konten, yaitu tata letak, desain, format, dan fitur lainnya.
Itulah sejumlah perbedaan antara HTML dengan Cascading Style Sheet. Memahami keduanya bisa membantumu mengatur penggunaan yang tepat untuk situs website, Sob!
Kelebihan dan Kekurangan CSS
Penggunaan Cascading Style Sheet memiliki keuntungan dan kelemahannya tersendiri. Berikut penjelasan lebih lanjut:
Kelebihan CSS
CSS memiliki banyak keuntungan yang memungkinkan pengembang untuk mendesain sebuah situs web. Beberapa keuntungan tersebut antara lain:
- Kecepatan Website yang Lebih Baik
Untuk berfungsi dengan efisien, situs web sebaiknya memiliki waktu loading yang cepat. Orang hanya mau menunggu beberapa detik saja. Jadi, penting memastikan kecepatan situs.
- Pemeliharaan Mudah
Pemeliharaan mudah karena membutuhkan waktu perawatan yang lebih sedikit. Alasannya karena perubahan satu baris kode memengaruhi seluruh halaman web.
- Desain yang Konsisten
Kamu mungkin telah melihat banyak situs web yang elegan dan user friendly. Hal ini karena konsistensi dalam desain. CSS memungkinkan pengembang untuk memastikan elemen-elemen gaya diterapkan secara konsisten di seluruh beberapa halaman web.
- Penghematan Waktu
Dengan kecepatan yang lebih tinggi dan pemeliharaan yang lebih mudah, CSS menghemat banyak waktu dan usaha dalam proses pengembangan web. Sebab, waktu muatnya lebih cepat.
- Kompatibilitas Perangkat yang Lebih Baik
Orang menggunakan berbagai perangkat pintar seperti smartphone, PC, atau laptop untuk melihat situs web tertentu. Nah, Cascading Style Sheets memastikan tugas ini lancar dengan memberikan kompatibilitas yang lebih baik.
Kekurangan CSS
Ada beberapa kelemahan saat menggunakan CSS. Kamu harus mengetahui kelemahan ini sehingga kamu menyadari dan memperhatikannya saat merancang situs web.
- Kebingungan karena Banyaknya Tingkat Cascading Style Sheets
Pemula lebih rentan terhadap masalah ini. Kamu mungkin bingung saat memilih untuk mempelajari CSS karena ada banyak tingkatan seperti CSS2, CSS3, dan sebagainya.
- Masalah Lintas-Browser
Berbagai browser bekerja dengan cara yang berbeda. Jadi, kamu harus memastikan bahwa perubahan yang diimplementasikan dalam situs web melalui kode CSS tercermin dengan baik di semua browser.
- Masalah Keamanan
Keamanan sangat penting di dunia yang berbasis teknologi dan data. Salah satu kelemahan dari CSS adalah keamanan yang terbatas.
- Pekerjaan Tambahan bagi Pengembang
Layanan desain perlu mempertimbangkan dan menguji semua kode Cascading Style Sheets di berbagai browser untuk kompatibilitas. Karena pengembang menguji kompatibilitas untuk browser yang berbeda, beban kerja mereka meningkat.
Contoh CSS
Contoh CSS code sederhana lainnya adalah sebagai berikut:
Untuk warna background website merah muda
body
{
background-color: pink;
}
Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 20px
h1
{
font-family: verdana;
font-size: 20px;
}
Contoh Properti CSS
Pada umumnya, jika kamu menuliskan suatu property CSS, maka kamu juga akan menuliskan valuenya. Lalu, apa itu CSS properti dan fungsinya? Properti ini berfungsi untuk memberi efek khusus pada elemen HTML dan nantinya ditampilkan pada website.
Untuk lebih jelasnya, kamu bisa mengetahui apa saja properti CSS seperti daftar di bawah ini!
1. Border
Border adalah properti CSS yang digunakan untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Untuk garis tepi bagian kanan kamu bisa menggunakan border-right, dan border-left untuk sebelah kiri.
Contoh border properti:
- Border-left-width :mengatur lebar garis kiri
- Border-color :mengatur warna dari garis
- Border-style : mengatur style dari garis
- Border-top : membuat garis atas
- Border-right : membuat garis kanan
2. Background
Border properti ini digunakan untuk mengatur background tampilan website.
Contoh :
- Background-color : memberi warna pada latar belakang
- Background-image : memberi gambar pada latar belakang dari suatu element
- Background-position : mengatur posisi gambar pada latar belakang
Baca juga: 6 Tips Belajar Coding Otodidak untuk Programmer Pemula
3. Color
Jika kamu ingin mengubah warna text, background, dan lain sebagainya, kamu bisa menggunakan properti color ini.
4. Float
Properti float digunakan untuk mengatur text agar dapat melipat di sekitar elemen gambar, namun juga bisa digunakan untuk layout dan style lainnya.
Contoh :
float: right;
Untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.
5. Font
Properti kelima dari CSS adalah font. Properti ini bisa kamu gunakan untuk menentukan ukuran font, gaya teks, dan jenis font yang akan ditampilkan di website nantinya.
Contoh :
- Font-weight : mengatur ketebalan dari text
- Font-size : mengatur ukuran font sesuai yang diinginkan
- Font-family : mengatur jenis font yang ingin dipakai
- Font-style : mengatur style font yang akan digunakan pada text
- Font-variant : mengatur font apakah menjadi huruf kecil atau tidak
6. Height
Properti selanjutnya dari CSS adalah height. Ini adalah properti yang bisa kamu gunakan untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya.
7. Padding
Untuk menghasilkan ruang kosong di sekitar konten, entah di dalam atau di luar kamu bisa mengatur paddingnya.
Contoh :
- Padding-top : mengatur ruang elemen dengan konten bagian atas
- Padding-right : mengatur ruang elemen dengan konten bagian kanan
- Padding-bottom : mengatur ruang pada elemen dengan konten bagian bawah
- Padding-left : mengatur ruang pada elemen dengan konten bagian kiri
8. Margin
Beda dengan padding, margin digunakan untuk membuat ruang kosong di sekitar elemen bagian luar. Kamu bisa mengaturnya pada sisi bawah, atas, kiri, dan kanan secara terpisah.
Contoh :
- Margin-top : mengatur jarak antar elemen bagian atas
- Margin-right : mengatur jarak elemen bagian kanan
- Margin-bottom : mengatur jarak elemen bagian bawah
- Margin-left : atur jarak antar elemen bagian kiri
9. Weight
Terakhir, properti dari CSS ini digunakan untuk mengatur ketebalan dari text.
Itu dia beberapa hal penting mengenai CSS. Kalau kamu bersemangat mengembangkan situs web, cobalah untuk mempelajari HTML dan CSS.
Meskipun ada kelemahannya, banyak keuntungan CSS yang memastikan proses pengembangan web lancar dan efisien.
