Dokumentasi CSS
Referensi CSS yang ringkas dan penuh contoh. Baca konsepnya, lihat kodenya, lalu praktikkan di perjalanan Coddy.
Mulai kursusMemulai
- Inline CSSInline CSS menaruh deklarasi langsung pada sebuah elemen dengan atribut style. Pelajari sintaksnya, kapan inline style adalah pilihan yang tepat, bagaimana ia menang atas stylesheet, dan perbandingannya dengan internal dan external CSS.
- External CSSExternal CSS disimpan di file .css yang dihubungkan setiap halaman dengan <link rel="stylesheet">; internal CSS berada di elemen <style> di dalam satu halaman. Pelajari keduanya, cara kerja path file, dan aturan mana yang menang saat keduanya bertemu.
- KomentarCSS hanya punya satu sintaks komentar, /* ... */, untuk satu baris maupun banyak baris. Pelajari di mana komentar bisa ditaruh, cara menonaktifkan aturan dengan komentar, dan kenapa // serta komentar bersarang diam-diam merusak aturan berikutnya.
- !important!important membuat sebuah deklarasi menang atas deklarasi normal, berapa pun specificity-nya. Pelajari dengan tepat apa yang dikalahkannya, apa yang mengalahkannya, cara kerja specificity di baliknya, dan cara yang lebih rapi untuk memenangkan konflik style.
- VariabelVariabel CSS (custom property) menyimpan sebuah nilai satu kali lalu memakainya ulang dengan var(). Pelajari cara mendeklarasikannya di :root, mengatur cakupan dan menimpanya, memberi nilai cadangan, mengganti tema dengan JavaScript, dan menghindari jebakan nilai yang tidak valid.
Selector
- SelectorSelector CSS memilih elemen yang diberi style oleh sebuah aturan. Pelajari semua jenis selector, empat combinator (descendant, child, adjacent sibling, general sibling), attribute selector, pengelompokan, dan uji selector secara langsung.
- Class SelectorClass selector (.nama) memberi style pada setiap elemen dengan class tersebut; ID selector (#nama) memberi style pada satu elemen dengan id tersebut. Pelajari sintaksnya, beberapa class dan class berantai, class vs id, aturan penamaan, dan mengganti class dengan JavaScript.
- Pseudo-ClassPseudo-class memilih elemen berdasarkan posisi atau state-nya: :nth-child(), :first-child, :not(), :focus, :checked, :has(), dan lainnya. Pelajari sintaksnya, rumus an+b dengan alat uji langsung, dan perbedaan nth-child dan nth-of-type.
- ::before dan ::after::before dan ::after menyisipkan konten buatan sebagai anak pertama dan terakhir sebuah elemen, langsung dari CSS. Pelajari properti content, kenapa content kosong tetap wajib, cara memosisikannya, tooltip dengan attr(), counter, dan di mana keduanya tidak berfungsi.
- HoverPseudo-class :hover memberi style pada elemen selama pointer berada di atasnya. Pelajari efek hover untuk tombol dan kartu, transisi yang mulus, warna link dengan :link, :visited, :hover, dan :active dalam urutan yang benar, serta hover di layar sentuh.
Box Model
- Box ModelSetiap elemen adalah kotak yang terdiri dari empat lapisan: content, padding, border, dan margin. Pelajari bagaimana setiap lapisan menambah ukuran, bagaimana box-sizing: border-box mengubah hitungannya, dan lihat setiap lapisan diukur secara langsung.
- PaddingPadding adalah ruang di dalam sebuah elemen, di antara isi dan border-nya. Pelajari shorthand padding dengan 1 sampai 4 nilai, property untuk setiap sisi, padding logis, persentase, dan bagaimana padding mengubah ukuran elemen.
- MarginMargin adalah ruang transparan di luar border sebuah elemen yang mendorong elemen lain menjauh. Pelajari shorthand margin, menengahkan dengan margin: 0 auto, margin negatif, margin auto di flexbox, dan kenapa margin vertikal bisa menyatu.
- Margin vs PaddingPadding adalah ruang di dalam border sebuah elemen, sedangkan margin adalah ruang di luarnya. Lihat keduanya pada kotak yang sama, berdampingan dan langsung, lalu pelajari mana yang dipakai untuk background, area klik, jarak antar elemen, dan menengahkan.
- BorderProperti border menggambar garis di sekeliling padding elemen. Pelajari shorthand border, semua gaya border, warna dan satu sisi saja, sudut membulat dengan border-radius, serta bedanya border dengan outline.
- Width dan Heightwidth dan height mengatur ukuran kotak sebuah elemen. Pelajari ukuran tetap dan persentase, kenapa height: 100% sering tidak berpengaruh, min-height dan max-width untuk layout yang fleksibel, auto vs 100%, dan kata kunci fit-content.
Teks dan Font
- Ukuran FontProperti font-size mengatur seberapa besar teks. Pelajari satuan yang diterimanya (px, rem, em, %, kata kunci, vw), cara mengubah ukuran font di HTML, kenapa rem adalah default yang aman, dan bagaimana ukuran em berlipat ganda.
- Font WeightProperti font-weight membuat teks tebal, tipis, atau apa saja di antaranya. Pelajari skala angka dari 100 sampai 900, normal dan bold, bolder dan lighter yang relatif, dan kenapa sebuah ketebalan kadang tidak menunjukkan perubahan apa pun.
- Line Heightline-height mengatur tinggi setiap baris teks, sekaligus jarak antar baris. Pelajari kenapa angka tanpa satuan adalah default yang tepat, bagaimana nilai px, em, dan % diwariskan secara berbeda, serta nilai yang bagus untuk teks paragraf dan judul.
- Warna TeksTag <font color> sudah usang. Warna teks di HTML diatur dengan property CSS color. Pelajari cara mewarnai seluruh halaman, satu kata, link, atau judul, dengan nama warna, hex, dan rgb, serta cara menjaga teks tetap mudah dibaca.
- UnderlineBeri garis bawah pada teks dengan text-decoration, lalu atur garisnya: warna, gaya, ketebalan, dan jaraknya dari teks. Di sini juga dibahas cara menghapus garis bawah dari link, dan kapan sebaiknya tidak kamu lakukan.
- Text Shadowtext-shadow menggambar satu atau beberapa bayangan di belakang teks. Pelajari keempat nilainya (offset x, offset y, blur, warna), cara menumpuk bayangan untuk efek glow, outline, dan 3D, serta cara memakai bayangan agar teks tetap mudah dibaca di atas latar yang ramai.
Warna dan Latar Belakang
- WarnaSemua cara menulis warna di CSS: nama warna, kode hex, rgb() dan rgba(), hsl(), transparansi dengan alpha channel, currentColor, serta oklch() dan color-mix() yang lebih baru. Masing-masing dengan contoh langsung dan sebuah konverter.
- Background Colorbackground-color mengisi kotak elemen dengan warna. Pelajari cara mengatur warna latar seluruh halaman, sebuah div, satu baris tabel, atau satu kata, cara kerja transparansi, kenapa bgcolor sudah usang, dan apa bedanya background-color dengan shorthand background.
- Background Imagebackground-image menaruh gambar atau gradien di belakang konten elemen. Pelajari url() dan gradien, background-size (cover dan contain), background-position, background-repeat, menumpuk beberapa background, dan shorthand background.
- GradienGradien CSS adalah gambar yang digambar browser dari warna-warna. Pelajari radial-gradient (bentuk, ukuran, posisi), linear-gradient (arah dan sudut), conic-gradient, color stop, hard stop untuk garis-garis, gradien berulang, dan teks gradien.
- Box Shadowbox-shadow menggambar bayangan di sekeliling kotak elemen. Pelajari lima nilainya (x, y, blur, spread, warna), bayangan inset, menumpuk beberapa bayangan untuk kedalaman yang realistis, focus ring yang dibuat dengan spread, dan kesalahan yang membuat bayangan terlihat kotor.
Tata Letak
- DisplayProperti display menentukan bagaimana sebuah elemen ikut serta dalam tata letak. Pelajari block, inline, dan inline-block dengan kotak-kotak terukur yang berdampingan, display none vs visibility hidden, dan di mana posisi flex, grid, flow-root, serta contents.
- Positionposition: absolute menempatkan elemen di koordinat yang tepat di dalam ancestor terdekat yang diposisikan. Pelajari cara kerja absolute bersama position: relative, lalu fixed dan sticky, property top/right/bottom/left dan inset, serta kenapa sticky kadang tidak menempel.
- Z-Indexz-index menentukan elemen mana yang digambar paling depan saat saling tumpang tindih. Pelajari elemen apa saja yang bisa memakainya, bagaimana stacking context mengelompokkan elemen sehingga z-index 9999 pun masih bisa kalah, apa saja yang membuat stacking context, dan cara memperbaiki z-index yang tidak berfungsi.
- Overflowoverflow menentukan apa yang terjadi pada konten yang tidak muat di kotaknya: ditampilkan, dipotong, atau diberi scrollbar. Pelajari visible, hidden, scroll, auto, dan clip, overflow-x dan overflow-y, ellipsis pada teks, serta efek samping overflow pada layout.
- Float dan Clearfloat mendorong elemen ke satu sisi dan membiarkan teks mengalir di sekelilingnya, seperti cara majalah menaruh foto. Pelajari float left, right, dan inline-start, clear, kenapa induk mengempis di sekitar float dan bagaimana display: flow-root memperbaikinya, serta kenapa float tidak lagi dipakai untuk tata letak halaman.
- Div di TengahSemua cara menengahkan div secara horizontal, vertikal, atau keduanya: flexbox, grid, margin auto, posisi absolute dengan transform, inset dengan margin auto, dan align-content. Setiap metode berjalan langsung dan mengukur hasil penengahannya sendiri, lengkap dengan tabel kapan memakai yang mana.
- Gambar di Tengah<img> bersifat inline, jadi ditengahkan seperti teks: text-align: center pada induknya. Atau jadikan block dengan margin: 0 auto, atau tengahkan dengan flexbox atau grid, termasuk secara vertikal. Setiap metode berjalan langsung dan mengukur hasilnya.
Flexbox dan Grid
- FlexboxFlexbox menata item dalam satu baris atau kolom dan mengatur bagaimana item berbagi ruang dan berjajar. Pelajari display: flex, sumbu utama dan sumbu silang, setiap properti container, flex-grow, flex-shrink, dan flex-basis, dengan playground langsung yang mengukur posisi setiap item.
- Justify Contentjustify-content mengatur posisi item flex di sepanjang sumbu utama, dan align-items mengaturnya di sepanjang sumbu silang. Lihat semua nilainya berdampingan, lengkap dengan ukurannya, grid perataan yang bisa diklik, align-self, dan alasan kenapa justify-content kadang tidak berpengaruh apa-apa.
- Flex Wrapflex-wrap menentukan apakah item flex berdesakan di satu baris atau pindah ke baris berikutnya, dan flex-direction menentukan apakah item berjalan dalam baris atau kolom. Pelajari keduanya dengan contoh langsung, shorthand flex-flow, align-content, dan deretan kartu responsif tanpa media query.
- Grid LayoutCSS grid menata item dalam baris dan kolom sekaligus. Pelajari display: grid, grid-template-columns, satuan fr, repeat() dan minmax(), auto-fill vs auto-fit, menempatkan item dengan grid-column, dan grid-template-areas, dengan grid langsung yang bisa kamu edit dan ukur.
Desain Responsif
- Media QueriesMedia query menerapkan CSS hanya saat sebuah kondisi terpenuhi, misalnya lebar layar minimum, skema warna gelap, atau pointer mouse. Pelajari sintaks @media, breakpoint mobile first, sintaks range, prefers-color-scheme, matchMedia di JavaScript, dan container query.
- rem vs em vs pxrem relatif terhadap ukuran font root, em terhadap ukuran font elemen itu sendiri, px bernilai tetap, dan % bergantung pada property-nya. Lihat setiap satuan diukur di demo bertingkat, kenapa em berlipat ganda, kapan memakai yang mana, dan cara kerja vw, vh, dan dvh.
- clamp()clamp(MIN, PREFERRED, MAX) mengembalikan nilai yang diinginkan, tetapi tidak pernah kurang dari MIN atau lebih dari MAX. Pelajari bagaimana clamp() membuat ukuran font dan jarak menjadi fluid tanpa media query, cara menghitung nilai tengahnya, dan hubungannya dengan min() dan max().
- calc()calc() memungkinkan kamu berhitung di CSS dan mencampur satuan, misalnya 100% dikurangi sidebar tetap 200px. Pelajari aturan sintaksnya (spasi itu penting), calc() dengan variabel CSS, tata letak umum yang bisa diselesaikannya, dan kenapa calc() yang tidak valid diabaikan diam-diam.
Transisi dan Efek
- TransitionTransition CSS menganimasikan sebuah property dari nilai lamanya ke nilai barunya saat nilai itu berubah, misalnya saat hover. Pelajari shorthand transition, semua timing function secara berdampingan, apa yang bisa dan tidak bisa diberi transisi, solusi untuk height: auto, dan reduced motion.
- AnimasiAnimasi CSS menggerakkan elemen melalui langkah-langkah yang kamu tentukan di @keyframes, dengan sendirinya dan sesering yang kamu mau. Pelajari sintaks @keyframes, kedelapan properti animation, fill-mode dan direction, indikator loading, cara menjeda animasi, dan cara menghormati pengaturan gerakan yang dikurangi.
- TransformProperty transform memindahkan, mengubah ukuran, memutar, dan memiringkan elemen tanpa mengubah layout di sekitarnya. Pelajari setiap fungsi transform, kenapa urutan fungsi itu penting, transform-origin, property translate, scale, dan rotate yang terpisah, serta trik menengahkan dengan translate(-50%, -50%).
- RotatePutar elemen dengan transform: rotate(45deg) atau property rotate yang lebih baru. Pelajari satuan sudut (deg, turn, rad), memutar di sekitar sudut kotak dengan transform-origin, memutar teks dan ikon, loader yang berputar, dan rotasi 3D dengan rotateX dan rotateY.
- Opacityopacity membuat seluruh elemen beserta semua isinya tembus pandang, dari 0 (tidak terlihat) sampai 1 (padat). Pelajari nilainya, kenapa opacity ikut memudarkan teks dan cara membuat hanya background-nya yang transparan, opacity: 0 vs visibility vs display, serta efek fade saat hover.
- Blur dan Filterfilter: blur(5px) membuat elemen buram, dan backdrop-filter: blur() membuat buram apa yang ada di belakangnya. Pelajari setiap fungsi filter (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) dengan slider langsung, cara menggabungkannya, dan masalah tepi blur.
