Advanced CSS Properties

Sticky Position Example

1. text-decoration

No Decoration

Underline

Overline

Line Through

2. font-weight

Normal

Bold

Light (300)

Heavy (900)

3. Margin and Padding

Margin = 30px
Padding = 25px

4. Float

🖼️

This text wraps around the floated element. Float allows text to flow beside images or boxes. Lorem ipsum dolor sit amet consectetur adipisicing elit.

5. Border Radius

Rounded Corners

6. Width and Height

250px × 80px

7. Position

Relative Container
Absolute

8. display:flex

1
2
3

9. flex-direction

Row

A
B
C

Column

A
B
C

10. justify-content

Center

1
2
3

Space Between

1
2
3

Space Around

1
2
3

Space Evenly

1
2
3

11. flex-wrap

1
2
3
4
5
6
7
8

12. align-items

A
B
C

13. align-self

1
align-self
3

14. flex-flow

1
2
3
4
5
6
7
8

15. justify-self

Observação: justify-self não funciona em Flexbox. Essa propriedade é destinada ao CSS Grid. Em containers Flexbox, usa-se justify-content, align-items e align-self.

Fixed Position