Tujuan Pembelajaran
Setelah mengikuti pertemuan ini, mahasiswa mampu menulis CSS dasar, memilih elemen dengan selektor, memahami properti umum, serta menguasai konsep box model untuk mengatur ukuran dan jarak elemen.
Apa itu CSS
CSS atau Cascading Style Sheets adalah bahasa untuk mengatur tampilan dokumen HTML seperti warna, ukuran, dan tata letak. CSS memisahkan struktur (HTML) dari gaya (presentasi) sehingga kedua hal itu bisa dikembangkan terpisah. Ada tiga cara menulis CSS: inline pada atribut style, internal di dalam tag <style>, dan eksternal dalam file terpisah yang dipanggil dengan tag <link>.
Cara eksternal adalah yang paling disarankan karena mudah dirawat dan bisa digunakan bersama. Pemanggilannya dilakukan di bagian head dengan menautkan file style.css.
<code class="language-html"><!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="judul">Halo CSS</h1> </body> </html></code>
Selektor dan Properti Dasar
Selektor menentukan elemen mana yang diberi gaya. Selektor elemen menargetkan nama tag seperti p atau h1, selektor kelas menargetkan atribut class dengan tanda titik, selektor id menargetkan atribut id dengan tanda pagar, dan selektor universal menggunakan tanda bintang. Properti dasar meliputi color untuk warna teks, background-color untuk latar, font-size untuk ukuran font, dan margin/padding untuk jarak.
Sebuah aturan CSS terdiri dari selektor, lalu blok deklarasi yang dibuka kurung kurawal, berisi pasangan nama-properti dan nilai yang dipisahkan titik dua dan diakhiri titik koma.
<code class="language-css">/* selektor elemen */
p { color: #333; font-size: 16px; }
/* selektor kelas */
.judul { color: blue; text-align: center; }
/* selektor id */
#utama { background-color: #f0f0f0; }</code>
Box Model
Konsep paling penting dalam CSS adalah box model, yaitu setiap elemen dianggap sebagai kotak yang terdiri dari empat bagian: content (isi), padding (jarak dalam antara isi dan border), border (bingkai), dan margin (jarak luar antara kotak dan elemen lain). Pengaturan jarak inilah yang menentukan tata letak halaman.
Padding membuat elemen terasa lega di dalamnya, sedangkan margin memberi jarak antar elemen. Jika ingin total lebar terhitung termasuk padding dan border, gunakan properti box-sizing: border-box.
<code class="language-css">div {
width: 300px;
padding: 20px; /* jarak dalam */
border: 2px solid #999; /* bingkai */
margin: 10px; /* jarak luar */
box-sizing: border-box;
}</code>
Langkah Praktik
Buat kembali halaman profil dari pertemuan sebelumnya. Tautkan sebuah file CSS eksternal bernama style.css. Atur warna latar body, warna dan ukuran judul, serta beri padding dan margin pada kartu profil sehingga tampilan lebih rapi.
Gunakan DevTools browser dengan menekan tombol F12 untuk menginspeksi box model setiap elemen. Coba ubah nilai margin dan padding secara langsung lalu amati perubahannya secara real time.
Konsep Kunci
- CSS atau Cascading Style Sheets adalah bahasa untuk mengatur tampilan dokumen HTML seperti warna, ukuran, dan tata letak.
- CSS memisahkan struktur (HTML) dari gaya (presentasi) sehingga kedua hal itu bisa dikembangkan terpisah.
- Ada tiga cara menulis CSS: inline pada atribut style, internal di dalam tag <style>, dan eksternal dalam file terpisah yang dipanggil dengan tag <link>.
- Cara eksternal adalah yang paling disarankan karena mudah dirawat dan bisa digunakan bersama.
- Pemanggilannya dilakukan di bagian head dengan menautkan file style.
- Selektor menentukan elemen mana yang diberi gaya.
- Selektor elemen menargetkan nama tag seperti p atau h1, selektor kelas menargetkan atribut class dengan tanda titik, selektor id menargetkan atribut id dengan tanda pagar, dan selektor universal menggunakan tanda bintang.
- Properti dasar meliputi color untuk warna teks, background-color untuk latar, font-size untuk ukuran font, dan margin/padding untuk jarak.
- Sebuah aturan CSS terdiri dari selektor, lalu blok deklarasi yang dibuka kurung kurawal, berisi pasangan nama-properti dan nilai yang dipisahkan titik dua dan diakhiri titik koma.
- Konsep paling penting dalam CSS adalah box model, yaitu setiap elemen dianggap sebagai kotak yang terdiri dari empat bagian: content (isi), padding (jarak dalam antara isi dan border), border (bingkai), dan margin (jarak luar antara kotak dan elemen lain).
- Pengaturan jarak inilah yang menentukan tata letak halaman.
- Padding membuat elemen terasa lega di dalamnya, sedangkan margin memberi jarak antar elemen.
Contoh Kode
<code class="language-css">.judul {
color: #222;
font-size: 2rem;
text-align: center;
}
p {
color: #444;
line-height: 1.6;
}</code>
<code class="language-css">.kast {
width: 320px;
padding: 16px;
border: 1px solid #999;
margin: 12px;
box-sizing: border-box;
}</code>
CSS atau Cascading Style Sheets adalah bahasa untuk mengatur tampilan dokumen HTML seperti warna, ukuran, dan tata letak. CSS memisahkan struktur (HTML) dari gaya (presentasi) sehingga kedua hal itu bisa dikembangkan terpisah. Ada tiga cara menulis CSS: inline pada atribut style, internal di dalam tag <style>, dan eksternal dalam file terpisah yang dipanggil dengan tag <link>.
Latihan
Buat kartu profil dengan sebuah judul, paragraf, dan tombol. Gunakan box model agar kartu memiliki padding di dalam dan margin di tengah halaman. Variasikan warna latar dan atur box-sizing agar lebar tetap konsisten.