Apa itu Cascading Style Sheets?
Situs web terdiri dari sejumlah bagian individu, termasuk gambar, teks, dan berbagai dokumen. Dokumen-dokumen ini tidak hanya mencakup yang mungkin terkait dari berbagai halaman, seperti file PDF, tetapi juga dokumen yang digunakan untuk membangun halaman itu sendiri, seperti dokumen HTML untuk menentukan struktur dokumen halaman dan CSS (Lembar Gaya Bertingkat) untuk mendikte tampilan halaman. Artikel ini akan menyelidiki CSS, meliputi apa itu dan di mana itu digunakan di situs web hari ini.
Pelajaran Sejarah CSS
CSS pertama kali dikembangkan pada tahun 1997 sebagai cara bagi pengembang web untuk menentukan tampilan visual halaman web yang mereka buat. Itu dimaksudkan untuk memungkinkan para profesional web untuk memisahkan konten dan struktur kode situs web dari desain visual, sesuatu yang belum mungkin sebelum saat ini.
Pemisahan struktur dan gaya memungkinkan HTML untuk melakukan lebih banyak fungsi yang awalnya didasarkan pada - markup konten, tanpa harus khawatir tentang desain dan tata letak halaman itu sendiri, sesuatu yang biasa dikenal sebagai "tampilan dan nuansa" halaman.
CSS tidak mendapatkan popularitas hingga sekitar tahun 2000, ketika browser web mulai menggunakan lebih dari font dasar dan aspek warna dari bahasa markup ini. Saat ini, semua browser modern mendukung semua CSS Level 1, sebagian besar CSS Level 2, dan bahkan sebagian besar aspek CSS Level 3. Karena CSS terus berevolusi dan gaya baru diperkenalkan, browser web mulai menerapkan modul yang menghadirkan dukungan CSS baru ke browser tersebut dan memberi desainer web alat desain baru yang kuat untuk digunakan.
Dalam beberapa tahun terakhir, ada beberapa perancang web yang menolak untuk menggunakan CSS untuk desain dan pengembangan situs web, tetapi praktik itu tidak ada lagi dari industri saat ini. CSS sekarang merupakan standar yang banyak digunakan dalam desain web dan Anda akan sulit sekali menemukan siapa saja yang bekerja di industri saat ini yang tidak memiliki setidaknya pemahaman dasar bahasa ini.
CSS adalah Singkatan
Seperti sudah disebutkan, istilah CSS adalah singkatan dari "Cascading Style Sheet." Mari kita ingkari frasa ini sedikit lebih lengkap untuk menjelaskan apa yang dilakukan dokumen-dokumen ini.
Kata "style sheet" mengacu pada dokumen itu sendiri (seperti HTML, file CSS benar-benar hanya dokumen teks yang dapat diedit dengan berbagai program). Lembar gaya telah digunakan untuk desain dokumen selama bertahun-tahun. Mereka adalah spesifikasi teknis untuk tata letak, baik cetak maupun online. Desainer cetak telah lama menggunakan style sheet untuk memastikan bahwa desain mereka dicetak tepat sesuai spesifikasi mereka. Lembar gaya untuk laman web berfungsi dengan tujuan yang sama, tetapi dengan fungsi tambahan juga memberi tahu browser web cara merender dokumen yang dilihat. Saat ini, lembar gaya CSS juga dapat menggunakan kueri media untuk mengubah cara halaman mencari perangkat dan ukuran layar yang berbeda . Ini sangat penting karena memungkinkan satu dokumen HTML tunggal dirender secara berbeda sesuai dengan layar yang digunakan untuk mengaksesnya.
Cascade adalah bagian yang sangat istimewa dari "style sheet" yang bertingkat. Sebuah style sheet web dimaksudkan untuk mengalir melalui serangkaian gaya dalam sheet itu, seperti sungai di atas air terjun. Air di sungai menyentuh semua batu di air terjun, tetapi hanya yang di bawah yang mempengaruhi persis di mana air akan mengalir. Hal yang sama berlaku untuk kaskade dalam style sheet website.
Setiap halaman web dipengaruhi oleh setidaknya satu lembar gaya, meskipun perancang web tidak menerapkan gaya apa pun. Lembar gaya ini adalah lembar gaya agen pengguna - juga dikenal sebagai gaya default yang akan digunakan browser web untuk menampilkan halaman jika tidak ada petunjuk lain yang disediakan. Misalnya, secara default hyperlink diberi warna biru dan digarisbawahi. Gaya tersebut berasal dari style sheet default browser web. Namun, jika perancang web menyediakan instruksi lain, peramban harus mengetahui instruksi mana yang harus didahulukan. Semua browser memiliki gaya bawaan sendiri, tetapi banyak dari default tersebut (seperti tautan teks bergaris bawah biru) dibagikan di semua atau sebagian besar browser dan versi utama.
Untuk contoh lain dari default browser, di browser web saya, font default adalah " Times New Roman " ditampilkan pada ukuran 16. Hampir tidak ada halaman yang saya kunjungi ditampilkan dalam font family dan size, namun. Ini karena cascade mendefinisikan bahwa style sheet kedua, yang ditetapkan oleh para desainer itu sendiri, untuk mendefinisikan kembali ukuran font dan keluarga, mengesampingkan default web browser saya. Setiap style sheet yang Anda buat untuk suatu halaman web akan memiliki kekhususan lebih dari sekedar gaya default browser, sehingga default itu hanya akan berlaku jika style sheet Anda tidak mengesampingkannya. Jika Anda ingin tautan berwarna biru dan digarisbawahi, Anda tidak perlu melakukan apa pun karena itu adalah default, tetapi jika file CSS situs Anda mengatakan bahwa tautan harus berwarna hijau, warna itu akan menggantikan biru default. Garis bawah akan tetap ada dalam contoh ini, karena Anda tidak menyebutkan sebaliknya.
Di mana CSS Digunakan?
CSS juga dapat digunakan untuk menentukan bagaimana tampilan halaman web bila dilihat di media lain selain dari browser web. Misalnya, Anda dapat membuat lembar gaya cetak yang akan menentukan bagaimana halaman web harus dicetak. Karena item halaman web seperti tombol navigasi atau formulir web tidak akan memiliki tujuan pada halaman yang dicetak, Lembar Gaya Cetak dapat digunakan untuk "mematikan" area tersebut ketika halaman dicetak. Meskipun tidak benar-benar praktik umum di banyak situs, opsi untuk membuat lembar gaya cetak sangat kuat dan menarik (menurut pengalaman saya - sebagian besar profesional web tidak melakukan ini hanya karena cakupan anggaran suatu situs tidak meminta pekerjaan tambahan ini harus dilakukan ).
Mengapa CSS Penting?
CSS adalah salah satu alat paling kuat yang dapat dipelajari oleh perancang web karena dengannya Anda dapat memengaruhi seluruh tampilan visual situs web. Sheet style yang ditulis dengan baik dapat diperbarui dengan cepat dan memungkinkan situs mengubah apa yang diprioritaskan secara visual di layar, yang pada gilirannya menunjukkan nilai dan fokus ke pengunjung, tanpa perubahan apa pun yang perlu dilakukan pada markup HTML yang mendasarinya.
Tantangan utama CSS adalah bahwa ada cukup banyak untuk dipelajari - dan dengan peramban berubah setiap hari, apa yang berfungsi dengan baik hari ini mungkin tidak masuk akal besok karena gaya baru menjadi didukung dan yang lain dijatuhkan atau tidak disukai karena satu alasan atau lainnya .
Karena CSS dapat mengalir dan bergabung, dan mempertimbangkan bagaimana browser yang berbeda dapat menginterpretasikan dan menerapkan arahan secara berbeda, CSS dapat menjadi lebih sulit daripada HTML biasa untuk dikuasai. CSS juga mengubah browser dengan cara yang sebenarnya tidak dimiliki HTML. Setelah Anda mulai menggunakan CSS, Anda akan melihat bahwa memanfaatkan kekuatan style sheet akan memberi Anda fleksibilitas luar biasa dalam cara Anda menata halaman web dan menentukan tampilan dan nuansa mereka. Sepanjang jalan, Anda akan mengumpulkan "kantong trik" gaya dan pendekatan yang telah berhasil untuk Anda di masa lalu dan yang dapat Anda putar lagi ketika Anda membangun laman web baru di masa mendatang.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 7/5/17,