Pengertian CSS, CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk menyesuaikan tampilan elemen yang ditulis dalam bahasa markup, seperti HTML. CSS memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 karena alasan sederhana. Di masa lalu, HTML tidak datang dengan tag yang memformat halaman. Anda hanya perlu menulis kode untuk situs tersebut.
Tag, seperti diperkenalkan di HTML 3.2, dan pada saat itu menyebabkan banyak masalah bagi pengembang. Karena situs web memiliki font, warna, dan gaya yang berbeda, menulis ulang kode adalah proses yang sangat panjang dan sulit. Jadi, W3C membuat CSS untuk mengatasi masalah ini.HTML dan CSS sangat erat hubungannya. Karena HTML adalah bahasa markup (dasar situs) dan gaya perbaikan CSS (untuk semua aspek tampilan situs web), kedua bahasa pemrograman tersebut harus berjalan beriringan.
CSS tidak hanya penting dari sudut pandang teknis, tetapi juga mempengaruhi tampilan situs web. Tentu Anda tidak ingin website Anda terlihat seperti situs “telanjang” tanpa modifikasi apapun, bukan?
Kelebihan Menggunakan CSS
Selain pengertian CSS ada juga kelebihan CSS, HTML bisa menjadi bahasa utama yang membuat Anda membuat situs web. Selain itu, HTML juga biasa digunakan dalam melakukan desain website dasar.Jika HTML benar-benar dapat mengubah desain situs, mengapa programmer juga membutuhkan CSS? meski bisa mendesain, HTML tidak seefisien CSS dalam mengubah warna, ukuran teks, hingga ukuran tabel.Misalnya, halaman situs web ingin mengubah seluruh ukuran font, dari 10pt menjadi 12pt.
Dalam HTML, Anda harus mengubah semua teks tag di situs web satu per satu, paragraf demi paragraf, judul demi judul.Padahal, dalam satu dokumen HTML terdapat banyak paragraf dan heading. Hal ini tentunya membutuhkan banyak waktu dan tenaga.Di sinilah CSS dapat digunakan. Dengan CSS, Anda dapat mengubah semua ukuran font untuk satu situs sekaligus dengan kode pendek.Dengan cara ini, waktu dan tenaga bisa dihemat. CSS tidak dapat berdiri sendiri, tetapi dapat melengkapi HTML.
Istilah CSS yang Perlu Dipahami
Selain pengertian CSS istilah css juga perlu di pahami. Seperti bahasa lain yang berhubungan dengan pemrograman, CSS merupakan bahasa yang memiliki beragam istilah teknis.Ada 4 istilah yang harus dipahami oleh programmer. Istilah-istilah tersebut adalah determinan, properti, nilai dan deklarasi.
Dirangkum secara singkat dari HTML Dog dan W3Schools, inilah arti dari keempat istilah tersebut:
Selector
Suku pertama adalah determinan. Artinya, pemilih adalah elemen yang desainnya ingin Anda ubah.Misalnya, Anda ingin mengubah bagian Judul 1 dari seluruh halaman. Oleh karena itu, Anda mengetik “h1” saat menulis kode CSS.
Property
Istilah selanjutnya disebut properti. Properti adalah aspek yang ingin Anda gaya dari pemilih.Contoh properti termasuk ‘warna’ untuk warna, ‘ukuran font’ untuk ukuran font, dll. Properti write diakhiri dengan titik dua (:).
Value
Setelah menulis determinan dan spesifisitas, langkah selanjutnya adalah menentukan nilai.Nilai adalah pasangan properti yang menggambarkan nilai atau hasil akhir dari desain Anda.Misalnya, ‘merah’ untuk properti ‘warna’, dan ’10’ untuk properti ‘ukuran font’.
Declaration
Istilah terakhir dalam CSS yang harus dipahami adalah deklarasi.Deklarasi adalah properti dan nilai yang diasosiasikan dengannya. Setiap definisi dimulai dengan kurung kurawal ({) dan diakhiri dengan titik koma (;).Karena dalam satu selektor terdapat banyak deklarasi yang dapat dibuat, maka pada akhir semua deklarasi ditulis kurung kurawal (}).
Cara Kerja CSS
Nah selain kita perlu tau pengertian CSS kita jug hasru tau cara kerjanya. CSS menggunakan sintaks sederhana berbasis bahasa Inggris dan dilengkapi dengan seperangkat aturan yang mengaturnya. Seperti disebutkan sebelumnya, HTML tidak dibuat untuk mengimplementasikan elemen gaya, itu hanya markup halaman. HTML hanya dirancang untuk mendeskripsikan konten. Misalnya:
<p>Ini adalah paragraf</p>
Satu pertanyaan sekarang, bagaimana Anda mendesain paragraf? Struktur CSS sangat sederhana. Struktur ini berisi selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan dengan elemen tersebut. Cukup mudah, bukan?
Ada aturan yang berbeda untuk diingat. Namun, struktur dasarnya sangat sederhana dan lugas.
Pembatas menunjukkan elemen HTML yang tampilannya ingin Anda ubah. Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi menyertakan nama dan nilai properti CSS, dipisahkan dengan koma. Deklarasi CSS umumnya diakhiri dengan titik koma, sedangkan blok deklarasi dikelilingi oleh kurung kurawal.
Mari kita lihat contoh di bawah ini:
Semua elemen<p> ditandai dengan warna biru dan dicetak tebal.
<style>
p {
color: blue;
text-weight: bold;
}
<style>
Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.
<style>
p {
text-align: center;
font-size: 16px;
color: pink;
}
</style>
Macam-macam CSS
Selain pengertian css ada juga macam-macam CSS, Setidaknya ada tiga jenis CSS yang sering digunakan oleh para web designer. Berikut penjelasannya.
Inline style sheet
Pertama ada lembar gaya bawaan. Sederhananya, template CSS ini adalah CSS dengan perintah pemrograman yang terletak pada objek.Misalnya, jika Anda ingin mengubah artikel pada halaman tertentu di situs web Anda, lembar gaya CSS sebaris harus dilampirkan ke elemen teks. Anda hanya perlu menambahkan tag<style>untuk aplikasi CSS ini.
External style sheet
Selain lembar gaya bawaan, ada lembar gaya eksternal. Situs CSS ini berbeda dengan halaman yang akan diubah. Metode ini lebih praktis daripada inline style sheet karena menghemat ruang dan dapat digunakan berulang kali untuk halaman web yang berbeda.Anda dapat menentukan jenis CSS ini dengan tag <link rel>. Tag ini akan menautkan halaman markup ke lembar gaya CSS eksternal yang terpisah.
Embedded style sheet
Akhirnya, ada lembar gaya bawaan. Template CSS ini sama dengan template stylesheet inline, dan keduanya berada di halaman markup yang sama. Oleh karena itu tidak mengherankan bahwa lembar gaya inline kadang-kadang disebut sebagai lembar gaya intrinsik. CSS ini biasanya ditempatkan pada tag <head> </head> dan diawali dengan tag<style>. Embedded style sheet sering digunakan untuk mengatur halaman web dengan tampilan yang unik. Misalnya, dalam satu paragraf penulisan ada kalimat yang berbeda dan terus berulang.