CSS Dasar: Bikin Website Jadi Cantik

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan website — warna, ukuran font, jarak, layout. Tanpa CSS, website cuma teks polos. Dengan CSS, website bisa secantik Instagram!

1. Cara Menyisipkan CSS

Ada 3 cara, tapi yang paling rapi adalah pakai file .css terpisah atau tag <style> di dalam <head>.

<!-- Cara 1: di dalam <style> tag -->
<head>
  <style>
    h1 {
      color: navy;
      font-size: 2rem;
    }
  </style>
</head>

<!-- Cara 2: file CSS terpisah (lebih rapi!) -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

2. Selektor CSS — Pilih Mana yang Mau Distyle

Tag Selektor

p { ... }

Semua tag <p>

Class Selektor

.nama-kelas { ... }

Element dengan class tertentu

ID Selektor

#nama-id { ... }

Element unik dengan id

/* Tag: semua paragraf */
p { color: #555; }

/* Class: elemen dengan class "judul" */
.judul { font-size: 1.5rem; font-weight: bold; }

/* ID: elemen unik dengan id "header" */
#header { background-color: #1e293b; color: white; }

3. Warna & Teks

h1 {
  color: #e11d48;           /* warna teks — bisa nama/hex/rgb */
  font-size: 2.5rem;       /* ukuran font */
  font-weight: bold;       /* tebal */
  font-family: 'Arial', sans-serif; /* jenis font */
  text-align: center;     /* rata tengah */
  text-decoration: underline; /* garis bawah */
  letter-spacing: 2px;    /* jarak antar huruf */
}

body {
  background-color: #f8fafc; /* warna background */
}

💡 Tips warna: Pakai coolors.co untuk pilih kombinasi warna yang kece, atau cukup ketik nama warna dalam bahasa Inggris: red, blue, tomato, coral, teal

4. Box Model — Konsep Paling Penting di CSS

Setiap elemen HTML adalah sebuah kotak. Kotak ini punya 4 lapisan:

margin — jarak luar

border — garis tepi

padding — jarak dalam

konten

.kartu {
  padding: 20px;              /* jarak dalam (konten → border) */
  margin: 16px;               /* jarak luar (border → elemen lain) */
  border: 2px solid #e2e8f0; /* garis tepi */
  border-radius: 12px;        /* sudut membulat */
  width: 300px;               /* lebar */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* bayangan */
}

5. Flexbox — Layout yang Mudah

Flexbox adalah cara paling mudah untuk mengatur posisi elemen — sejajar, tengah, bagi rata, dsb.

.container {
  display: flex;              /* aktifkan flexbox */
  justify-content: center;   /* rata horizontal: center/space-between/space-around */
  align-items: center;       /* rata vertikal */
  gap: 16px;                  /* jarak antar item */
  flex-wrap: wrap;            /* wrap ke baris berikut jika penuh */
}

.item {
  flex: 1;                    /* bagi ruang secara rata */
}

Item 1

Item 2

Item 3

↑ Contoh layout Flexbox dengan gap dan flex:1

6. Contoh Lengkap: Kartu Profil

<!-- HTML -->
<div class="kartu">
  <h2>Ahmad Fauzi</h2>
  <p class="jabatan">Pelajar Kelas 8</p>
</div>

/* CSS */
.kartu {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
  max-width: 280px;
}
.jabatan { color: #64748b; font-size: 0.9rem; }
.tombol {
  display: inline-block;
  background: #4f46e5;
  color: white;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 12px;
}

✨ Hasil tampilan nyata:

Ahmad Fauzi

Pelajar Kelas 8

↑ Ini hasil dari CSS yang kamu tulis — kartu profil sederhana!

📋 Cheat Sheet CSS Penting

Properti	Contoh Nilai	Fungsi
`color`	red / #e11d48 / rgb(255,0,0)	Warna teks
`background-color`	#f8fafc / lightblue	Warna latar
`font-size`	1rem / 16px / 1.2em	Ukuran huruf
`font-weight`	bold / 400 / 700	Ketebalan huruf
`padding`	16px / 8px 16px	Jarak dalam
`margin`	auto / 16px 0	Jarak luar
`border`	1px solid #ccc	Garis tepi
`border-radius`	8px / 50%	Sudut membulat
`display`	flex / block / inline-block	Cara tampil
`width / height`	100% / 200px / auto	Ukuran elemen
`text-align`	left / center / right	Rata teks
`opacity`	0 – 1	Transparansi

← Tutorial 1: HTML Dasar Tutorial 3: JavaScript →