CSS BASICS
CSS makes your page feel alive. Change the controls and we’ll style the box for you — like in EP4 (box model), EP5 (layout) and EP7 (animations).
🎨 CSS Playground
Pick colors, radius, padding, border, even a tiny animation.
Live preview
Dirassa CSS 👋
This box responds to your CSS above.
Generated CSS
/* tweak something on the left */
Dirassa • CSS Module
Make your pages look like real websites.
Connect CSS → select elements → style text → box model → layout → flexbox → animations → final homepage.
Intro to CSS
What CSS is, 3 ways to add it (inline, internal, external), and connecting it to HTML. (7:29)
Selectors, classes & IDs
Target anything on the page: elements, .classes, #ids, and grouped selectors. (7:29)
Styling text & colors
Fonts, sizes, weights, colors, line-height — make your text clean. (9:58)
The box model
Margin, padding, borders, radius and why every element is a box. (6:06)
Display & position
Inline vs block, absolute/relative, and stacking elements. (7:23)
Flexbox basics
Align, center and space elements without fighting floats. (6:59)
CSS animations
Transitions, keyframes, transform and hover effects. (13:06)
Final project: homepage
Put all CSS together to build a clean landing-style homepage. (14:35)