Task 2: CSS Refresher

CSS Properties & Selectors

This section shows how CSS properties style HTML elements and how selectors target them.

This box demonstrates color, background-color, border, margin and padding.

px vs em vs rem

This paragraph uses 16px (px)

This paragraph uses 1em

This paragraph uses 1rem

Text, Font & Images

Example of custom font, size and image styling.

Headings and paragraphs use font-family, font-size and color.

Heading Example

Paragraph example with font-family Arial, color #333, size 1.1rem

Sample CSS Image

Box Model & Units

Using padding creates space inside elements, margin creates space outside and border adds a visible outline.

Box with padding, margin and border

Sizes use px, em, and rem units for fixed or relative spacing.

Flexbox Layout

Flex Item 1
Flex Item 2
Flex Item 3

Flexbox allows items to align, distribute space and wrap responsively.

Grid Layout

Grid 1
Grid 2
Grid 3

Grid creates rows and columns, placing items precisely in a flexible layout.

Responsiveness

Using media queries, the layout and font sizes adjust for tablets and mobile devices.

Flex and grid layouts also adapt to smaller screens automatically.