Hello! Here are some examples of weird things that can happen with CSS. This site goes with the zine Hell Yes, CSS!.

All these examples are editable thanks to CodePen. Click "edit on CodePen" to play around with an example, and for a larger view where you can see the HTML / CSS / output all on one screen.

Table of contents

• CSS isn't easy
  • Example: an inline-block element's vertical alignment changes if there's no text in it
• specificity
  • Example: CSS can mix properties from different rules
• units
  • Example: rem vs em
  • Example: a single #id is more specific than many classes
• inline vs block
  • Example: how an inline-block element looks
• the box model
  • Example: margins can overlap
  • Example: padding and borders aren't included in an element's width/height by default
  • Example: you can use text-align: center to center inline-block elements
• padding + margin syntax
  • Example: margins can be negative
  • Example: how to use the padding-bottom: 50% trick to make a fixed aspect ratio
• borders
  • Example: borders vs outlines
  • Example: different border-radiuses
  • Example: a few box shadows
  • Example: left: 0; right: 0 is different from width: 100%;
• flexbox
  • Example: basic flexbox properties
• CSS grid: areas!
  • Example: using grid areas for a simple layout
• centering
  • Example: a few ways to do centering
• position: absolute
  • Example: position: absolute isn't absolutely positioned on the page
• making elements disappear
  • Example: display: none vs visibility: hidden
  • Example: putting an element on top of another one with z-index
• stacking contexts
  • Example: an element with a higher z-index doesn't always appear on top
• transitions
  • Example: a transition that happens on hover

CSS isn't easy

Example: an inline-block element's vertical alignment changes if there's no text in it

Here's a weird thing to start out, just to illustrate that CSS can be pretty counterintuitive sometimes.

specificity

Example: CSS can mix properties from different rules

units

Example: rem vs em

Example: a single #id is more specific than many classes

inline vs block

Example: how an inline-block element looks

the box model

Example: margins can overlap

Example: padding and borders aren't included in an element's width/height by default

Example: you can use text-align: center to center inline-block elements

padding + margin syntax

Example: margins can be negative

Example: how to use the padding-bottom: 50% trick to make a fixed aspect ratio

borders

Example: borders vs outlines

Example: different border-radiuses

Example: a few box shadows

Example: left: 0; right: 0 is different from width: 100%;

flexbox

Example: basic flexbox properties

CSS grid: areas!

Example: using grid areas for a simple layout

centering

Example: a few ways to do centering

position: absolute

Example: position: absolute isn't absolutely positioned on the page

making elements disappear

Example: display: none vs visibility: hidden

Example: putting an element on top of another one with z-index

stacking contexts

Example: an element with a higher z-index doesn't always appear on top

transitions

Example: a transition that happens on hover