CSS

• The flow of CSS is essentially select elements on the web page and then apply styling.
• In CSS, everything has a box around it. Boxes have a padding, border, and margin box that surround the content box.
• Prefer to use the logical properties over the physical properties. These are made relative to the screen so they are much more future-proof.
• FlexBox is for arranging items in a one-dimensional layout. The items will expand to fill additional space or shrink to fit in smaller spaces. Grid is the same as FlexBox but for 2-Dimensional layouts.
  • anything with justify pertains to the axis parallel to writing direction.
  • anything with align pertains to the axis perpendicular to writing direction.
  • anything with content pertains to the container of the items (i.e., the element with the attribute).
  • anything with items pertains to the items inside the container.
  • anything with self functions the same as content except it is placed in the item.
• Some common length values
  • em - font size of the parent (for text) or the element itself.
  • rem - font size of the root element.
  • vb - viewport-block

Links §

• MDN Site for CSS

• Creativity - more on creativity and design principles.

• Tailwind CSS - A simplification for most CSS stuff using Tailwind

• Tailwind’s Visualizations - Tailwind visuzlation for flex and grid.

• Slaying the Dragon YT Channel - provides quick explainers for some CSS stuff.