Shorthand Properties, Box Model Quiz, & Positioning/Z-index

Posted on by tchastkavich

Shape of the Day:

  • Shorthand properties: Margin, Border and Padding
  • CSS Box Model Quiz (whaaaat?!?!)
  • Positioning and z-index

Website of the Day:

https://www.smashingmagazine.com/2022/09/desktop-wallpaper-calendars-october-2022/– Scroll down to check out October wallpapers that you can use for your desktop. They were made by community users of the website!

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.