CSS BIGINNER

I. Langkah pertama Menguasai CSS

apa itu CSS

CSS adalah bahasa untuk menggambarkan bagaimana dokumen HTML ditampilkan secara vissual. bagaimana mereka diatur dan ditata, CSS singaktan dari Cascading Style Sheets, CSS ini mempermudah untuk mendesain halamaan. tapi semakin properti yang digunakan , bisa jadi bingung cara pakainya.

Aturan CSS

Hampir seluruhnya ditulis dengan cara seperti ini:

elector {

property: value;

}

beberapa contoh penulisan CSS :

membuat semua h1 berwarna biru

h1 {

color: blue;

}

membuat semua ukuran element gambar dengan lebar 100 px dan tinggi 200 px

img {

width: 100px;

height: 200px;

}

jangan mengfal sintaxnya dulu
tapi cari dulu apa yang di butuhkan dalam kebutuhan web
bisa cari googling banyak sintax CSS yang bisa di cari untuk di pelajari.

Menggunakan CSS dengan benar

ada 3 cara penulian CSS yang bisa di gunakan tetapi yang benar dan paling di rekomendasikan dan sesuai tandart adalah menggunakan External StyleSheet.
berikut contoh dari beberapa cara menulisan CSS :

Inline style

yaitu penulisan style css yang langsung pada element yang dituju. (sangat tidak disarankan)

<style> element

yaitu menggunakan element style di element. lebih baik, tetapi tidak bisa digunakan di banyak dokumen. (Tidak di sarankan)

External Stylesheet

yaitu memisahkan file css dari html. (direkomendasikan)

Mengenal Properti Color dan Background Color

dalam propert CSSyang paling umum sebernya ada 3 properti warna yaitu color, background-color dan border-color. masing-masing properti memiliki fungsinya masing-masing contoh:

button  {
  color:darkviolet;
  background-color: #f5deb3;
}

didalam gambartersebut saya menggunakan color untuk tulisan pada button dengan warna darkviolet dengan penulisan code nama warnanya sedangkan untuk merubah background-color buttonnya saya menggunakan warna wheat (gandum) dengan penulisan code menggunakan code warna #f5deb3; ,sedangkan border color digunakan untuk mewarnai garis tepi.

Sistem warna RGB dan Sistem warna Hexadesimal

ada 3 jenis penulisan dalam pewarnaan CSS

memanggil dengan nama warnanya
h1 {
color :darkred;
}
pewarnaan dengan RGB
p {
color:rgb(0, 99, 0);
}
menggunakan hexadesimal
h2 {
color :#00008b;
}

Jangan Lupa, Titik Koma (semi colon)

kebanyakan programmer frontend saat melakukan stylis pada HTML sering kali terlupakan dengan semi colon (;), semi colon ini penting karena jika properti tidak ada ; maka style akan eror tidak terbaca.

Properti Text umum

CCS properti untuk text umumnya memiliki 5 bagian yaitu:

- Text-align
digunakan untuk menaruh dimana text itu ingin di tempatkan untuk perintahnya memiliki beberapa yaitu:
* Start : untuk di awal line
* End : untuk di akhir line
* center : untuk di tengah line
* justify : untuk meratakan paragraf

- font-weight
digunakan untuk mempertebal ketebalan huruf atau angka agar tidak menggunakan banyak <h1> sehingga menyalahi aturan semantix HTML

- text-decoration
digunakan untuk membuat garis di huruf atau angka yang di inginkan. bisa juga digunakan untuk mematikan decoration di elemen angker <a>.

- line-height
ini digunakan untuk jarak ketinggian antar paragrafnya.

- letter-spacing
ini digunakan untuk mengatur jarak antar huruf spasi

Mengenal ukuran pada css dengan Font

font size adalah satuan ukuran yang biasa di gunakan untuk mengatur suatu ukuran di element di dalam web, ada dua jenis penggunaan dalam CSS yaitu:

Relative

relative digunakan pada website yang responsive jadi ukurannya dari suatu gambar tidak baku atau tidak fix disitu saja tetapi bisa berubah menyesuaikan ukuran layar penggunanya. format dari ukuran ini itu ada :

Absolute

absolute benar benar di gunakan di fix hitungannya pas tidak berubah. format dari ukuran ini itu ada :

II. Mengenal apa itu selector dan cara kerjanya di CSS

Selector Menggunakan Element HTML

elemen selector adalah selector yang menggunakan tag dari HTMLnya jadi kita panggil elemen HTML untuk di ubah di CSS.

p {
  color:aliceblue;
}

selector menggunakan Attribute ID

atribut selector yaitu mengaikan css dengan atribut Id

<button id="kirim">Kirim</button> 
 

#kirim {
  background-color: aquamarine;
  color: black;
}

