Module 3: CSS Styles Practice and fun

By Alexander Inguanzo

Hover & Transition Example

This button demonstrates how hover effects can be combined with transitions.

Z-Index Layering Example

Layer 1
Layer 2
Layer 3

This example demonstrates how z-index controls which elements appear where.

Rounded Corners & Box Shadow Example

Soft Corners & Shadow

This box uses border-radius and box-shadow for a soft, modern look.

Google Fonts Example

This uses the "Poppins" Google Font.

Google Fonts makes it easy to important.

Positioning Within a Parent Example

Parent Box
Child (Bottom-Right)

The child element stays locked to the bottom-right corner inside its parent image.

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading
This is an H6 heading