CSS

Pengertian CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan elemen web seperti warna, ukuran, dan tata letak.
Fungsi utama CSS adalah memisahkan struktur HTML dari tampilan agar desain lebih rapi dan mudah dikelola.
CSS dihubungkan ke HTML menggunakan tag <link> di dalam bagian <head>.

Contoh:

<link rel="stylesheet" href="style.css">

Internal CSS — kode CSS ditulis di dalam tag <style> pada bagian <head> untuk mengatur tampilan halaman yang sama.
External CSS — file CSS terpisah dengan ekstensi .css lalu dihubungkan memakai tag <link> agar bisa digunakan di banyak halaman.
Inline CSS — penulisan CSS langsung pada elemen HTML menggunakan atribut style.

Internal CSS adalah penulisan CSS di dalam tag <style> pada bagian <head> untuk mengatur tampilan halaman yang sama.
Cocok digunakan jika styling hanya diperlukan pada satu halaman dan tidak ingin membuat file .css terpisah.
Membantu mengelola tampilan tanpa memodifikasi setiap elemen dengan inline style.

Contoh:

<head>
  <style>
    h1 { color: blue; }
    p { font-size: 18px; }
  </style>
</head>

External CSS adalah penulisan CSS pada file terpisah dengan ekstensi .css sehingga tampilan dapat digunakan ulang di banyak halaman.
File CSS dihubungkan ke HTML menggunakan tag <link> di dalam bagian <head>.
Cara ini membuat kode lebih rapi dan memudahkan pemeliharaan karena styling dipusatkan di satu file.

Contoh:

<link rel="stylesheet" href="style.css">

Inline CSS adalah penulisan CSS langsung pada elemen HTML menggunakan atribut style.
Umum dipakai untuk perubahan cepat pada satu elemen namun tidak efektif jika digunakan banyak.
Kurang direkomendasikan untuk proyek besar karena sulit dikelola dan tidak konsisten.

Contoh:

<p style="color: red; font-size: 18px;">Teks berwarna merah</p>

Selector digunakan untuk memilih elemen HTML yang akan diberi gaya oleh CSS.
Jenis selector umum antara lain: tag, class, dan id.
Class dipanggil dengan tanda titik (.), sedangkan id memakai tanda pagar (#).

Contoh:

p { color: blue; }      /* selector tag */
.title { font-size: 20px; }  /* selector class */
#header { background: grey; } /* selector id */

Property adalah nama aturan tampilan yang ingin diterapkan pada elemen (misal: color, font-size, margin).
Value adalah nilai yang diberikan pada property untuk menentukan tampilannya (misal: red, 20px, auto).
Keduanya ditulis dalam format property: value; di dalam blok CSS.

Contoh:

p {
  color: red;
  font-size: 18px;
  margin: 10px;
}