Skip to content

Commit cb2c614

Browse files
substacksubstack
substack
authored and
substack
committed
Merge branch 'master' of github.com:cyberwizardinstitute/workshops
2 parents 3f41580 + 1a6e359 commit cb2c614

File tree

2 files changed

+22
-10
lines changed

2 files changed

+22
-10
lines changed

html.markdown

+19-7
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ div
8585
</tr>
8686
</table>
8787
```
88+
8889
---
8990

9091
# wow bullet points
@@ -199,6 +200,7 @@ use an id when there will only be a single element
199200
</body>
200201
</html>
201202
```
203+
202204
---
203205
# styles for class
204206

@@ -220,13 +222,15 @@ use a class when there could be many elements
220222
<div class="cool">super!</div>
221223
</body></html>
222224
```
225+
223226
---
224227
# external style sheets
225228

226229
`<link rel="stylesheet" href="style.css">`
227230

228231
view the source on http://cyber.wizard.institute & explore
229232
the stylesheet.
233+
230234
---
231235
# css selectors
232236

@@ -252,22 +256,28 @@ will match `<div class="title"></div>` in:
252256
</div>
253257
</div>
254258
```
259+
255260
---
261+
256262
# css selectors
257263

258264
We just used spaces between elements in `#page .row .title`,
259265
but we can do lots of other things with css:
260266

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`
268276

269277
and more! http://www.w3.org/TR/CSS2/selector.html#pattern-matching
278+
270279
---
280+
271281
# css selectors
272282

273283
You can use css selectors directly from javascript:
@@ -282,7 +292,9 @@ You can use css selectors directly from javascript:
282292
</script>
283293
</body>
284294
```
295+
285296
---
297+
286298
# neocities
287299

288300
You can host your html on neocities for free!

svg.markdown

+3-3
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,8 @@ You can also dynamically construct elements with javascript!
182182
Constructing elements is a bit weird:
183183

184184
``` js
185-
var svg = document.createElementNS('svg', 'http://www.w3.org/2000/svg');
186-
var circle = document.createElementNS('circle', 'http://www.w3.org/2000/svg');
185+
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
186+
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
187187
```
188188

189189
---
@@ -192,7 +192,7 @@ var circle = document.createElementNS('circle', 'http://www.w3.org/2000/svg');
192192
All of the usual dom methods work on svg:
193193

194194
``` js
195-
var circle = document.createElementNS('circle', 'http://www.w3.org/2000/svg');
195+
var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
196196
circle.setAttribute('fill', 'cyan');
197197

198198
var circle2 = elem.cloneNode(true);

0 commit comments

Comments
 (0)