1. Selectors Practice

Exercise Set

• Style all paragraphs with `font-size: 18px`.
• Give `.highlight` class text a yellow background.
• Change `#main-title` color to blue.
• Use an attribute selector to style input placeholders.

Hint: Use element, class, id, and attribute selectors together.

2. Typography Practice

Exercise Set

• Set a readable font family for body text.
• Create heading style with uppercase and letter spacing.
• Apply line height for better paragraph readability.
• Use text shadow on a hero heading.

Hint: Focus on `font-family`, `line-height`, `letter-spacing`, and `text-shadow`.

3. Box Model Practice

Exercise Set

• Create a card with margin, border, and padding.
• Make card corners rounded using border radius.
• Add subtle shadow to card blocks.
• Use `box-sizing: border-box` globally.

Hint: Inspect element dimensions in browser dev tools.

4. Layout Practice

Exercise Set

• Build a horizontal navbar with Flexbox.
• Create a 3-column feature section with CSS Grid.
• Center a card both vertically and horizontally.
• Add `gap` spacing between layout items.

Hint: Use `display: flex` and `display: grid` based on the layout need.

5. Form Styling Practice

Exercise Set

• Style text inputs with padding and border radius.
• Add focus state with border color and shadow.
• Design a primary submit button with hover effect.
• Align labels and fields cleanly in one form card.

Hint: Keep states consistent for hover, focus, and disabled controls.

6. Responsive Practice

Exercise Set

• Convert 3-column layout to 1-column below 768px.
• Adjust heading and paragraph font sizes for mobile.
• Make navbar stack vertically on small devices.
• Ensure images are fluid using max-width rules.

Hint: Start desktop-first or mobile-first, but keep breakpoints consistent.