This repository was archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmore-css.html
More file actions
121 lines (121 loc) · 6.37 KB
/
more-css.html
File metadata and controls
121 lines (121 loc) · 6.37 KB
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
<!DOCTYPE html>
<html>
<head>
<title>More CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' type='text/css' href="../css/styles.css" />
</head>
<body>
<header>
<div><pre style='line-height:79%'>
███╗ ███╗ ██████╗ ██████╗ ███████╗ ██████╗███████╗███████╗
████╗ ████║██╔═══██╗██╔══██╗██╔════╝ ██╔════╝██╔════╝██╔════╝
██╔████╔██║██║ ██║██████╔╝█████╗ ██║ ███████╗███████╗
██║╚██╔╝██║██║ ██║██╔══██╗██╔══╝ ██║ ╚════██║╚════██║
██║ ╚═╝ ██║╚██████╔╝██║ ██║███████╗ ╚██████╗███████║███████║
╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚══════╝ ╚═════╝╚══════╝╚══════╝</pre></div>
<h2>May 30th, 2018</h2>
</header>
<article>
<section id="todo">
<h1>To Do's:</h1>
<ul>
<li>General bookkeeping: homework, Saturday class, how we're doing</li>
<li>Relative Paths</li>
<li>CSS:
<ul>
<li>Box model</li>
<li>Floats</li>
<li>Positioning</li>
</ul></li>
</ul>
</section>
<section>
<h1>HTML/CSS Refresher: Syntax and Selectors</h1>
<p><span class='bold'>HTML:</span> HyperText Markup Language: the <span class='bold gray'>content</span></p>
<p><span class='bold'>CSS:</span> Cascading Style Sheets: the <span class='bold gray'>sauce</span></p>
<div class='line-break'></div>
<h2>Syntax:</h2>
<blockquote><span class='selector'>selector</span>
<span class='bracket'>{</span>
<span class='property'>property</span>
<span class='special-char'>:</span>
<span class='value'>value</span><span class='special-char'>;</span>
<span class='bracket'>}</span></blockquote>
<h2>Selectors:</h2>
<blockquote>
<p><span class='selector'>element</span></p>
<p><span class='id'>#id</span></p>
<p><span class='class'>.class</span></p>
<p><span class='selector'>element</span><span class='id'>#id</span></p>
<p><span class='selector'>element</span><span class='class'>.class</span></p>
<p><span class='selector'>element <span class='special-char'>></span> children</span></p>
<p><span class='selector'>element </span><span class='special-char'>></span> <span class='special-char'>*</span></p>
etc, etc, etc... (There are a ton of ways to select an element!)
</blockquote>
</section>
<section><h1>Relative Paths</h1>
<pre>user@computer$ cd ../.. #goes up two directories</pre>
<pre><link...src='/Users/zak/Desktop/new-site/assets/styles.css'>
<!-- Absolute filepath--></pre>
<pre><link rel='stylesheet' src='../assets/styles.css'>
<!-- File is in a different subdirectory--></pre>
<div class='activity'>
<h2>Quick instructor activity...</h2>
<p>Let's go through this quickly. We're going to take a look at using relative paths vs. absolute paths.</p>
<p>Why are absolute file paths bad? How do we mitigate their issues?</p>
</div>
<div class='student-activity'>
<h2>Student activity!</h2>
<p>Unzip the folder provided to you (or copy and paste the contents outside).</p>
<p>Then, modify each of the four `html-bio.html` pages such that you can access the CSS inside their folder. Don't move the CSS file, and don't move the HTML file.
<p>Use relative linking to make it work!</p>
<span class='italic'>Hint</span> If you need some reading material on relative linking you can use <a href='https://css-tricks.com/quick-reminder-about-file-paths'>https://css-tricks.com/quick-reminder-about-file-paths</a>.
<p>If you finish early, help out those around you, or begin reading through the Learn CSS Layout Guide found here: <a href='http://learnlayout.com/no-layout.html'>http://learnlayout.com/no-layout.html></a></p>
</div>
</section>
<section><h1>The Box Model</h1>
<h3>
<p class='size'>Size</p>
<p class='padding'>Padding</p>
<p class='border'>Border</p>
<p class='margin'>Margin</p>
</h3>
<svg viewBox="0 0 50 25" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="2.5" width="40" height="20" rx="1" ry="1" stroke='black' stroke-width='0.5' fill='darkorange'/>
<rect x="10" y="5" width="30" height="15" rx="1" ry="1" stroke='black' stroke-width='0.5' fill='lightseagreen'/>
<rect x="15" y="7.5" width="20" height="10" rx="1" ry="1" stroke='black' stroke-width='0.5' fill='purple' />
<rect x="20" y="10" width="10" height="5" rx="1" ry="1" stroke='black' stroke-width='0.5' fill='orangered'/>
</svg>
<p>
<span class='bold'>Total width</span> =
<span class='margin'>margin-left</span> +
<span class='border'>border-left</span>
+
<span class='padding'>padding-left</span> +
<span class='size'>width</span> +
<span class='padding'>padding-right</span>
+
<span class='border'>border-right</span> +
<span class='margin'>margin-right</span>
</p>
<p>
<span class='bold'>Total height</span> =
<span class='margin'>margin-top</span> +
<span class='border'>border-top</span>
+
<span class='padding'>padding-top</span> +
<span class='size'>width</span> +
<span class='padding'>padding-bottom</span>
+
<span class='border'>border-bottom</span> +
<span class='margin'>margin-bottom</span>
</p>
</section>
<section><h1>"Flow" as a concept in CSS</h1>
<p>Back to the slides for a bit...</p>
</section>
</article>
</body>
</html>