Lewati ke konten utama
pelatihan
.org
Belajar. Praktik. Berkembang.
Kategori
ID
Masuk
Daftar
Menu
Kurikulum CSS: 6 Bab, 95 Lesson — pelatihan.org
Beranda
/
Katalog
/
CSS
/
Kurikulum
Kurikulum
Kurikulum CSS
Belajar CSS online lewat 95 lesson terstruktur, contoh kode, dan 475 soal kuis.
95 lesson
6 bab
475 soal
Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.
01
CSS Tutorial
48 lesson
01
CSS Introduction
CSS (Cascading Style Sheets) adalah bahasa yang dipakai untuk mengatur tampilan halaman web, seperti warna, font, jarak, dan tata letak. Dengan memisahkan tampilan dari struktur…
02
CSS Syntax
Setiap aturan CSS terdiri dari dua bagian utama: selector yang menunjuk elemen HTML yang ingin diberi gaya, dan blok deklarasi berisi satu atau beberapa properti beserta…
03
CSS Selectors
Selector adalah bagian aturan CSS yang menentukan elemen HTML mana yang akan diberi gaya. Selain memilih berdasarkan nama tag, kita bisa memilih berdasarkan id, class, atribut,…
04
CSS How To
Ada tiga cara memasukkan CSS ke halaman: inline lewat atribut style di elemen, internal dengan tag <style> di <head>, dan eksternal memakai berkas .css yang ditautkan dengan…
05
CSS Comments
Komentar CSS ditulis di antara /* dan */ serta tidak akan ditampilkan atau dieksekusi oleh browser. Komentar berguna untuk menjelaskan bagian kode, menonaktifkan sementara…
06
CSS Errors
CSS tidak menampilkan pesan error ke pengguna, sehingga kesalahan penulisan sering baru terlihat dari gaya yang tidak muncul sama sekali. Kesalahan umum meliputi titik koma…
07
CSS Colors
CSS mendukung beberapa cara menentukan warna: nama warna (red), nilai hex (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)), serta keyword transparan. Warna bisa…
08
CSS Backgrounds
CSS menyediakan berbagai properti latar belakang seperti background-color, background-image, background-repeat, background-position, dan background-size. Dengan kombinasi ini…
09
CSS Borders
Border adalah garis pembatas di sekeliling sebuah elemen. Setiap sisi border bisa diatur lebar (width), gaya (style), dan warna (color) secara terpisah, atau sekaligus memakai…
10
CSS Margins
Margin adalah ruang kosong di luar batas elemen yang memisahkannya dari elemen sekitar. Margin bisa diatur untuk keempat sisi sekaligus atau per sisi, dan nilainya boleh px, em,…
11
CSS Padding
Padding adalah ruang di dalam elemen antara konten dengan border. Menambah padding membuat konten menjauh dari garis border sehingga tampilan lebih lega. Sama seperti margin,…
12
CSS Height / Width
Properti height dan width menentukan ukuran area konten sebuah elemen. Nilainya bisa berupa panjang absolut (px), relatif (%), atau kata kunci seperti auto, min-content, dan…
13
CSS Box Model
Box model menjelaskan bahwa setiap elemen HTML berbentuk kotak yang tersusun dari konten, padding, border, dan margin dari dalam ke luar. Memahami susunan ini membuat perhitungan…
14
CSS Outline
Outline mirip border, yaitu garis yang mengelilingi elemen, tetapi outline berada di luar elemen dan tidak memengaruhi tata letak. Outline sering dipakai sebagai penanda fokus…
15
CSS Text
CSS menyediakan banyak properti untuk mengatur tampilan teks, mulai dari color, text-align, text-decoration, text-transform, letter-spacing, line-height, sampai text-shadow.…
16
CSS Fonts
CSS mengatur tampilan huruf lewat properti font-family, font-size, font-weight, font-style, dan lainnya. Karena setiap pengunjung punya font terpasang yang berbeda, kita…
17
CSS Icons
Ikon di halaman web umumnya ditampilkan dengan dua cara: memakai pustaka ikon berbasis font atau gambar SVG. Dengan pendekatan font, ikon diperlakukan seperti teks sehingga…
18
CSS Links
CSS bisa mengubah tampilan tautan sesuai statusnya: normal (:link), sudah dikunjungi (:visited), sedang di-hover (:hover), dan sedang aktif (:active). Mengatur keempat status ini…
19
CSS Lists
CSS mengatur tampilan daftar lewat properti list-style-type untuk jenis penanda, list-style-image untuk gambar penanda, dan list-style-position untuk letak penanda. Daftar juga…
20
CSS Tables
Tabel HTML bisa dirapikan dengan CSS: border-collapse menggabungkan garis tabel, padding pada sel membuat isi tidak sesak, dan text-align mengatur perataan kolom. Baris bisa…
21
CSS Display
Setiap elemen HTML punya nilai display bawaan, misalnya block untuk div dan p, atau inline untuk span dan a. Properti display memungkinkan kita mengubah perilaku ini, misalnya…
22
CSS Max-width
max-width membatasi lebar maksimum sebuah elemen sehingga ia bisa menyusut pada layar sempit tetapi tidak melebihi ukuran tertentu pada layar lebar. Berbeda dengan width tetap,…
23
CSS Position
Properti position menentukan cara sebuah elemen ditempatkan di halaman: static, relative, absolute, fixed, atau sticky. Nilai selain static membuka kemungkinan menggeser elemen…
24
CSS Position Offsets
Setelah elemen dibuat relative, absolute, atau fixed, jaraknya bisa diatur dengan properti offset: top, right, bottom, dan left. Keempat properti ini menentukan jarak elemen dari…
25
CSS Z-index
z-index menentukan urutan timbunan (stacking order) elemen yang saling tumpang tindih. Nilainya berupa bilangan bulat tanpa satuan; semakin besar nilainya, semakin di atas elemen…
26
CSS Overflow
Overflow mengatur apa yang terjadi ketika isi sebuah elemen melebihi ukurannya. Nilainya bisa visible (bawaan, isi meluber), hidden (terpotong), scroll (selalu ada scrollbar),…
27
CSS Float
Float menjadikan elemen mengambang ke kiri atau kanan sehingga konten lain mengalir di sekelilingnya, dan awalnya dipakai untuk membungkus teks di sekitar gambar. Dalam praktik…
28
CSS Inline-block
display: inline-block menggabungkan sifat elemen inline yang mengikuti alur teks dan block yang bisa diatur lebar, tinggi, padding, serta margin vertikal. Elemen ini cocok untuk…
29
CSS Align
Pengaturan perataan di CSS berbeda tergantung jenis elemennya: teks diratakan dengan text-align, elemen blok berlebar tetap dipusatkan dengan margin auto, sementara isi flexbox…
30
CSS Combinators
Combinator menggabungkan dua selector untuk memilih elemen berdasarkan hubungannya dengan elemen lain. Ada empat jenis: descendant (spasi), child (>) yang hanya anak langsung,…
31
CSS Pseudo-classes
Pseudo-class adalah selector khusus yang memilih elemen berdasarkan status atau posisinya, ditulis dengan tanda titik dua seperti :hover atau :nth-child(). Ia memungkinkan…
32
CSS Pseudo-elements
Pseudo-element membuat potongan konten tambahan pada elemen seolah-olah itu elemen tersendiri, dan ditulis dengan dua titik dua seperti ::before atau ::after. Melalui properti…
33
CSS Opacity
Properti opacity mengatur tingkat transparansi sebuah elemen, mulai dari 0 yang samar total hingga 1 yang pekat. Nilai di antaranya membuat elemen tembus pandang sebagian,…
34
CSS Navigation Bars
Navigation bar adalah deretan tautan menu yang umumnya dibuat dengan daftar (ul) berisi tautan (a). Dengan menghilangkan penanda daftar, mengatur tata letak inline atau flex,…
35
CSS Dropdowns
Dropdown dibuat dengan menyembunyikan menu daftar, misalnya dengan visibility: hidden, lalu menampilkannya saat pengunjung mengarahkan kursor ke elemen induknya lewat :hover.…
36
CSS Image Gallery
Galeri gambar sederhana bisa dibuat dengan menyusun gambar dalam wadah yang memakai flexbox atau grid, sehingga foto tampil rapi dalam baris dan kolom. Jarak antar gambar diatur…
37
CSS Image Sprites
Sprite adalah satu berkas gambar yang berisi banyak ikon kecil berdampingan. Dengan memanfaatkan background-position dan ukuran kotak yang tepat, kita menampilkan hanya satu…
38
CSS Attribute Selectors
Attribute selector memilih elemen berdasarkan nilai atributnya, misalnya input[type="email"] atau a[href^="https"]. Ada berbagai bentuk pencocokan: sama persis (=), salah satu…
39
CSS Forms
Formulir HTML sering tampil polos bawaannya, tetapi CSS bisa mempercantik input, textarea, tombol, dan fieldset agar konsisten dengan desain situs. Pengaturan seperti padding,…
40
CSS Counters
CSS counters adalah penghitung otomatis yang disediakan CSS tanpa bantuan JavaScript. Kita membuat penghitung dengan counter-reset, menambah nilainya dengan counter-increment,…
41
CSS Units
Satuan CSS menentukan nilai properti seperti ukuran font, jarak, dan lebar. Ada dua kelompok utama: satuan absolut seperti px dan pt yang ukurannya tetap, serta satuan relatif…
42
CSS Inheritance
Inheritance berarti sebagian properti CSS diwariskan dari elemen induk ke anak-anaknya, terutama yang berkaitan dengan teks seperti color, font-family, dan line-height. Properti…
43
CSS Specificity
Specificity adalah aturan penentu pemenang saat beberapa selector berebut elemen yang sama. Setiap selector dinilai berdasarkan bobot: inline style paling tinggi, lalu id, lalu…
44
CSS !important
Penanda !important memaksa sebuah deklarasi mengalahkan deklarasi lain tanpa memperhatikan urutan maupun specificity. Ia berguna sebagai pengecualian yang langka, tetapi bila…
45
CSS Math Functions
CSS menyediakan fungsi matematis seperti calc(), min(), max(), dan clamp() untuk menghitung nilai langsung di dalam CSS. Fungsi ini memungkinkan ukuran yang dinamis, misalnya…
46
CSS Optimization
Optimasi CSS bertujuan agar halaman memuat lebih cepat dan tetap responsif. Langkah umumnya meliputi menghapus kode yang tidak terpakai, menggabungkan aturan serupa, memperpendek…
47
CSS Accessibility
CSS yang aksesibel membuat situs dapat digunakan oleh semua orang, termasuk pengguna keyboard dan pembaca layar. Praktiknya antara lain mempertahankan penanda fokus yang…
48
CSS Website Layout
Susunan halaman web umumnya terdiri dari header, navigasi, konten utama, sidebar, dan footer yang dibuat dari elemen struktural lalu ditata lewat CSS. Pendekatan modern memakai…
02
CSS Advanced
30 lesson
01
CSS Rounded Corners
Pelajaran ini membahas cara membuat sudut elemen membulat menggunakan properti `border-radius`. Nilai radius bisa berupa satuan panjang seperti px atau persen terhadap ukuran…
02
CSS Border Images
Border image memungkinkan kita memakai gambar sebagai bingkai elemen, bukan garis solid biasa. Gambar akan dipotong menjadi bagian sudut dan bagian tengah, lalu diulang atau…
03
CSS Backgrounds
Pelajaran ini membahas properti-properti latar belakang modern: `background-size`, `background-position`, `background-origin`, `background-clip`, dan `background-attachment`.…
04
CSS Colors
CSS mendukung banyak cara menulis warna: nama warna, notasi HEX, RGB, RGBA, HSL, dan HSLA. Format HSL (hue, saturation, lightness) sering disukai karena lebih intuitif untuk…
05
CSS Gradients
Gradien CSS dibuat langsung dengan fungsi tanpa file gambar, sehingga lebih ringan dan tajam di semua ukuran layar. Ada tiga jenis utama: linear (lurus), radial (melingkar dari…
06
CSS Shadows
CSS3 menyediakan dua jenis bayangan: `box-shadow` untuk kotak/elemen dan `text-shadow` untuk teks. Bayangan kotak bisa dibuat di dalam elemen dengan kata kunci `inset`, serta…
07
CSS Text Effects
Pelajaran ini membahas efek teks seperti bayangan, potongan teks yang meluap (`text-overflow`), dan pengendalian pemotongan kata (`overflow-wrap`, `word-break`). Fitur-fitur ini…
08
CSS Custom Fonts
Kita bisa memakai font kustom lewat aturan `@font-face` yang menunjuk file font, atau mengimpor font populer seperti Google Fonts. Penting untuk menyediakan daftar fallback agar…
09
CSS 2D Transforms
Transform 2D menggeser, memutar, memperbesar, dan memiringkan elemen tanpa mengubah tata letak di sekitarnya. Fungsi yang tersedia antara lain `translate`, `rotate`, `scale`, dan…
10
CSS 3D Transforms
Transform 3D menambahkan sumbu kedalaman (Z) sehingga elemen bisa diputar seperti kartu atau kotak. Agar anak-anak elemen ikut berada dalam ruang 3D yang sama, induknya perlu…
11
CSS Transitions
Transisi membuat perubahan properti CSS berjalan halus dalam rentang waktu tertentu, misalnya saat elemen disorot kursor. Kita menentukan properti mana yang dianimasikan,…
12
CSS Animations
CSS Animation memungkinkan perubahan berulang tanpa memerlukan keadaan khusus seperti hover, cukup dengan mendefinisikan `@keyframes` dan menjalankannya pada elemen. Kita bisa…
13
CSS Tooltips
Tooltip adalah kotak kecil berisi tambahan informasi yang muncul saat pengguna menyentuh atau menyorot sebuah elemen. Dengan CSS murni, tooltip umumnya dibuat memakai…
14
CSS Image Styling
Pelajaran ini menghimpun berbagai cara mempercantik gambar: memberi bingkai, membulatkan sudut, menambah bayangan, mengatur opasitas, hingga menerapkan filter. Tujuannya membuat…
15
CSS Image Modal
Modal gambar adalah kotak overlay yang menampilkan foto berukuran besar di atas isi halaman. Dengan CSS saja, ini bisa diwujudkan dengan pseudo-class `:target` yang bereaksi…
16
CSS Image Centering
Memusatkan gambar bisa dilakukan dengan beberapa pendekatan sesuai konteks tata letak. Cara klasik adalah membuat gambar berstatus block lalu memberi margin otomatis di kiri dan…
17
CSS Image Filters
Properti `filter` memungkinkan kita menerapkan efek visual langsung ke gambar atau elemen lain, seperti mengaburkan, menggelapkan, mencerahkan, atau mengubahnya menjadi hitam…
18
CSS Image Shapes
Gambar tidak harus selalu persegi panjang; kita bisa memotongnya menjadi bentuk tertentu dengan `clip-path` atau membuat teks mengelilinginya dengan `shape-outside`. Bentuk bulat…
19
CSS object-fit
`object-fit` mengatur bagaimana isi elemen berukuran tetap, seperti `<img>` atau `<video>`, menyesuaikan kotaknya. Nilai `cover` meregangkan gambar sampai menutupi kotak dan…
20
CSS object-position
`object-position` menentukan bagian mana dari gambar yang diprioritaskan tampil saat ukurannya harus dipotong, misalnya bersama `object-fit: cover`. Nilainya berupa dua persen…
21
CSS Masking
Masking memungkinkan kita menyembunyikan sebagian elemen berdasarkan gambar atau gradien yang dijadikan mask. Area mask yang solid memperlihatkan elemen, sedangkan area…
22
CSS Buttons
Pelajaran ini membahas cara memberi gaya pada elemen `<button>` dan tautan agar terlihat seperti tombol yang menarik serta mudah digunakan. Kita mengatur warna, padding, sudut…
23
CSS Pagination
Pagination memecah daftar panjang menjadi beberapa halaman agar pengguna mudah menelusuri konten. Dalam CSS, pagination biasanya dibangun dari daftar berisi tautan nomor halaman…
24
CSS Multiple Columns
CSS Multi-columns membagi teks panjang menjadi beberapa kolom seperti tata letak surat kabar. Kita bisa menentukan jumlah kolom tetap, lebar minimum kolom, atau membiarkan…
25
CSS User Interface
Pelajaran ini membahas properti antarmuka pengguna seperti `resize` yang membuat elemen bisa diubah ukurannya, `outline` yang menandai fokus tanpa mengubah tata letak, dan…
26
CSS Variables
Custom properties (variabel CSS) memungkinkan kita menyimpan nilai seperti warna atau ukuran dengan nama tertentu, lalu memakai ulang di mana saja. Variabel ditulis dengan awalan…
27
CSS @property
Aturan `@property` memungkinkan kita mendaftarkan custom property secara resmi beserta tipe data, sifat pewarisan, dan nilai awalnya. Keunggulan terbesarnya adalah custom…
28
CSS Box Sizing
Model `box-sizing` menentukan apakah `width` yang kita tulis mencakup padding dan border atau hanya kontennya. Secara default, CSS memakai `content-box`, sehingga padding dan…
29
CSS Functions
CSS menyediakan banyak fungsi bawaan untuk perhitungan dan penetapan nilai dinamis. Fungsi `calc()` memungkinkan mencampur satuan berbeda seperti persen dan piksel dalam satu…
30
CSS Media Queries
Media query memungkinkan kita menerapkan aturan CSS berdasarkan kondisi perangkat, paling sering lebar layar. Dengan `@media`, gaya yang berbeda dapat aktif di ponsel, tablet,…
03
CSS Flexbox
4 lesson
01
Flexbox Intro
Flexbox adalah modul tata letak CSS yang dirancang untuk menyusun elemen dalam satu dimensi, baik mendatar maupun menegak, dengan kontrol perataan yang jauh lebih baik dibanding…
02
Flex Container
Pelajaran ini merinci properti pada flex container: `flex-direction` menentukan arah, `flex-wrap` mengatur pembungkusan baris, `justify-content` meratakan pada sumbu utama, dan…
03
Flex Items
Properti pada flex item mengontrol bagaimana tiap anak membagi ruang yang tersedia. `flex-grow` menentukan porsi ruang ekstra, `flex-shrink` menentukan pengecilan saat sempit,…
04
Flex Responsive
Flexbox memudahkan pembuatan tata letak responsif karena arah dan pembungkusan item bisa diubah lewat media query tanpa menyentuh markup. Navigasi horizontal di layar lebar dapat…
04
CSS Grid
5 lesson
01
Grid Intro
CSS Grid adalah modul tata letak dua dimensi yang mampu mengatur baris dan kolom secara bersamaan. Dengan `display: grid` pada wadah, kita mendefinisikan garis-garis grid melalui…
02
Grid Container
Pelajaran ini membahas properti pada grid container, seperti perataan isi sel dengan `justify-items` dan `align-items`, penyebaran trek dengan `justify-content` dan…
03
Grid Items
Setiap anak dari grid container dapat ditempatkan secara eksplisit memakai `grid-column` dan `grid-row`, atau memakai nama area `grid-area`. Kedua nilai pada properti tersebut…
04
Grid 12-column Layout
Sistem 12 kolom adalah pola populer: lebar halaman dibagi menjadi 12 trek sama besar sehingga komposisi blok bisa dikombinasikan dengan bebas, misalnya 6+6, 4+8, atau 3+9. Dengan…
05
CSS @supports
Aturan `@supports` memungkinkan kita mengecek apakah browser mendukung deklarasi CSS tertentu sebelum menerapkannya. Ini berguna sebagai strategi progresif: menyiapkan tata letak…
05
CSS Responsive
8 lesson
01
RWD Intro
Responsive Web Design (RWD) membuat satu halaman menyesuaikan diri dengan berbagai ukuran layar, dari ponsel hingga desktop, tanpa perlu membuat situs terpisah. Teknik utamanya…
02
RWD Viewport
Meta viewport memberi tahu peramban ponsel bahwa halaman harus ditampilkan mengikuti lebar perangkat, bukan dilebarkan dulu ke lebar desktop lalu diperkecil. Tag ini menjadi…
03
RWD Grid View
Grid responsif menyusun halaman dalam kolom-kolom berlebar persen sehingga ikut mengecil dan melebar bersama layarnya. Pola 12 kolom paling umum dipakai karena bisa…
04
RWD Media Queries
Media query adalah alat utama RWD untuk mengaktifkan gaya berbeda pada titik lebar layar tertentu yang disebut breakpoint. Kondisi `min-width` dipakai untuk menambah gaya ke atas…
05
RWD Images
Gambar responsif tidak boleh meluber melebihi wadahnya, sehingga pola dasarnya adalah `max-width: 100%` dipadukan dengan `height: auto` agar rasio aspek tetap terjaga. Untuk…
06
RWD Videos
Video responsif harus mengikuti lebar wadahnya tanpa merusak rasio gambar, mirip seperti gambar responsif. Untuk elemen `<video>` caranya sederhana: `width: 100%` dan `height:…
07
RWD Frameworks
Framework CSS responsif menyediakan sistem grid, komponen siap pakai, dan breakpoint bawaan sehingga pengembangan halaman responsif jauh lebih cepat dan konsisten. Contoh paling…
08
RWD Templates
Template responsif adalah kerangka halaman yang tata letaknya sudah disiapkan untuk berbagai ukuran layar, umumnya terdiri dari header, navigasi, konten utama, sidebar, dan…