Catching Up on CSS

• 2019/11/12 I had barely touched HTML/CSS beyond minor tweaks, so when I suddenly had to build layouts I panicked. These are the essentials I learned.

position

• relative – offset relative to the current position.
• absolute – place relative to the nearest positioned ancestor.
• fixed – stick to a fixed viewport location.
• flex – (technically display: flex) use flexbox for flexible layouts.

Once positioned, use top, bottom, left, right to place elements. The default is static, which ignores those props. z-index controls stacking order. Set the parent to relative and absolutely position children you want to overlap.

Flexbox

• flex-direction – row vs. column.
• flex-wrap – whether items wrap.
• justify-content – alignment along the main axis.
• align-items – alignment along the cross axis/baseline.

display

• block – fills the full width and stacks vertically (div, h1, p, ul by default).
• inline – flows inline (a, span, img).
• inline-block – flows inline but behaves like a block (you can set width/height).
• none – hide the element.

Block/inline-block can set width/height and all margins/padding. Inline elements can only set horizontal margins/padding but support text-align. Inline elements usually live inside block-level elements.

Width/height units

• px – absolute pixels.
• % – percentage of the parent.
• em – relative to the parent’s font-size.
• rem – relative to the root (html) font-size.
• auto – automatic (typically fills the parent).

Set only width + height: auto to maintain aspect ratio. With auto, width includes padding/border; width: 100% does not. Use min-width / max-width to cap sizes.

margin vs. padding

margin adds outer spacing; padding adds inner spacing.

div vs. span

div is block-level; span is inline. div introduces line breaks; span is great for inline styling.

white-space

• normal – collapse whitespace, auto-wrap.
• nowrap – collapse whitespace, no auto-wrap.
• pre-line – honor newlines, auto-wrap long lines.
• pre – honor spaces/tabs/newlines, no auto-wrap.
• pre-wrap – honor spaces/tabs/newlines and auto-wrap.

::before / ::after

Pseudo-elements to inject content before/after an element.

overflow

• visible – show overflow.
• hidden – clip overflow.
• scroll – clip + always show scrollbars.
• auto – clip + show scrollbars when needed.

Misc

• Specificity: styles closer to the element win; !important overrides everything.
• Sass/SCSS compiles to CSS, supports variables, math, conditionals, inheritance.
• CSS Grid lets you layout content in rows/columns.
• Prefer responsive design with CSS (media queries) over JS hacks.
• border-radius rounds corners; vertical-align controls vertical alignment.
• Establish your own mini framework or use an existing one for maintainability.

Grid systems and multi-column layouts are on my “study later” list.