Sintaks Dasar CSS Lengkap

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:

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 (!important memiliki 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!

Sintaks Dasar CSS Lengkap