85
85
</tr >
86
86
</table >
87
87
```
88
+
88
89
---
89
90
90
91
# wow bullet points
@@ -199,6 +200,7 @@ use an id when there will only be a single element
199
200
</body >
200
201
</html >
201
202
```
203
+
202
204
---
203
205
# styles for class
204
206
@@ -220,13 +222,15 @@ use a class when there could be many elements
220
222
<div class="cool"> super!</div >
221
223
</body > </html >
222
224
```
225
+
223
226
---
224
227
# external style sheets
225
228
226
229
`<link rel="stylesheet" href="style .css"> `
227
230
228
231
view the source on http://cyber.wizard.institute & explore
229
232
the stylesheet.
233
+
230
234
---
231
235
# css selectors
232
236
@@ -252,22 +256,28 @@ will match `<div class="title"></div>` in:
252
256
</div >
253
257
</div >
254
258
```
259
+
255
260
---
261
+
256
262
# css selectors
257
263
258
264
We just used spaces between elements in ` #page .row .title ` ,
259
265
but we can do lots of other things with css:
260
266
261
- * ` E ` - match an element E by its tag name (example: ` h1 ` )
262
- * ` E F ` - matches F, a descendant of E
263
- * ` E > F ` - matches F, a direct child of E
264
- * ` E#abc ` - matches an element E with an id of abc
265
- * ` E.xyz ` - matches an element E with a class of xyz
266
- * ` E[foo="bar"] ` - match an element E with an attribute
267
- ` foo ` equal to "bar"
267
+ * ` p ` - matches all elements with a ` p ` tag
268
+ * ` div h2 ` - matches any ` h2 ` tags that are below a ` div `
269
+ * ` div > h2 ` - matches any ` h2 ` tags that are directly below a ` div `
270
+ * ` #pic1 ` - matches an element with the id ` pic1 `
271
+ * ` .header ` - matches an element with the class ` header `
272
+ * ` h1 h2 h3 ` - matches all ` h1 ` ` h2 ` ` h3 ` 's
273
+ * ` div[foo="bar"] ` - matches a ` div ` with an attribute ` foo ` set to ` bar `
274
+ * ` div.cool#bar[baz="yay"] ` - matches a div with the class ` cool ` ,
275
+ the id ` bar ` that has an attribute ` baz ` set to ` yay `
268
276
269
277
and more! http://www.w3.org/TR/CSS2/selector.html#pattern-matching
278
+
270
279
---
280
+
271
281
# css selectors
272
282
273
283
You can use css selectors directly from javascript:
@@ -282,7 +292,9 @@ You can use css selectors directly from javascript:
282
292
</script >
283
293
</body >
284
294
```
295
+
285
296
---
297
+
286
298
# neocities
287
299
288
300
You can host your html on neocities for free!
0 commit comments