Pengenalan CSS dan Sintaks Dasar

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan (style) dari halaman web yang dibuat dengan HTML.

Dengan CSS, kita dapat:

• Mengatur warna teks dan background.
• Mengatur ukuran dan jenis font.
• Mengatur posisi dan jarak antar elemen.
• Membuat layout yang responsif di berbagai ukuran layar.

Istilah “cascading” berarti aturan CSS memiliki sistem prioritas yang menentukan aturan mana yang diterapkan ketika ada konflik.

Sejarah Singkat

• CSS diperkenalkan sekitar tahun 1994 oleh Håkon Wium Lie di CERN.
• Digunakan bersama HTML untuk memisahkan struktur (HTML) dan tampilan (CSS).

Sintaks CSS

Satu aturan CSS (rule) terdiri dari:

1. Selector: elemen HTML yang ingin diberi style.
2. Property: jenis style yang ingin diatur.
3. Value: nilai dari style yang diterapkan.

Bentuk umum:

selector {
  property: value;
}

Contoh:

p {
  color: blue;
  font-size: 16px;
}

Penjelasan:

• p adalah selector (semua tag paragraf).
• color dan font-size adalah property.
• blue dan 16px adalah value.

Selector Dasar

Beberapa selector yang sering digunakan:

• Selector tag: p, h1, div
• Selector class: .profile-container
• Selector id: #header
• Selector gabungan: header nav a

Contoh:

.profile-title {
  font-size: 42px;
}
 
#main-content {
  padding: 20px;
}

Komentar di CSS

Komentar digunakan untuk dokumentasi dan tidak dieksekusi oleh browser.

/* Ini adalah komentar CSS */
p {
  color: #333;
}

Komentar berguna untuk:

• Menjelaskan bagian-bagian tertentu dari stylesheet.
• Menonaktifkan sementara aturan CSS tanpa menghapusnya.

CSS bekerja bersama HTML untuk membuat tampilan website lebih menarik, terstruktur, dan mudah dibaca.