selector menggunakan atribut class

atribut selector yang menggunakan class untuk mengaitkannya

<strong class="mark">tebal</strong>
 .mark {
  background-color: greenyellow;
  color:black
}

Mengenal Descendant Selector

Selector ini hanya memililih elemen yang merupakan anak langsung dari induk elemennya. elemen cucu atau keturunan yang lebih dalam tidak akan terkena efeknya.

li a {

color: blue;

}

Mengenal Direct Descendant dan Ajdacent Selctor

selector ini digunakan untuk memilih sebuah elemen yang letaknya tepat setelah elemen lain, selama keduanya memiliki induk yang sama

 <a href="#">ini elemen angker</a>
  <button>gass</button>
 
a + button {
  color:brown;
}

Mengenal Attribute Selector

Attribute selector itu adalah cara memilih elemen berdasarkan "apa yang ada di dalam tag-nya", bukan cuma nama tag atau class-nya

<input type="text" placeholder="search">
<button>search</button>

input[type="text"] {
  color:white;
}

Mengenal Pseudo Classes

kata kunci yang ditambahkan pada selector untuk memilih element secara spesifik pada kondisi tertentu

:active
:checked
:first
:hover
:nth-child()
:nth-of-type()

<p>selanjutnya saya buat paragraf di mana bagian ini saya 
buat menjadi <strong class="mark">tebal</strong> dan 
selanjutnya akan menjadi <em class="mark">miring</em>dan 
jika ada hal penting bisa ditambahkan garis  
<u class="mark">bawah</u></p>
 
.jokes > p:hover {
  cursor: pointer;
  text-decoration: underline;
}

Mengenal Pseudo Elements

kata kunci yang ditambahkan pada selector untuk memilih bagian element yang dipilih:

:after
:before
:first-letter
:first-line
:selection

h3 ::first-letter {
  font-size: x-large;
} 

Box Model CSS - Menubah Ukuran Element dengan CSS

Mengenal Bagian Box Model pada Element

ini materi paling penting di CSS, jika sudah memahami materi ini nantinya kita bisa dengan mudah mengatur tata letak (layout) apa pun dengan gampang.
bayangkan setiap element HTML (seperti div, h1, atau p) adalah sebuah paket kado kotak.

terdapat 4 lapisan box model yaitu:

konten/isi
ini dalah bagian isi konten. bisa berupa teks, gambar, atau video.
Padding/bantalan
ini seperti bubble wrap di dalam kardus. jarak antara isi dengan pinggiran kardus. kalau padding ditambah, ruang di dalam elemen jadi lebih lega.
border/kardus
ini adalah garis tepi atau dinding pembatas elemen. kamu bisa atur ketebalan dan warnanya.
Margin/jarak luar
ini adalah jarak antara kardus kamu dengan kardus tetangga. margin tidak punya warna, gunanya cuma buat kasih jarak antar elemen supaya enggak dempet-dempetan.

 <div>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
Doloribus nesciunt unde nihil illum officia quos pariatur quae voluptas 
esse quibusdam aut sapiente quod, reiciendis beatae vel recusandae cum 
iure earum.</p>
    </div>

div {
    width: 300px;
    padding: 50px;
    margin: 20px;
}

Mengenal properti border pada CSS

border itu initinya adalah "garis tepi" dari sebuah elemen. ada 3 elemen utama untuk membuat berder yaitu :

width / tebal
digunakan utuk ketebalan garis bordernya
Style / bentuk
digunakan untuk berbentuk apa bordernya ada solid untuk garis lurus, dashed untuk putus-putus, dotted untuk titik-titik.
Color / warna
digunakan untuk mewarnai garis bordernya

div {
    border-style:dashed;
    border-top-style:double;
    border-bottom-style:double;
    border-width: 5px;
    border-top-width: 10px;
    border-bottom-width: 10px;
}

Mengenal properti padding pada CSS

jika border adalah kardus maka padding adalah bantalan jarak antara kardus tersebut dengan isian didalamnya. padding digunakan untuk memberikan"ruang napas" di dalam sebuah elemen. Tanpa padding, teks atau gambar akan menempel ketat di pinggiran border elemen tersebut, yang biasanya membuat desain terlihat sesak dan tidak rapi.

Cara kerja Padding
padding bersifat internal. Dia menambah ruang di bagian dalam elemen, sehingga jika elemen tersebut memiliki warna latar belakang, warna itu juga akan mengisi area padding tersebut.

div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

bisa juga di tulis dengan :
padding: 10px 20px;
atau bisa juga :
padding 10px 20px 10px 20px

Mengenal Properti Margin pada CSS

margin adalah jarak antara kardus kamu dengan kardus tetangga, margin ini diibratkan "ruang kosong" di luar kardus. Gunanya supaya kardus-kardus elemen di website kamu enggak saling bertabrakan atau nempel banget.

