Belajar CSS — labcodeku

Materi 01

Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan halaman HTML. Kalau HTML adalah tulangnya, CSS adalah kulit, rambut, dan baju-nya.

Tanpa CSS, semua halaman web akan kelihatan seperti dokumen lama: teks hitam putih, font default browser, tata letak vertikal polos. CSS mengubah itu semua.

Bagaimana bentuknya?

CSS ditulis dalam bentuk aturan (rule): pilih elemen apa (selector), lalu atur properti apa (property: value).

aturan-css

/* selector: pilih elemen */
h1 {
  /* property: value; */
  color: tomato;
  font-size: 32px;
}

Dibaca: "semua tag <h1> akan berwarna tomat dan berukuran 32 pixel".

Kenapa "Cascading"? Artinya "mengalir". Kalau satu elemen punya beberapa aturan yang bentrok, CSS punya urutan prioritas untuk menentukan mana yang menang. Ini yang disebut cascade.

Materi 02

Tiga cara menambahkan CSS ke HTML

Ada tiga cara menyisipkan CSS. Semuanya berfungsi, tapi yang paling disarankan untuk project sungguhan adalah cara ketiga.

1. Inline (di dalam tag)

Langsung di atribut style. Paling cepat tapi sulit diatur kalau banyak.

inline.html

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

2. Internal (di dalam <head>)

CSS ditulis di dalam tag <style>, biasanya di bagian <head>.

internal.html

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

3. External (file CSS terpisah) ⭐

CSS ditulis di file .css tersendiri, lalu dihubungkan pakai <link>. Ini cara yang direkomendasikan — rapi, bisa dipakai di banyak halaman, dan browser bisa meng-cache-nya.

index.html

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

style.css

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

Urutan prioritas Kalau bentrok, urutannya (dari paling kuat ke paling lemah): inline → internal/external yang terakhir di-load → default browser. Biasakan pakai external, jangan inline.

Materi 03

Selector — memilih elemen

Selector memberitahu CSS "elemen mana yang ingin diatur". Ada banyak jenis:

Selector	Target	Contoh
`*`	Semua elemen	`* { margin: 0; }`
`tag`	Semua tag tertentu	`p { color: red; }`
`.nama`	Elemen dengan `class="nama"`	`.judul { font-size: 24px; }`
`#nama`	Elemen dengan `id="nama"`	`#header { background: blue; }`
`a, b`	Gabungan (a atau b)	`h1, h2 { color: red; }`
`a b`	b di dalam a	`div p { color: red; }`
`a > b`	b yang langsung anak a	`ul > li { ... }`
`a:hover`	Saat di-hover	`button:hover { ... }`
`a:first-child`	Anak pertama	`li:first-child { ... }`

selector.css

/* semua h1 */
h1 { color: navy; }

/* class "highlight" */
.highlight { background: yellow; }

/* id "main-title" */
#main-title { font-size: 40px; }

/* semua a di dalam nav */
nav a { text-decoration: none; }

/* saat button di-hover */
button:hover { background: orange; }

