---
layout: web
title: A Brief Reference for Modern CSS
---

# A Brief Reference for Modern CSS

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

But I don't like *everything* about CSS, and one of those things I don't like is how much I have to rely on references. 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 say, 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 the [MDN reference](https://developer.mozilla.org/en-US/docs/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/

## Layout

### flow

### absolute

### flexbox

### grid

## Media Queries

## Selectors

**attributes** go on elements...

**identifiers** can be selected with `#`.

**classes** can be selected with `.`.

### combinators

### nested queries

Queries can be nested!!!!!1!!

### pseudo-classes

### pseudo-elements

## Elements

Many elements have default styles provided by the browser. These are accessible at ... in Firefox, and ... in Chrome.
resource://gre-resources/html.css

### body and friends

```css
body {
  display: block;
  margin: 8px;
}
```

```css
html, main, header, footer, div,
section, nav, article, aside, blockquote {
  display: block;
}
```

### formatting

```css
b, strong {
  font-weight: bolder;
}
```

```css
i, em {
  font-style: italic;
}
```

```css
u {
  text-decoration: underline;
}
```

```css
s {
  text-decoration: line-through;
}
```

```css
q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}
```

```css
small {
  font-size: smaller;
}
```

```css
sub {
  vertical-align: sub;
  font-size: smaller;
}
```

```css
sup {
  vertical-align: super;
  font-size: smaller;
}
```

```css
code {
  font-family: -moz-fixed;
}
```

### paragraphs

```css
p {
  display: block;
  margin-block: 1em;
}
```

```css
pre {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin-block: 1em;
}
```

### headers

```css
h1, h2, h3, h4, h5, h6 {
  display: block;
  font-weight: bold;
}

h1 {
  font-size: 2em;
  margin-block: .67em;
}

h2 {
  font-size: 1.5em;
  margin-block: .83em;
}

h3 {
  font-size: 1.17em;
  margin-block: 1em;
}

h4 {
  font-size: 1.00em;
  margin-block: 1.33em;
}

h5 {
  font-size: 0.83em;
  margin-block: 1.67em;
}

h6 {
  font-size: 0.67em;
  margin-block: 2.33em;
}
```

`h1`s nested within an `article`, `aside`, `nav`, or `section` behave somewhat strangely, acting as a smaller header depending on the level of nesting.

### lists

```css
li {
  display: list-item;
  text-align: match-parent;
}
```

```css
ul, menu {
  display: block;
  counter-reset: list-item;
  margin-block: 1em;
  padding-inline-start: 40px;
  list-style-type: disc;
}
```

```css
ol {
  display: block;
  counter-reset: list-item;
  margin-block: 1em;
  padding-inline-start: 40px;
  list-style-type: decimal;
}
```

Nested lists have no top or bottom margins. The `list-style-type` of unordered lists changes with depth: from a `disc`, to a `circle`, to a `square`.

### meta

```css
head, link, meta, title, style, script {
  display: none;
}
```

___ are invisible.

## Properties

There are a *lot* of properties, of various elements, and things.

`property left right center up` or whatever
this seems consistent and i don't know it