Belajar CSS Dasar #3: Memahami Properti CSS dan Cara Menggunakannya

Ingat konsep dasarnya ya, Sob: Format: properti: nilai; (di dalam kurung kurawal {}). Fungsi: Ngasih perintah ke HTML biar nurut sama keinginan kita.

💡 Motivasi Pembuka: "Kode yang rumit selalu berawal dari baris pertama yang sederhana. Jangan takut mencoba!"

Properti CSS Animation (Bikin Elemen Joget) 💃

Ini properti wajib biar web gak kaku kayak kanebo kering. Kita bisa atur gerakan dari A ke B.

• animation: Jurus shorthand (jalan pintas) buat nulis semua properti animasi dalam satu baris.
• animation-name: Nama panggilan animasinya (yang kamu bikin di @keyframes).
• animation-duration: Durasi tayang. Mau cepat (ms) atau lambat (s)?
• animation-timing-function: Gaya ngebutnya. linear (rata), ease-in (pelan di awal), atau ease-out (pelan di akhir).
• animation-delay: Waktu ngaret. Nunggu sebentar sebelum animasi mulai jalan.
• animation-iteration-count: Mau diulang berapa kali? Ketik infinite kalau mau goyang terus selamanya.
• animation-direction: Arah jalan. normal (maju), reverse (mundur), atau alternate (bolak-balik).
• animation-fill-mode: Gaya pas animasi kelar. forwards (berhenti di gaya terakhir) atau backwards (balik ke awal).
• animation-play-state: Rem tangan. Bisa paused (jeda) atau running (jalan).

Contoh Kode:

