path: root/web/css.md

---
layout: web
title: "Modern CSS: a reference"
---

# Modern CSS: a reference

I like CSS. I really like CSS! I greatly enjoy just... messing about with it, producing [pretty websites](https://toki.la) and [ugly websites](https://cursedc.tf/2023) and [weird-ass websites](https://cursedc.tf) and everything in around and between.

But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely a reference. Property names are *remarkably* unintuitive. And CSS is complicated! There's a lot to keep in your head. And it's ever changing - ever improving, I would argue, but ever changing nonetheless. So I figured writing my own reference might help.

So here is some sort of reference. If you're me, hi! I hope this was helpful. If you're not me, hi! I hope this is helpful. But you shouldn't be here really, go to [MDN](https://developer.mozilla.org/Web/CSS) or the [Interneting is Hard tutorial](https://www.internetingishard.com/) or something. I wrote these notes for me: they do not cover things I do not care about: very notably browser support. *Especially* vendor prefixes but also just generally: if it works in modern Chrome and modern Firefox, it's good enough for me.

https://css-tricks.com/whats-new-since-css3/

## Selectors
- [selectors](https://developer.mozilla.org/Web/CSS/CSS_selectors)
- [nesting](https://developer.mozilla.org/Web/CSS/CSS_nesting)

`foo {...}`: a **type selector** matches all elements of the type `foo`.

`.foo {...}`: a **class selector** matches all elements of the class `foo`.

`#foo {...}`: an **identifier selector** matches a single element by its unique id `foo`.

`foo[attr] {...}`: an **attribute selector** matches an element `foo` that has the attribute `attr`.

`foo, bar {...}`: the **selector list** matches both the elements `foo` and `bar`.

`foo bar {...}`: the **descendant combinator** matches some element `bar` that is a descendant of `foo`. A descendant of `foo` is any element that is nested within it, at any level in the tree.

`foo { bar {...}}`: **nesting syntax**

`foo { &bar {...}}`: a **nesting selector**

`foo > bar {...}`: the **child combinator** matches some element `bar` if `bar` is a direct child of `foo`. A child element is an

- :first-child, :last-child, :only-child, :nth-child(), nth-last-child()
- :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :nth-last-of-type()

`:empty {...}`: the **empty pseudo-class** selects an element that does not have any children.

`foo + bar {...}`: the **next-sibling combinator** selects all elements `bar` that are the (direct) next sibling `bar` of some elements `foo`.

`foo ~ bar {...}`: the **subsequent-sibling combinator** selects all elements `bar` that are a subsequent sibling of some elements `foo`.

`:has(...) {...}`:
The child, next-sibling, and subsequent-sibling combinators - with the exception of `:empty` - all match a *child element*. It is often desired to match the *parent element* instead: some element that *has*,

`:not(...) {...}`:

`:is(...) {...}`:
The `:is` pseudo-class takes a list of selectors, and selects any element matchable by one or more

`:where()`

## Properties

`property: inherit | initial | revert | revert-layer | unset;`

- all
- will-change
- `touch-action: auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | pinch-zoom | manipulation;`

## Variables
- [cascading variables](https://developer.mozilla.org/Web/CSS/CSS_cascading_variables)

CSS custom properties (or variables)...

- `--*: ...;`
- var()
- @property

## Layouts

- display

### the box model
- [box model](https://developer.mozilla.org/Web/CSS/CSS_box_model)
- [box sizing](https://developer.mozilla.org/Web/CSS/CSS_box_sizing)
- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)

- width
  - min-width
  - max-width
- height
  - min-height
  - max-height
- `visibility: visible | hidden | collapse;`
- `content-visibility: visible | hidden | auto;`
- `box-sizing: border-box | content-box;`
- justify-items
- justify-self
- vertical-align
- aspect-ratio
- `resize: none | horizontal | vertical | both | block | inline;`
- padding
  - padding-block
  - padding-block-end
  - padding-block-start
  - padding-bottom
  - padding-inline
  - padding-inline-end
  - padding-inline-start
  - padding-left
  - padding-right
  - padding-top
- margin
  - margin-block
  - margin-block-end
  - margin-block-start
  - margin-bottom
  - margin-inline
  - margin-inline-end
  - margin-inline-start
  - margin-left
  - margin-right
  - margin-top
- min-block-size
- max-block-size
- min-inline-size
- max-inline-size
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width

- @container
- container
  - container-name
  - container-type

### flow
- [flow layout](https://developer.mozilla.org/Web/CSS/CSS_flow_layout)
- [display](https://developer.mozilla.org/Web/CSS/CSS_display)

### flex
- [flexible box layout](https://developer.mozilla.org/Web/CSS/CSS_flexible_box_layout)
- [box alignment](https://developer.mozilla.org/Web/CSS/CSS_box_alignment)

- flex
  - flex-basis
  - flex-direction
  - flex-flow
  - flex-grow
  - flex-shrink
  - flex-wrap
- align-items
- align-self
- align-content
- justify-content
- place-items
- place-content
- place-self
- order

### grid
- [grid](https://developer.mozilla.org/Web/CSS/CSS_grid_layout)

- grid
  - grid-area
  - grid-auto-flow
  - grid-auto-rows
  - grid-auto-columns
  - grid-column
    - grid-column-start
    - grid-column-end
  - grid-row
    - grid-row-start
    - grid-row-end
  - grid-template
    - grid-template-areas
    - grid-template-columns
    - grid-template-rows
- gap
  - row-gap
  - column-gap

### positioning
- [positioned layout](https://developer.mozilla.org/Web/CSS/CSS_positioned_layout)

- `position: static | relative | absolute | fixed | sticky;`
  - `top: auto | <length> | <percentage>;`
  - `right: auto | <length> | <percentage>;`
  - `bottom: auto | <length> | <percentage>;`
  - `left: auto | <length> | <percentage>;`
- `z-index: auto | <integer>;`
- `float: none | left | right | inline-start | inline-end;`
- contain
- inset
  - inset-block
  - inset-block-end
  - inset-block-start
  - inset-inline
  - inset-inline-end
  - inset-inline-start
- clear
- ? transform

### column
- [multi-column layout](https://developer.mozilla.org/Web/CSS/CSS_multi-column_layout)

- ? break-before, break-after, break-inside
- ? column-gap
- column-fill
- column-span
- column-rule
  - column-rule-color
  - column-rule-style
  - column-rule-width
- columns
  - column-count
  - column-width

### page
- [paged media](https://developer.mozilla.org/Web/CSS/CSS_paged_media)
- [fragmentation](https://developer.mozilla.org/Web/CSS/CSS_fragmentation)

- box-decoration-break
- break-before
- break-after
- break-inside
- page
- orphans
- widows
- :first, :left, :right

### table
- [table](https://developer.mozilla.org/Web/CSS/CSS_table)

- table-layout
- caption-side
- empty-cells
- border-collapse
- border-spacing

## Media Queries

- @media

## Units and Math

- abs()
- acos()
- asin()
- atan()
- atan2()
- cos()
- exp()
- hypot()
- log()
- mod()
- max()
- min()
- pow()
- rem()
- round()
- sign()
- sin()
- sqrt()
- tan()

## Assorted Properties

### backgrounds and borders
- [backgrounds and borders](https://developer.mozilla.org/Web/CSS/CSS_backgrounds_and_borders)

- background
  - background-attachment
  - background-blend-mode
  - background-clip
  - background-color
  - background-image
  - background-origin
  - background-position
    - background-position-x
    - background-position-y
  - background-repeat
  - background-size
- border
  - border-block
    - border-block-color
    - border-block-end
      - border-block-end-color
      - border-block-end-style
      - border-block-end-width
  - border-block-start
    - border-block-start-color
    - border-block-start-style
    - border-block-start-width
  - border-block-style
  - border-block-width
  - border-bottom
    - border-bottom-color
    - border-bottom-left-radius
    - border-bottom-right-radius
    - border-bottom-style
    - border-bottom-width
  - border-color
  - border-end-end-radius
  - border-end-start-radius
  - border-image
    - border-image-outset
    - border-image-repeat
    - border-image-slice
    - border-image-source
    - border-image-width
  - border-inline
    - border-inline-color
    - border-inline-end
      - border-inline-end-color
      - border-inline-end-style
      - border-inline-end-width
    - border-inline-start
      - border-inline-start-color
      - border-inline-start-style
      - border-inline-start-width
    - border-inline-style
    - border-inline-width
  - border-left
    - border-left-color
    - border-left-style
    - border-left-width
  - border-radius
  - border-right
    - border-right-color
    - border-right-style
    - border-right-width
  - border-start-end-radius
  - border-start-start-radius
  - border-style
  - border-top
    - border-top-color
    - border-top-left-radius
    - border-top-right-radius
    - border-top-style
    - border-top-width
  - border-width
- outline
  - outline-color
  - outline-offset
  - outline-style
  - outline-width
- box-shadow

### overflow and scrolling
- [overflow](https://developer.mozilla.org/Web/CSS/CSS_overflow)
- [overscroll behavior](https://developer.mozilla.org/Web/CSS/CSS_overscroll_behavior)
- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_scroll_snap)
- [scrollbars styling](https://developer.mozilla.org/Web/CSS/CSS_scrollbars_styling)

- overflow
  - overflow-anchor (unsure??)
  - overflow-block
  - overflow-clip-margin
  - overflow-inline
  - overflow-x
  - overflow-y
- text-overflow
- scroll-margin
  - scroll-margin-block
  - scroll-margin-block-end
  - scroll-margin-block-start
  - scroll-margin-bottom
  - scroll-margin-inline
  - scroll-margin-inline-end
  - scroll-margin-inline-start
  - scroll-margin-left
  - scroll-margin-right
  - scroll-margin-top
- scroll-padding
  - scroll-padding-block
  - scroll-padding-block-end
  - scroll-padding-block-start
  - scroll-padding-bottom
  - scroll-padding-inline
  - scroll-padding-inline-end
  - scroll-padding-inline-start
  - scroll-padding-left
  - scroll-padding-right
  - scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- scroll-behavior
- overscroll-behavior
  - overscroll-behavior-block
  - overscroll-behavior-inline
  - overscroll-behavior-x
  - overscroll-behavior-y

### text
- [text](https://developer.mozilla.org/Web/CSS/CSS_text)
- [text decoration](https://developer.mozilla.org/Web/CSS/CSS_text_decoration)

- text-align
- text-align-last
- text-anchor
- text-decoration
  - text-decoration-color
  - text-decoration-line
  - text-decoration-skip-ink
  - text-decoration-style
  - text-decoration-thickness
- text-emphasis
  - text-emphasis-color
  - text-emphasis-position
  - text-emphasis-style
- text-indent
- text-justify
- text-rendering
- text-shadow
- text-transform
- text-underline-offset
- text-underline-position
- text-wrap
  - text-wrap-mode
  - text-wrap-style
- line-height
- hanging-punctuation
- `hyphenate-character: auto | <string>;`
- hyphenate-limit-chars
- hyphens
- letter-spacing
- tab-size
- line-break
- `overflow-wrap: normal | break-word | anywhere;`
- white-space
- white-space-collapse
- word-break
- word-spacing
- quotes
- `user-select: auto | none | text | all;`
- cursor

### fonts
- [fonts](https://developer.mozilla.org/Web/CSS/CSS_fonts)
- [font loading](https://developer.mozilla.org/Web/CSS/CSS_font_loading)

- font
  - font-family
  - font-feature-settings
  - font-kerning
  - font-language-override
  - font-optical-sizing
  - font-palette
  - font-size
  - font-size-adjust
  - font-stretch
  - font-style
  - font-synthesis
    - font-synthesis-position
    - font-synthesis-small-caps
    - font-synthesis-style
    - font-synthesis-weight
  - font-variant
    - font-variant-alternates
    - font-variant-caps
    - font-variant-east-asian
    - font-variant-emoji
    - font-variant-ligatures
    - font-variant-numeric
    - font-variant-position
  - font-variation-settings
  - font-weight
- @font-face
- @font-feature-values
- @font-palette-values

### lists
- [lists and counters](https://developer.mozilla.org/Web/CSS/CSS_lists_and_counters)
- [counter styles](https://developer.mozilla.org/Web/CSS/CSS_counter_styles)

- list-style
  - list-style-image
  - list-style-position
  - list-style-type
- counter-increment
- counter-reset
- counter-set

### colour
- [colors](https://developer.mozilla.org/Web/CSS/CSS_colors)
- [color adjustment](https://developer.mozilla.org/Web/CSS/CSS_color_adjustment)

- color
- opacity
- color-scheme
- accent-color
- caret-color
- print-color-adjust
- forced-color-adjust
- rgb()
- hsl()
- hwb()
- lab()
- lch()
- oklab()
- oklch()
- color()
- color-contrast() Experimental
- color-mix()
- device-cmyk()
- light-dark()
- @color-profile

### images
- [images](https://developer.mozilla.org/Web/CSS/CSS_images)

- image-orientation
- image-rendering
- object-fit
- object-position
- linear-gradient()
- radial-gradient()
- conic-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- repeating-conic-gradient()
- element() Experimental
- image()
- cross-fade()

### masking, filters, compositing, and blending
- [masking](https://developer.mozilla.org/Web/CSS/CSS_masking)
- [filter effects](https://developer.mozilla.org/Web/CSS/CSS_filter_effects)
- [compositing and blending](https://developer.mozilla.org/Web/CSS/CSS_compositing_and_blending)

- filter
- backdrop-filter
- clip
- clip-path
- clip-rule
- mask
  - mask-border
    - mask-border-mode
    - mask-border-outset
    - mask-border-repeat
    - mask-border-slice
    - mask-border-source
    - mask-border-width
  - mask-clip
  - mask-composite
  - mask-image
  - mask-mode
  - mask-origin
  - mask-position
  - mask-repeat
  - mask-size
  - mask-type
- isolation
- mix-blend-mode
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()

### transformations
- [transforms](https://developer.mozilla.org/Web/CSS/CSS_transforms)

- backface-visibility
- perspective
- perspective-origin
- rotate
- scale
- transform
  - transform-box
  - transform-origin
  - transform-style
- zoom
- translate
- matrix()
- matrix3d()
- perspective()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- skew()
- skewX()
- skewY()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()

### animations
- [animations](https://developer.mozilla.org/Web/CSS/CSS_animations)
- [transitions](https://developer.mozilla.org/Web/CSS/CSS_transitions)
- [motion path](https://developer.mozilla.org/Web/CSS/CSS_motion_path)

- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range Experimental
- animation-range-end Experimental
- animation-range-start Experimental
- animation-timeline Experimental
- animation-timing-function
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- @keyframes

### shapes
- [shapes](https://developer.mozilla.org/Web/CSS/CSS_shapes)

- shape-image-threshold
- shape-margin
- shape-outside
- shape-rendering
- paint-order
- circle()
- ellipse()
- inset()
- path()
- polygon()
- rect()
- shape() Experimental
- xywh()

### svgs

- x
- y
- cx
- cy
- d
- x
- y
- r
- rx
- ry
- fill
  - fill-opacity
  - fill-rule
- marker
  - marker-end
  - marker-mid
  - marker-start
- pointer-events
- stop-color
- stop-opacity
- stroke
  - stroke-dasharray
  - stroke-dashoffset
  - stroke-linecap
  - stroke-linejoin
  - stroke-miterlimit
  - stroke-opacity
  - stroke-width
- dominant-baseline
- vector-effect
- color-interpolation
- color-interpolation-filters

### mathml

- math-depth
- math-shift
- math-style

### writing modes
- [scroll snap](https://developer.mozilla.org/Web/CSS/CSS_writing_modes)
- [ruby layout](https://developer.mozilla.org/Web/CSS/CSS_ruby_layout)

- `direction: ltr | rtl;`
- block-size
- inline-size
- `writing-mode: horizontal-tb | vertical-lr | vertical-rl;`
- `unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;`
- `text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation;`
- `text-combine-upright: none | all;`
- ruby-align
- ruby-position

## Assorted Pseudo-Classes

- :link, :visited
- :local-link
  - alternatively: `*[href*="//"]:not([href*="base-url"])`
- :any-link
  - useless, use `:link, :visited` or `a, area`
- :target
  - v useful

- :active, :hover, :focus, :focus-within, :focus-visible

- :checked, :default, :indeterminate
- :in-range, :out-of-range
- :required, :optional
- :disabled, :enabled
- :valid, :invalid, :user-valid, :user-invalid
- :read-only, :read-write
- :placeholder-shown
- :autofill


- :fullscreen, :picture-in-picture, :modal, :popover-open

- :past, :current, :future
- :defined
- :lang(), :dir()
- :host, :host(), :host-context()
- :root
- :scope
- :state()

## Assorted Pseudo-Elements
- [pseudo-elements](https://developer.mozilla.org/Web/CSS/CSS_pseudo-elements)

- content
- ::before
- ::after
- ::marker
- ::backdrop
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::grammar-error
- ::highlight()
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- ::spelling-error
- ::target-text

## Assorted At-Rules

- @charset
- @counter-style
- @import
- @layer
- @namespace
- @page
- @scope
- @supports

## Assorted Functions

- calc()
- url()

- attr()
- clamp()
- counter()
- counters()
- env()
- fit-content()
- image-set()
- layer()
- minmax()
- paint()
- ray()
- repeat()
- symbols()

## Assorted Types
- `<absolute-size>`
- `<alpha-value>`
- `<angle>`
- `<angle-percentage>`
- `<basic-shape>`
- `<blend-mode>`
- `<box-edge>`
- `<calc-keyword>`
- `<calc-sum>`
- `<color-interpolation-method>`
- `<color>`
- `<custom-ident>`
- `<dashed-ident>`
- `<dimension>`
- `<display-box>`
- `<display-inside>`
- `<display-internal>`
- `<display-legacy>`
- `<display-listitem>`
- `<display-outside>`
- `<easing-function>`
- `<filter-function>`
- `<flex>`
- `<frequency>`
- `<frequency-percentage>`
- `<generic-family>`
- `<gradient>`
- `<hex-color>`
- `<hue>`
- `<hue-interpolation-method>`
- `<ident>`
- `<image>`
- `<integer>`
- `<length>`
- `<length-percentage>`
- `<line-style>`
- `<named-color>`
- `<number>`
- `<overflow>`
- `<percentage>`
- `<position-area>` Experimental
- `<position>`
- `<ratio>`
- `<relative-size>`
- `<resolution>`
- `<string>`
- `<system-color>`
- `<time>`
- `<time-percentage>`
- `<transform-function>`
- `<url>`