Kapan pakai class vs id? class untuk gaya yang dipakai berulang (banyak tombol, banyak kartu). id untuk sesuatu yang unik dan hanya satu di halaman (contoh: #main-header, #footer).

Materi 04

Warna

Warna di CSS bisa ditulis dengan banyak cara:

Cara	Contoh	Catatan
Nama	`red`, `blue`, `tomato`	~150 nama warna standar
Hex	`#ff0000`, `#e8632d`	Paling umum di desain
Hex pendek	`#f00` = `#ff0000`	Kalau tiap pasang digitnya sama
RGB	`rgb(255, 0, 0)`	Merah, hijau, biru (0–255)
RGBA	`rgba(255, 0, 0, 0.5)`	Dengan transparansi (0–1)
HSL	`hsl(0, 100%, 50%)`	Hue, Saturation, Lightness

warna.css

.box {
  /* warna teks */
  color: #1a1a1a;

  /* warna latar */
  background: #fff3e0;

  /* latar dengan transparansi */
  background: rgba(232, 99, 45, 0.15);

  /* gradien */
  background: linear-gradient(
    to right,
    #e8632d,
    #f4c430
  );
}

Hasil

Latar krem (#fff3e0)

Latar transparan (rgba)

Gradien (linear-gradient)

Color picker Untuk mencari kode hex warna, cari "color picker" di Google atau pakai aplikasi seperti Coolors. Tidak perlu hapal kode hex — cukup tahu bentuknya #rrggbb.

Materi 05

Tipografi

Mengatur font adalah salah satu hal pertama yang akan kamu lakukan setelah struktur dibuat. Properti utama:

Properti	Fungsi	Contoh
`font-family`	Jenis huruf	`Georgia, serif`
`font-size`	Ukuran	`16px`, `1.2rem`
`font-weight`	Ketebalan	`400` (normal), `700` (bold)
`font-style`	Miring atau tidak	`italic`, `normal`
`line-height`	Jarak antar baris	`1.5` (kali ukuran font)
`letter-spacing`	Jarak antar huruf	`0.05em`
`text-align`	Perataan	`left`, `center`, `right`, `justify`
`text-decoration`	Garis bawah, coret	`underline`, `none`
`text-transform`	Kapitalisasi	`uppercase`, `lowercase`, `capitalize`

Pakai font dari Google Fonts

Google Fonts punya ratusan font gratis. Cara pakai:

pakai-google-fonts

<!-- di <head> HTML -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

style.css

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
}

Ukuran: px, rem, atau em? px tetap (16px = 16 pixel). rem relatif terhadap ukuran dasar (1rem biasanya = 16px). Untuk halaman yang accessible, pakai rem agar pengguna bisa memperbesar tulisan lewat pengaturan browser.

Materi 06

Box model

Inilah konsep paling penting di CSS yang harus benar-benar kamu pahami. Setiap elemen di HTML itu sebenarnya berbentuk kotak. Kotak itu punya 4 lapisan dari dalam ke luar:

Content — isi kotak (teks, gambar).
Padding — ruang di dalam kotak, antara isi dan border.
Border — garis pinggir kotak.
Margin — ruang di luar kotak, memberi jarak dengan elemen lain.

Visualisasi

margin

padding

content

box.css

.kotak {
  /* isi */
  width: 200px;
  height: 100px;

  /* ruang dalam */
  padding: 20px;
  /* atau per sisi: padding: 10px 20px;
     (atas-bawah, kiri-kanan) */

  /* garis pinggir */
  border: 2px solid tomato;
  border-radius: 8px;  /* sudut membulat */

  /* jarak keluar */
  margin: 30px;

  background: white;
}

Tips: pakai box-sizing Secara default, width: 200px = lebar content saja (padding & border jadi tambahan). Ini sering bikin bingung! Tambahkan ini di awal CSS-mu:

* { box-sizing: border-box; }

Sekarang width: 200px sudah termasuk padding & border. Jauh lebih intuitif!

Materi 07

Display & visibility

Properti display menentukan bagaimana elemen "berperilaku" dalam tata letak.

Value	Arti
`block`	Memenuhi lebar baris, ganti baris otomatis. (Default untuk `div`, `p`, `h1`)
`inline`	Selebar isinya, dalam satu baris. (Default untuk `span`, `a`, `strong`)
`inline-block`	Inline tapi bisa diatur width & height.
`flex`	Aktifkan flexbox (lihat materi 9).
`grid`	Aktifkan grid (lihat materi 10).
`none`	Sembunyikan elemen total (seakan tidak ada).

Block vs inline

Block — memenuhi lebar

Block — ganti baris otomatis

Inline A Inline B Inline C — tetap satu baris

Sembunyikan elemen

display: none; — hilang total, tidak ambil tempat.
visibility: hidden; — tak terlihat, tapi tempatnya masih ada.
opacity: 0; — transparan total, tapi masih bisa di-hover/klik.

Materi 08

Positioning

Properti position mengontrol bagaimana elemen diposisikan dalam halaman. Nilai-nilainya:

Value	Arti
`static`	Default. Mengikuti aliran halaman.
`relative`	Bisa digeser dari posisi aslinya pakai top/left/right/bottom.
`absolute`	Keluar dari aliran. Posisinya relatif terhadap elemen induk relative atau absolute terdekat.
`fixed`	Menempel pada viewport (layar), tidak bergerak saat di-scroll.
`sticky`	Seperti `relative`, tapi "nempel" saat di-scroll sampai ke batas tertentu.

position.css

/* Tombol floating kanan bawah */
.tombol-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

/* Navbar yang menempel saat di-scroll */
.navbar {
  position: sticky;
  top: 0;
  background: white;
}

/* Badge di pojok kanan atas kartu */
.kartu {
  position: relative;  /* jadi patokan */
}
.kartu .badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Z-index Kalau elemen saling tumpang tindih, z-index menentukan mana yang di atas. Nilai lebih tinggi = lebih ke depan. Cuma berfungsi pada elemen yang punya position selain static.

Materi 09

Flexbox — tata letak 1 dimensi

Flexbox adalah cara paling mudah untuk menyusun elemen secara horizontal atau vertikal. Kamu akan pakai ini setiap hari.

Konsepnya: tambahkan display: flex ke elemen induk (container), lalu atur posisi anak-anaknya.

flexbox.css

.container {
  display: flex;
  justify-content: space-between; /* rata horizontal */
  align-items: center;            /* rata vertikal */
  gap: 12px;                       /* jarak antar item */
  flex-direction: row;             /* row (default) atau column */
  flex-wrap: wrap;                 /* wrap kalau tidak muat */
}

justify-content (sumbu utama)

Value	Hasil
`flex-start`	Rata kiri (default)
`flex-end`	Rata kanan
`center`	Rata tengah
`space-between`	Jarak sama antar item, pinggir mepet
`space-around`	Jarak sama di setiap sisi item
`space-evenly`	Jarak benar-benar sama semua

Contoh: justify-content: space-between

A

B

C

align-items (sumbu silang)

Value	Hasil
`flex-start`	Atas (kalau row)
`center`	Tengah — paling sering dipakai
`flex-end`	Bawah
`stretch`	Item direntangkan memenuhi sumbu silang (default)

Tips flexbox Kombinasi justify-content: center + align-items: center adalah cara paling mudah untuk menempatkan sesuatu tepat di tengah kotak. Dulu cara ini susah banget, sekarang cuma dua baris.

Materi 10

Grid — tata letak 2 dimensi

Kalau flexbox untuk 1 dimensi (horizontal ATAU vertikal), CSS Grid untuk 2 dimensi (kolom DAN baris sekaligus). Cocok untuk layout halaman utuh.

grid.css

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 kolom sama lebar */
  gap: 16px;
}

