CSS

CSS (Cascading Style Sheets) controls how HTML looks and lays out. You should already recognize basic HTML elements, classes, and links; you do not need to know any CSS yet. Each worked demo shows a finished page you can change safely. In the next exercise, you apply the same idea to a different page and check the result in the preview.

Start by styling individual elements and cards. Then combine selectors and spacing in a menu and form. After learning Flexbox and Grid, use them together in a page layout. Finish by adding motion where it helps and making designs fit smaller screens. The examples use different community projects so you can practice transferring a technique rather than copying one page throughout.

What you will learn

• Write CSS rules and choose the elements they affect.
• Use color, type, spacing, and borders to make content readable.
• Arrange content with positioning, Flexbox, and Grid.
• Reuse values, add restrained motion, and adapt layouts to the available space.

Course outline

1. Foundations: rules, selectors, and specificity
2. Visual style: color, backgrounds, type, and borders
3. Layout fundamentals: boxes, display, positioning, and overflow
4. Selectors in depth: relationships and interactive states
5. Apply those basics in a dropdown menu and styled form
6. Learn Flexbox and Grid, then combine them in a page
7. Add variables, transforms, and animation
8. Make layouts responsive, then apply them to a table and profile sheet