Shape of the Day:

• Shorthand properties: Margin, Border and Padding
• CSS Box Model Quiz
• Positioning and z-index

Website of the Day:

https://www.webdesignmuseum.org/ – Here’s a museum of web design from the past!

1. Shorthand Properties for margin, border and padding

• Shorthand properties allow you to put multiple values on one property

Margin: instead of using margin-top/right/bottom/left, try using margin: 10px 5px 15px 20px; instead. With this, top is 10, right is 5px, bottom is 15px, and left is 20px.

Border: instead of using border-width/style/color as all individual properties, you can use border: 5px solid red; and this means the width is 5px, the style is solid and the colour is red.

Padding: instead of using padding-top/right/bottom/left, use padding: 10px 5px 10px 20px; instead

Auto value for margin property - used for margin-left/right - This is used to center your content. An example with shorthand would look like margin: 0px auto; which means the margin on top and bottom is 0px and left and right is auto.

2. Take the CSS Box Model Quiz

• Test your knowledge with this quiz. Mr. Chastkavich will be checking to see you have completed it.

3. Positioning and Z-index

• Read this page on CSS Positioning and z-index. Practice with it on any of your practice html webpages.