Skip to content

CSS Fundamentals

Cascade analogy

Death match between classes

The property with the most specificity emerges victorious

Scroll bars

Always show scroll bars on mac!


  • by default, scroll bars are always visible on non-macs

Why are pixels inaccessible for font-size?


List of CSS mistakes

Downside of inline-block

  • it doesn't word wrap



  • auto is amazing
    • use if it MIGHT scroll
  • use scroll if you know if it 100% will scroll
  • hidden

    • always add a comment explaining why you're using hidden
    • technically: it does scroll and removes the scrollbars
    • use cases

      • truncate text with elipses
      • artistic/decorative purposes

        • b1c377c5de363ba8c6064889e2d9f6fd.png
      • solve specific problems

        • 6279ff3f7c7ff1aa8ec781a1fc9a36c8.png

Can't hide the overflow only on one axis

Scroll containers!

Setting overflow to non-visible turns an element into a scroll container

overflow-x: hidden;
overflow-y: visible;



Get an image from Unsplash

Clip path

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);


Accessible tooltip


Box shadow

box-shadow: 1px 2px 3px 4px grey;
  1. a grey background is drawn with the same size and position as our element

  2. moved 1px to the right and 2 px down

  3. blurred by 3px

  4. spread by 4px (makes your blur start further out)

  5. Clip the shadow where the shadows and the element intersect



::before and ::after

What problem does tailwind solve?


have an exhaustive list of utility classes

no duplicate styles

No need to install Bootstrap, then BEM in another part

Good for learning about good design practices Default design system that can be modified

When is a new stacking context created?

position: not the default static and has a z index

element has opacity less than 1

transforms, filters,

Last update: 2022-11-04