-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.html
346 lines (306 loc) · 10.2 KB
/
styles.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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!doctype html>
<html lang="en">
<head>
<title>Styles</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
--> Class Notes 10/21/2024
<header>
<nav></nav>
</header>
<main>
<h1> h1 tag </h1>
<pre>
display: block;
Puts elements in their own line.
The a tags are now block elements in their own line.
</pre>
<a> a tag1 </a>
<a> a tag2 </a>
<a> a tag3 </a>
<pre>
display: inline;
puts elements in a single line.
The p tags are now inline.
</pre>
<p> p tag1 </p>
<p> p tag2 </p>
<p> p tag3 </p>
<pre>
display: none;
makes the element invisible, though it is still accessible in the Elements panel. <
</pre>
<img src="2d-shapes.jpg"> ---> Class Notes 10/22/2024
<pre>
background image
background-image:url("bgimg.png")
Add the filename of URL for the image
</pre>
<div class="thumbs-up width100 height">Background Image</div>
<pre>
Adding multiple background images
background-image:url("backgroundimg.png")
background-image: linear-gradient(white, gray)
Add background images to nesting elements.
The elements nested deeply will appear in front.
</pre>
<div class="thumbs-up width100 height">Background Image</div>
<br>-->Class Notes 10/26/2024
<pre>
Resizing the background image
background-size: 12%'
One value sets the width and height proportionately
2 values sets the width and height individually
</pre>
<div class="size12 width100">Resize Background Image</div>
<br>
<pre>
Repeating a background
background-repeat: no-repeat;
By default, the background repeats
</pre>
<br>
<pre>
Repeating a background
background-repeat: space;
Repeats the background such that the image doesn't get cut off
</pre>
<br>
<pre>
Repeating a background
background-repeat: no-repeat space;
1st value: horizontal repeat (x-direction)
2nd value: vertical repeat (y-direction)
Values are separated by a space
</pre>
<pre>
Background positions
background-position: center;
Options are : top, bottom, left, right, center
</pre>
<br>
<pre>
Background Positions
background-position: 20% 30%;
2 values position x and y individually
</pre>
<div class="bg-offcenter no-repeat space"></div>
<div class="gradient-basic height"></div>
<pre>
Basic gradient-basic
background-image:linear-gradient(white, gray)
Add the filename of URL for the image
</pre>
<div class=""></div>
<div class="gradient-basic height"></div>
<pre>
Change Direction of color gradients
background-image:linear-gradient(to right, white, gray)
Options:
to right
to bottom right
to left
to bottom left
</pre>
<pre class="gradient-degrees height">
Gradient Degrees
background-image: linear-gradient (90deg, white, gray, green);
To change the direction, add degrees to the beginning
90deg (right)
135deg (bottom right)
270deg (left)
225deg (bottom left)
</pre>
<div class="gradient-stops">
<pre>
Gradient Color Stops
background-image: linear-gradient(blue, yellow 10% 90%, purple);
2 values next to the middle color sets solid color positions
separated by spaces
</pre>
</div>
<br>
<pre class="rgba gradient-basic">
RGBA = Red Green Blue Alpha
color: rgb(6, 68, 0, 0.354);
Sets the transparency of colors
0 alpha is invisible
1 alpha is fully visible
</pre>
<pre class="opacity25">
Opacity
opacity: 0.25;
Sets the transparency of elements
0 is invisible
1 is fully visible
</pre>
<div class="" gradient-basic ">
<img class="opacity25 " src="thumbs-up.png ">
--> Class Notes 10/26/2024
<pre>
display: none; vs opacity: 0;
display: none
- makes the element invisible
- removes the element from the browser
- the element is still in the element tree
opacity: 0
- makes the element invisible
- does NOT remove the element from the browser
- the element still takes up space as it is still in the element tree
</pre>
<div class="border border-5 m-1 ">Border is Here!</div><br>
<div class="none ">Hello World!</div>
<div class="border border-5 m-1 ">Border</div>
<div class="opacity0 ">Hello World!</div><br>
-->Class Notes 10/24/2024
<pre>
Grouping Selector
i, b {
color:green;
}
Separate elements, classes, or ids with commas.
The grouping selector applies the style to all of those elements.
</pre>
<i class=".i-green ">italic tag</i>
<b class=".b-green ">bold tag</b>
<i class=".i-green ">italic tag</i>
<b class=".b-green ">bold tag</b>
<pre>
Nesting Selector
i b {
color: green;
}
Select the nested element(s)
Example: <b> is nested in <i>
Only colors the
</pre>
<i>italic tag
<b>Inside of the <i> tag</b>
</i>
<b>Not inside the <i> tag</b>
<pre>
Specificity = order of styling priority
1. inline (most specific)
2. id
3. class
4. element (least specific)
Styles are applied based on their priority.
Styles with lower priority get overwritten.
!important overrides them all and goes by load order.
The !important that gets loaded last gets applied.
</pre>
<article id="red-italic " class="blue-bold ">article with id red italic and class blue bold</article>
<article class="blue-bold ">article with class blue bold</article>
<article style="color:black " class="blue-bold ">article with inline style black, and class blue-bold</article>
<article>article by itself</article>
<h3>Box Model</h3>
<pre>
Padding Shorthand properties
4 Values: sets each side individually
padding: 5px 6px 7px 8px;
Padding gets applied in a clockwise direction when 4 values are specified
1. top
2. right
3. bottom
4. left
3 Values:
padding: 10px 20px 30px;
Providing 3 values specifies
1. top
2. left and right
3. bottom
2 Values:
padding: 10px 20px;
Providing 2 values specifies
1. top and bottom
2. left and right
1 Value: sets all sides equally
padding: 10px;
</pre>
<pre>
Margins
Attributes:
1. margin-top
2. margin-bottom
3. margin-left
4. margin-right
Margin Shorthand properties
4 Values: sets each side individually
margin: 5px 6px 7px 8px;
Margin gets applied in a clockwise direction when 4 values are specified
1. top
2. right
3. bottom
4. left
3 Values:
margin: 10px 20px 30px;
Providing 3 values specifies
1. top
2. left and right
3. bottom
2 Values:
margin: 10px 20px;
Providing 2 values specifies
1. top and bottom
2. left and right
1 Value: sets all sides equally
margin: 10px;
</pre>
<br>
<pre>
Box Shadow
box-shadow: 2px 2px blue;
Basic properties:
1. x offset
2. y offset
3. color
</pre>
<span class="box-shadow bg-info ">Hello World!!</span>
<pre>
Text Shadow
text-shadow: 2px 2px blue;
Basic properties:
1. x offset
2. y offset
3. color
</pre>
<span class="text-shadow bg-info ">Hello World!!</span>
<br>
<pre>
Transformations
transform: rotate(20deg);
</pre>
<button class=" rotate btn btn-primary ">Click Me!</button>
<pre>
Transformations
transform: translate(10px, -10px);
</pre>
<button class="translate btn btn-warning ">Click Me!</button>
<pre>
Transformations
transform: scale(2);
decimal values make the element smaller
integers increase the size of the element
</pre>
<button class="scale btn btn-info ">Click Me!</button>
<pre>
Transformations
transform: scale(2) rotate(20deg);
Apply multiple transformations separated by spaces
</pre>
<button class="scale-rotate btn btn-info ">Click Me!</button>
<br>
<pre>
Transitions
transition:transform 2s;
1st value = style to animate
2nd value = duration of the animation
Set an animation for the original state (not scaled or rotated) to prevent snap-back
</pre>
<button class="animation btn btn-info ">Click Me!</button>
</main>
<footer> </footer>
</body>
</html>