Panduan Lengkap CSS: Teori dan Praktik untuk Pemula

Daftar Isi

Pengantar CSS
Struktur dan Sintaks CSS
Selektor CSS
Properti CSS Dasar
CSS Box Model
Layout dengan CSS (Flexbox & Grid)
Responsive Design dengan Media Queries
Animasi dan Transisi CSS
Sumber Belajar dan Source Code

1. Pengantar CSS

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 berbagai aspek visual elemen HTML.

CSS bekerja dengan menghubungkan aturan-aturan style ke elemen HTML menggunakan selektor. Aturan ini dapat diterapkan secara langsung, melalui file eksternal, atau inline.

Ilustrasi diagram yang menunjukkan hubungan antara HTML dan CSS dalam membangun tampilan halaman web

2. Struktur dan Sintaks CSS

Sintaks CSS terdiri dari selektor dan deklarasi. Deklarasi terdiri dari properti dan nilai yang dipisahkan oleh titik dua dan diakhiri dengan titik koma.

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

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

CSS dapat ditulis dalam tiga cara:

Inline CSS: langsung di atribut style elemen HTML.
Internal CSS: di dalam tag <style> pada dokumen HTML.
External CSS: di file terpisah dengan ekstensi .css dan dihubungkan dengan tag <link> .

Contoh kode CSS yang menunjukkan struktur selektor dan deklarasi serta cara penempatan CSS inline, internal, dan eksternal

3. Selektor CSS

Selektor digunakan untuk memilih elemen HTML yang akan diberi style. Berikut beberapa jenis selektor yang umum digunakan:

Selektor Tag: Memilih semua elemen berdasarkan nama tag, misalnya p , h1 .
Selektor Kelas: Memilih elemen dengan atribut class tertentu, diawali dengan titik, misalnya .btn .
Selektor ID: Memilih elemen dengan atribut id tertentu, diawali dengan tanda pagar, misalnya #header .
Selektor Atribut: Memilih elemen berdasarkan atribut, misalnya input[type="text"] .
Selektor Gabungan: Menggabungkan beberapa selektor untuk memilih elemen spesifik, misalnya div.content p .

/* Selektor tag */
p {
  color: #333;
}

/* Selektor kelas */
.btn {
  background-color: #4f46e5;
  color: white;
}

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

Diagram yang menunjukkan berbagai jenis selektor CSS dan elemen HTML yang dipilih oleh masing-masing selektor

4. Properti CSS Dasar

Berikut beberapa properti CSS dasar yang sering digunakan untuk mengatur tampilan elemen:

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.
width & height: Mengatur lebar dan tinggi elemen.
text-align: Mengatur perataan teks (left, center, right).

.box {
  color: white;
  background-color: #2563eb;
  font-size: 18px;
  font-weight: 600;
  margin: 20px;
  padding: 15px;
  border: 2px solid #1e40af;
  width: 300px;
  height: 150px;
  text-align: center;
}

Kotak berwarna biru dengan teks putih yang terpusat di dalamnya, menunjukkan penggunaan properti CSS dasar

5. CSS Box Model

Box Model adalah konsep dasar dalam CSS yang menjelaskan bagaimana elemen HTML dibungkus oleh lapisan-lapisan berikut:

Content: Isi elemen (teks, gambar, dll).
Padding: Ruang antara content dan border.
Border: Garis tepi di sekitar padding dan content.
Margin: Ruang di luar border, memisahkan elemen dengan elemen lain.

Diagram warna-warni yang menunjukkan lapisan CSS Box Model: content, padding, border, dan margin

Contoh penggunaan properti box model:

.box-model-example {
  width: 200px;
  padding: 20px;
  border: 5px solid #4f46e5;
  margin: 30px;
}

6. Layout dengan CSS (Flexbox & 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 penggunaan Flexbox:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  background-color: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
}

Item 1

Item 2

Item 3

Grid

Grid memungkinkan pengaturan elemen dalam dua dimensi (baris dan kolom). Contoh penggunaan Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.grid-item {
  background-color: #4f46e5;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

Grid 1

Grid 2

Grid 3

7. Responsive Design dengan Media Queries

Media Queries memungkinkan kita mengubah style berdasarkan ukuran layar perangkat, sehingga website menjadi responsif dan nyaman di berbagai perangkat.

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

/* Style untuk layar dengan lebar maksimal 600px (mobile) */
@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Ilustrasi berbagai perangkat dengan ukuran layar berbeda yang menampilkan website responsif

8. Animasi dan Transisi CSS

CSS memungkinkan pembuatan animasi dan transisi untuk membuat tampilan website lebih menarik dan interaktif.

Transisi

Transisi mengubah properti CSS secara halus saat terjadi perubahan, misalnya saat hover.

.button {
  background-color: #4f46e5;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #3730a3;
}

Animasi

Animasi memungkinkan pembuatan efek yang lebih kompleks dengan keyframes.

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: red;}
}

.animated-box {
  width: 100px;
  height: 100px;
  animation: example 4s infinite;
}

9. Sumber Belajar dan Source Code

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

Source Code Contoh

Berikut contoh source code sederhana untuk membuat halaman dengan Flexbox dan Grid:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Flexbox dan Grid</title>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #f0f0f0;
      padding: 20px;
    }
    .flex-item {
      background-color: #4f46e5;
      color: white;
      padding: 20px;
      border-radius: 8px;
      width: 100px;
      text-align: center;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 30px;
    }
    .grid-item {
      background-color: #2563eb;
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Flex 1</div>
    <div class="flex-item">Flex 2</div>
    <div class="flex-item">Flex 3</div>
  </div>

  <div class="grid-container">
    <div class="grid-item">Grid 1</div>
    <div class="grid-item">Grid 2</div>
    <div class="grid-item">Grid 3</div>
  </div>
</body>
</html>