-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path2021-03-06_Learn-CSS-So-That-Your-Site-Doesn-t-Look-Like-Garbage-938871b4521a.html
936 lines (933 loc) · 74.8 KB
/
2021-03-06_Learn-CSS-So-That-Your-Site-Doesn-t-Look-Like-Garbage-938871b4521a.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
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Learn CSS So That Your Site Doesn’t Look Like Garbage</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<article class="h-entry">
<header>
<h1 class="p-name">Learn CSS So That Your Site Doesn’t Look Like Garbage</h1>
</header>
<section data-field="subtitle" class="p-summary">
CSS Selectors
</section>
<section data-field="body" class="e-content">
<section name="e9df" class="section section--body section--first">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="2a25" id="2a25" class="graf graf--h3 graf--leading graf--title">Learn CSS So That Your Site
Doesn’t Look Like Garbage</h3>
<h3 name="142a" id="142a" class="graf graf--h3 graf-after--h3">CSS Selectors</h3>
<ul class="postList">
<li name="62c3" id="62c3" class="graf graf--li graf-after--h3"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CSS
Selector</strong></code> : Applies styles to a specific DOM element(s), there are various types:
</li>
<li name="d60d" id="d60d" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Type
Selectors</strong></code> : Matches by node name.</li>
<li name="9826" id="9826" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Class
Selectors</strong></code> : Matches by class name.</li>
<li name="10a7" id="10a7" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">ID
Selectors</strong></code> : Matches by ID name.</li>
<li name="64c0" id="64c0" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Universal
Selectors</strong></code> : Selects all HTML elements on a page.</li>
<li name="9c6b" id="9c6b" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Attribute
Selectors</strong></code> : Matches elements based on the prescence or value of a given attribute.
(i.e. a[title] will match all a elements with a title attribute)</li>
</ul>
<pre name="62fc" id="62fc"
class="graf graf--pre graf-after--li">/* Type selector */<br>div {<br> background-color: #000000;<br>}/* Class selector */<br>.active {<br> color: #ffffff;<br>}/* ID selector */<br>#list-1 {<br> border: 1px solid gray;<br>}/* Universal selector */<br>* {<br> padding: 10px;<br>}/* Attribute selector */<br>a[title] {<br> font-size: 2em;<br>}</pre>
<p name="5f7c" id="5f7c" class="graf graf--p graf-after--pre"><strong
class="markup--strong markup--p-strong">Class Selectors</strong></p>
<ul class="postList">
<li name="fddf" id="fddf" class="graf graf--li graf-after--p">Used to select all elements of a certain
class denoted with a <code class="markup--code markup--li-code">.[class name]</code></li>
<li name="72af" id="72af" class="graf graf--li graf-after--li">You can assign multiple classes to a DOM
element by separating them with a space.</li>
</ul>
<p name="bb75" id="bb75" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Compound Class Selectors</strong></p>
<ul class="postList">
<li name="befd" id="befd" class="graf graf--li graf-after--p">To get around accidentally selecting
elements with multiple classes beyond what we want to grab we can chain dots.</li>
<li name="e2c8" id="e2c8" class="graf graf--li graf-after--li">TO use a compound class selector just
append the classes together when referencing them in the CSS.</li>
</ul>
<pre name="1e80" id="1e80"
class="graf graf--pre graf-after--li"><div class="box yellow"></div><br><div class="box orange"></div><br><div class="circle orange"></div></pre>
<ul class="postList">
<li name="7dd3" id="7dd3" class="graf graf--li graf-after--pre">i.e. .box.yellow will select only the
first element.</li>
<li name="8904" id="8904" class="graf graf--li graf-after--li">KEEP IN MIND that if you do include a
space it will make the selector into a <em class="markup--em markup--li-em">descendant selector</em>.
</li>
</ul>
<pre name="cca2" id="cca2"
class="graf graf--pre graf-after--li">h1#heading,<br>h2.subheading {<br> font-style: italic;<br>}</pre>
<ul class="postList">
<li name="a8bc" id="a8bc" class="graf graf--li graf-after--pre">When we want to target all <code
class="markup--code markup--li-code">h1</code> tags with the id of <code
class="markup--code markup--li-code">heading</code>.</li>
</ul>
<p name="7eb6" id="7eb6" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">CSS Combinators</strong></p>
<ul class="postList">
<li name="c196" id="c196" class="graf graf--li graf-after--p">CSS Combinators are used to combine other
selectors into more complex or targeted selectors — they are very powerful!</li>
<li name="71a6" id="71a6" class="graf graf--li graf-after--li">Be careful not to use too many of them as
they will make your CSS far too complex.</li>
<li name="6032" id="6032" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Descendant
Selectors</strong></code></li>
<li name="6f41" id="6f41" class="graf graf--li graf-after--li">Separated by a space.</li>
<li name="3829" id="3829" class="graf graf--li graf-after--li">Selects all descendants of a parent
container.</li>
<li name="e90c" id="e90c" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Direct Child
Selectors</strong></code></li>
<li name="52b5" id="52b5" class="graf graf--li graf-after--li">Indicated with a <code
class="markup--code markup--li-code">></code>.</li>
<li name="ea8e" id="ea8e" class="graf graf--li graf-after--li">Different from descendants because it
only affects the direct children of an element.</li>
<li name="486f" id="486f" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">.menu > .is-active { background-color: #ffe0b2; }</code>
</li>
<li name="96f9" id="96f9" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><body> <div class="menu"> <div
class="is-active">Belka</div> <div> <div
class="is-active">Strelka</div> </div> </div> </body> <div
class="is-active"> Laika </div> </body></code></li>
<li name="59ca" id="59ca" class="graf graf--li graf-after--li">Belka would be the only element selected.
</li>
<li name="0266" id="0266" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Adjacent
Sibling Selectors</strong></code></li>
<li name="a648" id="a648" class="graf graf--li graf-after--li">Uses the <code
class="markup--code markup--li-code">+</code> symbol.</li>
<li name="9d79" id="9d79" class="graf graf--li graf-after--li">Used for elements that directly follow
one another and who both have the same parent.</li>
<li name="4865" id="4865" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">h1 + h2 { font-style: italic; } <h1>Big header</h1>
<h2>This one is styled because it is directly adjacent to the H1</h2> <h2>This one
is NOT styled because there is no H1 right before it</h2></code></li>
</ul>
<p name="0dcb" id="0dcb" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Pseudo-Classes</strong></p>
<ul class="postList">
<li name="b638" id="b638" class="graf graf--li graf-after--p"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">Pseudo-Class</strong></code> : Specifies a special state
of the seleted element(s) and does not refer to any elements or attributes contained in the DOM.</li>
<li name="0360" id="0360" class="graf graf--li graf-after--li">Format is a <code
class="markup--code markup--li-code">Selector:Pseudo-Class Name</code> or <code
class="markup--code markup--li-code">A:B</code></li>
<li name="91ee" id="91ee" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">a:hover { font-family: "Roboto Condensed",
sans-serif; color: #4fc3f7; text-decoration: none; border-bottom: 2px solid #4fc3f7; }</code></li>
<li name="27ac" id="27ac" class="graf graf--li graf-after--li">Some common pseudo-classes that are
frequently used are:</li>
<li name="9b2b" id="9b2b" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">active</strong></code> : ‘push down’, when ele are
activated.</li>
<li name="5b2f" id="5b2f" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">checked</strong></code> : applies to things like radio
buttons or checkbox inputs.</li>
<li name="58da" id="58da" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">disabled</strong></code> : any disabled element.</li>
<li name="d3bd" id="d3bd" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">first-child</strong></code> : first element in a group of
children/siblings.</li>
<li name="40fc" id="40fc" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">focus</strong></code> : elements that have current focus.
</li>
<li name="ed43" id="ed43" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">hover</strong></code> : elements that have cursor
hovering over it.</li>
<li name="6fa2" id="6fa2" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">invalid</strong></code> : any form elements in an invalid
state from client-side form validation.</li>
<li name="7811" id="7811" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">last-child</strong></code> : last element in a group of
children/siblings.</li>
<li name="1bdf" id="1bdf" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">not(selector)</strong></code> : elements that do not
match the provided selector.</li>
<li name="be5c" id="be5c" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">required</strong></code> : form elements that are
required.</li>
<li name="43ed" id="43ed" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">valid</strong></code> : form elements in a valid state.
</li>
<li name="6460" id="6460" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">visited</strong></code> : anchor tags of whih the user
has already been to the URL that the href points to.</li>
</ul>
<p name="4f7f" id="4f7f" class="graf graf--p graf-after--li"><code
class="markup--code markup--p-code"><strong
class="markup--strong markup--p-strong">Pseudo-Selectors</strong></code></p>
<ul class="postList">
<li name="89e7" id="89e7" class="graf graf--li graf-after--p">Used to create pseudo-elements as children
of the elements to which the property applies.</li>
<li name="0bef" id="0bef" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">::after</code></li>
<li name="52f9" id="52f9" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">::before</code></li>
</ul>
<pre name="b01a" id="b01a"
class="graf graf--pre graf-after--li"><style><br> p::before {<br> background-color: lightblue;<br> border-right: 4px solid violet;<br> content: ":-) ";<br> margin-right: 4px;<br> padding-left: 4px;<br> }<br></style><br><p>This is the first paragraph</p><br><p>This is the second paragraph</p><br><p>This is the third paragraph</p></pre>
<ul class="postList">
<li name="a843" id="a843" class="graf graf--li graf-after--pre">Will add some blue smiley faces before
the p tag elements.</li>
</ul>
<p name="0a1f" id="0a1f" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">CSS Rules</strong></p>
<ul class="postList">
<li name="919a" id="919a" class="graf graf--li graf-after--p"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CSS
Rule</strong></code> : Collection of single or compound selectors, a curly brace, zero or more
properties</li>
<li name="555f" id="555f" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">CSS Rule
Specificity</strong></code> : Sometimes CSS rules will contain multiple elements and may have
overlapping properties rules for those same elements - there is an algorithm in CSS that calculates
which rule takes precedence.</li>
<li name="a1db" id="a1db" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">The Four
Number Calculation</strong></code> : listed in increasing order of importance.</li>
</ul>
<p name="4b82" id="4b82" class="graf graf--p graf-after--li">Who has the most IDs? If no one, continue.
</p>
<p name="d184" id="d184" class="graf graf--p graf-after--p">Who has the most classes? If no one, continue.
</p>
<p name="6eed" id="6eed" class="graf graf--p graf-after--p">Who has the most tags? If no one, continue.
</p>
<p name="2c76" id="2c76" class="graf graf--p graf-after--p">Last Read in the browser wins.</p>
<figure name="61bc" id="61bc" class="graf graf--figure graf-after--p"><img class="graf-image"
data-image-id="0*Ub47AaMXuT1m8_T-" data-width="60" data-height="41"
src="https://cdn-images-1.medium.com/max/800/0*Ub47AaMXuT1m8_T-"></figure>
<figure name="4ef2" id="4ef2" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*t0oXzsLPxpMwNbKo.png" data-width="1392" data-height="966" data-is-featured="true"
src="https://cdn-images-1.medium.com/max/800/0*t0oXzsLPxpMwNbKo.png"></figure>
<figure name="710d" id="710d" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*2xr0vyHwf6UN905l" data-width="60" data-height="16"
src="https://cdn-images-1.medium.com/max/800/0*2xr0vyHwf6UN905l"></figure>
<figure name="7fa4" id="7fa4" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*oq83hQ5qvtT6gDd9.png" data-width="1376" data-height="386"
src="https://cdn-images-1.medium.com/max/800/0*oq83hQ5qvtT6gDd9.png"></figure>
<pre name="8b16" id="8b16"
class="graf graf--pre graf-after--figure"><style><br> .box {<br> width: 50px;<br> height: 50px;<br> border: 1px solid black;<br> }<br> .orange {<br> background-color: orange;<br> }<br> .yellow {<br> background-color: yellow;<br> border: 1px solid purple;<br> }<br></style><br><div class="box yellow"></div><br><div class="box orange"></div></pre>
<ul class="postList">
<li name="1939" id="1939" class="graf graf--li graf-after--pre graf--trailing">Coming back to our
example where all the CSS Rules have tied, the last step 4 wins out so our element will have a <code
class="markup--code markup--li-code">purple border</code>.</li>
</ul>
</div>
</div>
</section>
<section name="ea25" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="4ad6" id="4ad6" class="graf graf--h3 graf--leading">CSS: Type, Properties, and Imports</h3>
<p name="324b" id="324b" class="graf graf--p graf-after--h3"><strong
class="markup--strong markup--p-strong">Typography</strong></p>
<ul class="postList">
<li name="d6fc" id="d6fc" class="graf graf--li graf-after--p"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">font-family</strong></code> : change the font.</li>
</ul>
<figure name="ee1b" id="ee1b" class="graf graf--figure graf-after--li"><img class="graf-image"
data-image-id="0*ssVcT1Bd9Edfo6KF" data-width="60" data-height="42"
src="https://cdn-images-1.medium.com/max/800/0*ssVcT1Bd9Edfo6KF"></figure>
<figure name="cc06" id="cc06" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*WmqUyKiumM8RCJQo.png" data-width="700" data-height="496"
src="https://cdn-images-1.medium.com/max/800/0*WmqUyKiumM8RCJQo.png"></figure>
<ul class="postList">
<li name="daba" id="daba" class="graf graf--li graf-after--figure">Remember that not all computers have
the same fonts on them.</li>
<li name="0aa8" id="0aa8" class="graf graf--li graf-after--li">You can import web fonts via an api by
using</li>
<li name="0c5d" id="0c5d" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">@import
url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');</code>
and pasting it st the top of your CSS file.</li>
<li name="d8ff" id="d8ff" class="graf graf--li graf-after--li">And then reference it in your
font-family.</li>
<li name="ee9f" id="ee9f" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">font-size</strong></code> : Changes the size of your
font.</li>
<li name="782e" id="782e" class="graf graf--li graf-after--li">Keep in mind the two kind of units CSS
uses:</li>
<li name="c4f7" id="c4f7" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">Absolute</strong></code> : <code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">Pixels</strong></code>, Points, Inches, Centimeters.</li>
<li name="2884" id="2884" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">Relative</strong></code> : Em, Rem.</li>
<li name="f9b5" id="f9b5" class="graf graf--li graf-after--li">Em: Calulating the size relative to the
previous div (bubbles down)</li>
<li name="5a5d" id="5a5d" class="graf graf--li graf-after--li">Rem: Calulates relative to the parent
element always.</li>
<li name="79b0" id="79b0" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">font-style</strong></code> : Used to set a font to
italics.</li>
<li name="f464" id="f464" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">font-weight</strong></code> : Used to make a font bold.
</li>
<li name="3d56" id="3d56" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">text-align</strong></code> : Used to align your text to
the left, center, or right.</li>
<li name="4cbc" id="4cbc" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">text-decoration</strong></code> : Use to put lines above,
through, or under text. Lines can be solid, dashed, or wavy!</li>
<li name="1c96" id="1c96" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">text-transform</strong></code> : Used to set text to all
lowercase, uppercase, or capitalize all words.</li>
</ul>
<p name="c449" id="c449" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Background-Images</strong></p>
<ul class="postList">
<li name="13eb" id="13eb" class="graf graf--li graf-after--p graf--trailing">You can use the
background-image property to set a background image for an element.</li>
</ul>
</div>
</div>
</section>
<section name="0f6e" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="57e3" id="57e3" class="graf graf--h3 graf--leading">CSS: Colors, Borders, and Shadows</h3>
<p name="5397" id="5397" class="graf graf--p graf-after--h3"><strong
class="markup--strong markup--p-strong">Colors</strong></p>
<ul class="postList">
<li name="6bed" id="6bed" class="graf graf--li graf-after--p">You can set colors in CSS in three popular
ways: by name, by hexadecimal RGB value, and by their decimal RGB value.</li>
<li name="38fb" id="38fb" class="graf graf--li graf-after--li">rgba() is used to make an rbg value more
transparent, the <code class="markup--code markup--li-code">a</code> is used to specify the <code
class="markup--code markup--li-code">alpha channel</code>.</li>
<li name="cb05" id="cb05" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Color</strong> : Property used to change the color of text.
</li>
<li name="6f05" id="6f05" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Background-Color</strong> : Property to change the
backgrounf color of an element.</li>
</ul>
<p name="3d52" id="3d52" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Borders</strong></p>
<ul class="postList">
<li name="d922" id="d922" class="graf graf--li graf-after--p">Borders take three values: The width of
the border, the style (i.e. solid, dotted, dashed), color of the border.</li>
</ul>
<p name="fe84" id="fe84" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Shadows</strong></p>
<ul class="postList">
<li name="bccb" id="bccb" class="graf graf--li graf-after--p">There are two kinds of shadows in CSS:
<code class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">box
shadows</strong></code> and <code class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">text shadows</strong></code>.</li>
<li name="7fd2" id="7fd2" class="graf graf--li graf-after--li">Box refers to HTML elements.</li>
<li name="f3a7" id="f3a7" class="graf graf--li graf-after--li">Text refers to text.</li>
<li name="2a53" id="2a53" class="graf graf--li graf-after--li graf--trailing">Shadows take values such
as, the horizontal & vertical offsets of the shadow, the blur radius of the shadow, the spread
radius, and of course the colors.</li>
</ul>
</div>
</div>
</section>
<section name="b86c" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="2fcd" id="2fcd" class="graf graf--h3 graf--leading">The Box Model</h3>
<p name="4642" id="4642" class="graf graf--p graf-after--h3"><strong
class="markup--strong markup--p-strong">Box Model</strong> : A concept that basically boils down that
every DOM element has a box around it.</p>
<p name="d353" id="d353" class="graf graf--p graf-after--p">Imagine a gift, inside is the gift, wrapped in
foam all around (padding), and the giftbox outside of it (border) and then a wrapping paper on the
giftbox (margin).- For items that are using <code class="markup--code markup--p-code">block</code> as
it’s display, the browser will follow these rules to layout the element: - The box fills 100% of the
available container space. - Every new box takes on a new line/row. - Width and Height properties are
respected. - Padding, Margin, and Border will push other elements away from the box. - Certain elements
have <code class="markup--code markup--p-code">block</code> as their default display, such as: divs,
headers, and paragraphs.- For items that are using <code
class="markup--code markup--p-code">inline</code> as it’s display, the browser will follow these rules
to layout the element: - Each box appears in a single line until it fills up the space. - Width and
height are <strong class="markup--strong markup--p-strong">not</strong> respected. - Padding, Margin,
and Border are applied but they <strong class="markup--strong markup--p-strong">do not</strong> push
other elements away from the box. - Certain elements have <code
class="markup--code markup--p-code">inline</code> as their default display, such as: span tags,
anchors, and images.</p>
<p name="757d" id="757d" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Standard Box Model vs Border-Box</strong>- As per the standard
Box Model, the width and height pertains to the content of the box and excludes any additional padding,
borders, and margins.</p>
<p name="cb0a" id="cb0a" class="graf graf--p graf-after--p">This bothered many programmers so they created
the <strong class="markup--strong markup--p-strong">border box</strong> to include the calculation of
the entire box’s height and width.</p>
<p name="2266" id="2266" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Inline-Block</strong>- Inline-block uses the best features of
both <code class="markup--code markup--p-code">block</code> and <code
class="markup--code markup--p-code">inline</code>. - Elements still get laid out left to right. -
Layout takes into account specified width and height.</p>
<p name="10b0" id="10b0" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Padding</strong>- Padding applies padding to every side of a
box. It is shorthand for four padding properties in this order: <code
class="markup--code markup--p-code">padding-top</code>, <code
class="markup--code markup--p-code">padding-right</code>, <code
class="markup--code markup--p-code">padding-bottom</code>, <code
class="markup--code markup--p-code">padding-left</code> (clockwise!)</p>
<p name="c9f5" id="c9f5" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Border</strong>- Border applies a border on all sides of an
element. It takes three values in this order: <code
class="markup--code markup--p-code">border-width</code>, <code
class="markup--code markup--p-code">border-style</code>, <code
class="markup--code markup--p-code">border-color</code>. - All three properties can be broken down in
the four sides clockwise: top, right, bottom, left.</p>
<p name="bc40" id="bc40" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Margin</strong>- Margin sets margins on every side of an
element. It takes four values in this order: <code
class="markup--code markup--p-code">margin-top</code>, <code
class="markup--code markup--p-code">margin-right</code>, <code
class="markup--code markup--p-code">margin-bottom</code>, <code
class="markup--code markup--p-code">margin-left</code>. - You can use <code
class="markup--code markup--p-code">margin: 0 auto</code> to center an element.</p>
<h3 name="debc" id="debc" class="graf graf--h3 graf-after--p">Positioning</h3>
<ul class="postList">
<li name="d380" id="d380" class="graf graf--li graf-after--h3">The <code
class="markup--code markup--li-code">position</code> property allows us to set the position of
elements on a page and is an integral part of creatnig a Web page layout.</li>
<li name="1bd6" id="1bd6" class="graf graf--li graf-after--li">It accepts five values: <code
class="markup--code markup--li-code">static</code>, <code
class="markup--code markup--li-code">relative</code>, <code
class="markup--code markup--li-code">absolute</code>, <code
class="markup--code markup--li-code">fixed</code>, <code
class="markup--code markup--li-code">sticky</code>.</li>
<li name="0b53" id="0b53" class="graf graf--li graf-after--li">Every property (minus <code
class="markup--code markup--li-code">static</code>) is used with: <code
class="markup--code markup--li-code">top</code>, <code
class="markup--code markup--li-code">right</code>, <code
class="markup--code markup--li-code">bottom</code>, and <code
class="markup--code markup--li-code">left</code> to position an element on a page.</li>
</ul>
<p name="6cc0" id="6cc0" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Static Positioning</strong></p>
<ul class="postList">
<li name="7aa9" id="7aa9" class="graf graf--li graf-after--p">The default position value of page
elements.</li>
<li name="700a" id="700a" class="graf graf--li graf-after--li">Most likely will not use static that
much.</li>
</ul>
<p name="0e95" id="0e95" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Relative Positioning</strong></p>
<ul class="postList">
<li name="adc3" id="adc3" class="graf graf--li graf-after--p">Remains in it’s original position in the
page flow.</li>
<li name="9533" id="9533" class="graf graf--li graf-after--li">It is positioned <em
class="markup--em markup--li-em">RELATIVE</em> to the it’s <em
class="markup--em markup--li-em">ORIGINAL PLACE</em> on the page flow.</li>
<li name="8c0b" id="8c0b" class="graf graf--li graf-after--li">Creates a <strong
class="markup--strong markup--li-strong">stacking context</strong> : overlapping elements whose
order can be set by the z-index property.</li>
</ul>
<pre name="4bc9" id="4bc9"
class="graf graf--pre graf-after--li">#pink-box {<br> background-color: #ff69b4;<br> bottom: 0;<br> left: -20px;<br> position: relative;<br> right: 0;<br> top: 0;<br>}</pre>
<figure name="4cf5" id="4cf5" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*mMCUEQ94L4_zxwNc" data-width="60" data-height="26"
src="https://cdn-images-1.medium.com/max/800/0*mMCUEQ94L4_zxwNc"></figure>
<figure name="76ee" id="76ee" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*TgjpfTmdczESRAfU.png" data-width="1390" data-height="608"
src="https://cdn-images-1.medium.com/max/800/0*TgjpfTmdczESRAfU.png"></figure>
<p name="f6ae" id="f6ae" class="graf graf--p graf-after--figure"><strong
class="markup--strong markup--p-strong">Absolute Positioning</strong></p>
<ul class="postList">
<li name="d597" id="d597" class="graf graf--li graf-after--p">Absolute elements are removed from the
normal page flow and other elements around it act like it’s not there. (how we can easily achieve some
layering)</li>
<li name="eb5b" id="eb5b" class="graf graf--li graf-after--li">Here are some examples to illustration
absolute positioning:</li>
</ul>
<pre name="6ca4" id="6ca4"
class="graf graf--pre graf-after--li">.container {<br> background-color: #2b2d2f;<br> position: relative;<br>}#pink-box {<br> position: absolute;<br> top: 60px;<br>}</pre>
<figure name="42f3" id="42f3" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*Mu1E5D10RQaBpzms" data-width="60" data-height="32"
src="https://cdn-images-1.medium.com/max/800/0*Mu1E5D10RQaBpzms"></figure>
<figure name="a6a8" id="a6a8" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*6jvV-NnX5HS5PuVT.png" data-width="1394" data-height="744"
src="https://cdn-images-1.medium.com/max/800/0*6jvV-NnX5HS5PuVT.png"></figure>
<ul class="postList">
<li name="adb4" id="adb4" class="graf graf--li graf-after--figure">Note that the container ele has a
relative positioning — this is so that any changes made to the absolute positioned children will be
positioned from it’s top-left corner.</li>
<li name="be4f" id="be4f" class="graf graf--li graf-after--li">Note that because we removed the pink
from the normal page flow, the container has now shifted the blue box to where the pink box should
have been — which is why it is now layered beneath the pink.</li>
</ul>
<pre name="ccfe" id="ccfe"
class="graf graf--pre graf-after--li">.container {<br> background-color: #2b2d2f;<br> position: relative;<br>}#pink-box {<br> position: absolute;<br> top: 60px;<br>}#blue-box {<br> position: absolute;<br>}</pre>
<figure name="0dee" id="0dee" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*phWx-191VVQ5pRF9" data-width="60" data-height="33"
src="https://cdn-images-1.medium.com/max/800/0*phWx-191VVQ5pRF9"></figure>
<figure name="ec8e" id="ec8e" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*o_T8meZgQSu7kxfs.png" data-width="1394" data-height="774"
src="https://cdn-images-1.medium.com/max/800/0*o_T8meZgQSu7kxfs.png"></figure>
<ul class="postList">
<li name="9e42" id="9e42" class="graf graf--li graf-after--figure">As you can see here, since we have
also taken the blue box out of the normal page flow by declaring it as absoutely positioned it now
overlaps over the pink box.</li>
</ul>
<pre name="2ec3" id="2ec3"
class="graf graf--pre graf-after--li">.container {<br> background-color: #2b2d2f;<br> position: relative;<br>}#pink-box {<br> background-color: #ff69b4;<br> bottom: 60px;<br> position: absolute;<br>}</pre>
<figure name="729a" id="729a" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*HJbtARqC1qmeWTHS" data-width="60" data-height="27"
src="https://cdn-images-1.medium.com/max/800/0*HJbtARqC1qmeWTHS"></figure>
<figure name="c1c9" id="c1c9" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*rRNttTlXfnhqERYU.png" data-width="1398" data-height="646"
src="https://cdn-images-1.medium.com/max/800/0*rRNttTlXfnhqERYU.png"></figure>
<ul class="postList">
<li name="528a" id="528a" class="graf graf--li graf-after--figure">Example where the absolute element
has it’s bottom property modified.</li>
</ul>
<pre name="1aa7" id="1aa7"
class="graf graf--pre graf-after--li">.container {<br> background-color: #2b2d2f;<br>}#pink-box {<br> background-color: #ff69b4;<br> bottom: 60px;<br> position: absolute;<br>}</pre>
<figure name="1ed4" id="1ed4" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*e7H6ImFUmcPGMaoa" data-width="60" data-height="56"
src="https://cdn-images-1.medium.com/max/800/0*e7H6ImFUmcPGMaoa"></figure>
<figure name="80f0" id="80f0" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*Al6ILt84EC0bhjnK.png" data-width="1392" data-height="1318"
src="https://cdn-images-1.medium.com/max/800/0*Al6ILt84EC0bhjnK.png"></figure>
<ul class="postList">
<li name="f676" id="f676" class="graf graf--li graf-after--figure">If we removed the container’s
relative position. Our absolute unit would look for the nearest parent which would be the document
itself.</li>
</ul>
<p name="cca7" id="cca7" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Fixed Positioning</strong></p>
<ul class="postList">
<li name="fe31" id="fe31" class="graf graf--li graf-after--p">Another positioning that removes it’s
element from the page flow, and automatically positions it’s parent as the HTML doc itself.</li>
<li name="2388" id="2388" class="graf graf--li graf-after--li">Fixed also uses top, right, bottom, and
left.</li>
<li name="3903" id="3903" class="graf graf--li graf-after--li">Useful for things like nav bars or other
features we want to keep visible as the user scrolls.</li>
</ul>
<p name="73ff" id="73ff" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Sticky Positioning</strong></p>
<ul class="postList">
<li name="8ae2" id="8ae2" class="graf graf--li graf-after--p">Remains in it’s original position in the
page flow, and it is positioned relative to it’s closest block-level ancestor and any <em
class="markup--em markup--li-em">scrolling</em> ancestors.</li>
<li name="abe8" id="abe8" class="graf graf--li graf-after--li">Behaves like a relatively positioned
element until the point at which you would normally scroll past it’s viewport — then it sticks!</li>
<li name="7ac0" id="7ac0" class="graf graf--li graf-after--li">It is positioned with top, right, bottom,
and left.</li>
<li name="9080" id="9080" class="graf graf--li graf-after--li">A good example are headers in a
scrollable list.</li>
</ul>
<figure name="b183" id="b183" class="graf graf--figure graf-after--li"><img class="graf-image"
data-image-id="0*BRVlqobKK0IZtnXq" data-width="60" data-height="30"
src="https://cdn-images-1.medium.com/max/800/0*BRVlqobKK0IZtnXq"></figure>
<figure name="46f3" id="46f3" class="graf graf--figure graf-after--figure graf--trailing"><img
class="graf-image" data-image-id="0*jQQJYWVoQY2eNANS.gif" data-width="700" data-height="360"
src="https://cdn-images-1.medium.com/max/800/0*jQQJYWVoQY2eNANS.gif"></figure>
</div>
</div>
</section>
<section name="e89f" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="07f3" id="07f3" class="graf graf--h3 graf--leading">Flexible Box Model</h3>
<ul class="postList">
<li name="46aa" id="46aa" class="graf graf--li graf-after--h3">Flexbox is a <strong
class="markup--strong markup--li-strong">CSS module</strong> that provides a convenient way for us
to display items inside a flexible container so that the layout is responsive.</li>
<li name="ebb3" id="ebb3" class="graf graf--li graf-after--li">Float was used back in the day to display
position of elements in a container.</li>
<li name="2a8e" id="2a8e" class="graf graf--li graf-after--li">A very inconvenient aspect of float is
the need to <em class="markup--em markup--li-em">clear</em> the float.</li>
<li name="ba98" id="ba98" class="graf graf--li graf-after--li">To ‘clear’ a float we need to set up a
ghost div to properly align — this is already sounds so inefficient.</li>
</ul>
<p name="4e20" id="4e20" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Using Flexbox</strong></p>
<ul class="postList">
<li name="e23b" id="e23b" class="graf graf--li graf-after--p">Flexbox automatically resizes a container
element to fit the viewport size without needing to use breakpoints.</li>
</ul>
<figure name="97b2" id="97b2" class="graf graf--figure graf-after--li"><img class="graf-image"
data-image-id="0*_SXOQpq3yrywWCcL" data-width="60" data-height="39"
src="https://cdn-images-1.medium.com/max/800/0*_SXOQpq3yrywWCcL"></figure>
<figure name="533b" id="533b" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*IBJIWQ7Z_23eERWn.png" data-width="2025" data-height="1319"
src="https://cdn-images-1.medium.com/max/800/0*IBJIWQ7Z_23eERWn.png"></figure>
<ul class="postList">
<li name="b505" id="b505" class="graf graf--li graf-after--figure">Flexbox layout applies styles to the
parent element, and it’s children.</li>
</ul>
<pre name="7d82" id="7d82"
class="graf graf--pre graf-after--li">.container {<br> display: flex; /*sets display to use flex*/<br> flex-wrap: wrap; /*bc flex tries to fit everything into one line, use wrap to have the elements wrap to the next line*/<br> flex-direction: row; /*lets us create either rows or columns*/<br>}</pre>
<ul class="postList">
<li name="4898" id="4898" class="graf graf--li graf-after--pre"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">flex-flow</strong></code> can be used to combine wrap and
direction.</li>
<li name="acdb" id="acdb" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">justify-content</strong></code> used to define the
alignment of flex items along the main axis.</li>
<li name="68d6" id="68d6" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">align-items</strong></code> used to define the alignment
on the Y-axis.</li>
<li name="f0d8" id="f0d8" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">align-content</strong></code> redistributes extra space
on the cross axis.</li>
<li name="531c" id="531c" class="graf graf--li graf-after--li">By default, flex items will appear in the
order they are added to the DOM, but we can use the <code
class="markup--code markup--li-code">order</code> property to change that.</li>
<li name="39b0" id="39b0" class="graf graf--li graf-after--li">Some other properties we can use on flex
items are:</li>
<li name="ec38" id="ec38" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">flex-grow</code> : dictates amount of avail. space the item
should take up.</li>
<li name="0916" id="0916" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">flex-shrink</code> : defines the ability for a flex item to
shrink.</li>
<li name="4dda" id="4dda" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">flex-basis</code> : Default size of an element before the
remaining space is distributed.</li>
<li name="d9f2" id="d9f2" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code">flex</code> : shorthand for grow, shrink and basis.</li>
<li name="f127" id="f127" class="graf graf--li graf-after--li graf--trailing"><code
class="markup--code markup--li-code">align-self</code> : Overrides default alignment in the
container.</li>
</ul>
</div>
</div>
</section>
<section name="e7e3" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="9153" id="9153" class="graf graf--h3 graf--leading">Grid Layout</h3>
<ul class="postList">
<li name="cc4f" id="cc4f" class="graf graf--li graf-after--h3">CSS Grid is a 2d layout system that let’s
use create a grid with columns and rows purely using Vanilla CSS. (flex is one dimensional)</li>
</ul>
<p name="3aa0" id="3aa0" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Bootstrap vs CSS Grid</strong></p>
<ul class="postList">
<li name="4af2" id="4af2" class="graf graf--li graf-after--p">Bootstrap was a front-end library commonly
used to create grid layouts but now CSS grid provides greater flexibility and control.</li>
<li name="e404" id="e404" class="graf graf--li graf-after--li">Grid applies style to a parent container
and it’s child elements.</li>
</ul>
<pre name="1c7b" id="1c7b"
class="graf graf--pre graf-after--li">.grid-container {<br> display: grid;<br> grid-template-columns: repeat(3, 1fr);<br> grid-template-rows: auto;<br> grid-template-areas:<br> "header header header"<br> "main . sidebar"<br> "footer footer footer"; grid-column-gap: 20px;<br> grid-row-gap: 30px;<br> justify-items: stretch;<br> align-items: stretch;<br> justify-content: stretch;<br> align-content: stretch;<br>}.item-1 {<br> grid-area: header;<br>}<br>.item-2 {<br> grid-area: main;<br>}<br>.item-3 {<br> grid-area: sidebar;<br>}<br>.item-4 {<br> grid-area: footer;<br>}</pre>
<ul class="postList">
<li name="26c3" id="26c3" class="graf graf--li graf-after--pre">Columns and Rows can be defined with:
pixels, percentages, auto, named grid lines, using <code
class="markup--code markup--li-code">repeat</code>, fractions.</li>
<li name="a117" id="a117" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Grid Template
Areas</strong></code> gives us a handy way to map out and visualize areas of the grid layout.</li>
<li name="17ae" id="17ae" class="graf graf--li graf-after--li">Combine areas with templates to define
how much space an area should take up.</li>
<li name="f90a" id="f90a" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong class="markup--strong markup--li-strong">Grid
Gaps</strong></code> can be used to create ‘gutters’ between grid item.s</li>
<li name="d7c0" id="d7c0" class="graf graf--li graf-after--li">The way we have defined our grid with
<code class="markup--code markup--li-code">grid-templates</code> and <code
class="markup--code markup--li-code">areas</code> are considered <strong
class="markup--strong markup--li-strong">explicit</strong>.</li>
<li name="cef6" id="cef6" class="graf graf--li graf-after--li">We can also <code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">implicitly</strong></code> define grids.</li>
</ul>
<pre name="83e0" id="83e0"
class="graf graf--pre graf-after--li">.grid-container {<br> display: grid;<br> grid-template-columns: 100px 100px 100px 100px;<br> grid-template-rows: 50px 50px 50px;<br> grid-auto-columns: 100px;<br> grid-auto-rows: 50px;<br>}</pre>
<ul class="postList">
<li name="e6d3" id="e6d3" class="graf graf--li graf-after--pre">Any grid items that aren’t explicity
placed are automatically placed or <em class="markup--em markup--li-em">re-flowed</em></li>
</ul>
<p name="488b" id="488b" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Spanning Columns & Rows</strong></p>
<ul class="postList">
<li name="98c8" id="98c8" class="graf graf--li graf-after--p">We can use the following properties to
take up a specified num of cols and rows.</li>
<li name="0208" id="0208" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">grid-column-start</strong></code></li>
<li name="437a" id="437a" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">grid-column-end</strong></code></li>
<li name="7d03" id="7d03" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">grid-row-start</strong></code></li>
<li name="0a8e" id="0a8e" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">grid-row-end</strong></code></li>
<li name="c62b" id="c62b" class="graf graf--li graf-after--li">All four properties can take any of the
following values: the line number, span #, span name, auto.</li>
</ul>
<pre name="94d5" id="94d5"
class="graf graf--pre graf-after--li">.item-1 {<br> grid-row-start: row2-start; /* Item starts at row line named "row2-start" */<br> grid-row-end: 5; /* Item ends at row line 5 */<br> grid-column-start: 1; /* Item starts at column line 1 */<br> grid-column-end: three; /* Item ends at column line named "three" */<br>}.item-2 {<br> grid-row-start: 1; /* Item starts at row line 1 */<br> grid-row-end: span 2; /* Item spans two rows and ends at row line 3 */<br> grid-column-start: 3; /* Item starts at column line 3 */<br> grid-column-end: span col5-start; /* Item spans and ends at line named "col5-start" */<br>}</pre>
<p name="b365" id="b365" class="graf graf--p graf-after--pre"><strong
class="markup--strong markup--p-strong">Grid Areas</strong></p>
<ul class="postList">
<li name="9dd0" id="9dd0" class="graf graf--li graf-after--p">We use the grid areas in conjunction with
grid-container property to <strong class="markup--strong markup--li-strong">define sections of the
layout</strong>.</li>
<li name="5ec2" id="5ec2" class="graf graf--li graf-after--li">We can then assign named sections to
individual element’s css rules.</li>
</ul>
<p name="c15a" id="c15a" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Justify & Align Self</strong></p>
<ul class="postList">
<li name="06b0" id="06b0" class="graf graf--li graf-after--p">Justify items and Align Items can be used
to align all grid items at once.</li>
<li name="53f5" id="53f5" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Justify Self</strong> is used to align self on the row.
</li>
<li name="f6b1" id="f6b1" class="graf graf--li graf-after--li">It can take four values: start, end,
center, stretch.</li>
<li name="72bb" id="72bb" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Align Self</strong> is used to align self on the column.
</li>
<li name="d5d4" id="d5d4" class="graf graf--li graf-after--li graf--trailing">It can take four values:
start, end, center, stretch.</li>
</ul>
</div>
</div>
</section>
<section name="e0cf" class="section section--body">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<p name="40cd" id="40cd" class="graf graf--p graf--leading"><strong
class="markup--strong markup--p-strong">CSS Hover Effect and Handling</strong></p>
<p name="4014" id="4014" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Overflow</strong></p>
<p name="ae00" id="ae00" class="graf graf--p graf-after--p"><code
class="markup--code markup--p-code">css .btn { background-color: #00bfff; color: #ffffff;
border-radius: 10px; padding: 1.5rem; }</code></p>
<p name="6d2a" id="6d2a" class="graf graf--p graf-after--p"><code
class="markup--code markup--p-code">.btn--active:hover { cursor: pointer; transform:
translateY(-0.25rem);</code></p>
<p name="a9b6" id="a9b6" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">/*
Moves our button up/down on the Y axis */ }</code></p>
<p name="4947" id="4947" class="graf graf--p graf-after--p">The Pseudo Class Selector <code
class="markup--code markup--p-code"><strong
class="markup--strong markup--p-strong">hover</strong></code> activates when the cursor goes over
the selected element.</p>
<p name="b96f" id="b96f" class="graf graf--p graf-after--p"><strong
class="markup--strong markup--p-strong">Content Overflow</strong>- You can apply an <code
class="markup--code markup--p-code">overflow</code> content property to an element if it’s inner
contents are spilling over.</p>
<p name="3c70" id="3c70" class="graf graf--p graf-after--p">There are three members in the overflow
family: — <code class="markup--code markup--p-code"><strong
class="markup--strong markup--p-strong">overflow-x</strong></code> : Apply horizontally. - <code
class="markup--code markup--p-code"><strong
class="markup--strong markup--p-strong">overflow-y</strong></code> : Apply vertically. - <code
class="markup--code markup--p-code"><strong
class="markup--strong markup--p-strong">overflow</strong></code> : Apply both directions.</p>
<h3 name="23b5" id="23b5" class="graf graf--h3 graf-after--p">Transitions</h3>
<ul class="postList">
<li name="b5a7" id="b5a7" class="graf graf--li graf-after--h3">Transitions provide a way to control
animation speed when changing CSS properties.</li>
<li name="2e1b" id="2e1b" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Implicit Transitions</strong> : Animations that involve
transitioning between two states.</li>
</ul>
<p name="7961" id="7961" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Defining Transitions</strong></p>
<ul class="postList">
<li name="bbd6" id="bbd6" class="graf graf--li graf-after--p"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">transition-property</strong></code> : specifies the name
of the CSS property to apply the transition.</li>
<li name="6340" id="6340" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">transition-duration</strong></code> : during of the
transition.</li>
<li name="7463" id="7463" class="graf graf--li graf-after--li"><code
class="markup--code markup--li-code"><strong
class="markup--strong markup--li-strong">transition-delay</strong></code> : time before the
transition should start.</li>
</ul>
<p name="558e" id="558e" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Examples</strong> :</p>
<pre name="14ce" id="14ce"
class="graf graf--pre graf-after--p">#delay {<br> font-size: 14px;<br> transition-property: font-size;<br> transition-duration: 4s;<br> transition-delay: 2s;<br>}#delay:hover {<br> font-size: 36px;<br>}</pre>
<figure name="06fe" id="06fe" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*Z6AbWnbmbFfu-tSM" data-width="60" data-height="33"
src="https://cdn-images-1.medium.com/max/800/0*Z6AbWnbmbFfu-tSM"></figure>
<figure name="373e" id="373e" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*_6nSuCOR34-6ET7n.gif" data-width="1920" data-height="1080"
src="https://cdn-images-1.medium.com/max/800/0*_6nSuCOR34-6ET7n.gif"></figure>
<ul class="postList">
<li name="e6c9" id="e6c9" class="graf graf--li graf-after--figure">After a delay of two seconds, a four
second transition begins where the font size goes from 36px to 14px.</li>
</ul>
<pre name="70fd" id="70fd"
class="graf graf--pre graf-after--li">.box {<br> border-style: solid;<br> border-width: 1px;<br> display: block;<br> width: 100px;<br> height: 100px;<br> background-color: #0000ff;<br> transition: width 2s, height 2s, background-color 2s, transform 2s;<br>}.box:hover {<br> background-color: #ffcccc;<br> width: 200px;<br> height: 200px;<br> transform: rotate(180deg);<br>}</pre>
<figure name="e5f6" id="e5f6" class="graf graf--figure graf-after--pre"><img class="graf-image"
data-image-id="0*PH5_YmVDFVGqWGjO" data-width="60" data-height="33"
src="https://cdn-images-1.medium.com/max/800/0*PH5_YmVDFVGqWGjO"></figure>
<figure name="48d0" id="48d0" class="graf graf--figure graf-after--figure"><img class="graf-image"
data-image-id="0*Ya7xiy0AqJaJ9RPq.gif" data-width="1920" data-height="1080"
src="https://cdn-images-1.medium.com/max/800/0*Ya7xiy0AqJaJ9RPq.gif"></figure>
<ul class="postList">
<li name="c336" id="c336" class="graf graf--li graf-after--figure graf--trailing">When the mouse hovers
over a box, it spins due to the rotate transform. Width and height change and also the bg color.</li>
</ul>
</div>
</div>
</section>
<section name="c6f1" class="section section--body section--last">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="4d37" id="4d37" class="graf graf--h3 graf--leading">BEM Guidelines</h3>
<ul class="postList">
<li name="6474" id="6474" class="graf graf--li graf-after--h3">BEM was created as a guideline to solve
the issue of loose standards around CSS naming conventions.</li>
<li name="6d0c" id="6d0c" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">BEM</strong> stands for <code
class="markup--code markup--li-code">block</code>, <code
class="markup--code markup--li-code">element</code>, <code
class="markup--code markup--li-code">modifier</code>.</li>
<li name="3eb9" id="3eb9" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Block</strong></li>
<li name="f6b4" id="f6b4" class="graf graf--li graf-after--li">A standalone entity that is meaningful on
it’s own.</li>
<li name="7e86" id="7e86" class="graf graf--li graf-after--li">Can be nested and interact with one
another.</li>
<li name="338e" id="338e" class="graf graf--li graf-after--li">Holistic entities without DOM rep can be
blocks.</li>
<li name="f2f0" id="f2f0" class="graf graf--li graf-after--li">May consist latin letters, digits, and
dashes.</li>
<li name="3bfb" id="3bfb" class="graf graf--li graf-after--li">Any DOM node can be a block if it accepts
a class name.</li>
<li name="5c9b" id="5c9b" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Element</strong></li>
<li name="1b95" id="1b95" class="graf graf--li graf-after--li">Part of a block and has no standalone
meaning.</li>
<li name="b5cf" id="b5cf" class="graf graf--li graf-after--li">Any element that is semantically tied to
a block.</li>
<li name="10e2" id="10e2" class="graf graf--li graf-after--li">May consist latin letters, digits, and
dashes.</li>
<li name="9b79" id="9b79" class="graf graf--li graf-after--li">Formed by using two underscores after
it’s block name.</li>
<li name="e282" id="e282" class="graf graf--li graf-after--li">Any DOM node within a block can be an
element.</li>
<li name="a0dc" id="a0dc" class="graf graf--li graf-after--li">Element classes should be used
independently.</li>
<li name="26f1" id="26f1" class="graf graf--li graf-after--li"><strong
class="markup--strong markup--li-strong">Modifier</strong></li>
<li name="6642" id="6642" class="graf graf--li graf-after--li">A flag on blocks or elements. Use them to
change appearance, behavior or state.</li>
<li name="6cca" id="6cca" class="graf graf--li graf-after--li">Extra class name to add onto blocks or
elements.</li>
<li name="745f" id="745f" class="graf graf--li graf-after--li">Add mods only to the elements they
modify.</li>
<li name="6416" id="6416" class="graf graf--li graf-after--li">Modifier names may consist of Latin
letters, digits, dashes and underscores.</li>
<li name="f940" id="f940" class="graf graf--li graf-after--li">Written with two dashes.</li>
</ul>
<p name="f087" id="f087" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">BEM Example</strong></p>
<pre name="7580" id="7580"
class="graf graf--pre graf-after--p"><form class="form form--theme-xmas form--simple"><br> <input class="form__input" type="text" /><br> <input class="form__submit form__submit--disabled" type="submit" /><br></form>/* block selector */<br>.form {<br>}/* block modifier selector */<br>.form--theme-xmas {<br>}/* block modifier selector */<br>.form--simple {<br>}/* element selector */<br>.form__input {<br>}/* element selector */<br>.form__submit {<br>}/* element modifier selector */<br>.form__submit--disabled {<br>}</pre>
<figure name="437f" id="437f" class="graf graf--figure graf--iframe graf-after--pre">
<script src="https://gist.github.com/bgoonz/772d898734b648e7a4f3aa47575bc3ef.js"></script>
</figure>
<h4 name="0d66" id="0d66" class="graf graf--h4 graf-after--figure">If you found this guide helpful feel
free to checkout my github/gists where I host similar content:</h4>
<p name="1c2f" id="1c2f" class="graf graf--p graf-after--h4"><a href="https://gist.github.com/bgoonz"
data-href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">bgoonz’s gists · GitHub</a></p>
<div name="3585" id="3585" class="graf graf--mixtapeEmbed graf-after--p"><a
href="https://github.com/bgoonz" data-href="https://github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz — Overview</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Web Developer, Electrical Engineer JavaScript | CSS |
Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a
href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="6ee74d5200d495ddc7ddad0c92bd6dce" data-thumbnail-img-id="0*Udg3rbeFyslZ9dyl"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*Udg3rbeFyslZ9dyl);"></a>
</div>
<p name="cb1a" id="cb1a" class="graf graf--p graf-after--mixtapeEmbed">Or Checkout my personal Resource
Site:</p>
<div name="4bce" id="4bce" class="graf graf--mixtapeEmbed graf-after--p graf--trailing"><a
href="https://goofy-euclid-1cd736.netlify.app/" data-href="https://goofy-euclid-1cd736.netlify.app/"
class="markup--anchor markup--mixtapeEmbed-anchor"
title="https://goofy-euclid-1cd736.netlify.app/"><strong
class="markup--strong markup--mixtapeEmbed-strong">a/A-Student-Resources</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Edit
description</em>goofy-euclid-1cd736.netlify.app</a><a
href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="260adefce95974b3b8f27566d0434b9c" data-thumbnail-img-id="0*kHvsYWw7LFYl0PB_"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*kHvsYWw7LFYl0PB_);"></a>
</div>
</div>
</div>
</section>
</section>
<footer>
<p>By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on <a
href="https://medium.com/p/938871b4521a"><time class="dt-published"
datetime="2021-03-06T05:22:51.748Z">March 6, 2021</time></a>.</p>
<p><a href="https://medium.com/@bryanguner/learn-css-so-that-your-site-doesnt-look-like-garbage-938871b4521a"
class="p-canonical">Canonical link</a></p>
<p>Exported from <a href="https://medium.com">Medium</a> on April 3, 2021.</p>
</footer>
</article>
</body>
</html>