CSS Units

• absolute (pixels, cm, mm)
• percentages (relative to parent, mostly used for width)
• relative units
  • relative to font-size (em, rem)
  • relative to viewport (vw, vh, vmin, vmax)

Images

• the img is technically an inline element, so defaults to its own size rather than the size of its parent

• should set either width or height on an image, if you set both it could get distorted

• should apply this styling to all images:

  img {
      max-width: 100%;
      display: block;
  }
  

  • since images are inline, they'll stretch to their pixel width, so the max-width keeps them from becoming larger. the display: block is for spacing issues that are caused by it being inline

Responsive widths

• can use max-width (along with a width percentage) to prevent your content from getting too wide on large screen sizes

Pixel standardization

• a px used to mean one point on the screen; but since screens began to have wildly varying resolutions, it was standardized to the reference pixel (1/196th of an inch)

em, rem

• relative to font size
• font size is inherited by default, from the closest element in the ancestor tree that has font-size set (e.g. from the body)
  • this is also true of other font properties like font-weight
• 1em: match the font size of the parent
  • problem: fonts multiply each other (e.g. if body is 10px, its child has 1.5em, and its grandchild has 2em, then the grandchild font size becomes 30px)
  • the same would apply if you used a percentage for the font size
• rem = root em
  • rather than being relative to the parent, it's relative to the root
  • root element is always the html element
  • default font on the root element is 16px
• the em unit is relative to different things depending on the property it's applied to:
  • for font-size: em is relative to the font-size of the parent (or closest ancestor that has font-size set)
  • for all other properties (e.g. width, padding): em is relative to the font-size of the current element
  • as a result, recommends using rem for font sizes (to avoid cascading effects), and em for other sizes (so that it can be anchored on the element's own font size)

HTML Structure & Class Names

• use modifier classes to allow flexibility in how you style your content
  • so .col is for all columns, .col-bg is for columns of a specific background, and .col-1, .col-2 set the widths of the column
  • similar idea with .container (a general container that applies padding and is centered using margin: 0 auto) and .container-nav (which is for the nav bar, might apply certain flex properties)