-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml_guide-CSS.html
257 lines (243 loc) · 19.9 KB
/
html_guide-CSS.html
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hard Tips</title>
</head>
<body style="font-family: Segoe UI, Tahoma, Geneva, Verdnan, sans-serif; background-color: black;">
<!-- content goes here -->
<h1 style="color: DarkGray; padding-left: 25%;">Techtips w/o CSS</h1>
<div style="margin: .5%;padding: 3px; background-color: burlywood;">
<h2 style="margin: 0%;padding-left: 10px;">Navigation</h2>
<a style="padding-left: 20px;display: block;" href="./index.html">Check out the blog</a>
<a style="padding-left: 20px;display: block;" href="./personal_sketch.html">About the blogger</a>
<a style="padding-left: 20px;display: block;" href="./doc.html">See the design plan</a>
<a style="padding-left: 20px;display: block;" href="./html_guide+.html">The prettier tips</a>
<a style="padding-left: 20px;display: block;" href="./html_guide-.html">The uglier tips</a>
<a style="padding-left: 20px;display: block;" href="./debugging">For server debugging</a>
</div>
<div style="margin: .5%;padding: 3px;background-color: cadetblue;">
<h2 style="color: white; text-align: center; margin: 0%;padding-left: 10px;">HTML elements</h2>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" target="_blank" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
<div></code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;">
<strong>Purpose:</strong> This tag provides no inherent formatting to the contents. Instead, it acts as a container
for seperating out content to be selected and styled with CSS
</li>
<li>
<strong>Interesting note:</strong> The
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">align</code>
attribute is depricated. To align
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">div</code>
elements on
a page, use a css flex box or css grid
</li>
<li style="background-color: lightsteelblue;">
<strong>Interesting note:</strong> <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">div</code> tags should only be used when other pre-defined tags are not applicable
</li>
<li><strong>Default Display:</strong> Block</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code" target="_blank" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
<code>
</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Purpose:</strong> format the contents to signify that it is a segment of computer code. The default behavior is
to display the content in the defualt monospace font.
</li>
<li><strong>Default Display:</strong> In-line</li>
<li style="background-color: lightsteelblue;">
<strong>Interesting Note:</strong> code is meant for single lines of code, in order to show a block of code including the
white space wrap the block in the
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">pre</code> tag.
</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol" target="_blank" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
<ol>
</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Purpose:</strong> A container for a list of items in order. The default marker is a number for each item</li>
<li><strong>Interesting Note:</strong> <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">ol</code> and <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">ul</code> elements can be nested as deeply as desired</li>
<li style="background-color: lightsteelblue;"><strong>Default Display:</strong> Block</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li" target="_blank" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
<li>
</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;">
<strong>Purpose:</strong> Represents a single item in a list. <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">li</code> elements must be the child of a
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">ol</code>, <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">ul</code>, or <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">menu</code> element.
</li>
<li><strong>Default Disply:</strong> Block</li>
</ul>
</div>
</div>
<div style="margin: .5%;padding: 3px;background-color: mediumblue;">
<h2 style="margin: 0%;padding-left: 10px;">HTML Characters</h2>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">&</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Literal Interpretation:</strong> Indicates the the following text will represent an HTML entity.</li>
<li><strong>Entity:</strong> <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">&amp;</code></li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);"><</code>
</a>
<ul>
<li style="background-color: lightsteelblue;"><strong>Literal Interpretation:</strong> Indicates the start of an HTML tag</li>
<li><strong>Entity:</strong> <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">&lt;</code></li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">"</code>
</a>
<ul>
<li style="background-color: lightsteelblue;"><strong>Literal Interpretation:</strong> Indicates the beginning and end of a value given to an attribute</li>
<li><strong>Entity:</strong> <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">&quot;</code></li>
</ul>
</div>
</div>
<div style="margin: .5%;padding: 3px;background-color: cornflowerblue;">
<h2 style="margin: 0%;padding-left: 10px;">CSS Selectors </h2>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">elementname</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>HTML Feature Selected:</strong> all tags of type <elementname> </li>
<li><strong>Assignment:</strong> N/A. When an element is created, it can automatically be selected by its tag name</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
.class
</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>HTML Feature Selected:</strong> all elements whose class attribute matches the selected class</li>
<li><strong>Assignment:</strong> Add the attribute "class" inside the start tag of an element. Assign its value by placing
the desired class name in quotes beside the <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">class</code> attribute followed by an <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">=</code>
sign
</li>
<li style="background-color: lightsteelblue;">
<strong>Example:</strong> Assign the class "foot note" to a <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">div</code>
<ul style="margin-top: 0%;">
<li style="background-color: cornflowerblue;">HTML assignment: <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);"><div class="foot-note">(content)</div></code></li>
<li>CSS selection: <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">.foot-note</code></li>
<li style="background-color: cornflowerblue;"><em>Note: class names are seperated by white space. Class names, therefore, must be a single string
of characters.</em>
</li>
</ul>
</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">
#id
</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>HTML Feature Selected:</strong> the html element whose id attribute matches the selected id</li>
<li><strong>Assignment:</strong> Add the attribute "id" inside the start tag of an element. Assign its value by placing
the desired id in quotes beside the <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">id</code> attribute followed by an <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">=</code>
sign
</li>
<li style="background-color: lightsteelblue;">
<strong>Example:</strong> Assign the id "home" to a <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">div</code>
<ul style="margin-top: 0%;">
<li style="background-color: cornflowerblue;">HTML Assignment: <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);"><div id="home">(content)</div></code></li>
<li>CSS Selection: <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">#home</code></li>
<li style="background-color: cornflowerblue;"><em>Note: id's are intended to refer to a single html element in a document. The language takes no
measures to prevent multiple assignment, but the practice is discouraged. For multiple assignments,
use the class attribute.</em>
</li>
</ul>
</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">:nth-child</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>HTML Feature Selected:</strong> elements based on their position among a group of siblings</li>
<li>
<strong>Assignment:</strong> N/A. The <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">nth-child</code> selector is a pseudo-selector. It selects elements based on the
structure of the html file that it applies to.
</li>
<li style="background-color: lightsteelblue;">
<strong>Example:</strong> Select every-other <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">li</code>in a list starting with the first
<ul style="margin-top: 0%;">
<li>CSS Selection: <code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">li:nth-child(odd)</code></li>
</ul>
</li>
</ul>
</div>
</div>
<div style="margin: .5%;padding: 3px;background-color: royalblue;">
<h2 style="margin: 0%;padding-left: 10px;">CSS Properties</h2>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">background-color</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Purpose:</strong> change the background color of an element</li>
<li><strong>Possible values:</strong> a color specified in one of a number of schemes. Some schemes include:
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;">rgb</li>
<li>hsl</li>
<li style="background-color: lightsteelblue;">hex-color</li>
<li>named-color</li>
<li style="background-color: lightsteelblue;"><em>and many others</em></li>
</ul>
</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">margin</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Purpose:</strong> Shorthand property for setting a margin on all four sides</li>
<li>
<strong>Possible Values:</strong> 1-4 values representing the desired amount of margin for one or more sides of the element
</li>
<li style="background-color: lightsteelblue;"><strong>Note:</strong> Margin amounts can be specified with a length, a percent, or using auto.</li>
</ul>
</div>
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" style="display: block; padding-bottom: 5px;">
<code style="font-size: 1.1rem;background-color: lightgray;border-radius: 5px;padding: 0px 10px;font-weight: bold;color: rgb(92, 92, 92);">display</code>
</a>
<ul style="margin-top: 0%;">
<li style="background-color: lightsteelblue;"><strong>Purpose:</strong> Specifies whether an element is rendered in-line or as a block. Additionally, specifies the
layout used for children including flow layout, grid or flex.
</li>
<li><strong>Possible Values:</strong> "in-line", "block", "flow", "flex", "grid", some combination of these and/or several others</li>
</ul>
</div>
</div>
</body>
</html>