Goals

• I understand how the box model works to define margins and paddings.
• I understand box-sizing and i am able to decide which model needs to be chosen for my layouts.
• I use display settings to control the behaviour of elements in the document flow.

Content

• Box Model / Box Sizing
• Box Shadow
• Media queries
• Display settings

RECAP – 03.10.

1. Cascade & inheritance
2. Selectors
3. Q & A

Box Model

• The box model
• Box sizing
• Border - styles
• MDN border-radius | border-radius
• Box Shadow (DE) | w3schools (EN) || MDN (EN)

HELPER – Tools

• CSS Border Radius Generator
• Box-shadow_generator
• https://css3gen.com/box-shadow/
• https://www.cssmatic.com/box-shadow

Responsive Design

@media - Media Queries

• mediaqueri.es
• Tutorial: Learn how to use CSS Media Queries in less than 5 minutes

Social Activity / Leisure Time

Hiking to Lorenchopf