Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan website. Jika HTML adalah kerangka rumah, maka CSS adalah cat, wallpaper, dan dekorasi yang membuat rumah terlihat indah.

Apa itu CSS?

CSS singkatan dari Cascading Style Sheets. CSS digunakan untuk:

Mengatur warna text dan background
Mengatur ukuran dan jenis font
Mengatur layout halaman
Menambahkan animasi dan efek
Membuat website responsive (menyesuaikan berbagai ukuran layar)

Mengapa Belajar CSS?

Tanpa CSS, website akan terlihat:

Membosankan (hanya text hitam di background putih)
Tidak terorganisir
Tidak menarik untuk dilihat
Sulit dibaca

Dengan CSS, website menjadi:

Menarik secara visual
Mudah dibaca
Profesional
User-friendly

Cara Kerja CSS

CSS bekerja dengan cara memilih elemen HTML dan memberikan aturan styling kepada elemen tersebut.

/* Memilih semua elemen h1 */
h1 {
  color: blue; /* Warna text biru */
  font-size: 24px; /* Ukuran font 24 pixel */
  text-align: center; /* Text di tengah */
}

3 Cara Menggunakan CSS

1. Inline CSS

CSS ditulis langsung di dalam tag HTML:

<h1 style="color: red; font-size: 30px;">Judul Merah</h1>

2. Internal CSS

CSS ditulis di dalam tag <style> di bagian <head>:

<head>
  <style>
    h1 {
      color: green;
      font-size: 25px;
    }
  </style>
</head>

3. External CSS

CSS ditulis di file terpisah (misalnya style.css):

/* File: style.css */
h1 {
  color: purple;
  font-size: 28px;
}

Kemudian dihubungkan ke HTML:

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

Struktur Dasar CSS

CSS terdiri dari selector, property, dan value:

selector {
  property: value;
  property: value;
}

Contoh:

p {
  /* selector: semua elemen <p> */
  color: black; /* property: color, value: black */
  font-size: 16px; /* property: font-size, value: 16px */
}

Selector Dasar

1. Element Selector

Memilih berdasarkan nama tag:

h1 {
  color: blue;
} /* Semua tag <h1> */
p {
  color: gray;
} /* Semua tag <p> */
div {
  background-color: yellow;
} /* Semua tag <div> */

2. Class Selector

Memilih berdasarkan class (menggunakan titik):

.judul-utama {
  /* Class "judul-utama" */
  color: red;
  font-weight: bold;
}

HTML:

<h1 class="judul-utama">Ini Judul Utama</h1>

3. ID Selector

Memilih berdasarkan ID (menggunakan pagar):

#header {
  /* ID "header" */
  background-color: blue;
  padding: 20px;
}

HTML:

<div id="header">Ini adalah header</div>

Property CSS yang Sering Digunakan

Warna

.element {
  color: red; /* Warna text */
  background-color: yellow; /* Warna background */
}

Font

.text {
  font-family: Arial, sans-serif; /* Jenis font */
  font-size: 18px; /* Ukuran font */
  font-weight: bold; /* Ketebalan font */
}

Spacing

.box {
  margin: 10px; /* Jarak luar */
  padding: 15px; /* Jarak dalam */
}

Border

.kotak {
  border: 2px solid black; /* Border 2px, garis solid, warna hitam */
  border-radius: 5px; /* Sudut melengkung */
}

Contoh Praktis

Mari kita lihat contoh sederhana:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Halaman Saya</title>
    <style>
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }

      .judul {
        color: #333;
        text-align: center;
        font-family: Arial, sans-serif;
      }

      .paragraf {
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
      }

      .tombol {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="judul">Selamat Datang!</h1>
      <p class="paragraf">
        Ini adalah contoh halaman web dengan CSS yang sederhana namun menarik.
      </p>
      <button class="tombol">Klik Saya</button>
    </div>
  </body>
</html>

Tips Belajar CSS

Mulai dengan dasar - Pahami selector, property, dan value dulu
Praktik langsung - Tulis kode dan lihat hasilnya di browser
Eksperimen dengan warna - Coba berbagai kombinasi warna
Gunakan Developer Tools - Klik kanan → Inspect Element untuk melihat CSS
Sabar dan konsisten - CSS butuh latihan untuk dikuasai

Yang Akan Kita Pelajari Selanjutnya

Dalam tutorial CSS selanjutnya, kita akan belajar:

Warna dan Background - Cara mengatur warna dengan berbagai format
Typography - Mengatur font, ukuran, dan spacing text
Box Model - Margin, padding, border, dan width/height
Layout Dasar - Display, position, dan float
Flexbox - Layout modern yang fleksibel
Grid - Layout 2 dimensi yang powerful
Responsive Design - Membuat website yang menyesuaikan berbagai layar
Animasi - Menambahkan gerakan dan transisi

Kesimpulan

CSS adalah kunci untuk membuat website yang menarik dan profesional. Dengan CSS, Anda dapat:

Mengubah tampilan website dari membosankan menjadi menarik
Mengatur layout agar terorganisir dengan baik
Membuat website yang responsive di berbagai perangkat
Menambahkan efek visual yang menarik

Mari kita lanjutkan ke tutorial berikutnya untuk mempelajari CSS lebih dalam!