sifat Utama margin :
- Transparan: Margin nggak punya warna, dan tidak bisa diberikan warna. dia cuman ruang hampa.
- Mendorong: Margin fungsinya mendorong kardus lain supaya menjauh.

Cara Mengatur Jarak Margin

Sama persis dengan cara pasang padding, kita bisa pakai rumus jarum jam :

Cara satu persatu

margin-top: Kasih jarak ke tetangga atas.
margin-bottom: kasih jarak ke tetangga bawah.
margin-left: kasih jarak ke tetangga kiri.
margin-right: kasih jarak ke tetangga kanan.

Cara Cepat

margin: 50px; semua sisi menjauh 50px dari tetangganya.
margin: 10px 20px: Atas-Bawah jaraknya 10px, kiri-kanan jaraknya 20px

Trik Spesial

.kardus {

width: 300px;

margin: 0 auto;

}

jarak atas-bawahnya 0, tetapi jarak kiri-kanannya dibagi rata secara otomatis. Hasilnya kardus bakal berada tepat di tengah-tengah halaman.

Mengenal Properti Display

Materi Display ini adalah "pengatur sifat" kardus kamu. properti ini menentukan bagaimana kardus tersebut berbaris dan berperilaku terhadap kardus di sebelahnya.

Dalam CSS, ada tiga nilai display yang paling dasar dan wajib kamu tahu:

display: block;

ini sifat bawaan (default) dari tag seperti <div>, <h1>, atau <p>.

sifatnya maruk. dia akan memakan seluruh lebar satu baris dari kiri sampai kanan, meskipun isinya cuma sedikit.
hasilnya kardusnya dipaksa turun ke baris baru di bawahnya.
bisa diatur bebas mengatur width, height, margin dan paddingnya.

display: inline;

ini adalah sifat bawaan tag seperti <span> atau <a>.

sifatnya ngirit dia hanya memakan lebar sesuai ukuran isinya saja.
hasilnya kardus lain bisa ikut berbaris di sebelahnya selama ruangnya masih cukup.
kekurangannya tidak bisa diatur widht dan height. margin atas-bawah juga sering tidak berfungsi normal.

display: inline-block;

ini adalah gabungan kekuatan dari keduanya.

sifatnya dia bisa berbaris ke samping seperti inline tetapi tetap bisa diatur width, height, margin, dan paddingnya secara penuh seperti block.
sangat cocok untuk membuat elemen seperti tombol atau kartu produk yang ingin kamu susun berjajar ke samping namun ukurannya tetap presisi.

display: none;

Jangan lupakan nilai ini karena fungsinya sangat krusial untuk interaksi pengguna.

sifatnya elemen akan benar-benar hilang dari halaman.
efeknya berbeda dengan hanya transparan, display: none; membuat elemen tersebut tidak lagi memakan ruang. kardus di bawahnya akan naik mengisi posisi yang kosong tersebut.
digunakan untuk membuat menu dropdown yang hanya muncul saat dilik atau pop-up peringatan.

Flexbox Dasar

Apa itu Flexbox

Flexible Box Layout adalah model layout 1-dimensi dalam CSS yang dirancang untuk mendistribusikan ruang antar elemen di dalam sebuah container, bahkan ketika ukurannya tidak diketahui atau dinamis.

Konsep Parent & Child

flexbox bekerja dengan hubungan flex container dan flex items

Flex Container: Elemen yang diberi properti display: flex; atau display: inline-flex;
Flex Items: Semua elemen yang menjadi anak langsung direct children dari Flex Container.

Sumbu Utama (Main Axis dan Cross Axis)

Tidak seperti layout biasa yang terpaku pada blok vertikal/horizontal, flexbox bekerja berdasarkan sumbu:

Main Axis: Sumbu Utama (defaultnya horizontal/baris). Diatur dengan flex-direction.
Cross Axis: Sumbu yang tegak lurus dengan Main Axis (defaultnya Vertikal/kolom)

Properti Utama pada container (Parent)

ini adalah kontroler untuk mengatur prilaku anak-anaknya:

flex-direction: Menentukan arah main axis (row, row-reverse, colom, column-reverse).
Justify-Content: Mengatur perataan elemen di sepanjang Main Axis (flex-start, flex-end, space-between, space-around, space-evenly).
align-items : Mengatur perataan elemen di sepanjang Cross Axis (stretch, flex-start, flex-end, center, baseline).
flex-wrap : Menentukan apakah elemen harus dipaksa dalam satu baris atau boleh pindah ke baris baru jika ruang tidak cukup (nowrap, wrap, wrap-reverse).

Properti Pada Items (child)
Setiap anak bisa mengatur ukurannya sendiri secara dinamis :

