1. Selectors
Use class, id, element, and pseudo-class selectors to target elements.
Class selector
ID selector
2. Box Model
Margin, border, padding, and width control spacing and sizing.
Box model
3. Layout Fundamentals
Position, display, and stacking order help place elements.
Static
Relative
Absolute
Fixed
4. Flexbox
Flexbox is ideal for one-dimensional layouts and spacing.
Item 1
Item 2
Item 3
5. Grid
CSS Grid builds two-dimensional layouts with rows and columns.
1
2
3
4
6. Responsive Design
Media queries adjust layout for smaller screens.
Resize the browser to see changes.
7. Typography
Fonts, line height, and spacing make text readable.
Heading style
Readable body text uses line-height, letter-spacing, and font-weight.
8. Colors and Backgrounds
Use color systems, gradients, and opacity for visual design.
Gradient background + semi-transparent overlay
9. Transitions and Animations
Smooth transitions and keyframe animations add polish.
Animated box
10. Modern CSS Features
Variables, calc(), clamp(), and aspect-ratio make CSS more powerful.
Modern CSS box