Cascading Style Sheets (CSS) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah halaman web. Dengan CSS, kalian dapat mengatur layout, warna, font, dan elemen lainnya dalam desain web. Memahami sintaks dasar CSS akan memudahkan kalian dalam mengembangkan halaman web yang menarik dan fungsional.
Berikut adalah sintaks dasar dalam CSS yang harus kalian pahami:
Sintaks Dasar CSS Lengkap
1. Struktur Dasar CSS
Sintaks dasar CSS terdiri dari selector, property, dan value. Berikut adalah format penulisannya:
selector {
property: value;
}Contoh:
h1 {
color: blue;
font-size: 24px;
}Pada contoh di atas, h1 adalah selector, color dan font-size adalah properti, dan blue serta 24px adalah nilai dari properti tersebut.
2. Jenis Selector CSS
Selector adalah cara untuk memilih elemen yang ingin diatur tampilannya. Berikut beberapa jenis selector yang paling umum:
| Selector | Deskripsi | Contoh |
|---|---|---|
| Selector Tag | Memilih elemen HTML berdasarkan tag-nya | p { color: red; } |
| Selector Kelas | Memilih elemen yang memiliki atribut kelas tertentu | .container { margin: 20px; } |
| Selector ID | Memilih elemen yang memiliki atribut ID tertentu | #header { padding: 10px; } |
| Selector Atribut | Memilih elemen berdasarkan atribut tertentu | input[type="text"] { color: green; } |
Catatan: Selector kelas menggunakan tanda titik (
.), sedangkan selector ID menggunakan tanda pagar (#).
3. Properti CSS Dasar
CSS menyediakan berbagai properti yang dapat mengatur hampir semua aspek tampilan sebuah elemen. Berikut ini adalah beberapa properti dasar yang sering digunakan:
| Properti | Deskripsi | Contoh |
|---|---|---|
| color | Mengatur warna teks | color: #333; |
| background | Mengatur warna atau gambar latar belakang | background: #f0f0f0; |
| font-size | Mengatur ukuran font | font-size: 16px; |
| margin | Mengatur jarak di luar elemen | margin: 10px; |
| padding | Mengatur jarak di dalam elemen | padding: 15px; |
| border | Mengatur garis tepi elemen | border: 1px solid #ccc; |
| width | Mengatur lebar elemen | width: 100%; |
| height | Mengatur tinggi elemen | height: 50px; |
4. CSS Komentar
Komentar digunakan untuk memberikan catatan dalam kode CSS dan tidak akan tampil di halaman web. Kalian dapat menulis komentar di CSS dengan cara berikut:
/* Ini adalah komentar */5. CSS Inline, Internal, dan Eksternal
Ada tiga cara untuk menambahkan CSS ke dalam HTML:
| Metode | Deskripsi | Contoh |
|---|---|---|
| CSS Inline | Menambahkan CSS langsung ke dalam tag HTML menggunakan atribut style | <h1 style="color: blue;">Judul</h1> |
| CSS Internal | Menambahkan CSS di dalam tag <style> di bagian <head> HTML | <style>h1 { color: blue; }</style> |
| CSS Eksternal | Menambahkan CSS melalui file terpisah yang dihubungkan dengan tag <link> | <link rel="stylesheet" href="styles.css"> |
6. Penggunaan CSS Selector Kompleks
Selain selector dasar, kalian juga bisa menggunakan selector yang lebih kompleks, seperti:
| Selector | Deskripsi | Contoh |
|---|---|---|
| Descendant Selector | Memilih elemen dalam elemen lain | div p { color: red; } |
| Child Selector | Memilih elemen anak langsung | div > p { color: blue; } |
| Adjacent Sibling Selector | Memilih elemen yang berada tepat setelah elemen lain | h1 + p { color: green; } |
| General Sibling Selector | Memilih semua elemen yang memiliki saudara yang sama | h1 ~ p { color: yellow; } |
7. CSS Inheritance
Properti CSS seperti color, font-family, dan line-height dapat diwariskan (inherited) dari elemen induk ke elemen anak. Namun, ada beberapa properti yang tidak diwariskan secara otomatis, seperti margin dan padding.
Kalian bisa menggunakan properti inherit untuk mewarisi properti dari elemen induk secara eksplisit.
p {
color: inherit;
}8. CSS Cascade dan Prioritas
Ketika ada beberapa aturan CSS yang diterapkan pada elemen yang sama, prioritas diterapkan sesuai aturan berikut:
- Importance (
!importantmemiliki prioritas tertinggi). - Specificity (ID memiliki prioritas lebih tinggi dari kelas).
- Source Order (aturan yang ditulis paling akhir akan diprioritaskan).
/* Contoh */
p {
color: black !important;
}Dengan pemahaman dasar di atas, kalian bisa mulai bereksperimen dengan CSS untuk mengatur tampilan halaman web sesuai kebutuhan. Ingatlah bahwa CSS adalah tentang eksperimen; jangan ragu untuk mencoba berbagai kombinasi properti dan nilai untuk mendapatkan hasil yang optimal.
Semoga artikel ini membantu kalian memahami sintaks dasar CSS dengan lebih baik!