Part 1 — Foundation
01
🎯
Selectors & Specificity
Element, class, id, pseudo-class, pseudo-element, combinator selectors
02
📦
Box Model
Content, padding, border, margin — CSS ရဲ့ အခြေခံဆုံး concept
03
✍️
Typography
font-family, size, weight, line-height, text-align, decoration
04
🌈
Colors & Backgrounds
hex, rgb, hsl, opacity, background-image, linear-gradient
Part 2 — Layout
05
🗂️
Display & Position
block, inline, inline-block, none — position static/relative/absolute/fixed/sticky
06
↔️
Flexbox
justify-content, align-items, flex-wrap, flex-grow — 1D layout
07
⬛
CSS Grid
grid-template-columns, gap, grid-area — 2D layout
08
✨
Transitions & Animations
transition, @keyframes, animation, transform (rotate/scale/translate)
Part 3 — Modern CSS
📋 CSS Quick Cheat Sheet
Selectors
div ← element
.class ← class
#id ← id
div > p ← child
:hover ← pseudo
Box Model
margin: 10px 20px;
padding: 8px 16px;
border: 1px solid #ccc;
box-sizing: border-box;
width / height
Typography
font-size: 16px / 1rem;
font-weight: bold / 700;
line-height: 1.5;
text-align: center;
color: #333;
Flexbox
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
Grid
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 16px;
grid-area: name;
Position
position: relative;
position: absolute;
position: fixed;
top/right/bottom/left
z-index: 10;
Animation
transition: all 0.3s;
transform: scale(1.1);
@keyframes name { }
animation: name 1s
infinite;
Modern CSS
--color: #42b883;
color: var(--color);
width: calc(100% - 20px);
font-size: clamp(
14px, 2vw, 18px);