1. Pengantar CSS: Apa itu CSS dan Mengapa Penting?

CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, kita dapat mengubah warna, ukuran, posisi, dan gaya elemen HTML agar website menjadi menarik dan mudah digunakan.

Tanpa CSS, halaman web hanya akan menampilkan konten secara sederhana dan tidak terstruktur. CSS memungkinkan kita membuat desain yang konsisten dan responsif di berbagai perangkat.

2. Struktur Dasar CSS dan Cara Menulisnya

CSS terdiri dari aturan-aturan yang disebut ruleset . Setiap ruleset memiliki selektor dan deklarasi . Deklarasi berisi properti dan nilai yang ingin diterapkan.

h1 {
  color: blue;
  font-size: 24px;
}
      

Contoh di atas berarti semua elemen <h1> akan berwarna biru dan memiliki ukuran font 24 piksel.

3. Selektor CSS: Memilih Elemen dengan Tepat

Selektor adalah bagian dari CSS yang menentukan elemen HTML mana yang akan diberi gaya. Berikut beberapa jenis selektor yang sering digunakan:

• Selektor Tag: Memilih semua elemen berdasarkan nama tag, misal p , h1 .
• Selektor Kelas: Memilih elemen dengan atribut class tertentu, misal .button .
• Selektor ID: Memilih elemen dengan atribut id tertentu, misal #header .
• Selektor Atribut: Memilih elemen berdasarkan atribut, misal a[href] .

/* Selektor tag */
p {
  color: gray;
}

/* Selektor kelas */
.button {
  background-color: green;
  color: white;
}

/* Selektor ID */
#header {
  font-weight: bold;
}
      

4. Properti CSS Umum dan Fungsinya

Berikut beberapa properti CSS yang sering digunakan untuk mengatur tampilan:

• color: Mengatur warna teks.
• background-color: Mengatur warna latar belakang.
• font-size: Mengatur ukuran font.
• font-weight: Mengatur ketebalan font (normal, bold, dll).
• margin: Mengatur jarak luar elemen.
• padding: Mengatur jarak dalam elemen.
• border: Mengatur garis tepi elemen.
• text-align: Mengatur perataan teks (left, center, right).

p {
  color: #333333;
  background-color: #f0f0f0;
  font-size: 16px;
  margin: 10px 0;
  padding: 8px;
  border: 1px solid #ccc;
  text-align: justify;
}
      

5. CSS Box Model: Memahami Margin, Border, Padding, dan Content

Setiap elemen HTML dianggap sebagai sebuah kotak yang terdiri dari beberapa bagian:

• Content: Area isi elemen, seperti teks atau gambar.
• Padding: Ruang antara content dan border.
• Border: Garis tepi di sekitar padding.
• Margin: Ruang di luar border, memisahkan elemen dengan elemen lain.

Contoh penggunaan box model:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
      

Elemen dengan kelas .box akan memiliki lebar 200px untuk content, padding 20px di dalamnya, border hitam 5px, dan margin 10px di luar border.

6. Layout dengan CSS: Flexbox dan Grid

CSS menyediakan dua metode utama untuk membuat layout yang fleksibel dan responsif: Flexbox dan Grid .

Flexbox

Flexbox memudahkan pengaturan elemen dalam satu dimensi (baris atau kolom). Contoh membuat baris dengan tiga kotak yang rata dan berjarak:

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 30%;
  background-color: #a5b4fc;
  padding: 20px;
  color: white;
  text-align: center;
}
      

Grid

Grid memungkinkan pengaturan elemen dalam dua dimensi (baris dan kolom). Contoh membuat grid 3 kolom:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #60a5fa;
  padding: 20px;
  color: white;
  text-align: center;
}
      

7. Membuat Desain Responsif dengan Media Queries

Desain responsif membuat tampilan website menyesuaikan ukuran layar perangkat, seperti smartphone, tablet, dan desktop. Media queries digunakan untuk menerapkan gaya berbeda berdasarkan lebar layar.

/* Gaya default untuk desktop */
.container {
  width: 800px;
  margin: auto;
}

/* Untuk layar kecil (max 600px) */
@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}
      

Contoh di atas membuat container selebar 800px di desktop, dan melebar 100% dengan padding 10px di layar kecil.

8. Animasi dan Transisi CSS untuk Interaksi Menarik

CSS memungkinkan membuat animasi dan transisi untuk mempercantik interaksi pengguna. Transisi membuat perubahan properti lebih halus, sedangkan animasi bisa membuat gerakan kompleks.

Contoh Transisi

.button {
  background-color: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #1e40af;
}
      

Contoh Animasi

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}
      

9. Sumber Belajar dan Contoh Source Code

Berikut beberapa sumber belajar CSS yang direkomendasikan untuk memperdalam pengetahuan dan praktik:

• MDN Web Docs - CSS - Dokumentasi lengkap dan tutorial CSS dari Mozilla.
• W3Schools CSS Tutorial - Tutorial interaktif dan contoh kode CSS.
• CSS-Tricks - Artikel dan tips CSS dari komunitas.
• Traversy Media (YouTube Channel) - Video tutorial web development termasuk CSS.
• DesignCourse (YouTube Channel) - Tutorial desain UI/UX dan CSS.

Contoh Source Code Lengkap

Berikut contoh sederhana halaman HTML dengan CSS internal yang menggunakan beberapa konsep yang telah dipelajari:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Halaman CSS</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f9fafb;
    }
    header {
      background-color: #2563eb;
      color: white;
      padding: 15px;
      text-align: center;
      border-radius: 8px;
    }
    nav a {
      margin: 0 10px;
      color: white;
      text-decoration: none;
      font-weight: bold;
    }
    nav a:hover {
      text-decoration: underline;
    }
    section {
      margin-top: 20px;
      background-color: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    .button {
      background-color: #2563eb;
      color: white;
      padding: 10px 20px;
      border-radius: 6px;
      transition: background-color 0.3s ease;
      display: inline-block;
      margin-top: 10px;
    }
    .button:hover {
      background-color: #1e40af;
    }
  </style>
</head>
<body>
  <header>
    <h1>Selamat Datang di Contoh Halaman CSS</h1>
    <nav>
      <a href="#">Beranda</a>
      <a href="#">Tentang</a>
      <a href="#">Kontak</a>
    </nav>
  </header>
  <section>
    <h2>Ini adalah bagian konten utama</h2>
    <p>Dengan CSS, kita bisa mengatur tampilan halaman agar lebih menarik dan mudah dibaca.</p>
    <a href="#" class="button">Pelajari Lebih Lanjut</a>
  </section>
</body>
</html>