## Apa itu CSS3? **Analogi sederhana:** Kalau HTML itu struktur rumah (dinding, jendela, pintu), maka CSS adalah cat, dekorasi, dan tata letaknya. CSS yang bikin rumah (website) kamu keliatan cantik dan nyaman! CSS (Cascading Style Sheets) adalah bahasa stylesheet buat styling HTML elements. CSS3 adalah versi terbaru yang nambah banyak fitur powerful. **Kenapa harus belajar CSS3?** Tanpa CSS, website kamu cuma tampil putih polos dengan text hitam. Dengan CSS3, kamu bisa: - **Bikin website jadi cantik** - warna, font, spacing, layout - **Responsive di semua devices** - otomatis menyesuaikan dari HP sampai desktop - **Animations yang smooth** - tanpa perlu JavaScript - **Modern layout mudah** - Flexbox & Grid bikin hidup lebih gampang - **Maintainable code** - CSS Variables buat manage colors & values **Satu CSS file, semua halaman langsung cantik!** **Dampak nyata:** - Website tanpa CSS = baca dokumen Word - Website dengan CSS = baca majalah desain modern ## Cara Menggunakan CSS Ada 3 cara nulis CSS. Tapi **cuma 1 yang recommended!** ### 1. Inline CSS (Hindari!) ```html

Text

``` **Kenapa dihindari?** - Susah maintain (harus edit satu-satu di HTML) - Ga bisa reuse - Code jadi berantakan **Kapan pakai:** Cuma buat testing cepat atau override paksa (jarang banget!) ### 2. Internal CSS (OK buat landing page) ```html ``` **Kapan pakai:** - Landing page yang cuma 1 halaman - Email HTML (ga support external CSS) - Quick prototype ### 3. External CSS (Recommended!) ```html ``` ```css /* styles.css */ p { color: red; font-size: 20px; } ``` **Kenapa ini yang terbaik?** - **Reusable** - 1 file buat semua halaman - **Maintainable** - ubah 1 tempat, semua berubah - **Organized** - kode terpisah rapi - **Cacheable** - browser cache CSS, website jadi lebih cepat **Contoh di dunia nyata:** Website 50 halaman cukup 1 file `styles.css` → ubah warna brand tinggal edit 1 tempat! ## Selectors **Apa itu Selector?** Selector = cara kamu "nunjuk" element HTML mana yang mau di-style. Kayak remote control TV: kamu pencet tombol tertentu buat ganti channel tertentu. ### Basic Selectors ```css /* Element selector - Target semua element dengan tag yang sama */ p { color: blue; } /* Class selector - Target element dengan class tertentu */ .highlight { background-color: yellow; } /* ID selector - Target 1 element spesifik */ #header { font-size: 24px; } /* Universal selector - Target SEMUA element */ * { margin: 0; padding: 0; } /* Multiple selectors - Style beberapa element sekaligus */ h1, h2, h3 { font-family: Arial, sans-serif; } ``` **Kapan pakai selector mana?** 1. **Element Selector** (`p`, `h1`, `div`) - Style semua element yang sejenis - Base styling (semua paragraf, semua heading) - Contoh: Semua `

` pake line-height 1.6 2. **Class Selector** (`.button`, `.card`) - Style yang bisa dipakai berkali-kali (PALING SERING DIPAKAI!) - Component styling - Contoh: Button, card, alert 3. **ID Selector** (`#header`, `#nav`) - Cuma buat 1 element (jarang dipakai di CSS modern) - Specificity tinggi (susah di-override) - Mending pakai class! 4. **Universal Selector** (`*`) - CSS reset (reset default browser styling) - Jangan pakai buat styling lain (slow performance) **Best practice:** 90% pakai class, 10% pakai element selector, hindari ID! ### Combinators (Hubungan Antar Element) **Apa itu Combinator?** Combinator = cara select element berdasarkan hubungannya dengan element lain. Kayak family tree: anak, cucu, saudara. ```css /* Descendant (space) - Semua keturunan */ div p { color: red; /* Semua

di dalam