flex-grow : Kemampuan elemen untuk melebar mengisi sisa ruang (nilai angka, default 0).
flex-shrink : Kemampuan elemen untuk menyusut jika ruang kontainer lebih kecil dari ukuran elemen (default 1).
flex-basis : Ukuran awal elemen sebelum sisa ruang didistribusikan.
align-self : Meng-Override properti align-items dari parent untuk elemen spesifik tersebut.

Mengatur Urutan Elemen Dengan Flex Direction
Properti flex-direction digunakan untuk menentukan arah sumbu utama (Main Axis) di dalam sebuah flex container. Properti ini secara otomatis mengatur urutan visual elemen tanpa mengubah struktur kode HTML

Row
Elemen Berjejer dari kiri ke kanan.
.container {
display: flex;
flex-direction: row;
}

Row Reverse
Elemen berjejer dari kanan ke kiri. Elemen pertama di HTML akan beranda di posisi paling kanan.
.container {
display: flex;
flex-direction: row-reverse;
}

Column
Elemen disusun menumpuk dari atas ke bawah
.container {
display: flex;
flex-direction: column;
}

Column Reverse
Elemen disusun menumpuk dari bawah ke atas. Elemen pertama di HTML akan berada di posisi paling bawah.
.container {
display: flex;
flex-direction: column-reverse;
}

Membagi Rata jarak Horizontal Dengan Justify Content
Properti justify-content bertanggung jawab atas distribusi ruang kosong di sepanjang Main Axis. Dalam konteks flex-direction: row, properti ini menentukan bagaimana flex items diposisikan secara horizontal di dalam flex container.

berikut adalah breakdown teknis nilai-nilai untuk pembagian jarak:

1. space-between
Elemen didistribusikan secara merata di dalam kontainer.
Item pertama dipaksa menempel ke awal / start line.
item terakhir dipaksa menempel ke akhir / end line.
sisa ruang dibagikan hanya di antara elemen-elemen yang ada.
.container {
display: flex;
justify-content: space-between;
}

2. space-around

Elemen didistribusikan sehingga setiap item memiliki ruang yang sama di kedua sisinya.

jarak antar elemen adalah 2 unit
jarak antara tepi kontainer dengan elemen pertama/terakhir adalah 1 unit
Secara visual, jarak di tengah terlihat lebih lebar dari pada jarak di pinggir.

.container {
  display: flex;
  justify-content: space-around;
}

3. space-evenly

Elemen didistribusikan sehingga jarak antara dua item mana pun, serta jarak ke tepi kontainer adalah sama persis.

Semua celah memiliki lebar yang identik

.container {
  display: flex;
  justify-content: space-evenly;
}

Menampilkan Elemen Dengan Ukuran Sebenarnya Pada Flex

Secara teknis, elemen didalam FlexBox sering kali dipaksa menyusut atau melebar untuk menyesuaikan ruang kontainer. Untuk memastikan elemen tampil dengan ukuran sebenarnya, kamu perlu mengontrol 3 properti pada level Flex Item (child)

1. Mematikan Fitur Penyusutan (flex-shrink: 0)

Secara default, nilai flex-shrink adalah 1. Artinya jika kontainer lebih kecil dari total ukuran item, elemen akan dipaksa mengkerut. Untuk mempertahankan Ukuran asli:

.item {
  flex-shrink: 0; /* Elemen dilarang menyusut, ukuran akan tetap stabil */
}

2. Mematikan Fitur Pelebaran (flex-grow: 0)

Nilai default flex-grow adalah 0. Namun, jika kamu tidak ingin elemen mengambil sisa ruang kosong dan tetap pada ukuran aslinya, pastikan nilainya tetap 0.

.item {
  flex-grow: 0; /* Elemen dilarang mengambil sisa ruang */
}

3. Mengatur Ukuran Dasar (flex-basis)

flex-basis menentukan ukuran awal elemen sebelum didistribusikan ke dalam kontainer. Kamu bisa mengisinya dengan nilai absolut (px) atau auto.

flex-basis: auto; :mengambil ukuran dari properti width/height atau ukuran konten asli.
flex-basis: content; :Menyesuaikan ukuran berdasarkan konten di dalamnya (tidak peduli pada width).

Cara tercepat: Shorthand (flex: none)

Jika ingin elemen benar-benar kaku dan tampil sesuai ukuran aslinya (berdasarkan width, height, atau isi konten), gunakan perintah singkat:

.item {
  flex: none; 
}
/* Kode di atas sama dengan: */
/* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */

Mengatur Perataan Secara Vertikal Dengan Align Item

Properti align-items digunakan untuk mengatur perataan elemen di sepanjang Cross Axis. Jika flex-direction bernilai row (default), maka align-items akan mengatur posisi elemen secara vertikal.

