Everything is a box!

You can see for yourself by adding * { outline: auto } to the CSS of almost any webpage.

All boxes have these CSS properties

• width and height
• margin
• padding
• border
• border-radius
• background-color
• box-shadow

You can also set max-width and max-height to limit the size of a box.

There are various units you can use

• Pixels: 16px
• Percentages: 50%
• Viewport units: 100vw or 100vh
• Em and rem: 1em or 1rem

The value of auto can be used with margin to center a box horizontally. Like margin: 0 auto;. But you're box will need a defined width. Like this:

.centered {
  width: 200px;
  margin: 0 auto;
}

Shorthand syntax

• Defining all four sides: margin: 10px;
• Defining top/bottom and left/right: padding: 10px 20px;
• Defining top, left/right, and then bottom: margin: 0 auto 20px;
• Defining each side individually: padding: 10px 20px 30px 40px;

Shorthand syntax for borders

• Defining all four sides: border: 1px solid #000;
• Defining each side individually: border-top: 1px solid #000;, border-right: 1px solid #000;, etc.

You are also define the width of each side individually using border-width, if you also have border-style and border-color set.

.weird-border {
  border-style: solid;
  border-color: #000;
  border-width: 4px 8px 16px 32px;
}

Picture Frame Demo

• Unsolved
• Solved
• Margin Demo

Almost all styling comes down to those same few box properties

• width and height
• margin
• padding
• border
• border-radius
• background-color
• box-shadow

Plus typography, which we will start getting into next class... But for now:

• font-family
• font-size
• text-transform
• text-align
• color

Pseudo-classes

There are special selectors that are used to capture special states of an element.

• :link when a link has not been visited.
• :visited when a link has been visited.
• :hover when you mouse over an element, commonly used for buttons and links, but could be used for any element (table row is another common one).
• :focus when an element is selected, commonly used for form inputs.

There are also pseudo-classes for form inputs:

• :checked when a checkbox or radio button is checked.
• :valid when a form input is valid.
• :invalid when a form input is invalid.

And pseudo-classes for groups of elements:

• :first-child when an element is the first child of its parent.
• :last-child when an element is the last child of its parent.
• :nth-child() when an element is the nth child of its parent.

:nth-child() can take a number, like :nth-child(3), or a formula, like :nth-child(2n) or :nth-child(3n+1). Most commonly, it is used to stripe tables with :nth-child(odd) and :nth-child(even).

Table Demo

• Unsolved

Forms Demo

• Unsolved

Bonus: peppering in some animation

There are a few ways to animate elements in CSS. The most common is with transition. You can use transition to animate any property that has a value that can be interpolated. For example, you can animate width, height, margin, padding, border-radius, background-color, and box-shadow. You can also animate color, font-size, and opacity.

Here's an example of a button that grows when you hover over it:

button {
  background-color: #113f67;
  color: #e7eaf6;
  border: 1px solid #113f67;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  transition: padding 0.5s, font-size 0.5s;
}

button:hover {
  padding: 20px 40px;
  font-size: 24px;
}