Dalam dunia maya World Wide Web (www), CSS adalah akronim untuk Cascading Style Sheets. CSS adalah bahasa style sheet yang digunakan untuk menggambarkan penyajian dokumen yang ditulis dalam bahasa markup, umumnya HTML. CSS mengatur bagaimana tata letak dan konten halaman web ditampilkan di layar, kertas, atau di media lain. CSS menyimpan banyak pekerjaan karena dapat mengontrol tata letak beberapa halaman web sekaligus.
Dokumen biasanya berupa file teks yang disusun dengan menggunakan bahasa markup seperti HTML. Menyajikan dokumen berarti mengubahnya menjadi bentuk yang dapat digunakan yang disajikan secara visual di layar komputer melalui browser web pencarian seperti Chrome, Firefox, Opera, Microsoft Edge, dan lainnya. Browser web sendiri menerapkan aturan CSS pada dokumen untuk memengaruhi bagaimana mereka ditampilkan.
CSS dimulai pada tahun 1994 silam ini dibuat dan dikelola oleh W3C. W3C sendiri adalah kumpulan Working Group (Kelompok Kerja) CSS dari W3C membuat dokumen yang disebut spesifikasi. Setelah spesifikasi dibahas dan secara resmi diratifikasi oleh anggota W3C, maka mereka akan merekomendasikannya. Untuk lebih lanjutnya, mari simak penjelasan mengenai CSS di bawah ini.
Daftar Isi
Pengertian CSS (Cascading Style Sheet)
CSS adalah singkatan dari Cascading Style Sheets. Ini adalah merupakan bahasa pengkodean yang memberikan tampilan dan tata letak situs web. Seiring dengan HTML, CSS adalah dasar untuk desain web. Tanpa itu, situs web akan tetap menjadi teks biasa dengan latar belakang putih sehingga tentunya tidak menarik dan terkesan datar atau monoton.
Sebelum pengembangan CSS pada tahun 1996 oleh World Wide Web Consortium (W3C), halaman web sangat terbatas baik dalam bentuk maupun fungsinya. Browser awal menyajikan halaman sebagai hypertext -yakni teks biasa, gambar dan tautan ke halaman hypertext lainnya. Tidak ada tata letak sama sekali untuk ditampilkan, hanya paragraf yang berjalan melintasi halaman dalam satu kolom.
Fungsi CSS (Cascading Style Sheet)
CSS sebagai inovasi pengembangan website, memungkinkan beberapa inovasi untuk tata letak halaman web, seperti kemampuan untuk :
- Menentukan font selain default untuk browser
- Menentukan warna dan ukuran teks dan tautan
- Menerapkan warna ke latar belakang
- Mengandung elemen halaman web dalam kotak dan mengapungkan kotak-kotak itu ke posisi tertentu di halaman
- Kemampuan dalam memasukkan style ke dalam style sheet, yang membuat untuk pertama kalinya, halaman web bisa dirancang.
Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft Internet Explorer 3 pada tahun 1998. Hingga hari ini, dukungan untuk fungsi CSS tertentu bervariasi dari browser ke browser. W3C, yang masih mengawasi dan menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS – CSS3. Dengan CSS3, pengembang berharap bahwa semua browser utama akan membaca dan menampilkan setiap fungsi CSS dengan cara yang sama.
Baca Juga : Cara Membuat File .htaccess WordPress Default dengan Mudah dan Cepat
Keuntungan Menggunakan CSS
CSS mudah dipelajari dan dipahami tetapi juga mampu memberikan kontrol yang kuat atas penyajian dokumen HTML. Paling umum, penggunaan sering CSS dikombinasikan dengan bahasa markup HTML atau XHTML. Berikut apa saja fungsi, kemampuan dan keuntungan yang didapatkan dari penggunaan CSS.
-
CSS menghemat waktu
Anda dapat menulis CSS sekali dan kemudian menggunakan kembali sheet yang sama di beberapa halaman HTML. Anda dapat menentukan gaya untuk setiap elemen HTML dan menerapkannya ke halaman Web sebanyak yang Anda inginkan.
-
Memuat halaman lebih cepat
Jika Anda menggunakan CSS, Anda tidak perlu menulis atribut tag HTML setiap kali. Cukup tulis satu aturan CSS dari sebuah tag dan terapkan pada semua kemunculan tag itu. Jadi lebih sedikit kode berarti waktu pengunduhan lebih cepat.
-
Perawatan mudah
Untuk membuat perubahan global, cukup ubah gaya, dan semua elemen di semua halaman web akan diperbarui secara otomatis.
-
Gaya unggul ke HTML
CSS memiliki array atribut yang jauh lebih luas daripada HTML, sehingga Anda dapat memberikan tampilan yang jauh lebih baik ke halaman HTML Anda dibandingkan dengan atribut HTML.
-
Kompatibilitas terhadap beberapa perangkat
Lembar gaya memungkinkan konten dioptimalkan untuk lebih dari satu jenis perangkat. Dengan menggunakan dokumen HTML yang sama, berbagai versi situs web dapat disajikan untuk perangkat genggam seperti PDA dan ponsel atau untuk dicetak.
-
Mempunyai standar web global
Sekarang atribut HTML sudah tidak digunakan lagi dan direkomendasikan untuk menggunakan CSS. Jadi itu ide yang baik untuk mulai menggunakan CSS di semua halaman HTML untuk membuatnya kompatibel dengan browser masa depan.
Baca Juga : Tutorial Menggunakan Telnet pada Windows dan Linux
Mengetahui Cara Kerja CSS
Untuk memahami dasar-dasar cara kerja CSS, Anda harus terlebih dahulu memahami sedikitnya tentang penggunaan HTML modern. Pengembang web membuat halaman sesuai dengan box model (model kotak). Karena halaman web adalah serangkaian kumpulan kotak yang masing-masing berisi elemen diskrit. Kotak-kotak ini bersarang, di dalam satu dengan yang lainya.
Misalnya, tajuk halaman adalah kotak dan berisi beberapa kotak kecil yang terdiri dari semua elemen yang membentuk tajuk seperti logo, navigasi, tombol media sosial, tombol keranjang belanja, dan semua yang dibutuhkan. Menggunakan CSS, maka pengembang dapat memberikan gaya atau sentuhan tersendiri ke kotak header. Dalam contoh ini, mari asumsikan bahwa pengembang membuat teks di dalam header berwarna merah, font Arial dan lima belas poin.
Di sinilah bagian cascading dari style sheet cascading ikut bermain. Gaya font yang diterapkan ke cascade header turun ke semua elemen yang terkandung di dalam header. Elemen yang mengandung teks seperti navigasi, tautan, atau ajakan bertindak semuanya akan berubah menjadi berwarna merah, Arial, dan lima belas poin tadi.
CSS menghadirkan gaya ke halaman web Anda dengan berinteraksi dengan elemen HTML. Elemen adalah komponen HTML individual dari halaman web yang misalnya paragraf, yang dalam HTML mungkin terlihat seperti ini:
<p> Ini paragraf saya! </p>
Jika Anda ingin membuat paragraf ini tampak merah muda dan tebal untuk ditampilkan kepada orang-orang yang melihat halaman web Anda melalui browser web, Anda akan menggunakan kode CSS yang terlihat seperti ini:
p {color: pink; font-weight: bold; }
Dalam hal ini, “p” (paragraf) disebut “selector” yang mana itu adalah bagian dari kode CSS yang menentukan elemen HTML mana yang akan dipengaruhi oleh style CSS. Dalam CSS, pemilih ditulis di sebelah kiri braket keriting pertama. Informasi antara kurung keriting disebut deklarasi, dan berisi properti dan nilai yang diterapkan ke pemilih. Properti adalah hal-hal seperti ukuran font, warna, dan margin, sedangkan nilai adalah pengaturan untuk properti tersebut. Dalam contoh di atas, “warna” dan “font-weight” adalah properti, dan “pink” dan “tebal” adalah nilai. Set bracketed penuh untuk
{color: pink; font-weight: bold; }
adalah deklarasi, dan sekali lagi, “p” (artinya paragraf HTML) adalah pemilih. Prinsip-prinsip dasar yang sama ini dapat diterapkan untuk mengubah ukuran font, warna latar belakang, lekukan margin, dan banyak lagi. Misalnya. . .
body {background-color: lightblue; }
. . .akan membuat latar belakang halaman Anda biru muda, atau. . .
p {font-size: 20px; warna merah; }
. . .akan membuat paragraf font 20 poin dengan huruf merah.
Baca Juga : Panduan Lengkap Instalasi Plugin AMP di WordPress
Cara Aplikasi CSS
Ada empat cara untuk menerapkan gaya ke dokumen HTML. Metode yang paling umum digunakan adalah file CSS eksternal yang tertanam dalam elemen <style> di dalam dokumen HTML. Jika lembar style yang berbeda telah ditentukan, maka style akan mengalir ke style baru dengan prioritas engikuti cara berikut :
-
Penerapan sebaris dengan elemen HTML
Kita bisa menggunakan atribut style dari elemen HTML apa saja untuk mendefinisikan aturan style. Aturan-aturan ini akan diterapkan pada elemen itu saja. Seperti <p style = property : value ; “Hello World!” </p>
-
Embedded dokumen HTML
Anda bisa menempatkan aturan CSS kita ke dalam dokumen HTML menggunakan elemen < style > untuk memuat aturan. Tag <style > ….. </style > ditempatkan dalam tag <head> … </head >
-
File external sheet style
Elemen dapat digunakan untuk menyertakan file stylesheet eksternal dalam dokumen HTML Anda. Lembar gaya eksternal adalah file teks terpisah dengan ekstensi “.css”. Didefinisikan sebagai semua aturan gaya dalam file teks ini dan kemudian akan dimasukkan file ini dalam dokumen HTML apa pun di dalam tag <head>… </head > menggunakan elemen <link >
-
Default browser
Peramban menyertakan beberapa gaya yang telah ditulis sebelumnya untuk kami. Terkadang Anda tidak menginginkan style yang dimuat seperti ini, sehingga Anda dapat menimpanya. Namun ada juga beberapa browser yang tidak mendukung spesifikasi CSS modern atau memiliki bentuk sendiri menggunakan properti CSS. Karena itu, Anda harus berhati-hati saat menulis CSS dalam dokumen HTML.
Baca Juga : Panduan Lengkap Penggunaan .htaccess Pemula
Kesimpulan dan penutup
CSS dibuat dan dikelola melalui sekelompok orang dalam W3C yang disebut Working Group CSS. Kelompok CSS ini yang membuat dokumen yang disebut spesifikasi yang akan diratifikasi. Spesifikasi yang diratifikasi ini disebut rekomendasi karena W3C tidak memiliki kendali atas implementasi bahasa yang sebenarnya. Perusahaan dan organisasi independen yang membuat perangkat lunak itu.
Cascading Style Sheets level 1 (CSS1) berhasil keluar dari W3C sebagai rekomendasi mereka pada Desember 1996 silam. Versi ini menjelaskan bahasa CSS serta model pemformatan visual sederhana untuk semua tag HTML. CSS2 menjadi rekomendasi W3C pada Mei 1998 dan dibangun berdasarkan CSS1. Versi ini menambahkan dukungan untuk style sheet khusus media, misalnya printer dan perangkat aural, font yang dapat diunduh, penentuan posisi elemen dan tabel.
Secara umum, CSS dan HTML memang tidak dapat dipisahkan penggunaannya. Jadi jika HTML adalah fondasi, bingkai, dinding, dan balok penopang yang mendukung situs web Anda, pertimbangkan CSS sebagai warna cat, gaya jendela, dan lansekap yang muncul setelahnya. Anda tidak dapat membangun tanpa meletakkan sebuah fondasi lebih dahulu. Karena jika Anda sudah mempunyai fondasi, CSS adalah alat yang paling bagus dalam mendekorasi web Anda semenarik mungkin sesuai dengan yang Anda inginkan.
