1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
|
---
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://apropos.codes) (egotistical, i know!) 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
|