/* Atau pakai auto-fit untuk responsive */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  );
  gap: 16px;
}

Hasil: grid 3 kolom

1

2

3

4

5

6

Unit `fr`

fr artinya "fraction" (bagian). 1fr 1fr 1fr = tiga kolom sama lebar. 1fr 2fr = dua kolom, yang kanan 2x lebih lebar.

Flexbox vs Grid, pakai yang mana? Flexbox untuk susunan sebaris/sekolom (navbar, daftar tombol). Grid untuk layout dua dimensi (daftar kartu, halaman utuh). Sering dipakai berbarengan.

Materi 11

Responsive — tampilan untuk HP & tablet

Agar halaman bagus di HP maupun laptop, pakai media query. Intinya: "kalau lebar layar kurang dari sekian, terapkan aturan ini".

Pertama-tama, pastikan meta viewport ada di HTML Tanpa ini, HP akan menampilkan halaman seperti di laptop (zoom out) sehingga tulisan jadi kecil.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

responsive.css

/* Gaya default (untuk layar besar) */
.judul {
  font-size: 48px;
  text-align: left;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* Kalau layar <= 768px (tablet) */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Kalau layar <= 480px (HP) */
@media (max-width: 480px) {
  .judul {
    font-size: 28px;
    text-align: center;
  }
  .layout {
    grid-template-columns: 1fr;
  }
}

Patokan ukuran umum

Breakpoint	Biasanya
≤ 480px	HP
481px – 768px	Tablet vertikal
769px – 1024px	Tablet horizontal / laptop kecil
≥ 1025px	Laptop / desktop

Mobile-first Pendekatan modern: tulis CSS untuk HP dulu (tanpa media query), lalu tambahkan aturan untuk layar lebih besar pakai @media (min-width: ...). Ini biasanya menghasilkan CSS yang lebih ringkas.

Materi 12

Transition & animasi

CSS bisa membuat animasi halus tanpa JavaScript sama sekali.

Transition — perubahan halus

Transisi otomatis memuluskan perubahan properti (warna, ukuran, posisi).

transition.css

.tombol {
  background: #e8632d;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

.tombol:hover {
  background: #c84d1c;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

Hasil: hover tombolnya

Animasi dengan `@keyframes`

Untuk animasi yang lebih rumit, pakai @keyframes.

animasi.css

@keyframes goyang {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.lonceng {
  display: inline-block;
  animation: goyang 0.5s ease-in-out infinite;
}

Latihan Akhir

Bikin kartu profil yang cantik

Styling halaman profil yang kamu buat di bab HTML. Tujuannya: kartu profil yang rapi, tengah halaman, dan responsive.

Tugas

Ketentuan

File style.css terpisah dari HTML.
Kartu profil berada di tengah halaman (horizontal).
Foto profil dibuat bulat (border-radius: 50%).
Ada shadow halus di kartu.
Tombol sosial media berubah warna saat di-hover.
Tampilan tetap bagus di HP (layar kecil).

Lihat contoh jawaban

style.css

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Poppins', sans-serif;
  background: #f4f0e8;
  color: #222;
  line-height: 1.6;
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

.kartu {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.kartu img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #e8632d;
  margin-bottom: 1rem;
}

h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.1rem; margin-top: 1.5rem; color: #555; }

ul { list-style: none; padding: 0; }
ul li {
  padding: 6px 12px;
  background: #fff3e0;
  border-radius: 20px;
  display: inline-block;
  margin: 4px;
  font-size: 0.9rem;
}

.tombol-sosmed {
  display: inline-block;
  margin-top: 1rem;
  padding: 10px 24px;
  background: #e8632d;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.25s;
}

.tombol-sosmed:hover {
  background: #c84d1c;
  transform: translateY(-2px);
}

table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
}
table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
table td:first-child {
  font-weight: 600;
  color: #666;
  width: 40%;
}

@media (max-width: 480px) {
  .kartu { padding: 1.5rem; }
  .kartu img { width: 90px; height: 90px; }
}

Cheatsheet

Ringkasan properti CSS

Properti	Fungsi	Contoh
`color`	Warna teks	`color: #333;`
`background`	Warna/gambar latar	`background: #fff;`
`font-family`	Jenis font	`font-family: Arial;`
`font-size`	Ukuran font	`font-size: 16px;`
`font-weight`	Ketebalan	`font-weight: 700;`
`line-height`	Jarak antar baris	`line-height: 1.6;`
`text-align`	Perataan teks	`text-align: center;`
`padding`	Jarak dalam	`padding: 10px;`
`margin`	Jarak luar	`margin: 20px auto;`
`border`	Garis pinggir	`border: 1px solid #ccc;`
`border-radius`	Sudut membulat	`border-radius: 8px;`
`box-shadow`	Bayangan	`box-shadow: 0 4px 8px rgba(0,0,0,.1);`
`display`	Jenis tampilan	`display: flex;`
`justify-content`	Rata horizontal (flex)	`justify-content: center;`
`align-items`	Rata vertikal (flex)	`align-items: center;`
`gap`	Jarak antar item flex/grid	`gap: 12px;`
`grid-template-columns`	Jumlah & lebar kolom	`grid-template-columns: 1fr 1fr;`
`position`	Jenis positioning	`position: fixed;`
`width, height`	Lebar & tinggi	`width: 100%;`
`transition`	Animasi halus	`transition: all 0.3s;`
`transform`	Rotasi, skala, translasi	`transform: rotate(45deg);`
`@media`	Responsive	`@media (max-width:600px) {}`

CSS — penampilan halaman web.

Apa itu CSS?

Bagaimana bentuknya?

Tiga cara menambahkan CSS ke HTML

1. Inline (di dalam tag)

2. Internal (di dalam <head>)

3. External (file CSS terpisah) ⭐

Selector — memilih elemen

Warna

Tipografi

Pakai font dari Google Fonts

Box model

Display & visibility

Sembunyikan elemen

Positioning

Flexbox — tata letak 1 dimensi

justify-content (sumbu utama)

align-items (sumbu silang)

Grid — tata letak 2 dimensi

Unit `fr`

Responsive — tampilan untuk HP & tablet

Patokan ukuran umum

Transition & animasi

Transition — perubahan halus

Animasi dengan `@keyframes`

Mana properti untuk memberi jarak di dalam elemen (antara isi dan border)?

Bikin kartu profil yang cantik

Ketentuan

Ringkasan properti CSS

CSS — penampilan halaman web.

Apa itu CSS?

Bagaimana bentuknya?

Tiga cara menambahkan CSS ke HTML

1. Inline (di dalam tag)

2. Internal (di dalam <head>)

3. External (file CSS terpisah) ⭐

Selector — memilih elemen

Warna

Tipografi

Pakai font dari Google Fonts

Box model

Display & visibility

Sembunyikan elemen

Positioning

Flexbox — tata letak 1 dimensi

justify-content (sumbu utama)

align-items (sumbu silang)

Grid — tata letak 2 dimensi

Unit fr

Responsive — tampilan untuk HP & tablet

Patokan ukuran umum

Transition & animasi

Transition — perubahan halus

Animasi dengan @keyframes

Mana properti untuk memberi jarak di dalam elemen (antara isi dan border)?

Bikin kartu profil yang cantik

Ketentuan

Ringkasan properti CSS

Unit `fr`

Animasi dengan `@keyframes`