1. stretch (default)

Elemen akan ditarik hingga memenuhi tinggi kontainer (jika dalam mode row)

Syaratnya Elemen tidak boleh memiliki height yang ditentukan secara manual agar efek stretch terlihat.

.container {
  display: flex;
  align-items: stretch;
}

2. flex-start

Elemen akan diletakkan di bagian paling atas (pangkal cross axis) kontainer. Ukuran elemen hanya akan setinggi konten di dalamnya.

.container {
  display: flex;
  align-items: flex-start;
}

3. flex-end

Elemen akan diletakkan di bagian paling bawah (ujung cross axis) kontainer.

.container {
  display: flex;
  align-items: flex-end;
}

4. Center

Salah satu nilai yang paling sering digunakan. Elemen akan diposisikan tepat di tengah-tengah antara batas atas dan batas bawah kontainer.

.container {
  display: flex;
  align-items: center;
}

5. baseline

Elemen disejajarkan berdasarkan garis dasar teks (baseline). ini berguna jika lemen-elemen di dalamnya memiliki ukuran font atau tinggi yang berbeda, tetapi kamu ingin teksnya tetap sejajar secara horizontal.

.container {
  display: flex;
  align-items: baseline;
}

Perbedaan Teknis antara align-items dengan align-content

align-items digunakan untuk Mengatur elemen di dalam satu baris flex

align-content digunakan untuk mengatur jarak antar baris-baris flex (hanya berfungsi jika ada lebih dari satu baris, alias menggunakan flex-wrap: wrap; ).

Contoh kasus membuat sebuah elemen tepat berada di tengah-tengah kontainer baik secara horizontal maupun vertikal (Perfect Center), gunakan kombinasi ini:

.parent {
  display: flex;
  justify-content: center; /* Tengah horizontal */
  align-items: center;     /* Tengah vertikal */
  height: 300px;           /* Butuh tinggi pada parent */
}

Mengatur Jarak Cross Axis dengan Align Content dan align self

1. Align content : Mengatur baris-baris flex

Properti align-content digunkan untuk mengatur distribusi ruang antar baris di dalam flex container.

Syarat Utama: Properti ini hanya berfungsi jika flex-wrap bernilai wrap atau wrap-reverse DAN terdapat lebih dari satu baris elemen.
Analogi Teknis: Jika justify-content mengatur jarak antar elemen dalam satu baris, maka align-content mengatur jarak antar baris dalam satu kotak.

Nilai-Nilai Utama:

flex-start: Baris-baris ditumpuk ke awal kontainer.
flex-end: Baris-baris ditumpuk ke akhir kontainer.
center: Baris-baris dikelompokkan di tengah kontainer.
space-between: Baris pertama di atas, baris terakhir di bawah, sisanya dibagi rata.
space-around: Memberi ruang rata di sekitar setiap baris.
stretch (Default): Baris-baris ditarik untuk mengisi sisa ruang yang ada.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* Mengatur jarak antar baris */
  height: 500px;
}

2. Align Self: Mengatur Individu (Anak)

align-self adalah properti yang dipasang pada Flex Item (Child), bukan pada container. Ini memungkinkan satu elemen spesifik untuk "memberontak" dari aturan align-items yang ditetapkan oleh induknya.

Fungsi: Meng-override (menindih) perintah perataan vertikal dari parent hanya untuk elemen itu sendiri.

Nilai-Nilai Utama: Nilainya sama persis dengan align-items (flex-start, flex-end, center, baseline, stretch), ditambah nilai auto (mengikuti induk).

Contoh Kasus: Bayangkan induknya menyuruh semua anak rata atas (flex-start), tapi kamu ingin satu tombol tetap di tengah secara vertikal.

.container {
  display: flex;
  align-items: flex-start; /* Semua anak rata atas */
  height: 100px;
}

.item-spesifik {
  align-self: center; /* Hanya elemen ini yang pindah ke tengah */
}

Mengubah ukuran elemen Flex

Untuk mengubah ukuran elemen di dalam Flexbox secara dinamis dan presisi, kamu harus menguasai tiga properti utama yang bekerja pada level Flex Item (anak).

Ketiga properti ini biasanya disingkat dalam satu baris kode yaitu properti flex.

1. flex-grow (Kemampuan Melebar)

Properti ini menentukan berapa besar elemen akan "tumbuh" untuk mengisi sisa ruang kosong di dalam kontainer.

Nilai default: 0 (elemen tidak akan melebar meskipun ada sisa ruang).
Nilai angka (1, 2, dst): Jika semua item diberi flex-grow: 1, mereka akan membagi sisa ruang secara merata. Jika satu item diberi flex-grow: 2, maka item tersebut akan mengambil sisa ruang dua kali lebih banyak dibanding yang lain.

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; } /* Mengambil sisa ruang lebih besar */

