-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
8376 lines (7710 loc) · 425 KB
/
index.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
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ index.html of uofm-intro-to-css ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/jpg" href="./images/favicon.ico"/>
<title>U of Michigan's Intro to CSS3</title>
<link rel="stylesheet" href="./css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="title" content="University of Michigan's Intro to CSS3">
<meta name="author" content="Brian Bauska (bbauska)">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
content="University of Michigan's Introduction to CSS3! In this course you
will learn how to style your pages by taking advantage of the power of CSS3.
We will focus on both proper syntax (how to write your styling rules) and
the importance of accessibility design (making sure that your style enhances
your site, not make it harder to navigate).">
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/images/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~ script function: scrollFunction() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<script>
<!-- get the button -->
var mybutton = document.getElementById("myBtn");
<!-- when the user scrolls down 10px from the top of the document, show the "Top" button -->
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// when the user clicks on the button, scroll to the table of contents near top of document.
function topFunction() {
document.getElementById('table-of-contents').scrollIntoView();
}
</script>
<header id="title-block-header">
<h1 style="text-align:center"><b>Introduction to CSS3</b></h1>
<h6 style="text-align:center">(by Colleen van Lent, PhD - University of Michigan)</h6>
</header>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~ 01. u - michigan css logo introduction to css3 (01) ~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image001.webp"
title="University of Michigan CSS logo Introduction to CSS"
alt="University of Michigan CSS logo Introduction to CSS."
style="width:20%" />
<br><br>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 03. u - michigan logo (01) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image003.webp"
title="University of Michigan logo"
alt="University of Michigan logo."
style="width:20%" />
<h2 id="table-of-contents"><a href="#table-of-contents">Table of Contents</a></h2>
<h2><strong>Course Information</strong></h2>
<h2 id="#1-00">Week 1</h2>
<h2>Week One: Getting Started with Simple Styling</h2>
<p>Welcome to Introduction to CSS3! In this course you will learn how to
style your pages by taking advantage of the power of CSS3. We will focus
on both proper syntax (how to write your styling rules) and the
importance of accessibility design (making sure that your style enhances
your site, not make it harder to navigate). It is so important that you
jump in ready to make mistakes and typos in this course. The only way
you will really understand the material is to practice typing it in on
your own as often as possible.</p>
<ol type="1">
<li><b><a href="#1-01">1.01 Course Welcome</a></b></li>
<li><b><a href="#1-02">1.02 Cascading Style Sheets</a></b></li>
<li><b><a href="#1-03">1.03 Colors</a></b></li>
<li><b><a href="#1-04">1.04 Styling Your Text</a></b></li>
<li><b><a href="#1-05">1.05 Code Together</a></b></li>
<li><b><a href="#1-06">1-06a & 06b Display and Visibility - Part 1 & 2</a></b></li>
<li><b><a href="#1-07">1-07 Homework Description</a></b></li>
</ol>
<h2 id="#2-00">Week 2</h2>
<h2>Week Two: Advanced Styling</h2>
<p>Colors and fonts are just the start to styling your page. The nice
thing about starting with these properties is that they are usually very
straightforward to implement. You pick a color and boom - instant,
expected results. This week we move on to new properties that tend to
require a little bit of tweaking to get the desired results. In
particular we will talk about the Box Model, background images, opacity,
float, columns, visibility, and designing for different browsers.</p>
<ol type="1">
<li><b><a href="#2-01">2-01 Box Model</a></b></li>
<li><b><a href="#2-02">2-02 Code Together</a></b></li>
<li><b><a href="#2-03">2-03 Styling Links and Lists</a></b></li>
<li><b><a href="#2-04">2-04 Advanced Selectors</a></b></li>
<li><b><a href="#2-05">2-05 Browser Capabilities</a></b></li>
<li><b><a href="#2-06">2-06 Code Together</a></b></li>
<li><b><a href="#2-07">2-07 Designing for Accessibility</a></b></li>
<li><b><a href="#2-08">2-08 Homework Description</a></b></li>
</ol>
<h2 id="#3-00">Week 3</h2>
<h2>Week Three: Pseudo-classes, Pseudo-elements, Transitions, and Positioning</h2>
<p>Have you ever noticed on a web page that some links are blue and
others are purple, depending upon if you have clicked on the links? How
is it possible to style some anchor tags and not others? This week you
will learn how to style pseudo-classes (e.g., a link that has been
visiting, an element that has the mouse hovering over it) and
pseudo-elements (e.g., the first-letter of a heading, the first line of
a paragraph). These elements are not difficult to style, but do require
careful coding. It is also the first step to adding simple animation to
your site. We end this week with the subject of positioning -- how to
get elements to stick to a certain part of your page. Think about
annoying pop-up ads. How do the programmers get them to stay RIGHT IN
THE MIDDLE OF THE SCREEN despite the fact that you keep trying to scroll
them away.</p>
<ol type="1">
<li><b><a href="#3-01">3-01 Pseudo Classes and Elements</a></b></li>
<li><b><a href="#3-02">3-02 Transitions</a></b></li>
<li><b><a href="#3-03">3-03 Transforms</a></b></li>
<li><b><a href="#3-04">3-04 Code Together - Transitions</a></b></li>
<li><b><a href="#3-05">3-05 Positioning</a></b></li>
</ol>
<h2 id="#4-00">Week 4</h2>
<h2>Week Four: Putting It All Together</h2>
<p>This week I am going to do some code review. I will show you how I
used pseudo-classes and pseudo-elements to style a table. Then I give
you a demonstration of three different navigation bars that utilize
different styling options. We will want to step back and talk about how
these different options may affect the accessibility of our site. The
final step to completing this course is the completion of the
peer-graded project. You will have the chance to demonstrate the ability
to follow styling guidelines while still putting your own personal touch
on the project. Just remember, you need to validate your work for proper
syntax and accessibility.</p>
<ol type="1">
<li><b><a href="#4-01">4-01 Styling Tables</a></b></li>
<li><b><a href="#4-02">4-02 Creating Navigation Menus</a></b></li>
<li><b><a href="#4-03">4-03 Accessible Navigation</a></b></li>
<li><b><a href="#4-04">4-04 Creating Navigation Menus 2</a></b></li>
<li><b><a href="#4-05">4-05 Creating Navigation Menus 3</a></b></li>
<li><b><a href="#4-06">4-06 Homework Description</a></b></li>
<li><b><a href="#4-07">4-07 Conclusion</a></b></li>
</ol>
<h3>Where To Go from Here?</h3>
<p>If you would like to do more now that you have finished this course,
I have a few recommendations. The most important thing is that you
continue to practice your skills and always have "something" that you
are working on.</p>
<h2 id="syllabus">i. Syllabus</h2>
<h2 id="welcome">Welcome</h2>
<p>Welcome to Introduction to CSS3. CSS stands for Cascading Style
Sheets, a method of styling your HTML documents with various colors,
fonts, layouts, and spacing. But that is just the beginning. You can
also do some "cool" stuff such as creating transitions or adding
animations. There are so many things you can do with CSS, that we focus
on the following:</p>
<ul>
<li>Rules and syntax (how to write CSS code)</li>
<li>Simple styling (fonts, colors, borders)</li>
<li>More styling (background images and opacity)</li>
<li>Positioning - how to get the different parts of your page to go where
you want them to go</li>
<li>Pseudo-classes - styling things that aren't even there!</li>
</ul>
<p>Throughout the entire course there will be an emphasis on the
importance of accessibility. Not only will you style your site, but you
will test it and other sites on the POUR accessibility principles to
ensure that your styling is enhancing your site, not putting up unseen
roadblocks.</p>
<h2>How this course works:</h2>
<p>This course assumes that you already know how to write HTML code and
are ready to style your pages. In each module you will be asked to do
the following:</p>
<h2>Read module lectures</h2>
<p>The information has been broken down into pieces to help you learn
the material in the smallest chunks that still give you enough
information to do something with it. The goal is to give you the ability
to listen to these during any time you have. You will find that some of
the videos have material that makes sense to you at once. Sometimes you
may want to replay other videos to clarify the material.</p>
<h2>Code with module lectures</h2>
<p>Some of the videos are not traditional lectures, instead they are
videos where I demonstrate the concepts from an earlier lecture. I
highly recommend that you code along with me while you watch these
videos. <em><b><u>The key to success in this course is in writing
code.</u></b></em> I put these videos in so that you have something
specific to practice. It is also a great way for you to see how often I
mess up when I am coding!!</p>
<h2>Read extra materials</h2>
<p>Each module will include reading material. It is impossible to learn everything
you need to learn just by listening to the lectures. There are suggested readings
to go along with this course. I also encourage you to seek out other resources
online. Anyone who wants to work with technology needs to understand that it is
important to update your skills.</p>
<h2>Quizzes</h2>
<p>The first three modules will each have a graded quiz. These quizzes
are intended to reinforce your confidence in the material, not "trick"
you. As often as possible each question will be linked to a specific
lecture or reading. You can take the quizzes as many times as you like,
but there is a limit on how many times you can take each quiz in a
certain time period. Occasionally I include an ungraded quiz to help
students track their current progress and prepare them for the graded
quiz.</p>
<h2>Materials</h2>
<p>There will also be material provided in many of the modules. These may range
from links to recent articles to videos on pioneers in the fields of design and
accessibility. None of these materials will be required for the quizzes, but
rather provide additional ways for you to branch out and learn more about the
history of the field or the emerging ideas.</p>
<h2>Communication</h2>
<p>Communication for this course is done via the Discussion boards. The best way
to utilize the discussion board is to search for your topic before posting. If
you can't find an answer, please try to post your question to the appropriate
week. The mentors and Course liaison do a great job of helping people. And, of
course we rely on students to help each other as well. If you want to contact
me directly, I do check my Colleen@UMSI Twitter account. I cannot respond to
emails.</p>
<h2>Participation Strategies</h2>
<p>Engaged learning looks different for everybody. In this course, we hope you
will define your own measures of success and engage with the material in a way
that best suits your needs. We recognize and celebrate the diverse ways learners
engage in courses. As you go through this course, we hope you will reflect on your
unique skills, needs, and aspirations, and engage in the course material in a way
that aligns with your own goals. While the course provides time estimates for
completion, you should feel empowered to engage in the material in whatever ways
make sense to you.</p>
<h2>Ground Rules</h2>
<p>We expect everyone to be mindful of what they say and its potential impact on
others. The goal is to have respectful discussions that do not violate the community
space created for these conversations. Here are some productive ways to engage in
this course:</p>
<ul>
<li><b>Participate:</b> This is a community. Read what others have written and
share your thoughts.</li>
<li><b>Stay curious:</b> Learn from experts and each other by listening and
asking questions, not making assumptions.</li>
<li><b>Keep your passion positive:</b> When replying to a discussion forum post,
respond with thoughts on what was said, not about the person who posted. Avoid
using all caps, too many exclamation points, or aggressive language.</li>
</ul>
<p>We expect all learners to abide by our full <a
href="https://docs.google.com/document/d/18Ucy-lT33FmkDDYdtxHEJ_nRytVLr_XGRVq2moAsPB4/edit"
target="_blank" rel="noopener noreferrer">Learner Engagement Policy</a>. We will
specifically be monitoring this course for language that could be considered
inflammatory, incivil, racist, or otherwise unacceptable for this learning space,
and we will remove language deemed such.</p>
<p><em>Please note that external study groups on applications like WhatsApp are
not affiliated or endorsed by the University of Michigan. We strongly discourage
joining external groups and instead recommend interacting with your fellow learners
within the platform.</em></p>
<p><em>Please express caution if you do join or post any personal information in
these forums or in these groups. These forums are publicly accessible and any
information you post may be collected, published, or used in an exploitative
manner (scams, etc).</em></p>
<h2>Academic Honesty</h2>
<p>All submitted work should be your own and academic dishonesty is not allowed.
Academic dishonesty can be defined as:</p>
<ul>
<li>Copying answers</li>
<li>Copying words, ideas, or other materials from another source without giving
credit to the original author</li>
<li>Copying from your peers within the course</li>
<li>Employing or allowing another person to alter or revise your work, and then
submitting the work as your own</li>
</ul>
<h2>Course Support</h2>
<p>Questions and discussion of course material should take place within the course
itself. Please do not contact instructors or teaching assistants off the platform,
as responding to individual questions is virtually impossible. We encourage you
to direct your questions to [forum], where your question might be answered by a
fellow learner or one of our course team members. For technical help please contact
the <a href="https://learner.coursera.help/hc/en-us" target="_blank" rel="noopener
noreferrer">Coursera Learner Help Center</a>/<a href="https://support.edx.org/hc/en-us"
target="_blank" rel="noopener noreferrer">edX Help Center</a>/
<a href="https://about.futurelearn.com/about/faq?category=course-sign-up-and-completion"
target="_blank" rel="noopener noreferrer">FutureLearn FAQs</a> support forums.</p>
<h2>Accessibility</h2>
<p>We are committed to developing accessible learning experiences for the widest
possible audience. We recognize that learners with disabilities (including but
not limited to visual impairments, hearing impairments, cognitive disabilities,
or motor disabilities) might need more specific accessibility-related support to
achieve learning goals in this course.</p>
<p>Please use the <a href="https://forms.gle/sxxDQvstDYJF9PtR6"
target="_blank" rel="noopener noreferrer">accessibility feedback form</a> to let
us know about any accessibility challenges such as urgent issues that keep you
from making progress in the course (e.g., missing or inadequate alt-text, captioning
errors).</p>
<h2>Diversity, Equity, Inclusion, and Justice</h2>
<p><b>We welcome all learners to this course.</b> People like you are joining
from all over the world and we value this diversity. We strive to create a
community of mutual respect and trust, where people from all backgrounds,
identities and views are valued and heard without the threat of bias, harassment,
intimidation, or discrimination. We pay attention to your feedback, how different
types of learners experience this course, and aim to make improvements so the
course can best serve everyone. We hope you enjoy learning about topics that are
important to you.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<h2 id="1-01">1.01 Course Welcome/Overview</h2>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 02. course welcome (1.01) (07) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image002.webp"
loading="lazy"
title="1.01 Course Welcome to Introduction to CSS"
alt="1.01 Course Welcome to Introduction to CSS."
style="width:40%" />
<p>Hello, everybody. Welcome to Introduction to CSS3. In the next four weeks,
we're going to learn how to take plain simple HTML5 code and turn it into
something really beautiful.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~ 04. what this course will cover (08) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image004.webp"
loading="lazy"
title="What This Course Will Cover"
alt="What This Course Will Cover."
style="width:40%" />
<p>What will be doing over the next four weeks? Well, the main focus will be on
learning about cascading style sheets. We're going to talk about why they are a
better way to style than what people used to use in the early 2000's and late 1990's.</p>
<p>Next, you're going to learn the syntax. Once you know that it's a better way
to use it, how can we make sure that you're writing really good code? Once you've
figured out the syntax, we'll go on and we'll also talk about development tools.</p>
<p>When you do web design, it's very rare that you just sit there and you code,
and you don't look to the left, or look to the right, or go look on the web. Instead,
you're going to be using other tools to see how you can change your code without
actually having to write the code beforehand.</p>
<p>Finally, as always, we'll be talking about accessibility issues. It's
always fun to add colors and animations and cool things to our page.
When we do that, we want to make sure that we don't do it at the cost of
accessibility. We want make sure everyone can see everything on our
page.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 05. week one (08) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image005.webp"
loading="lazy"
title="Week One: Getting your feet wet"
alt="Week One: Getting your feet wet."
style="width:40%" />
<p>Let's talk about what we're going to do on each of the four weeks. In
week one, the focus is really on just getting you started, getting your
feet wet and getting you a little bit of confidence in knowing that you
can do this.</p>
<p>We're going to start by talking about the three common methods for
styling code. And once we cover them, we're going to talk about how
these methods interact, which ones are better in different situations.
And different things that you can feel confident knowing how you can
best style your page in any specific situation.</p>
<p>Next, we'll talk about the basic styling of fonts. By the end of week
one, I really want you to be able to take a web page and change
something really obvious. Can you change the text so that it's cursive,
or underline, or a different color? Finally, we'll very briefly talk
about placing elements on the page. This is going to be an important
element of our entire four weeks. Is trying to figure out how you can
put your header over here or an image over there. And it can be tricky
but that's okay. Because we're going to repeat it week after week.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 06. week two (09) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image006.webp"
loading="lazy"
title="Week Two: Box Model, Styling Links & Lists, Adv Selectors & Browser Capabilities"
alt="Week Two: Box Model, Styling Links & Lists, Adv Selectors & Browser Capabilities."
style="width:40%" />
<p>In week two, we will discuss the box model. This is a very common
concept for any web developer, because we talk about how every element
on your page is actually a box.</p>
<p>Next, we'll talk about styling links and lists. We all love the links
in our page. The web is the web because we have links, so how can we
make them look really cool? Next, we'll talk about advanced selectors.
In the beginning of the course, we'll be very careful about styling
simple elements such as styling a list or styling a paragraph or styling
a header.</p>
<p>Next, we're going to want to talk about what if we only want to style
some of the links, not all of the links?</p>
<p>Finally, we'll talk about browser capabilities. Just like when you
learned about HTML5, you learned that some browsers support some tags
while others don't. In the same way, browsers treat CSS differently. And
I want you to know how to best react to that.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 07. week three (10) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image007.webp"
loading="lazy"
title="Week Three: Pseudo Classes and Elements, Transitions, Transforms, & Positioning"
alt="Week Three: Pseudo Classes and Elements, Transitions, Transforms, & Positioning."
style="width:40%" />
<p>In week three, we talk about pseudo classes and elements. These are
this cool idea of how we can make different things happen when we hover
over a page. It also talks about how we can style just certain things
like the last paragraph in the page or the first paragraph.</p>
<p>We'll also talk about transitions. This is a way of changing the look
of one of the elements on your page, which is very similar to the idea
of transforms.</p>
<p>Transforms are how we can rotate things on the page, skew them,
making them bigger and smaller, and doing different things like
that.</p>
<p>Finally, again we'll talk about positioning, how we can make things
go in a certain spot and stay there all the time. We've all seen really
annoying pop-up menus and different pop-up ads. Now you can make your
own annoying pop-up ad.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 08. week four (10) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image008.webp"
loading="lazy"
title="Week Four: Styling a Table & Styling a Navigation Menu"
alt="Week Four: Styling a Table & Styling a Navigation Menu."
style="width:40%" />
<p>In week four, we're not really going to cover new material. Instead,
it's going to be samples, samples, and more examples and samples. In
particular, I want to show you different ways that we can style a table
and different ways for styling a navigation menu.</p>
<p>The bulk of week four will really be spent working on your final
project. I want you to know right off who this class is for and if
you're ready and are interested in taking it.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 09. who is this class for? (11) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image009.webp"
loading="lazy"
title="Who is this class for?"
alt="Who is this class for?"
style="width:40%" />
<p>First of all, you don't want to take this class unless you know about
HTML5 already. You may be taking a course on it. You may be just going
online and reading about it, but you need to feel comfortable if I
mention things such as tags or elements or validation.</p>
<p>Next, this class is for people who have persistence. You will never
code your pages the right way the first time. Even the second time,
sometimes the third, fourth, and fifth time. It's really about enjoying
the whole process of really wanting to get something to work and feeling
little victories when it does happen.</p>
<p>Finally, this class is for those who are willing to do more than what
I'm going to do in these lectures. There's only so much information I
can give to you. It's up to you to practice it, tweak it, change it, and
try to really see what happens beyond what I'm showing you.</p>
<p>If you want to know a little bit more about me and why I'm choosing
to teach this class, here's a little bit of background information. I
have a PhD in Computer Science. But to be honest, that's really the
least important part. What I really have is two decades of teaching
experience. And during this time, I've taught a wide range of students
and a wide range of topics. And I found that I really enjoy explaining
things in different ways, and I really enjoy reaching out to students
who maybe have more questions. My emphasis on education has always been
running around the classroom, helping students debug, meeting with them
one on one.</p>
<p>Let's talk about how you can succeed in this course. In a perfect
world, you get together with friends, you'd code together, you'd learn
from each other’s' mistakes, and you'd also learn from each other’s'
successes. While we don't have that one-on-one experience, make sure you
use the message boards. Not only to ask questions but to see what other
questions people are putting. You can learn a lot that way. I really
can't stress enough that I don't want you to feel like I'm trying to
trick you, or that I'm giving some sort of gotcha problems. If you're
ever working on something and you're stuck on it for more than 15
minutes, move on. This is CSS, it's styling. There's always something
you can change, and you can find something else that you prefer to work
on.</p>
<p>Make sure that you're looking things up on your own. There's no way
I'll be able to teach you everything you need to know. And, that's why
you can go on the Internet and look at different resources, and see if
there's something out there that you would like to recreate.</p>
<p>Finally, it's really important that you practice this as much as you
can. If you do the minimum required for this course, and you're happy
with that, that's great. I'm glad that you're able to learn something.
But if you really want to be a web developer, it's so important that
you're enjoying what you're doing, and you're going off on your own, and
you're creating something beautiful whenever you can. I welcome you to
the class, and I can't wait for you to join us as we learn more about
cascading style sheets. Thanks.</p>
<h2>Resources</h2>
<h3>Software:</h3>
<p>The <b>preferred</b> way to code in this class is editor software (Notepad++,
TextWrangler, Sublime, etc.). If you do not have the ability to access or install
this type of software, there is an online editor at:
<a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro"
target="_blank" rel="noopener noreferrer">Online Editor</a>.</p>
<p>You can also use CodePen (there is a link below). It is important that you find
a way that you can enter code and still test your work.</p>
<h3><b>Code:</b></h3>
<p>All of the code I cover is available from a CodePen repository. I hope you can
play with the code to test the different concepts we will cover. Here is a link to
the CodePen repository for the Week One code. <a href="http://codepen.io/collection/noEQed/"
target="_blank" rel="noopener noreferrer">Week 1 code</a>.</p>
<p>Here is a list of the lectures this week that use CodePen, and the name of each
file that they use:</p>
<h3>Building Your First Web Page by Shay Howe</h3>
<p>This tutorial can be found at <a
href="https://learn.shayhowe.com/html-css/building-your-first-web-page/"
target="_blank" rel="noopener noreferrer">Building Your First Webpage</a>.</p>
<p>This is a great resource for a lot of my students. I particularly like
that the author uses CodePen. This is a great feature that lets you
open, edit, and run the code as you learn about it. The lesson "Building
Your First Page" gives a brief overview of HTML and the structure of
pages. I am going to assume you already know about that, but it is a
good refresher. The second part of this reading explains many of the key
terms that I will be using throughout this course.</p>
<p>You might find it easier to read through this after going through the
lectures. Or better yet, read this first, watch the lectures, and then
review the material again, but this time play with the code to see if
you can change the pages.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<h2 id="1-02">1.02 Cascade Style Sheets</h2>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 10. intro to css (1.02) (14) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image010.webp"
loading="lazy"
title="1.02 Introduction to CSS"
alt="1.02 Introduction to CSS."
style="width:40%" />
<p>Welcome to our first truly technical lecture in our CSS course. It's about adding
style to your pages. If you've come to this course with me from our HTML course,
you know that I know that you can make general HTML files. But up until now, you
may not have styled them at all.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~ 11. the 'cascading' part of css (14) ~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image011.webp"
loading="lazy"
title="The 'Cascading' Part of CSS; External, Internal and Inline"
alt="The 'Cascading' Part of CSS; External, Internal and Inline."
style="width:40%" />
<p>What I want you to know before we even begin styling, and you start
putting your own little twists on the pages, is that the same HTML file
may look different when viewed on different browsers, and there's a few
reasons for that.</p>
<p>First, some tags aren't supported in some browsers while they are in
others. If you've ever used the details tag, you can see that sometimes
your page will have little arrows or different little markings on them
and other times it won't. That comes down to tags that are supported.
But also, every single browser has its own different default style. And
what that default style says is this is how I want my H1 headings to
look, or this is how much padding I want around my paragraphs. If you go
to the exact same page on different browsers, it may be hard to tell,
but you'll see tiny little differences in how things are made. But in
general, this default look is really plain. And most people I know, they
don't want their pages to look plain. They want to put in some style.
Let's begin looking at ways you can do this. One way to add style is to
think about adding it directly into the text.</p>
<p>Now as HTML evolved, we went from having tags that were distinctly
about color, and about different centering, and things like that. To
saying no, no, we don't want tags that have to do with style. We only
want tags that have to do with content. People said, okay, we can do
that, but I want to make it pretty.</p>
<p>How they did this is they added style attributes. In this case, I've
taken an h1 tag and added the style attribute and simply said
<b><mark>"color:blue"</mark>.</b> And what this is going to do
is it's going to make this particular h1 heading have blue font to it.
It's very simple. It's a nice way to just go in and add simple styling
to your page. However, this still kind of breaks our rule of wanting to
separate content from style. Because if you want to change it to, say,
red or green or something like that later, you're going to have to go in
and change the tag, because you're going to have to change the
attribute. I really tried to go out of my way to not use this at all,
and instead, get in the habit of doing things the right way. And the
right way to style your pages is to use CSS.</p>
<p>Cascading style sheets are basically a way for you to write rules
that say how you want to style all the paragraphs, or how you want to
style all your headings, or how you want to style some of your images.
It's a really nice, specific way that everyone can follow to make these
styling choices. And the rules are set up like this.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~ 12. cascading style sheet: selector (15) ~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image012.webp"
loading="lazy"
title="Cascade Style Sheet: Selector"
alt="Cascade Style Sheet: Selector."
style="width:40%" />
<p>First you have to put up your selector, and selector is just kind of
a fancy way of saying what it is you want to style. In our case, we'll
start off by just giving the selector different tag names such as h1 or
paragraph. Once you find which tag it is you want to style, you say
which property it is you want to change. We can look at things such as
color, background color, how much space we put around it, we're going to
cover all of those.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ 13. cascading style sheet: selector, #2 (16) ~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image013.webp"
loading="lazy"
title="Cascade Style Sheet: Selector, #2"
alt="Cascade Style Sheet: Selector, #2."
style="width:40%" />
<p>But for right now, we're going to start off really simple and deal
with colors. Then, you have to give each property a value, saying which
color you want it to be. On one side, we have the very generic, how we
write a rule. And on the other, I've written a very specific rule that
says, hey, whenever you see an h1 heading, I want you to make the font
color blue. We've done exactly what we did when we embedded using the
style tag, but now it's very generic, and we're not talking about a
specific heading. We're not talking about a specific tag.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ 14. cascading style sheet: selector, #3 (16) ~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image014.webp"
loading="lazy"
title="Cascade Style Sheet: Selector, #3"
alt="Cascade Style Sheet: Selector, #3."
style="width:40%" />
<p>When you write those rules, the syntax is very important. A lot of times, when you
write HTML, the browser is really nice to you and if you forget to close a tag it says,
that's okay, I know what she wants me to do and it'll go ahead and put the page up
anyway. When you're doing CSS, if you're sloppy with what we call your syntax, you're
going to get in trouble. The brackets and the semicolons are very important. Let me show
you again when we go back here, you can see that I've got a beginning bracket and a
closing bracket, and I've got this semicolon right at the end. You need to remember to
include those.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 15. rule syntax (17) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image015.webp"
loading="lazy"
title="Rule Syntax"
alt="Rule Syntax."
style="width:40%" />
<p>And one of the reasons I talk about this is that when you start writing your code,
when you pick a good editor, and most editors are pretty good, such as Sublime or
TextWrangler, TextEdit, Notepad++, they will put colors in for you. So, all of a sudden
if you're looking at your CSS rules and you're like, woah, I kind of expected things to
be different colors, but instead everything's white or everything's red. It gives you
this hint that you've messed up on your rule syntax. In the same line, I want to put
comments in to help you debug and explain to yourself what you're doing. This is how
comments are done in CSS. You just do the /*, */ again.</p>
<p>What happens if you want to do more than just one property? What if instead of saying
just you want the color to be blue, you also want the background color to be yellow?
Well, no problem. You can have as many property value combinations as you want. You just
need to remember to separate them with semicolons.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 16. multiple properties (17) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image016.webp"
loading="lazy"
title="Multiple Properties; font color and background-color"
alt="Multiple Properties; font color and background-color."
style="width:40%" />
<p>In this case, again, I've set the color to blue and the background
color to yellow.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 17. internal style sheet, #1 (18) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image017.webp"
loading="lazy"
title="Internal Style Sheet, #1"
alt="Internal Style Sheet, #1."
style="width:40%" />
<p>All right so now that you know how to write a rule how do we actually get them to
work? There's two ways and the first way I'm going to tell you about is called using an
Internal Style Sheet. As you can see over here in my code, I've got the basic template
of our file. And inside the head tags, I've put this style tag in, that's where you're
going to want to put your rules, they're defined right within that style.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 18. internal style sheet, #2 (18) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image018.webp"
loading="lazy"
title="Internal Style Sheet, #2"
alt="Internal Style Sheet, #2."
style="width:40%" />
<p>Inside the style tag, I've added the h1, the color blue, and I've ended my style tag.
What happens now is that when the browser opens your page, it gets to the head section it
says, oh great, she wrote some rules, let's see what she wants me to do. And it's going
to know to go through your page and apply this rule to all the H1 tags. And if you have
multiple rules including paragraphs, images, things like that, it's going to know, I
want to apply this to all instances in the entire file.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19. internal style sheet, #3 (19) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image019.webp"
loading="lazy"
title="Internal Style Sheet, #3"
alt="Internal Style Sheet, #3."
style="width:40%" />
<p>There is a really good chance you're going to mess up because I do this 80% of the
time when I'm developing in class, and what I do is I forget to close this style tag.
And if you forget to close that style tag down at the bottom, well actually your page
may end up being blank. So don't freak out when you first start doing this if your page
is blank, it probably means you forgot to close the style tag. All right.</p>
<p>Internal style sheets are really nice when you're just trying to style up one page.
All right? And I often do it just so I can keep all my code in one file instead of going
back and forth and back and forth. Imagine that you have site where you're going to have
10, 20, 1,000 different pages and you want them all to have a very consistent look about
them. You don't want to have to go in and say if you want to change a color, you don't
want to have to go in and open every single one of those files so you can change the
color to red or green.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 20. external style sheet, #1 (19) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image020.webp"
loading="lazy"
title="External Style Sheet, #1"
alt="External Style Sheet, #1."
style="width:40%" />
<p>Instead, what you want to use is you want to use something called external style
sheets. The way it works with an external style sheet is that you put your rules
in a different file. You open up a file, you're going to save it something such
as like my style with a .css file extension. Now the browser knows, oh everything
in HTML, that's the content. Everything in .css, that's the layout. When you make
your external style sheet, it looks just like we just did in the internal, except
for you don't use a style tag. Then, once you've put your rules in a separate file,
all you need to do is add a link into the head section. In this case, I've gone in,
I've put my link, I need to let it know the relationship because of the style sheet.
And you have to remember to put the file name. Once again this is where it's going
to be really important that you're naming things in ways that they make since to
you. You can link to as many different style sheets as you want, most of the time
we start with one.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 21. external style sheet, #2 (20) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image021.webp"
loading="lazy"
title="External Style Sheet, #2"
alt="External Style Sheet, #2."
style="width:40%" />
<p>Now that we've had that style sheet, every single file that links to it will
all share that style sheet. Remember when I mentioned that you might have a site
with 10, 20, 1,000 pages to it and you decide to change that color from blue to
red or green or something like that? This is great. All you need to do is open
up style.css, change one line of code, and you've now just changed potentially
thousands of pages.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ 22. the 'cascading' part of css, again (20) ~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image022.webp"
loading="lazy"
title="The 'Cascading' part of CSS, again"
alt="The 'Cascading' part of CSS, again."
style="width:40%" />
<p>Let's talk for a second about this idea of cascading style sheets. What does
it mean that we're cascading? Well, when the browser goes to make your page, the
first thing it's going to look at is go, all right, maybe they're not telling me
anything. How do I normally make h1 headings? How big do I make that font? Have
its own kind of default values. But then it goes and it looks and it says, oh are
there any external style sheets. Because if so, I'm going to overwrite my browser
defaults and put in the rules that are in this external style sheet instead.</p>
<p>Next, it's going to check for internal style. That style you have in the head
section. Because in general, the browser thinks, maybe there's something really
special about this particular page, and here she wants me to do these rules instead.</p>
<p>Finally, any of those inline styles where you use the attribute tag, those are
going to have the highest precedence of all. It can be really confusing, because
you might start writing up different rules, and you can't figure out why some are
working and some aren't. This is where the cascading part comes in again. First
it looks at defaults, then external, then internal, and then inline. Which is why
really you want to avoid using any inline style because it pretty much nullifies
all your styling rules.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 23. rule precedence, #1 (21) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image023.webp"
loading="lazy"
title="Rule Precedence, #1"
alt="Rule Precedence, #1."
style="width:40%" />
<p>Alright, so we know how those four go, but what if you have a selector and, you've
linked to two or three different style sheets, and that same H1 has been defined to be
blue, green, and yellow, but in different files. How does the browser know what to do?</p>
<p>Well, how it works is that the rules from the most recent file have precedence. And
what I mean by the most recent file, it means it goes up into the head section and it
goes one, two, three, and it kind of looks at what order you listed them, and the last
one you listed is the one that's going to have precedence.</p>
<p>Okay? Well, what if you have a selector in the same file, and you've written H1
multiple times. This can actually happen quite a bit. Especially if you decide to go off
and be part of a big development company, you write some code, and then someone else
writes some code, or, as I tell my undergrads, maybe you went out and had a really good
time one night, and you came home and decided, I'm going to code! And you forget that
you've already written some rules. Well, if that's the case, once again, the browser's
going to look at the one it saw last.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 24. rule precedence, #2 (22) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image024.webp"
loading="lazy"
title="Rule Precedence, #2"
alt="Rule Precedence, #2."
style="width:40%" />
<p>In this case, I have two rules for h1. One writes at the color to blue. And I said,
hey I want you to use this aerial font family. And then later, there might be a whole
bunch of stuff in here, might be nothing, and I say hey, I want you to use a font family
Times. How the browser's going to look at this is it's going to go down, and say, I'm
going to make all the font blue, and I'm going to go ahead and make the font family
Times. It's just always is going to use the last one it saw.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 25. rule precedence, #3 (22) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image025.webp"
loading="lazy"
title="Rule Precedence, #3"
alt="Rule Precedence, #3."
style="width:40%" />
<p>Again, the most recent rule has precedence, whether it was inside your code or it
came from different files.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 26. !important (22) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image026.webp"
loading="lazy"
title="!important"
alt="!important."
style="width:40%" />
<p>There is, however, one way to overwrite this. Suppose you're writing something and
you know you want something to be that way. You don't care if anyone else overwrites it.
You really want to make sure people aren't using inline style, different things like
that. What you can use is you can use the <b><mark>!important</mark></b> Attribute
right here. Right here I've got font-family, Arial, and I've got important right here.
Even though later I decide to overwrite it with times, the browser's going to say nope,
I know that she really wanted me to use Arial, and it works out.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 27. styled heading (23) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image027.webp"
loading="lazy"
title="Styled Heading"
alt="Styled Heading."
style="width:40%" />
<p>Let's go ahead and look at an example of what I mean by all those
precedents. I know just listening to me can get a little overwhelming,
so I've got a quick example showing you the different ways and then I'll
kind of wrap up this lecture.</p>
<p>Let's start off using the style attribute. As you can see in here,
I've written the code, and I've used the style attribute for this h1
heading, and this one paragraph. In this case, I want my h1 heading to
be blue, and my paragraph to be red. And what I really want to show you
is that the only paragraph that was changed to red text or red font was
the first one. The other one's still black. The only way to style is if
you go in and you change each and every tag to make it look the way you
want it to. If I wanted all the paragraphs to be red, I'd have to go in
there and put style equals, style equals. In this example there's only
two, but you can imagine how it'd get really annoying if you had a lot,
okay.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 28. internal styled heading (23) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image028.webp"
loading="lazy"
title="Internal Styled Heading"
alt="Internal Styled Heading."
style="width:40%" />
<p>In our next example we have an internal style. In this case, I've put
in my style tag up at the top and I've added rules for paragraphs and H1
headings, and it should handle both. Now there's nothing in here
anymore, my tag is all by itself. And if you look at the result, let's
go over here.</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~ 29. internal styled heading, #2 (24) ~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image029.webp"
loading="lazy"
title="Internal Styled Heading, #2"
alt="Internal Styled Heading, #2."
style="width:40%" />
<p>You can see that now, even though my HTML doesn't have any type of
styling in at all, both of the paragraphs are red over here and so's the
heading. All right?</p>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 30. external styled heading (24) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<img class="displayed"
src="./images/image030.webp"
loading="lazy"
title="External Styled Heading"
alt="External Styled Heading."
style="width:40%" />
<p>The last example I had for you is, I took these exact same rules and
I put them off into an external style sheet. Again, there's no style tag
here. It's just the rules themselves. And then I had to go back to the
HTML file, and you can see right up here, near the top, I have hey,
let's link to the style sheet I want. Now, I want to point this out very