--- 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 | | ;` - `right: auto | | ;` - `bottom: auto | | ;` - `left: auto | | ;` - `z-index: auto | ;` - `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 | ;` - 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 - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` - `` Experimental - `` - `` - `` - `` - `` - `` - `