.kotak-joget
{
  animation-name: goyang;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

“Hidup itu seperti animasi, nikmati setiap pergerakannya, jangan cuma nunggu hasil akhirnya.”

Properti CSS Background (Mural Dinding Web) 🎨

Urusan latar belakang, serahkan ke sini. Lengkap banget opsinya.

• background: Jalan pintas buat nulis semua properti background sekaligus.
• background-color: Ngasih warna cat dasar.
• background-image: Masukin gambar/foto pake url('...').
• background-repeat: Ngatur pengulangan gambar. no-repeat (sekali aja), repeat-x (horizontal), repeat-y (vertikal).
• background-position: Ngatur letak gambar. Mau di center, top left, atau koordinat 10px 20px.
• background-size: Ukuran gambar. cover (full layar), contain (gambar utuh), atau pake pixel/persen.
• background-attachment: Efek scroll. fixed (gambar diem pas discroll), scroll (ikut gerak).
• background-clip: Batas pewarnaan background. border-box (sampai border), padding-box, atau content-box.
• background-origin: Titik start (koordinat 0,0) gambar background dimulai dari mana.

Contoh Kode:

.latar-keren {

  background-image: url('gunung.jpg');

  background-size: cover;

  background-position: center;

  background-attachment: fixed; /* Efek Parallax */

}

“Latar belakang (background) masa lalumu tidak menentukan masa depanmu, tapi memperindah ceritamu.”

Properti CSS Border (Garis Tepi) 🖼️

Biar elemenmu punya batasan yang tegas.

• border: Jalan pintas (tebal, gaya, warna).
• border-width: Seberapa tebal garisnya? (thin, medium, thick, atau pixel).
• border-style: Gayanya. solid (garis lurus), dashed (putus-putus), dotted (titik), double (ganda).
• border-color: Warnanya apa?
• border-radius: Ini favorit! Bikin sudut tajam jadi tumpul/melengkung.
• border-top/right/bottom/left: Kalau mau ngatur satu sisi aja secara spesifik.
• border-image: Anti-mainstream, pake gambar buat jadi garis tepi.

Contoh Kode:

.kartu {

  border: 2px solid #333;

  border-radius: 15px; /* Melengkung manis */

  border-bottom-width: 5px; /* Bawahnya tebal */

}

“Terkadang batasan (border) diperlukan agar kita tetap fokus pada jalur yang benar.”

Properti CSS Column Layout (Gaya Koran) 📰

Pecah teks panjang jadi kolom-kolom biar enak dibaca.

• columns: Jalan pintas ngatur lebar dan jumlah kolom.
• column-count: Mau dibagi jadi berapa kolom? (Misal: 3).
• column-gap: Jarak atau parit antar kolom.
• column-rule: Garis pemisah di tengah-tengah kolom (mirip border).
• column-span: Khusus elemen (biasanya judul) yang mau all (melebar menabrak semua kolom).
• column-width: Lebar ideal minimal per kolomnya.

Contoh Kode:

.berita {

  column-count: 3;

  column-gap: 30px;

  column-rule: 1px solid grey;

}

“Bagi beban masalahmu menjadi kolom-kolom kecil, pasti lebih ringan menyelesaikannya.”

Properti CSS Content (Isi Ajaib) ✨

Biasanya dipake bareng ::before atau ::after.

• content: Isinya apa? Bisa teks, kutipan, atau kosong buat dekorasi.
• quotes: Ngatur jenis tanda kutipnya.
• counter-increment: Nambahin nomor urut otomatis (kayak <i>++ di coding).
• counter-reset: Mulai hitungan dari nol lagi.

Contoh Kode:

.list-poin::before {

  content: "🔥 "; /* Nambah api di depan list */

}

“Content is King. Tapi Context is God. Pastikan isimu bermanfaat!”

Properti CSS Display (Sang Pengatur Posisi) 🏗️

Ini pondasi tata letak. Wajib paham!

• display: Jati diri elemen. block (egois, satu baris sendiri), inline (sebaris), flex/grid (modern layout), none (ngilang).
• visibility: visible (muncul) atau hidden (ngumpet tapi tempatnya masih di-booking).
• position: Cara nempelnya. static (normal), relative (patokan), absolute (bebas), fixed (nempel layar), sticky (nempel pas discroll).
• float: Mengapungkan elemen ke left atau right. (Cara lama, tapi masih dipake).
• clear: Ngusir efek float biar gak kacau layout bawahnya.
• z-index: Tumpukan layer. Angka makin gede makin di depan muka.
• overflow: Kalau isinya kebanyakan gimana? hidden (potong), scroll (kasih scrollbar), auto.
• box-shadow: Kasih efek bayangan biar timbul.
• box-sizing: Cara ngitung ukuran. Wajib pake border-box biar padding gak bikin ukuran elemen melar.

Contoh Kode:

.navbar {

  position: sticky;

  top: 0;

  z-index: 100; /* Selalu di atas */

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

“Posisikan dirimu di tempat yang tepat (position), maka kamu akan bersinar.”

Properti CSS Flexible / Flexbox (Layout Modern 1D) 🤝

Sahabat terbaik frontend dev zaman now.

• flex-direction: Arah mainnya. row (mendatar) atau column (menurun).
• justify-content: Rata mana di sumbu utama? center, space-between (pojok-pojok), flex-start.
• align-items: Rata mana di sumbu silang (atas-bawah)? center, stretch.
• flex-wrap: Kalau gak muat? wrap (turun ke bawah) atau nowrap (maksa sebaris).
• flex-grow: Boleh melar gak kalau ada sisa tempat?
• flex-shrink: Boleh menciut gak kalau sempit?
• order: Ngatur urutan antrian (bisa tuker posisi tanpa ubah HTML).

Contoh Kode:

.menu {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

“Jadilah fleksibel. Kaku cuma bikin kamu mudah patah saat ada tekanan.”

Properti CSS Font (Gaya Tulisan) ✍️

Biar tulisanmu enak dibaca dan estetik.

• font-family: Jenis font (Arial, Times, atau font keren lainnya).
• font-size: Besar kecilnya huruf.
• font-weight: Ketebalan. bold, normal, atau angka 100-900.
• font-style: italic (miring) atau normal.
• font-variant: small-caps (huruf kecil tapi bentuknya kapital).

Contoh Kode:

h1 {

  font-family: 'Poppins', sans-serif;

  font-weight: 700;

  font-size: 2rem;

}

“Suarakan idemu dengan 'font' yang lantang dan jelas!”

Properti CSS Grid Layout (Layout Modern 2D) 🗺️

Lebih dewa dari Flexbox karena bisa ngatur baris DAN kolom sekaligus.

• grid-template-columns: Definisikan lebar kolom-kolomnya.
• grid-template-rows: Definisikan tinggi baris-barisnya.
• gap: Jarak antar sel grid.
• grid-column / grid-row: Ngatur satu item mau makan berapa kotak (start / end).
• grid-area: Ngasih nama wilayah biar gampang manggilnya (misal: "header", "sidebar").

Contoh Kode:

.galeri {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* 3 kolom sama rata */

  gap: 10px;

}

“Rencanakan struktur hidupmu sepresisi Grid system.”

Properti CSS List (Daftar Poin) 📝

Ngatur <ul> dan <ol>.

• list-style-type: Ganti bullet. disc, circle, square, decimal (angka), atau none (ilangin).
• list-style-position: Posisi bulletnya. inside (masuk area teks) atau outside (di luar).
• list-style-image: Ganti bullet pake gambar sendiri.

Contoh Kode:

ul {

  list-style-type: none; /* Bersih tanpa titik */

}

“Satu per satu, selesaikan daftar impianmu.”

Properti CSS Margin (Jaga Jarak Luar) ↔️

Personal space buat elemenmu.

• margin: Jalan pintas 4 sisi.
• margin-top/right/bottom/left: Jarak spesifik per sisi.
• Trik: margin: 0 auto; buat bikin elemen blok jadi rata tengah horizontal.

Contoh Kode:

.konten {

  margin: 20px auto; /* Atas-bawah 20px, Kiri-kanan Auto (Tengah) */

}

“Berikan ruang (margin) untuk dirimu sendiri beristirahat.”

Properti CSS Outline (Garis Fokus) 🔦

Garis di luar border, gak makan tempat (gak ngerusak layout).

• outline-width: Tebalnya.
• outline-style: Gayanya (solid, dotted, dll).
• outline-color: Warnanya.
• outline-offset: Jarak antara outline sama border elemen.

Contoh Kode:

button:focus {

  outline: 3px solid pink;

  outline-offset: 2px;

}

“Fokuslah pada tujuanmu, biarkan dunia melihat sinarmu (outline).”

Properti CSS Padding (Bantalan Dalam) 🛋️

Jarak antara isi konten sama kulit luarnya (border).

• padding: Jalan pintas 4 sisi.
• padding-top/right/bottom/left: Atur per sisi.

Contoh Kode:

.tombol {

  padding: 10px 20px; /* Biar teks gak kejepit */

}

“Perbesar kapasitas diri (padding) agar kamu bisa menampung lebih banyak ilmu.”

Properti CSS Print (Versi Cetak) 🖨️

Biar pas di-print ke kertas hasilnya rapi.

• page-break-before: Paksa ganti halaman sebelum elemen ini.
• page-break-after: Paksa ganti halaman setelah elemen ini.
• page-break-inside: avoid biar elemen (kayak tabel/gambar) gak kepotong di tengah halaman.

Contoh Kode:

@media print {

  h2 { page-break-before: always; } /* Judul bab selalu di kertas baru */

}

“Meninggalkan jejak fisik itu penting, pastikan hasilnya sempurna.”

Properti CSS Size (Dimensi) 📏

Ngatur gedanya elemen.

• width: Lebar.
• height: Tinggi.
• min-width / min-height: Batas minimal (gak boleh lebih kecil dari ini).
• max-width / max-height: Batas maksimal (gak boleh lebih gede dari ini). Penting buat responsif!

Contoh Kode:

img {

  max-width: 100%; /* Biar gambar gak offside di HP */

  height: auto;

}

“Tahu batasan (max-width) itu penting agar tidak berlebihan.”

Properti CSS Table (Spesial Tabel) 📊

Biar tabel gak jadul.

• border-collapse: Wajib pake collapse biar garis tabel nyatu rapi (gak dobel).
• border-spacing: Jarak antar sel (kalau gak di-collapse).
• caption-side: Posisi judul tabel (atas/bawah).
• table-layout: fixed (lebar kolom kaku/cepat) atau auto (nyesuain isi konten).
• empty-cells: show atau hide sel yang gak ada isinya.

Contoh Kode:

table {

  border-collapse: collapse;

  width: 100%;

}

“Data yang terstruktur membawa kejelasan.”

Properti CSS Text (Format Paragraf) 📖

Dandanin teks biar ganteng.

• text-align: left, right, center, justify.
• text-decoration: underline (garis bawah), line-through (coret), none (polos).
• text-transform: uppercase (KAPITAL), lowercase (kecil), capitalize (Huruf Depan Besar).
• text-indent: Teks baris pertama agak masuk ke dalam.
• letter-spacing: Jarak antar huruf.
• word-spacing: Jarak antar kata.
• line-height: Jarak antar baris (biar bacanya napas).
• white-space: Cara nanganin spasi/enter. nowrap (jangan turun baris), pre (sesuai ketikan).
• direction: Arah baca. ltr (kiri ke kanan) atau rtl (kanan ke kiri - Arab).

Contoh Kode:

p {

  line-height: 1.6;

  letter-spacing: 0.5px;

  text-align: justify;

}

“Setiap kata punya makna, aturlah agar pesanmu tersampaikan dengan indah.”

Properti CSS Transform (Otak-Atik Bentuk) 🔄

Memanipulasi geometri tanpa ngerusak tetangga.

• transform: Isinya fungsi kayak rotate() (putar), scale() (zooming), skew() (miringin), translate() (geser posisi).
• transform-origin: Titik pusat putarannya (tengah, pojok kiri, dll).
• transform-style: preserve-3d kalau mau mainan 3 dimensi.

Contoh Kode:

.icon:hover {

  transform: scale(1.2) rotate(10deg); /* Efek pop-up */

}

“Jangan takut berubah (transform). Perubahan membawa perspektif baru.”

Properti CSS Transition (Perubahan Mulus) 🦢

Kunci bikin efek interaktif yang elegan.

• transition: Jalan pintas.
• transition-property: Apa yang mau dianimasikan? (all, background, width).
• transition-duration: Berapa lama proses berubahnya? (misal 0.3s).
• transition-timing-function: Kurva kecepatannya (ease, linear).
• transition-delay: Nunggu bentar sebelum berubah.

Contoh Kode:

.tombol {

  background: blue;

  transition: background 0.3s ease;

}

.tombol:hover {

  background: darkblue; /* Berubah pelan-pelan, gak kaget */

}

“Transisi terbaik adalah yang berjalan mulus tanpa guncangan. Keep calm and code on!”