Pengenalan CSS3
Melalui kelas ini, kamu diajak untuk:
- Memahami fungsi CSS3.
- Mengidentifikasikan sintaksis dalam CSS3.
- Membuat bahasa CSS3 sederhana.
Apa Itu CSS
CSS adalah akronim dari Cascading Style Sheets. Jika HTML mengatur struktur halaman web, CSS berfungsi untuk menata elemen-elemen HTML yang akan ditampilkan di halaman web.
Dalam file HTML, bagian CSS biasanya diletakkan setelah <head> dan sebelum <body> menggunakan tag <style>.
<style>
.box {
color: white;
background: red;
}
.center {
text-align: center;
}
#title {
font-size: 30px;
border: solid 2px red;
width: 100px;
}
</style>Fungsi dalam Web Development
Mari gunakan analogi web development dengan perancangan mobil. Untuk membuat satu unit, diperlukan proses perancangan, pembentukan badan, hingga mesin penggerak.
CSS punya fungsi untuk membentuk setiap komponen dasar yang sebelumnya dirancang oleh HTML. Untuk membuat gestur yang lebih kompleks, maka serahkan pada Javascript.
Geser ke kanan untuk mengulik HTML, CSS, dan Javascript:
1. HTML
HTML akan membentuk kerangka apa saja yang dibutuhkan untuk membentuk satu unit. Misalnya body, roda, pintu, kaca, dan kursi. Namun, elemen-elemen hanya berupa urutan dan belum dibentuk sesuai keinginan.
2. CSS
Pintunya berbentuk lingkaran atau kotak? Apa warnanya? Kebingunagan itu akan diselesaikan lewat CSS.
3. Javascript
Agar mobil dapat melaju, maka dibutuhkan perincian spesifikasi roda. Elemen interaktif kompleks ini menjadi porsi Javascript.
Sintaksis CSS
Dalam menulis koding CSS, kita perlu memahami aturan sintaksisnya. Sintaksis CSS terdiri dari nama class/id (selector) dan deklarasi yang terdiri dari properti dan nilai.
<style>
.judul {
font-size: 30px;
color: red;
}
</style>Gambar di atas merupakan contoh kode untuk membuat tulisan yang dinamai class judul dengan ukuran 30px dan warna merah. Untuk memerintahkan komputer sesuai bentuk yang dikehendaki, maka CSS memiliki standar kode sebagai berikut:
- Judul: Bagian ini adalah nama class (selector). Nama class diawali dengan titik (.) dan {} untuk mewadahi deklarasi properti:nilai yang ingin diatur.
- Deklarasi Pertama: Deklarasi pertama terdiri dari font-size sebagai properti dan 30px sebagai nilai. Aturan sintaksisnya adalah properti:nilai dan ditutup dengan titik koma (;).
- Deklarasi Kedua: Deklarasi kedua terdiri dari color sebagai properti dan red sebagai nilai. Bagian ini juga ditutup oleh titik koma (;).
Membedakan Selector Class dan Id
Jika kamu telah mengikuti seluruh materi HTML, kamu mungkin sudah familiar dengan class dan id. Keduanya adalah selector yang digunakan sebagai acuan elemen HTML yang ingin ditata di CSS.
Ketuk untuk melihat penjelasan:Class
Class adalah selector yang bisa digunakan di lebih dari satu elemen HTML. Sintaksis yang digunakan adalah .(nama_kelas)
ID
Id adalah selector yang hanya bisa digunakan di satu elemen HTML. Sintaksis yang digunakan adalah #(namaId)
Rangkuman
Setelah memahami materi-materi di atas, saatnya membuat halaman web sederhana menggunakan struktur HTML dan styling dari CSS dengan keterangan sebagai berikut:
- Buat struktur HTML sederhana, ditambah elemen <style> setelah <head> dan sebelum <body>.
- Buat satu judul dan dua paragraf di bagian <body> menggunakan atribut class.
- Atur class CSS di bagian <style> dengan memastikan setiap elemen HTML memiliki warna dan ukuran tulisan yang berbeda.
Kuis
Kapan kita harus menggunakan ID alih-alih CLASS?