2. flex-shrink (Kemampuan Menyusut)

Properti ini menentukan bagaimana elemen menyusut jika total ukuran semua item lebih besar daripada ukuran kontainer (terjadi overflow).

Nilai default: 1 (elemen akan otomatis menyusut agar muat di dalam kontainer).
Nilai 0: Elemen dipaksa tidak menyusut dan mempertahankan ukuran aslinya (bisa menyebabkan elemen keluar dari kontainer).

.item-fixed { flex-shrink: 0; } /* Ukuran tetap kaku, anti penyusutan */

3. flex-basis (Ukuran Dasar)

Ini adalah ukuran ideal elemen sebelum sisa ruang didistribusikan oleh grow atau shrink.

Nilai default: auto (mengambil ukuran dari width/height atau konten).
Nilai absolut: Bisa diisi px, %, em, atau rem.

.item { flex-basis: 200px; } /* Ukuran awal diset ke 200px */

Properti Shorthand: `flex`

Sangat disarankan untuk menggunakan properti gabungan agar kode lebih bersih dan menghindari bug kalkulasi manual.

Sintaks: flex: [flex-grow] [flex-shrink] [flex-basis];

Kode	Penjelasan Teknis
`flex: 1;`	Sama dengan `flex: 1 1 0;`. Elemen akan melebar dan menyusut secara fleksibel.
`flex: 0 0 200px;`	Elemen kaku. Tidak bisa melebar, tidak bisa menyusut, ukuran tepat 200px.
`flex: none;`	Sama dengan `flex: 0 0 auto;`. Elemen menggunakan ukuran konten asli dan tidak fleksibel.
`flex: auto;`	Sama dengan `flex: 1 1 auto;`. Elemen fleksibel dengan basis ukuran konten.

Contoh Implementasi: Sidebar & Main Content

Skenario umum di mana sidebar memiliki lebar tetap, dan konten utama mengambil sisa layar yang tersedia:

.container {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* Tidak melebar, tidak menyusut, lebar tetap 250px */
  background: #ccc;
}

.main-content {
  flex: 1; /* flex-grow: 1, otomatis menghabiskan sisa ruang */
  background: #eee;
}

Flex Dengan sintaks yang lebih ringkas

Dalam CSS Flexbox, penggunaan properti individual (flex-grow, flex-shrink, dan flex-basis) secara terpisah sering kali dianggap tidak efisien. Praktik terbaik (best practice) secara teknis adalah menggunakan properti gabungan yaitu flex.

1. Sintaks Shorthand `flex`

Sintaks ini menggabungkan tiga properti menjadi satu baris: flex: [flex-grow] [flex-shrink] [flex-basis];

2. Nilai Preset yang Sering Digunakan

CSS menyediakan beberapa kata kunci (keywords) sebagai jalan pintas untuk kebutuhan layout yang paling umum:

Sintaks Ringkas	Ekivalen Teknis	Perilaku Elemen
`flex: initial;`	`0 1 auto`	Default. Tidak melebar, bisa menyusut jika kontainer sempit, ukuran sesuai konten.
`flex: 1;`	`1 1 0`	Fleksibel. Melebar mengisi sisa ruang, bisa menyusut, ukuran awal dianggap 0.
`flex: auto;`	`1 1 auto`	Fleksibel + Content. Melebar dan menyusut, tapi ukuran awal didasarkan pada konten/lebar elemen.
`flex: none;`	`0 0 auto`	Kaku. Tidak bisa melebar maupun menyusut. Ukuran tetap sesuai lebar asli/konten.

3. Contoh Kasus Implementasi

Membagi Ruang Sama Rata

Jika kamu ingin semua item memiliki lebar yang sama persis tanpa mempedulikan isi konten di dalamnya:

.item {
  flex: 1; /* Semua anak akan mengambil porsi 1 yang sama adil */
}

Komponen Layout "Fixed & Fluid"

Skenario di mana ada satu kolom tetap (seperti sidebar atau icon) dan satu kolom yang menghabiskan sisa ruang:

/* Kolom Tetap */
.icon {
  flex: 0 0 50px; /* Grow 0, Shrink 0, Basis 50px */
}

/* Kolom Fleksibel */
.search-bar {
  flex: 1; /* Menghabiskan sisa ruang yang ada */
}

4. Mengapa Harus Pakai Sintaks Ringkas?

Reset Otomatis: Saat kamu menulis flex: 1;, CSS secara otomatis mengatur flex-shrink: 1 dan flex-basis: 0. Ini mencegah bug layout yang tidak diinginkan.
Keterbacaan: Memudahkan debugging saat inspeksi kode di browser (DevTools).
Standar W3C: W3C merekomendasikan penggunaan shorthand flex karena lebih efektif menangani kalkulasi distribusi ruang oleh browser.