, termasuk yang nested dalam */ } /* Child (>) - Anak langsung aja */ div > p { color: blue; /* Cuma

yang jadi anak langsung

*/ } /* Adjacent sibling (+) - Saudara tepat setelahnya */ h1 + p { font-size: 18px; /*

yang LANGSUNG setelah

/ } / General sibling (~) - Semua saudara setelahnya / h1 ~ p { color: gray; / Semua
setelah

(1 parent) / } ``` Kapan pakai combinator mana? 1. Descendant (`div p`) - Paling sering - Target element di dalam element lain (nested berapa level juga OK) - Contoh: Style semua link di navbar 2. Child (`div > p`) - Buat specific targeting - Cuma mau style anak langsung, bukan cucu - Contoh: Style cuma direct children, bukan nested 3. Adjacent Sibling (`h1 + p`) - Jarang - Style element tepat setelahnya - Contoh: Paragraf pertama setelah heading pake font lebih besar 4. General Sibling (`h1 ~ p`) - Jarang - Style semua saudara setelahnya - Contoh: Semua paragraf di section setelah heading ### Attribute Selectors (Select by Attribute) Kenapa pakai Attribute Selector? Kadang kamu mau style element berdasarkan attribute HTML-nya (type, href, dll). Ini powerful! ```css / Has attribute - Punya attribute ini aja cukup / [type] { border: 1px solid black; } / Exact value - Nilai harus persis sama / [type="text"] { background: white; } / Contains word - Salah satu kata di attribute / [class~="button"] { padding: 10px; } / Starts with - Diawali dengan... / [href^="https"] { color: green; / Link https → hijau (secure) / } / Ends with - Diakhiri dengan... / [href$=".pdf"] { background: url('pdf-icon.png'); / Link PDF → icon / } / Contains substring - Mengandung text ini / [href="google"] { color: blue; /* Link ke google.com → biru / } ``` Use case di dunia nyata: ```css / Style external links berbeda / a[href^="http"] { color: blue; } / Icon buat file types / a[href$=".pdf"]::after { content: "📄"; } a[href$=".zip"]::after { content: "📦"; } / Required inputs / input[required] { border-left: 3px solid red; } ``` Kapan pakai: Kalau mau style berdasarkan attribute, bukan class (links, inputs, dll). ### Pseudo-classes (State & Position) Apa itu Pseudo-class? Pseudo-class = style element berdasarkan state (hover, focus, active) atau posisi (first, last, odd/even). Kayak kondisi "kalau... maka..." dalam programming. ```css / Link states - Interaksi dengan link / a:link { color: blue; } / Belum pernah dikunjungi / a:visited { color: purple; } / Sudah pernah dikunjungi / a:hover { color: red; } / Mouse di atas link / a:active { color: orange; } / Sedang diklik / / Form states - Status input form / input:focus { border-color: blue; } / Saat input aktif/focus / input:disabled { opacity: 0.5; } / Input yang disabled / input:checked { background: green; } / Checkbox/radio yang checked / input:invalid { border-color: red; } / Input yang ga valid / input:valid { border-color: green; } / Input yang valid / / Child pseudo-classes - Posisi dalam list / li:first-child { font-weight: bold; } / Item pertama / li:last-child { border-bottom: none; } / Item terakhir / li:nth-child(2) { color: red; } / Item ke-2 / li:nth-child(odd) { background: #f0f0f0; } / Item ganjil (1,3,5...) / li:nth-child(even) { background: white; } / Item genap (2,4,6...) / li:nth-child(3n) { color: blue; } / Setiap kelipatan 3 / / Type pseudo-classes - By element type / p:first-of-type { margin-top: 0; } /
pertama / p:last-of-type { margin-bottom: 0; } /
terakhir / / Other useful ones / :not(.exclude) { color: black; } / Semua kecuali .exclude / :empty { display: none; } / Element kosong / :root { --primary-color: blue; } / Root element (buat CSS vars) / ``` Contoh di dunia nyata: ```css / Hover effect untuk button / .button:hover { background: darkblue; transform: scale(1.05); } / Zebra striping untuk table / tr:nth-child(odd) { background: #f9f9f9; } / Highlight input yang lagi di-focus / input:focus { border: 2px solid blue; outline: none; } / Style error state / input:invalid:focus { border-color: red; box-shadow: 0 0 5px red; } ``` Kapan pakai: - `:hover` → Interactive elements (button, link, card) - `:focus` → Form inputs (accessibility important!) - `:nth-child` → Striping, pattern styling - `:not()` → Exclude specific element dari styling ### Pseudo-elements (Tambah Element Virtual) Apa itu Pseudo-element? Pseudo-element = bikin "element virtual" tanpa perlu tambah HTML. Kayak nambah elemen baru tapi cuma di CSS aja! ```css / ::before & ::after - Tambah content sebelum/sesudah element / .box::before { content: "→ "; / content wajib! / color: blue; } .box::after { content: " ✓"; color: green; } / ::first-letter - Huruf pertama (kayak majalah) / p::first-letter { font-size: 2em; font-weight: bold; } / ::first-line - Baris pertama / p::first-line { color: red; } / ::selection - Text yang di-highlight / ::selection { background: yellow; color: black; } / ::placeholder - Text placeholder di input / input::placeholder { color: gray; opacity: 0.7; } ``` Use case di dunia nyata: ```css / Icon sebelum list items / .checklist::before { content: "✓ "; color: green; font-weight: bold; } / Quote marks untuk blockquote / blockquote::before { content: open-quote; font-size: 4rem; } / Badge notification / .notification::after { content: "3"; background: red; border-radius: 50%; padding: 2px 6px; } / Decorative elements tanpa HTML / .fancy-heading::after { content: ""; display: block; width: 50px; height: 3px; background: blue; margin-top: 10px; } ``` Kapan pakai: - Icon/decorative elements (ga perlu tambah HTML) - Quotes, badges, indicators - Clearfix hacks (old school) Catatan: `::before` dan `::after` wajib punya property `content` (bisa kosong `""`)! ## Box Model Analogi sederhana: Bayangin element HTML kayak paket kiriman: - Content = barang di dalamnya - Padding = bubble wrap (jarak dari barang ke kotak) - Border = kotak kardusnya - Margin = jarak antar paket Setiap element HTML itu box dengan 4 layer ini! ```css .box { / Content size - Ukuran kontennya / width: 300px; height: 200px; / Padding - Ruang di dalam border / padding: 20px; / Semua sisi / padding: 10px 20px; / vertical horizontal / padding: 10px 15px 20px 25px; / top right bottom left (clockwise!) / padding-top: 10px; / Specific side / / Border - Garis tepi / border: 2px solid black; / Shorthand: width style color / border-width: 2px; border-style: solid; / solid, dashed, dotted, double / border-color: black; border-radius: 10px; / Rounded corners / / Margin - Ruang di luar border / margin: 20px; / Semua sisi / margin: 10px auto; / auto = center horizontal / margin-top: 10px; / Specific side / / Box-sizing (IMPORTANT!) / box-sizing: border-box; / Include padding & border in width / } ``` Shorthand tips: ```css / Padding/Margin shorthand (clockwise dari atas) / padding: 10px; / top right bottom left = 10px semua / padding: 10px 20px; / top/bottom = 10px, left/right = 20px / padding: 10px 20px 30px; / top = 10px, left/right = 20px, bottom = 30px / padding: 10px 20px 30px 40px; / top right bottom left (clockwise!) / ``` Penjelasan Box-sizing (PENTING BANGET!): ```css / content-box (default) - Ribet! / .box { width: 300px; padding: 20px; border: 5px solid; / Actual width = 300 + 40 (padding) + 10 (border) = 350px Width jadi ga sesuai ekspektasi! / } / border-box (recommended!) - Predictable! / .box { box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid; / Actual width = 300px (padding & border udah included!) Width sesuai yang kamu set! / } / Apply ke SEMUA elements (best practice!) / { box-sizing: border-box; } ``` Kenapa border-box lebih baik? - Width yang kamu set = width final (predictable) - Ga perlu hitung-hitungan buat calculate total width - Responsive layout jadi lebih gampang - Standar di semua CSS framework modern Contoh masalah content-box: ```css /* Tanpa border-box / .col-half { width: 50%; padding: 20px; / Eh, total jadi > 50%! Layout pecah! / } / Dengan border-box / { box-sizing: border-box; } .col-half { width: 50%; padding: 20px; /* Total tetep 50%. Perfect! / } ``` Pro tip: Selalu tambahkan ini di awal CSS kamu: ```css { box-sizing: border-box; margin: 0; padding: 0; } ``` ## Colors ```css /* Named colors / color: red; color: blue; / Hex / color: #ff0000; color: #f00; / Shorthand / / RGB / color: rgb(255, 0, 0); / RGBA (with alpha/transparency) / color: rgba(255, 0, 0, 0.5); / HSL (Hue, Saturation, Lightness) / color: hsl(0, 100%, 50%); / HSLA / color: hsla(0, 100%, 50%, 0.5); / Modern: oklch, oklab (better color space) / color: oklch(60% 0.15 30); ``` ## Typography ```css .text { / Font / font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; / normal, bold, 100-900 / font-style: italic; / normal, italic, oblique / / Text / color: #333; text-align: center; / left, right, center, justify / text-decoration: underline; / none, underline, line-through / text-transform: uppercase; / lowercase, capitalize, uppercase / letter-spacing: 2px; word-spacing: 5px; line-height: 1.6; / Text shadow / text-shadow: 2px 2px 4px rgba(0,0,0,0.5); / White space / white-space: nowrap; / normal, nowrap, pre, pre-wrap / word-wrap: break-word; overflow-wrap: break-word; / Ellipsis / overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` ## Backgrounds ```css .bg { / Background color / background-color: #f0f0f0; / Background image / background-image: url('image.jpg'); background-repeat: no-repeat; / repeat, repeat-x, repeat-y / background-position: center; / top, bottom, left, right, center, 50% 50% / background-size: cover; / cover, contain, 100px 200px, 50% / background-attachment: fixed; / scroll, fixed / / Shorthand / background: url('image.jpg') no-repeat center/cover; / Multiple backgrounds / background-image: url('img1.png'), url('img2.png'); background-position: top left, bottom right; / Gradients / background: linear-gradient(to right, red, blue); background: linear-gradient(45deg, red, blue); background: radial-gradient(circle, red, blue); } ``` ## Display & Position ### Display (Cara Element Ditampilkan) Kenapa penting? `display` menentukan bagaimana element berperilaku di layout. Ini fundamental! ```css / Block - Ambil full width, new line / div { display: block; } / Contoh natural:
,
,
/ / Inline - Width auto, same line / span { display: inline; } / Contoh natural: , , / / Inline-block - Hybrid (best of both) / img { display: inline-block; } / Bisa set width/height tapi tetep same line / / None - Hide element / .hidden { display: none; } / Element hilang total (ga ada space) / / Flex - Modern layout (1D) / .container { display: flex; } / Grid - Modern layout (2D) / .container { display: grid; } ``` Kapan pakai: - block → Section, container, layout - inline → Text styling, small elements - inline-block → Button, badge (butuh width tapi same line) - none → Hide element (vs `visibility: hidden` yang tetep ambil space) - flex → One-dimensional layout (row ATAU column) - grid → Two-dimensional layout (row DAN column) ### Position (Posisi Element) Apa itu Position? Position mengatur bagaimana element ditempatkan di page. Kayak koordinat GPS! ```css / Static - Default (normal flow) / position: static; / Element ikut document flow biasa / / Relative - Offset dari posisi asli / position: relative; top: 10px; / Turun 10px dari posisi asli / left: 20px; / Kanan 20px dari posisi asli / / Space asli tetep ada! / / Absolute - Relative ke parent terdekat yang positioned / position: absolute; top: 0; right: 0; / Keluar dari document flow! / / Fixed - Relative ke viewport (browser window) / position: fixed; bottom: 20px; right: 20px; / Tetep di tempat meskipun scroll! / / Sticky - Hybrid relative & fixed / position: sticky; top: 0; / Relative sampai scroll mencapai threshold, terus jadi fixed / / Z-index - Stacking order (siapa di depan) / z-index: 10; / Makin besar, makin di depan / ``` Kapan pakai: 1. static → Default, jarang explicitly set 2. relative → - Nudge element sedikit dari posisi asli - Parent untuk absolute positioning 3. absolute → - Tooltip, dropdown, modal - Icon overlay di gambar - Positioning presisi 4. fixed → - Navbar sticky - Back-to-top button - Chat widget 5. sticky → - Table header yang stick saat scroll - Section heading yang sticky Contoh di dunia nyata: ```css / Badge di pojok card / .card { position: relative; / Parent / } .badge { position: absolute; / Child / top: 10px; right: 10px; } / Navbar sticky / .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; / Di atas semua / } ``` ## Flexbox Analogi sederhana: Flexbox kayak antrian orang atau barang di rak: - Bisa berjejer horizontal (row) atau vertikal (column) - Bisa atur jaraknya: rapat, rata kiri, rata kanan, atau spaced evenly - Bisa atur alignment: atas, tengah, bawah - Kalau penuh, bisa wrap ke baris baru Kapan pakai Flexbox? - Navbar horizontal - Button groups - Cards in a row - Centering elements - One-dimensional layout (satu arah: row ATAU column) ```css .container { display: flex; / Direction - Arah layout / flex-direction: row; / → horizontal (default) / flex-direction: column; / ↓ vertical / / Wrapping - Kalau ga cukup space? / flex-wrap: wrap; / Wrap ke baris baru / flex-wrap: nowrap; / Tetep 1 baris (default) / / Shorthand / flex-flow: row wrap; / direction + wrap / / Main axis alignment - Atur posisi di main axis / justify-content: center; / ⬤ tengah / justify-content: flex-start; / ⬤ kiri/atas / justify-content: flex-end; / ⬤ kanan/bawah / justify-content: space-between; / ⬤ ⬤ ⬤ rata / justify-content: space-around; / ⬤ ⬤ ⬤ / justify-content: space-evenly; / ⬤ ⬤ ⬤ / / Cross axis alignment - Atur posisi di cross axis / align-items: center; / Center vertical (if row) / align-items: flex-start; / Top / align-items: flex-end; / Bottom / align-items: stretch; / Full height (default) / / Gap - Jarak antar items / gap: 1rem; / Semua gap / column-gap: 1rem; / Gap horizontal / row-gap: 0.5rem; / Gap vertical / } / Flex items - Atur individual item / .item { / Flexibility / flex-grow: 1; / Boleh grow untuk fill space / flex-shrink: 1; / Boleh shrink kalau ga cukup space / flex-basis: 200px; / Initial size sebelum grow/shrink / / Shorthand (PALING SERING DIPAKAI!) / flex: 1; / grow 1, shrink 1, basis 0 → equal width / flex: 1 1 200px; / grow shrink basis / / Individual alignment / align-self: flex-start; / Override align-items untuk item ini / / Order / order: 2; / Change visual order (default 0) / } ``` Main axis vs Cross axis: - flex-direction: row → main axis horizontal (→), cross axis vertical (↓) - flex-direction: column → main axis vertical (↓), cross axis horizontal (→) - justify-content = main axis - align-items = cross axis Common Flexbox Patterns: ```css / Center content (paling sering!) / .center { display: flex; justify-content: center; / Center horizontal / align-items: center; / Center vertical / / Perfect untuk center apa aja! / } / Navbar - Space between logo & menu / .nav { display: flex; justify-content: space-between; align-items: center; } / Equal width columns / .columns { display: flex; gap: 1rem; } .column { flex: 1; / Semua column equal width / } / Responsive cards - Auto wrap / .cards { display: flex; flex-wrap: wrap; gap: 1.5rem; } .card { flex: 1 1 300px; / Min 300px, wrap kalau ga cukup / } / Button group / .button-group { display: flex; gap: 0.5rem; } / Align icon + text / .item { display: flex; align-items: center; gap: 0.5rem; } ``` Cheat Sheet - Flexbox yang paling sering dipakai: ```css / Center anything / display: flex; justify-content: center; align-items: center; / Space between (navbar) / display: flex; justify-content: space-between; / Equal columns / .child { flex: 1; } / Responsive wrap / display: flex; flex-wrap: wrap; gap: 1rem; ``` ## CSS Grid Analogi sederhana: Grid kayak tabel Excel atau papan catur: - Punya baris (rows) DAN kolom (columns) - Bisa merge cell (span multiple cells) - Bisa kasih nama ke area tertentu - Perfect buat layout kompleks! Grid vs Flexbox: - Flexbox = 1D (antrian) → Navbar, button group, cards in a row - Grid = 2D (tabel) → Full page layout, image gallery, dashboard Kapan pakai Grid? - Full page layout (header, sidebar, main, footer) - Image gallery - Dashboard dengan widgets - Complex layout dengan baris DAN kolom - Two-dimensional layout (rows DAN columns) ```css .container { display: grid; / Columns - Atur kolom / grid-template-columns: 200px 1fr 200px; / Fixed, flexible, fixed / grid-template-columns: repeat(3, 1fr); / 3 kolom equal / grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); / ☝️ Auto-responsive! NO media queries needed! / / Rows - Atur baris / grid-template-rows: 100px auto 50px; / Specific heights / grid-auto-rows: minmax(100px, auto); / Auto rows / / Gap - Jarak antar cells / gap: 1rem; / Row + column gap / column-gap: 2rem; / Column gap aja / row-gap: 1rem; / Row gap aja / / Named Areas - Kasih nama ke area (powerful!) / grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; / Alignment / justify-items: center; / Horizontal align items dalam cell / align-items: center; / Vertical align items dalam cell / justify-content: center; / Horizontal align grid dalam container / align-content: center; / Vertical align grid dalam container / } / Grid items - Atur posisi item / .item { / Position by line numbers / grid-column: 1 / 3; / Dari line 1 ke 3 (span 2 columns) / grid-row: 1 / 2; / Dari line 1 ke 2 (span 1 row) / / Shorthand (lebih simple!) / grid-column: span 2; / Span 2 columns / grid-row: span 1; / Span 1 row / / Position by area name / grid-area: header; / Taruh di area "header" / / Individual alignment / justify-self: start; / Override justify-items untuk item ini / align-self: start; / Override align-items untuk item ini / } ``` Grid units explained: - `px` = Fixed size (200px) - `fr` = Fractional unit (flexible, share remaining space) - `auto` = Based on content - `%` = Percentage - `minmax(min, max)` = Min & max size Contoh: ```css / Sidebar 200px, main ambil sisa space / grid-template-columns: 200px 1fr; / 3 equal columns / grid-template-columns: 1fr 1fr 1fr; / OR / grid-template-columns: repeat(3, 1fr); / Auto-responsive (MAGIC!) / grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); / ☝️ Automatic columns, min 250px, wrap kalau ga cukup! / ``` Common Grid Patterns: ```css / Auto-responsive grid (NO media queries needed!) / .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; / ☝️ Cards auto wrap, min 250px. MAGIC! / } / Named areas layout (readable & intuitive) / .layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; / Sidebar 250px, main flexible / gap: 1rem; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } / Image Gallery (equal columns) / .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } / Dashboard (different sizes) / .dashboard { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 1rem; } .widget-large { grid-column: span 2; / 2x width / grid-row: span 2; / 2x height / } / Holy Grail Layout (classic) / .container { display: grid; grid-template: auto 1fr auto / 200px 1fr 200px; / rows: header auto, main 1fr, footer auto / / columns: left 200px, center 1fr, right 200px / min-height: 100vh; } ``` Cheat Sheet - Grid yang paling sering dipakai: ```css / Auto-responsive gallery/cards / display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; / 3 equal columns / display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; / Sidebar + main / display: grid; grid-template-columns: 250px 1fr; gap: 1rem; ``` ## Transitions & Animations ### Transitions ```css .button { background: blue; transition: background 0.3s ease; / property duration timing-function delay / } .button:hover { background: darkblue; } / Multiple properties / .box { transition: transform 0.3s ease, opacity 0.2s linear; } / All properties / .box { transition: all 0.3s ease; } / Timing functions / transition-timing-function: ease; / Default / transition-timing-function: linear; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); ``` ### Animations ```css / Define keyframes / @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } / Or with percentages / @keyframes slide { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } } / Apply animation / .element { animation: fadeIn 1s ease-in; / name duration timing-function delay / / Full properties / animation-name: fadeIn; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0.5s; animation-iteration-count: infinite; / or number / animation-direction: alternate; / normal, reverse, alternate / animation-fill-mode: forwards; / none, forwards, backwards, both / animation-play-state: running; / running, paused / } ``` ## Transforms ```css / Translate (move) / transform: translateX(50px); transform: translateY(20px); transform: translate(50px, 20px); / Scale / transform: scale(1.5); / 150% size / transform: scale(0.5); / 50% size / transform: scaleX(2); / Horizontal only / / Rotate / transform: rotate(45deg); transform: rotateX(45deg); / 3D rotation / / Skew / transform: skew(20deg, 10deg); / Multiple transforms / transform: translate(50px, 20px) rotate(45deg) scale(1.2); / Transform origin / transform-origin: center; / Default / transform-origin: top left; transform-origin: 50% 50%; ``` ## Modern CSS Features ### CSS Variables (Custom Properties) ```css :root { --primary-color: #3498db; --spacing: 1rem; --border-radius: 8px; } .button { background: var(--primary-color); padding: var(--spacing); border-radius: var(--border-radius); } / Fallback value / color: var(--text-color, black); / Update variables in media queries / @media (prefers-color-scheme: dark) { :root { --primary-color: #2980b9; } } ``` ### clamp() for Fluid Sizing ```css / Syntax: clamp(min, preferred, max) / h1 { font-size: clamp(2rem, 5vw, 4rem); / Min 2rem, preferred 5vw, max 4rem / } .container { width: clamp(320px, 90%, 1200px); } ``` ### min() and max() ```css / Use smaller value / width: min(100%, 1200px); / Use larger value / width: max(50%, 300px); / Responsive padding / padding: min(5vw, 3rem); ``` ### calc() for Calculations ```css width: calc(100% - 80px); font-size: calc(1rem + 0.5vw); height: calc(100vh - 60px); margin-left: calc(50% - 200px); ``` ### Container Queries ```css / Define container / .card-container { container-type: inline-size; container-name: card; } / Query based on container size / @container card (min-width: 400px) { .card { display: grid; grid-template-columns: 150px 1fr; } } ``` ## Responsive Design Kenapa responsive design penting? Website kamu harus bagus di semua device: HP (375px), tablet (768px), laptop (1024px), desktop (1440px+). Ga mungkin kan website kamu cuma diakses dari 1 device aja? Apa itu Breakpoints? Breakpoints = titik di mana layout berubah. Kayak rem mobil: di kecepatan tertentu, rem langsung aktif. ### Media Queries (Bikin Website Responsive!) Filosofi: Mobile First ✅ Mulai dari mobile (paling kecil), terus enhance ke tablet & desktop. Kenapa? Karena lebih gampang scale up daripada scale down! ```css / 📱 Mobile (default) - Semua device mulai dari sini / .container { padding: 1rem; font-size: 14px; } .grid { grid-template-columns: 1fr; / 1 column di mobile / } / 📱 Tablet - Min width 768px / @media (min-width: 768px) { .container { padding: 2rem; font-size: 16px; } .grid { grid-template-columns: repeat(2, 1fr); / 2 columns di tablet / } } / 💻 Desktop - Min width 1024px / @media (min-width: 1024px) { .container { padding: 3rem; font-size: 18px; } .grid { grid-template-columns: repeat(3, 1fr); / 3 columns di desktop / } } / 🖥️ Large Desktop - Min width 1440px / @media (min-width: 1440px) { .container { max-width: 1400px; margin: 0 auto; / Center di large screen / } } ``` Common Breakpoints (Industry Standard): ```css / Mobile: < 768px (default, no media query) / / Tablet: 768px - 1023px / @media (min-width: 768px) { } / Desktop: 1024px - 1439px / @media (min-width: 1024px) { } / Large Desktop: 1440px+ / @media (min-width: 1440px) { } ``` Kenapa angka-angka ini? - 768px = iPad portrait (paling umum tablet) - 1024px = iPad landscape, small laptop - 1440px = Standard desktop monitor Real example - Navbar responsive: ```css / 📱 Mobile: Hamburger menu, vertical / .nav { flex-direction: column; } .nav-toggle { display: block; / Show hamburger / } .nav-menu { display: none; / Hide menu default / } / 💻 Desktop: Horizontal menu, no hamburger / @media (min-width: 768px) { .nav { flex-direction: row; justify-content: space-between; } .nav-toggle { display: none; / Hide hamburger / } .nav-menu { display: flex; / Show menu / } } ``` Other Media Features (Bonus!): ```css / Orientation - Portrait vs Landscape / @media (orientation: landscape) { / Kalau HP dirotate landscape / } / Dark mode - User preference / @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #ffffff; } } / Reduced motion - Accessibility / @media (prefers-reduced-motion: reduce) { { animation: none !important; transition: none !important; } } /* Hover capability - Touch vs Mouse / @media (hover: hover) { .button:hover { transform: scale(1.05); / Cuma di device yang punya mouse / } } ``` Pro tips: 1. Mobile first - Default style buat mobile, enhance ke desktop 2. Test di real device - Jangan cuma browser resize 3. Use rem/em - Better for responsive (scalable) 4. Max 3-4 breakpoints - Jangan kebanyakan, nanti ribet maintain 5. Test dark mode - Banyak user pakai dark mode sekarang ## Pattern Umum ### Center Element ```css / Flexbox / .parent { display: flex; justify-content: center; align-items: center; } / Grid / .parent { display: grid; place-items: center; } / Absolute positioning / .element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } / Margin auto (horizontal only) / .element { width: 300px; margin: 0 auto; } ``` ### Truncate Text ```css .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Multi-line truncate / .truncate-3-lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` ### Aspect Ratio Box ```css / Modern way / .box { aspect-ratio: 16 / 9; } / Old way (padding trick) / .box { position: relative; padding-bottom: 56.25%; / 16:9 ratio / height: 0; } .box > { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ``` ## Best Practices 1. Use external CSS - Separate styles from HTML 2. Mobile-first - Start with mobile, enhance for desktop 3. Use CSS variables - Maintainable theme colors 4. Box-sizing: border-box - Easier sizing calculations 5. Avoid !important - Use specific selectors instead 6. Use Flexbox/Grid - Modern layout techniques 7. Name classes meaningfully - BEM, utility classes 8. Group related properties - Easier to read 9. Use shorthand - More concise code 10. Validate CSS - Use validators to catch errors ## Tips & Trik ```css /* Smooth scrolling / html { scroll-behavior: smooth; } / Hide scrollbar but keep functionality / .element { -ms-overflow-style: none; / IE/Edge / scrollbar-width: none; / Firefox / } .element::-webkit-scrollbar { display: none; / Chrome/Safari / } / Selection color / ::selection { background: yellow; color: black; } / Prevent text selection / .no-select { user-select: none; } / Cursor types */ cursor: pointer; cursor: not-allowed; cursor: grab; ``` ## Kesimpulan CSS3 = Superpower buat Bikin Website Cantik! Dari basic styling sampai complex layouts dengan Flexbox & Grid, semuanya possible dengan CSS3. Website tanpa CSS = boring. Website dengan CSS3 = stunning! ### Checklist: Apakah Kamu Sudah Menguasai Ini? Fundamentals: - Box Model (padding, border, margin) - Selectors (class, element, combinators) - Colors & Typography - Display & Position Layout Modern: - Flexbox - One-dimensional layout (navbar, buttons, cards) - Grid - Two-dimensional layout (page layout, gallery) - Responsive Design dengan media queries - Mobile-first approach Advanced Features: - CSS Variables (custom properties) - Transitions & Animations - Pseudo-classes (`:hover`, `:focus`, `:nth-child`) - Pseudo-elements (`::before`, `::after`) Best Practices: - `box-sizing: border-box` di semua element - External CSS (bukan inline/internal) - Meaningful class names - Mobile-first responsive design ### Langkah Selanjutnya: Dari Pemula ke Pro 1. Practice Projects (Mulai yang Simple): Week 1-2: Fundamentals - Landing page simple (header, hero, footer) - Card component dengan hover effect - Button variations (primary, secondary, outline) Week 3-4: Layout - Responsive navbar dengan hamburger menu - Image gallery dengan Grid - Blog layout (sidebar + main content) Week 5-6: Advanced - Portfolio website (full responsive) - Dashboard dengan widgets - E-commerce product page 2. Learn CSS Framework (Setelah Fundamental Solid): - Tailwind CSS - Utility-first, most popular - Bootstrap - Component-based, classic - Sass/SCSS - CSS preprocessor 3. Resources Belajar: - Practice: [Frontend Mentor](https://www.frontendmentor.io) - Real projects - Games: [Flexbox Froggy](https://flexboxfroggy.com), [Grid Garden](https://cssgridgarden.com) - Reference: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS) - Official docs - Inspiration: [CSS-Tricks](https://css-tricks.com), [Dribbble](https://dribbble.com) 4. Challenge Yourself: - Recreate designs dari Dribbble - Contribute ke open source projects - Build personal portfolio - Learn animations dengan Framer Motion/GSAP ### Tips Sukses Belajar CSS: 1. Practice Daily - 30 menit sehari > 5 jam seminggu sekali 2. Inspect Websites - Buka DevTools (F12), lihat CSS website favorit kamu 3. Build Real Projects - Jangan cuma nonton tutorial 4. Join Community - Discord, Reddit, Twitter (X) 5. Stay Updated - CSS terus evolve, ada fitur baru tiap tahun ### Goal 30 Hari Ke Depan: Kalau kamu bisa bikin ini, CSS fundamentals kamu sudah solid: - [ ] Landing page responsive (mobile + desktop) - [ ] Navbar dengan hamburger menu - [ ] Image gallery dengan Grid (auto-responsive) - [ ] Card components dengan hover effects - [ ] Form styling yang cantik - [ ] Dark mode toggle dengan CSS Variables Remember: CSS bukan tentang hafalan. It's about understanding, practice, dan creativity! Start simple, be consistent, dan terus berkarya. Setiap website keren yang kamu lihat dimulai dari baris CSS pertama! Happy styling! 🎨

*/ } /* General sibling (~) - Semua saudara setelahnya */ h1 ~ p { color: gray; /* Semua setelah

/ } / General sibling (~) - Semua saudara setelahnya / h1 ~ p { color: gray; / Semua
setelah