Today’s Goals:

• Review shorthand properties and auto value for margin property
• Begin Thanksgiving webpage challenge
• Take a quiz about the box model
• New CSS: position properties and z-index

 Today’s featured website:

• https://codepen.io/jkantner/pen/ZaMeyW – Enjoy this digital version of a classic toy!

 Review- Shorthand Properties and Auto Value for Margin Property

• Shorthand properties:
  • Margins and padding can be written with one value (same in all directions), two values (same value for top/bottom and same for right/left), and four values (different in all directions)
  • Margin– Let’s look at this example 
  • Border– Let’s collapse border-width, border-style, and border-color into a single line of CSS
  • Padding– works in a similar way to margin (top, right, bottom, and left values can be the same in all directions, two directions, or all different). Let’s see this example. 
• Auto value for margin property
  • Only used with margin-left and margin-right (not border or padding)
  • Used to center content from the left and from the right. For example, when we set up a page wrapper, we tell the browser to center the wrapper from the left and the right by using margin-left: auto; and margin-right: auto;. You will often see this shorthand code for setting up margins for a page wrapper- margin: 0px auto; which means the margin for the top and bottom is 0px and the margin for the left and right is auto.

 Thanksgiving Webpage Project

You are going to make this:

You will take broken code and follow the directions in the comments. Copy and paste the following code into a new Notepad++ file. Save it as thanksgiving.html.

• What you’re practicing:
  Box model properties (margin, border, padding)
  Applying the CSS ID selector
  Applying the CSS class selector
  Using div tags with ID and class attributes
  Setting up a page wrapper that’s centered in the browser window
  Opacity property
  Line-height property
  Text-shadow property
  Box-shadow property (similar to text-shadow but gives non-text content a shadow- really the invisible “box” in the box model gets a shadow)

• Starter code:
  Thanksgiving starter code 

 CSS Box Model Quiz

• Click here to take the quiz 

 New- Positioning and Z-Index

• We are going to start learning about CSS positioning, which is just one of many different ways to lay out content on your webpage.
• Read this: When you’re done with the Box Model Quiz, please read this page  and look at the examples for CSS positioning and z-index.