Pengetahuan Responsinve Design dan Media Query

Dalam pengembangan web modern, Responsive Web Design (RWD) adalah pendekatan teknis agar tampilan situs web dapat beradaptasi secara otomatis pada berbagai ukuran layar (desktop, tablet, hingga smartphone) tanpa mengubah basis kode HTML.

Senjata utama untuk mencapai hal ini adalah Media Query.

1. Dasar Konsep Media Query

Media Query adalah modul CSS yang memungkinkan penerapan blok gaya (style) hanya jika kondisi perangkat tertentu terpenuhi, seperti lebar layar (viewport), orientasi (landscape/portrait), atau resolusi.

Sintaks Dasar:

@media media-type and (condition) {
  /* CSS rules di sini hanya jalan jika kondisi terpenuhi */
}

Media Type: Biasanya menggunakan screen (untuk layar digital).

Condition: Paling umum menggunakan max-width atau min-width.

2. Strategi: Mobile First vs. Desktop First

Dalam alur kerja teknis, ada dua pendekatan utama:

A. Mobile First (Rekomendasi Modern)

Menulis kode untuk layar kecil terlebih dahulu, lalu menggunakan min-width untuk menambahkan fitur pada layar yang lebih besar.

Keuntungan: Performa lebih ringan di HP karena CSS yang dimuat lebih sedikit di awal.

/* Gaya dasar untuk Mobile */
.container { display: flex; flex-direction: column; }

/* Untuk Tablet ke atas (600px+) */
@media screen and (min-width: 600px) {
  .container { flex-direction: row; }
}

B. Desktop First

Menulis kode untuk layar besar dahulu, lalu menggunakan max-width untuk "merampingkan" tampilan saat layar mengecil.

/* Gaya dasar untuk Desktop */
.container { display: flex; flex-direction: row; }

/* Untuk Mobile (600px ke bawah) */
@media screen and (max-width: 600px) {
  .container { flex-direction: column; }
}

3. Breakpoints Standar

Breakpoints adalah titik batas lebar layar di mana layout akan berubah. Tidak ada aturan baku, tetapi berikut adalah standar yang sering digunakan (mengikuti framework seperti Bootstrap/Tailwind):

Perangkat	Range Lebar	Breakpoint (Min-width)
Mobile	< 576px	(Default/Base)
Tablet	≥ 768px	`@media (min-width: 768px)`
Laptop/Desktop	≥ 992px	`@media (min-width: 992px)`
Large Monitor	≥ 1200px	`@media (min-width: 1200px)`

4. Meta Tag Viewport (Wajib)

Media Query tidak akan bekerja secara akurat di perangkat mobile jika kamu tidak menyertakan meta tag berikut di dalam bagian <head> HTML kamu:

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

width=device-width: Mengatur lebar halaman mengikuti lebar layar perangkat.

initial-scale=1.0: Mengatur level zoom awal saat halaman dimuat.

5. Best Practice Teknis

Gunakan Unit Relatif: Hindari px untuk lebar kontainer besar. Gunakan %, vw, atau rem agar lebih fleksibel sebelum terkena breakpoint.
Jangan Terpaku pada Device: Buatlah breakpoint berdasarkan kapan konten terlihat berantakan, bukan berdasarkan seri iPhone atau Samsung tertentu.
Kombinasikan dengan Flexbox/Grid: Media Query berfungsi sebagai pemicu, sedangkan Flexbox/Grid berfungsi sebagai pengatur alirannya.

Memulai Kehebatan Media Query

Setelah memahami dasar-dasar responsif, saatnya masuk ke implementasi teknis bagaimana Media Query bekerja sebagai pengendali logika layout berdasarkan spesifikasi perangkat.

Berikut adalah langkah-langkah teknis untuk memulai implementasi Media Query secara efektif:

1. Menentukan Target Spesifikasi

Media Query bekerja dengan memeriksa fitur media perangkat. Properti yang paling sering digunakan dalam pengembangan web adalah:

width / height: Lebar atau tinggi viewport.
min-width / max-width: Ambang batas minimal atau maksimal lebar layar (paling umum digunakan).
orientation: Mendeteksi apakah perangkat dalam posisi portrait atau landscape.
resolution: Untuk menangani layar dengan kepadatan pixel tinggi (Retina Display).

2. Struktur Penulisan di Dalam File CSS

Ada dua cara teknis untuk memisahkan gaya responsif:

A. Internal Media Query (Disarankan)

Menuliskan query di bawah gaya standar dalam satu file CSS yang sama agar lebih mudah dipantau.

/* Gaya Utama (Mobile-First) */
.card {
  width: 100%;
  display: block;
}

