CSS Chapter

Inline block

Ye adalah block tp dia punya width dalam keadaan inline

*untuk center sesuatu guna margin-auto. Wajib declare width atau max-width. Baru boleh center

*kalua nak center guna text-align: center; pastikan mende tu block-level element. Boleh tukar guna
display property dalam css kalua mende tu inline element

Rules utk margin

Untuk first value adalah margin-top dan margin bottom dan 2nd value adalah margin left dan margin
right

Contoh

.{

Margin:10px auto;

Maksudnya margin top dan btm adalah 10px dan left and right adalah auto

Html multiple class

Html element boleh guna multiple class dalam satu element dengan letok space. Contoh <div
class=”marker one”

Unset rule

Untuk pastikan nak remove css property yang sebelum ni. Boleh specify class dan property unset.

Contoh className{width:unset;}

Attribute selector

Selain dari classname dan id. Css buleh callout value name dengan specify element[value]

Contoh input[name="password"]{property:0;}
Apa itu em, rem, vh dan vw

Rem adalah unit multiply by root value

Em pula adalah unit multiply by parent value.em x bagus utk website responsive

VW adalah viewport width. 1 vw= 1% screen width

Vh pulak adalah viewport height. 1vh = 1% screen width

Apa itu box-sizing?

Box sizing by default adalah content-box. Content-box by default behaviour ye akan membesorkan
lagi size kalau guna padding atau border. Border-box lagi memudahkan sbb kalau kita setting width
400px img contoh. Dan kite increase padding dan border dkt img. Size img still 400px dengan 400px
included border dan padding

Ap itu display:flex

Display flex ni kalau by default dia akan melintang. Flex ni bg sebarang child element akan placing
ikut row yg kita buat (kalau by default dia akan ke kanan).

Flexbox ni ada main dan cross axis. Mende ni kite buleh ejas by flex-direction property iaitu row,
row-reverse, column dan column-reverse

Ap aitu flex-wrap

Flex-wrap ni kite guna untuk wrapping element yang terjolor keluor.

Apa itu justify content

Justify content ni car akita nak alih mende yang ada dalam flex container tu dgn main axis dia

Kalau gambar pecah sbb kita sizing width terlalu lebar etc

Boleh guna object-fit: cover

Element.classname = nk combine antara html element dan classname

Element * = nk pilih semua jenis element yang ada

Element/class + element/class = nk pilih element yang selepas element tersebut

Element/class ~ element/class = nk pilih element yang selepas element tersebut

Element/class > element/class = nk pilih child element dalam parent element tersebut

:first-child = guna untuk select first child element tersebut

:only-child = guna untuk select child. Contoh ul li:only-child. Akan select sume li dalam ul

:nth-child(A) = guna untuk select certain2 child element dalam bentuk nombor. Contoh div p:nth-
child(2) akan pilih p yang kedua dalam div tersebut

:nth-last-child(A) = akan pilih ikut turutan bermula dari last child

:first-of-type = akan pilih first element yg dinyatakan

:nth-of-type(A) = selector element yang boleh pilih element ganjil”odd” atau x ganjil “even”

:only-of-type = selector element yang pilih jenis child element dalam parent tersebut

:last-of-type = selector element yang pilih last type element

:empty = selector element yang pilih element xdok child dalam tu

:not(X) = selector element yang pilih element selain dari element yang dinyatakan dalam (). Contoh
div:not(.small) maksudnya akan pilih div yang xdok classname small

[attribute] = akan pilih element berdasarkan attribute dalam element. Contoh a[href] akan pilih
semua element a yang ada href

A[attribute] = sama dgn attribute

[attribute="value"]=pilih value dalam element attribute

[attribute^="value"] = akan pilih short value. Contoh mcm attr for=“bitcoin” jd kita set for^="bit"
akan pilih semua selector yang ada bit xkire la bitcoin atau bitfuck. Selagi ada bit dia akan pilih hok tu

[attribute$="value"] = akan pilih short value jugak. Tapi value akhir dia

[attribute*="value"] = lebih kurang je dengan yang atas. Tapi pilih yang tengah2
GRID

*grid-area

Cara nak define grid dgn pantas adalah dgn grid-area. Format dia grid-area row-start col-start row-
end col-end