/* Logic untuk Layar Desktop */
@media screen and (min-width: 1024px) {
  .card {
    width: 30%;
    display: inline-block;
  }
}

B. External Media Query

Memisahkan file CSS berdasarkan perangkat. Browser akan mengunduh semua file, tetapi hanya menerapkan yang sesuai kondisi.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 601px)" href="desktop.css">

3. Logika Operator (And, Or, Not)

Kamu bisa membuat kondisi yang lebih spesifik menggunakan operator logika:

and: Menggabungkan beberapa kondisi.
- Contoh: @media (min-width: 768px) and (max-width: 1024px) (Hanya untuk tablet).
, (Comma/Or): Salah satu kondisi terpenuhi.
- Contoh: @media (max-width: 600px), (orientation: portrait)
not: Membalikkan kondisi.

4. Implementasi Praktis: Transformasi Layout Flexbox

Mari kita terapkan logika ini pada struktur kardus Flexbox yang sudah kita pelajari sebelumnya.

Skenario: Sebuah container yang berisi 3 elemen. Di HP mereka menumpuk (column), di Desktop mereka berjejer (row).

/* 1. Base Style: Mobile First */
.parent {
  display: flex;
  flex-direction: column; /* Menumpuk vertikal */
  gap: 15px;
}

/* 2. Breakpoint: Desktop (992px ke atas) */
@media screen and (min-width: 992px) {
  .parent {
    flex-direction: row; /* Berubah jadi horizontal */
    justify-content: space-between;
  }
  
  .child {
    flex: 1; /* Membagi rata ruang */
  }
}

5. Tips Teknis untuk Mahasiswa

Gunakan DevTools: Tekan F12 di browser, klik ikon Device Toggle Toolbar untuk mensimulasikan berbagai ukuran layar saat melakukan debugging Media Query.
Unit em atau rem untuk Breakpoints: Pakar CSS menyarankan penggunaan em untuk breakpoints (misal: 48em daripada 768px) agar layout lebih konsisten saat pengguna mengubah skala font di browser mereka.
Visualisasikan Breakpoint: Gunakan warna latar belakang yang berbeda pada body di setiap breakpoint saat tahap pengembangan untuk memastikan query kamu sudah "terbakar" (aktif).

Membuat Responsive Navigation

Membuat Responsive Navigation adalah penerapan teknis yang menggabungkan struktur HTML semantik, Flexbox untuk perataan, dan Media Query untuk perubahan layout antar perangkat.

Berikut adalah langkah-langkah teknis untuk membangun navbar yang berubah dari mode horizontal (Desktop) menjadi mode vertikal/tersembunyi (Mobile).

1. Struktur HTML Semantik

Gunakan tag <nav> dan <ul> untuk memastikan aksesibilitas (SEO & Screen Reader) yang baik.

<nav class="navbar">
  <div class="logo">MyBrand</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-toggle">☰</div> </nav>

2. Base Style: Desktop First (Gaya Dasar)

Pada layar lebar, kita menggunakan Flexbox untuk menata logo di kiri dan menu di kanan secara horizontal.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.menu-toggle {
  display: none; /* Sembunyikan icon hamburger di desktop */
  cursor: pointer;
  font-size: 1.5rem;
}

3. Implementasi Media Query (Mobile Mode)

Saat layar di bawah 768px, kita ubah perilaku flex container dan posisi menu.

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block; /* Tampilkan hamburger */
  }

  .nav-links {
    display: none; /* Sembunyikan menu asli */
    flex-direction: column; /* Ubah arah jadi vertikal */
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #444;
    text-align: center;
    padding: 20px 0;
  }

  /* Class tambahan untuk menampilkan menu (via JavaScript) */
  .nav-links.active {
    display: flex;
  }
}

4. Logika Interaksi (JavaScript Ringkas)

Karena CSS Media Query hanya mengatur tampilan, kita butuh sedikit JavaScript untuk memicu perubahan class saat tombol hamburger diklik.

const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', () => {
  navLinks.classList.toggle('active');
});

Analisis Teknis Perubahan Layout

Komponen	Desktop (Base)	Mobile (< 768px)
`flex-direction`	`row`	`column`
`position`	`static`	`absolute` (untuk overlay)
`display` (Menu)	`flex`	`none` (sampai di-toggle)
`width`	`auto`	`100%` (memenuhi layar)

Tips Optimasi:

Transition: Tambahkan transition: 0.3s ease; pada .nav-links jika kamu menggunakan properti seperti max-height atau opacity untuk memberikan efek animasi saat menu muncul.
Accessibility: Pastikan tombol hamburger memiliki atribut aria-label="Toggle navigation" untuk pengguna tuna netra.

19 Feb 2026

CSS Biginner