-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.html
1943 lines (1899 loc) · 97.2 KB
/
css.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
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 lang="en">
<head>
<!-- ad sense tag-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1733919132650092"
crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FBJL1SB5QM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-FBJL1SB5QM');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="Coding-nation">
<meta name="description"
content="CodingNation is a comprehensive code tutorial website, providing beginner to advanced coding tutorials, coding exercises, and coding challenges to help you learn to code and build your skills.">
<meta name="keywords"
content="Coding-nation, CodeNation, HTML tutorials, python tutorials, css tutorials, c tutorials,React js tutorials, javascript tutorials,java tutorials, php tutorials, code editor, online code editor, Codebot,chatbot,quizzes">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="coding-nation.com">
<title>CSS Course | coding-nation</title>
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="../Styles/Notes.css" />
<script>
function changeTitle(newTitle) {
document.title = newTitle;
}
</script>
</head>
<body>
<!--for whole page-->
<div class="contain">
<!--navigation bar-->
<header class="fixed-navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="../index.html">CodingNation</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="navbarNavLinks">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">Courses</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../Python.html">Python</a>
</li>
<li>
<a class="dropdown-item" href="../React.html">React JS</a>
</li>
<li>
<a class="dropdown-item" href="../html.html">HTML</a>
</li>
<li><a class="dropdown-item" href="../css.html">CSS</a></li>
<li>
<a class="dropdown-item" href="../jascri.html">JavaScript</a>
</li>
<li><a class="dropdown-item" href="../cpro.html">C</a></li>
<li>
<a class="dropdown-item" href="../java.html">Java</a>
</li>
<li><a class="dropdown-item" href="../php.html">PHP</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">Practice</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLQuiz.html" target="_blank">HTML
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CSSQuiz.html" target="_blank">CSS
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JSQuiz.html" target="_blank">JavaScript
Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../CQuiz.html" target="_blank">C Quiz</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAQuiz.html" target="_blank">Java
Quiz</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">Exercises</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="../HTMLExer.html" target="_blank">HTML Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CSSExer.html" target="_blank">CSS Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JsExer.html" target="_blank">JavaScript
Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../CExer.html" target="_blank">C Exercise</a>
</li>
<li>
<a class="dropdown-item" href="../JAVAExer.html" target="_blank">Java Exercise</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="../codebot.html" target="_blank">CodeBot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Editor.html" target="_blank">Editor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--sidebar-->
<button class="topics" onclick="toggleSidebar()">Topics▼</button>
<aside class="fixed-sidebar" id="myNav">
<div class="menu">
<h2>Introduction</h2>
<button class="single" id="Information&History" data-index="0"
onclick="changeTitle('Information & History | CodingNation')">
Information & History
</button>
<button class="single" id="YourfirstCSSwebsite" data-index="1"
onclick="changeTitle('Your first CSS website | CodingNation')">
Your first CSS website
</button>
<button class="single" id="HowCSSworks?" data-index="2" onclick="changeTitle('How CSS works? | CodingNation')">
How CSS works?
</button>
<button class="single" id="WaystoaddCSS" data-index="3" onclick="changeTitle('Ways to add CSS | CodingNation')">
Ways to add CSS
</button>
<button class="single" id="CSSSelectors" data-index="4" onclick="changeTitle('CSS Selectors | CodingNation')">
CSS Selectors
</button>
<button class="single" id="CSSComments" data-index="5" onclick="changeTitle('CSS Comments | CodingNation')">
CSS Comments
</button>
<h2>CSS Properties</h2>
<button class="single" id="CSSColors" data-index="6" onclick="changeTitle('CSS Colors | CodingNation')">
CSS Colors
</button>
<button class="single" id="CSSBackgrounds" data-index="7"
onclick="changeTitle('CSS Backgrounds | CodingNation')">
CSS Backgrounds
</button>
<button class="single" id="CSSBorders" data-index="8" onclick="changeTitle('CSS Borders | CodingNation')">
CSS Borders
</button>
<button class="single" id="CSSImages" data-index="9" onclick="changeTitle('CSS Images | CodingNation')">
CSS Images
</button>
<button class="single" id="CSSVideoEmbedding" data-index="10"
onclick="changeTitle('CSS Video Embedding | CodingNation')">
CSS Video Embedding
</button>
<button class="single" id="CSSFonts" data-index="11" onclick="changeTitle('CSS Fonts | CodingNation')">
CSS Fonts
</button>
<button class="single" id="CSSTextStyling" data-index="12"
onclick="changeTitle('CSS Text Styling | CodingNation')">
CSS Text Styling
</button>
<button class="single" id="CSSPadding" data-index="13" onclick="changeTitle('CSS Padding | CodingNation')">
CSS Padding
</button>
<button class="single" id="CSSMargin" data-index="14" onclick="changeTitle('CSS Margin | CodingNation')">
CSS Margin
</button>
<button class="single" id="CSSHover" data-index="15" onclick="changeTitle('CSS Hover | CodingNation')">
CSS Hover
</button>
<button class="single" id="CSSCursors" data-index="16" onclick="changeTitle('CSS Cursors | CodingNation')">
CSS Cursors
</button>
<button class="single" id="CSSLinks" data-index="17" onclick="changeTitle('CSS Links | CodingNation')">
CSS Links
</button>
<button class="single" id="CSSCombinators" data-index="18"
onclick="changeTitle('CSS Combinators | CodingNation')">
CSS Combinators
</button>
<button class="single" id="CSSButtons" data-index="19" onclick="changeTitle('CSS Buttons | CodingNation')">
CSS Buttons
</button>
<button class="single" id="CSSOverflow" data-index="20" onclick="changeTitle('CSS Overflow | CodingNation')">
CSS Overflow
</button>
<button class="single" id="CSSFloat" data-index="21" onclick="changeTitle('CSS Float | CodingNation')">
CSS Float
</button>
<button class="single" id="CSS!important" data-index="22"
onclick="changeTitle('CSS !important | CodingNation')">
CSS !important
</button>
<button class="single" id="CSSMathsFunctions" data-index="23"
onclick="changeTitle('CSSMathsFunctions | CodingNation')">
CSS Maths Functions
</button>
<button class="single" id="CSSSize" data-index="24" onclick="changeTitle('CSS Size | CodingNation')">
CSS Size
</button>
<button class="single" id="CSSPositioning" data-index="25"
onclick="changeTitle('CSS Positioning | CodingNation')">
CSS Positioning
</button>
<button class="single" id="CSSZ-index" data-index="26" onclick="changeTitle('CSS Z-index | CodingNation')">
CSS Z-index
</button>
<button class="single" id="CSSForms" data-index="27" onclick="changeTitle('CSS Forms | CodingNation')">
CSS Forms
</button>
<button class="single" id="CSSNavigationBar" data-index="28"
onclick="changeTitle('CSS Navigation Bar | CodingNation')">
CSS Navigation Bar
</button>
<h2>CSS Designing</h2>
<button class="single" id="CSSDisplay" data-index="29" onclick="changeTitle('CSS Display | CodingNation')">
CSS Display
</button>
<button class="single" id="CSSFlexBox" data-index="30" onclick="changeTitle('CSS FlexBox | CodingNation')">
CSS FlexBox
</button>
<button class="single" id="CSSGrid" data-index="31" onclick="changeTitle('CSS Grid | CodingNation')">
CSS Grid
</button>
<button class="single" id="CSSMediaQueries" data-index="32"
onclick="changeTitle('CSS Media Queries | CodingNation')">
CSS Media Queries
</button>
</div>
</aside>
<!--for content side-->
<main class="main-content">
<div class="content">
<!--previous and next buttons-->
<button id="previous">Previous</button>
<button id="next">Next </button>
<!--Notes-->
<div class="notes" id="div1 ">
<h2>Information & History</h2>
<br /><br />
<p>
   Have you ever wondered about the websites you interact with daily basis, how do they look
without any styling? <br><br>
Well, without Cascading Style Sheets (CSS) this is what this website looks like.</p>
<br /><br>
<h2 style="font-weight: 400;">WITHOUT CSS</h2><br>
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-home/Without%20CSS.webp"
alt="">
<h2 style="font-weight: 400;">WITH CSS</h2><br><img src="../images/home page.png" alt="">
<br>
<h2>History</h2><br>
<p>CSS was created by Håkon Wium Lie to allow web designers to change their website's layout, colours, and
fonts. Originally, websites were meant to be used by researchers only, so the decoration did not matter.
However, the need to make them look nice grew when websites became widespread.
</p><br><br>
<h2>Why the word “Cascade”?</h2><br>
<p>The Cascade determines which CSS rules will be applied when multiple rules for an item are contradicting in
the style sheet. </p>
<br><br>
<h2>Key feature of CSS</h2><br>
<ol>
<li>Used to style and layout webpages</li>
<li>Written in HTML and XML</li>
<li>The last version was CSS 2.1, but seeing the scope everything now comes under the umbrella of CSS
without any version number.</li>
<li>Reusability of the same rules for multiple HTML documents.</li>
</ol><br><br>
<h2>Why learn CSS?</h2><br>
<p>CSS though optional, adds beauty to a website. It helps the user to design a majestic website according to
their own liking. <br><br>
So without wasting any time let’s start with your first CSS website.</p>
</div>
<div class="notes" id="div2" style="display: none;">
<h2>Your first CSS website</h2><br><br>
<h3>Installing VS Code</h3><br>
<li>Go to Google (or any preferred browser).</li>
<li>Type Visual studio code download</li>
<li>Click on download and install it as per your OS</li>
<li>After the installation is done, you need to install the Live Server extension to view the changes you make
to your website.</li><br><br>
<h2>Which Browser should I use for web development?</h2><br>
<p>In general, you can use any web browser that is supported on your device. The most common of these are-
</p><br>
<li>Chrome</li>
<li>Microsoft Edge</li>
<li>Safari</li>
<li>Firefox</li>
<li>Brave</li><br><br>
<p>But as per my personal advice, the Firefox browser gives the best usability and features especially for a
new user. In fact, this tutorial will use Firefox to show the code outputs on our website.</p><br><br>
<h2>Your first CSS website</h2><br>
<p>
So, if you have successfully followed the above steps you can open vs code and create a new file with the
name “first.html”. I assume you’ve enough knowledge so far about HTML to understand the working of HTML
emmet and tags. <br> <br>So, if you have successfully followed the above steps you can open vs code and
create a new file with the name “first.html”. I assume you’ve enough knowledge so far about HTML to
understand the working of HTML emmet and tags. <br><br><a
href="https://www.coding-nation.com/index.html">https://www.coding-nation.com/index.html</a></p><br><br>
<p>Now once you have created an HTML file, type “!” and enter to use the emmet for the default HTML website.
</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-your-first-website/!.webp"
alt=""><br>
<p>This code would then look something like this.</p><br><br>
<img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-your-first-website/default%20HTML.webp"
alt=""> <br>
<p>Rename the title to “First CSS”. This is the title that would be displayed at the top of the website.</p>
<br><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-your-first-website/first.webp"
alt=""> <br> <br>
<p>Now let’s see the output of this code. Remember we had installed a live server extension earlier, you would
see an icon on the bottom of the tray in VS code named “Go live”. You can also right-click to select open
with Live Server to run the code. <br><br>
This is how this website would look like without any text or attributes.</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-your-first-website/preview.webp"
alt=""><br>
<p>You can see here, that the title of the website is the only change we made. This is what an empty HTML
website looks like. Now let’s add some HTML text and try styling that with CSS. <br><br>
In the body tag, write anything you want to. Something like this-</p><br><img
src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1589711837-1.png"
alt=""><br>
<p>Now let’s add some styling. Though there are many ways to add CSS to an HTML website, we’ll look at them
later. For now, in the head tag create a tag with the name style. <br><br>
Add the body tag there, and finally, you’re going to add now your first CSS property. <br>
Type the following lines-</p><br>
<pre class="highlight"><code class="language-css">
<style>
body {
color: yellow;
background-color: rebeccapurple;
}
</style>
</code>
</pre><br><br>
<p>Let’s see the output of this code first, which will give you half of the explanation of what exactly
happened here.</p><br>
<img src="https://static.javatpoint.com/htmlpages/images/html-body-tag.png" alt=""><br>
<p>Pat yourself on the back! You’ve begun your journey with CSS. Throughout these tutorials, you’ll get better
clarity about other properties as well.</p><br><br>
<p>Coming back to this code, <b>here’s the whole code for you</b>.</p><br><img
src="https://www.cs.kent.ac.uk/teaching/10/modules/CO/3/32/FIT_Chapters/Chapter04/images/bodyTagExample.png"
alt=""><br>
<p>To style any piece of code in CSS we need to select that (we selected body tag here). There are many other
ways to do so as well. So just be patient and join with CodingNation to master CSS from Scratch.</p><br><br>
</div>
<div class="notes" id="div3" style="display: none;">
<h2>How CSS works?</h2><br>
<p>We wrote our first CSS style but still, the things wouldn’t be very much clear to an amateur person. Let’s
look at how CSS works on the DOM model.</p><br><br>
<h3>DOM model - Document Object Model</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/how-css-works/DOM-model.webp"
alt=""><br>
<p>Just like how any artist makes a structure of his art, similarly, when our website is loaded in the browser
it creates a structure to manage the execution of different tags of HTML.Using DOM, HTML, as well as CSS of
the web page, can be accessed along with the behaviour of the HTML elements. So, Document Object Model is a
sort of API that represents and interacts with HTML documents.</p><br><br>
<h3>Working of CSS</h3><br>
<p>So basically after the DOM model is created in HTML, the browser parses CSS to the selectors we used
(you’ll learn more about selectors in a while). The properties or the rules written in CSS are then applied
to individual spans.</p><br><br>
</div>
<div class="notes" id="div4" style="display: none;">
<h2>Ways to add CSS</h2><br>
<p>So, there are mainly three ways to add CSS to any HTML document. One of the ways, we have already seen.
</p><br><br>
<h3>Inline CSS:</h3><br>
<p>In this method, we can simply add CSS to the particular HTML tag using the style keyword.</p><br>
<pre class="highlight"><code class="language-css">
<h1 style="color:violet">Hello, I'm using in line CSS></h1>
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/ways-to-add-css/inline%20css.webp"
alt=""><br>
<p>This way minute styling of the HTML document can be easily done without any hassles. <br><br>
But still, generally, this method of adding CSS is not advised as it can create confusion in the tags and
thus decrease the readability of code.
<br>
Also, with this method of styling, you can’t use quotations within inline CSS. The quotations will be
treated as the end of style and therefore stopping the block of code.
</p><br><br>
<h3>Internal CSS:</h3><br>
<p>This method would sound similar to you because we used this method originally to write our first CSS code.
<br><br>
Let’s try that again using another property. Create a style tag in the head of the HTML document and write
the following code.
</p><br>
<pre class="highlight"><code class="language-css">
<style>
body {
color: turquoise;
background-color: brown;
text-decoration: underline;
}
</style>
</code>
</pre><br><br>
<p>This tag selects the body and performs 3 operations on the text written in the body. Therefore the output
would look like this-</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/ways-to-add-css/internal%20css.webp"
alt=""><br>
<p>This way we can use CSS rules in the same document. But the major issue with this is, you can’t use these
rules outside of the document, i.e, the scope of this style sheet is local. Therefore, let’s look at the
most common method of adding the style sheet now…</p><br><br>
<h3>External CSS:</h3><br>
<p>As the name suggests, in this method we explicitly create a file name style (name can be changed) with the
extension ‘.css’. Then we link this file in the head tag of the HTML document.
<br><br>
This style sheet can be linked with any number of documents thus making it easy to use everywhere.
<br><br>
Let’s look at the implementation of the same. First, you need to create a file with the name “style.css” in
the same folder where your HTML file is present. Later using the following command in the Head tag the file
would be linked with the HTML document.
</p><br>
<pre class="highlight"><code class="language-css">
<link rel="stylesheet" href="style.css">
</code>
</pre><br><br>
<p>Here, “rel” defines the relationship between a linked resource and the current document, and “style.css” is
the file we have created. Right now my file is already in the same directory as the HTML file so I don’t
need to give the absolute path. <br><br>If you’ve created your “style.css” somewhere else, please give the
path accordingly. <br><br>This way we can link CSS externally. But you’re on CodingnNation’s website, so
here’s a shortcut for you to reduce the steps of doing so.
</p><br>
<img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/ways-to-add-css/CSS_style_sheet.gif"
alt=""><br><br>
<p>As you can see, I used the basic functionality of VS code and directly created a file called “style.css”.
(I used ctrl+click to open the popup bar)
<br>
These were some ways in which you can link your CSS to your HTML file. But as a rule of thumb, external CSS
is the best method to do so.
</p><br><b></b>
</div>
<div class="notes" id="div5" style="display: none;">
<h2>CSS Selectors</h2><br>
<p>So far we have just glanced at the basics of CSS, and you must have noticed me selecting the body tag every
time I write any rule of CSS in the stylesheet. <br><br>In technical terms, it is known as a selector. It
tells the browser on which portion of the HTML document the styling needs to be applied. <br><br>The syntax
of the selector goes as follows-</p><br>
<pre class="highlight"><code class="language-css">
Selector {
(Declaration)
Property: Value;
}
</code>
</pre><br><br>
<p>There are primarily 5 types of Selectors.</p><br><br>
<h3>1. CSS Element Selector</h3><br>
<p>This is the only method that we have used so far in all our examples. It is used to select an HTML element
which has a particular keyword.
<br><br>
But we don’t recommend using it in proper projects as there can be multiple times the same tag used in the
document. So, overlapping of rules can occur in the stylesheet.
<br><br>
<b>Eg-</b>
</p><br>
<pre class="highlight"><code class="language-css">
<style>
h1 {
color: green;
background-color: aquamarine;
}
p {
color: aquamarine;
background-color: green;
}
</style>
</code>
</pre><br><br>
<p>We can see here, the output is applied to the individual elements of the code.</p><br><img
src="https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/hFR4OOwyH5zWc5XUIcyu.svg" alt=""><br><br>
<h3>2. CSS ID Selector</h3><br>
<p>As I said earlier if we use an element selector we can’t add uniqueness to each element. This is achieved
by the ID selector. We can create unique IDs for each element property and use that for selecting that block
of code.
<br><br>
It is written with “#” followed by the ID name in the style sheet. But before that, we need to define it in
the HTML document as well. Here’s an example-
</p><br>
<img src="https://www.wikitechy.com/css/img/css-images/code-explanation-css-id-selector.png" alt=""><br>
<p>Pay attention to how I created a division to use the id selector. You must be aware of div in HTML but just
for a refresher, it is used to create separate blocks for refining the document structure. <br><br>
I deliberately left an
<p> in the div to show that the “id selector” tag will select every element present in the div. <br><br>
The output of this code would be</p><br><img
src="https://www.techguruspeaks.com/wp-content/uploads/2019/09/selector_id.png" alt=""><br><br>
<h3>3. CSS Class Selector</h3><br>
<p>So roughly you can say that the class selector does the same job as the id selector; the only difference is
we use the id selector for specifically one element of a unique type. On the other hand, a class selector
helps us in grouping various types of elements. Like sometimes we need to style maybe a title and specific
paragraph with the same rules. In that case, we can give the same class to both elements.
<br><br>
The syntax of a class selector is almost similar to the id selector, just “#” is replaced with “.”
<br>
Eg- .class-name{ property : value;}
<br><br>
So here’s a small assignment for you. You’ve to make this layout with just two class selectors. Try it out
and then look down for the solution.
</p><br><img src="https://www.techguruspeaks.com/wp-content/uploads/2019/09/selector_class.png" alt=""><br>
<p>Notice how all of the 4 headings are different. So if you think to use an ID selector or element selector
then you need to create 4 style properties. But with the class selector, it is cut in half.
<br><br>
Here’s the code of it, I hope you tried it yourself first.
</p><br><img src="https://i.ytimg.com/vi/bKsYu1w9W20/maxresdefault.jpg" alt=""><br>
<p>Thus we can see a class selector helps in grouping two distinct elements. But what if you want to group
everything?</p><br><br>
<h3>4. CSS Universal Selector</h3><br>
<p>A universal selector is used to group everything present on the page. Thus it comes in handy while
structuring websites quickly. You’ll learn in detail about the situations in which a universal selector is
helpful. <br><br>
The syntax of a universal selector is simple. Just use “*” to use the selector.
<br><br>
Eg-
</p><br>
<pre class="highlight"><code class="language-css">
<style>
* {
color: brown;
background-color: yellowgreen;
}
</style>
</code>
</pre><br><br>
<p>Run it yourself and see what output it is giving to you.</p><br><br>
<h3>5. CSS Group Selector</h3><br>
<p>Previously we just saw the use of class selectors right? There’s another way to do so as well.</p><br>
<pre class="highlight"><code class="language-css">
<style>
h1, h3 {
color: brown;
background-color: yellowgreen;
}
h2, h4 {
color: yellowgreen;
background-color: brown;
}
</style>
</code>
</pre><br><br>
<p>A grouping selector is used to minimize the code. Commas are used to separate each selector in a grouping.
This reduces the number of lines of code and yes! The code looks clean.</p><br><br>
</div>
<div class="notes" id="div6" style="display: none;">
<h2>CSS Comments</h2><br>
<p>CSS comments are the same as what you must have learnt in any technical language. It is written to explain
the code and is helpful for the users who read that code so that they can understand it easily.<br><br>
Comments are ignored by browsers, and the syntax to write them is: </p><br>
<pre class="highlight"><code class="language-css">
/* Your comment */
</code>
</pre><br><br><img
src="https://th.bing.com/th/id/R.5d11f8d548aaae82d8de5a84b2fdefec?rik=GA4fAYmSJ4Cfcw&riu=http%3a%2f%2fconstructs.stampede-design.com%2fwp-content%2fuploads%2f2016%2f03%2fSWhAdDNLMG5zdGFuVGlWeplil_ViE82kGTiU_-VEWyg4HjJAqCF-lPJmYFwgk8zhRZ7hzC1eGDCmf19lZAPILAzhiCK0JSe4lwfhusGtrAA.png&ehk=dA6r03l8gho1piPSZxuwhdSMQsDa9tWKh11jrqE4YQI%3d&risl=&pid=ImgRaw&r=0"
alt="">
<br><br>
</div>
<div class="notes" id="div7" style="display: none;">
<h2>CSS Colors</h2><br>
<p>We have been glimpsing this property for quite a while in the Introduction portion; so you must be aware
that this property can help us set the colour of the text.</p><br>
<pre class="highlight"><code class="language-css">
Syntax: { color: value;}
</code>
</pre><br><br>
<p>Now there are many ways of giving this value to the colour. Some of the most common are listed below.</p>
<br><br>
<h3>1. RGB format:</h3><br>
<p>The full form of RGB is “Red, Green, Blue” and thus it defines the colour value by taking three arguments
ranging from 0 to 255. <br>
Syntax: {color: rgb(0,0,0);}.
<br><br>
Note that this colour is black, if you change each of the values to 255 white colours of the text would be
selected.
<br><br>
<b>Here’s an example to give you clarity on the RGB colour scheme.</b>
</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-colors/rgb%20color%20code.webp"
alt=""><br><br>
<p>The output of this would be-</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-colors/rgb%20output.webp"
alt=""><br><br>
<h3>2. Hexadecimal notation:</h3><br>
<p>By using the hex code of any colour you can assign that colour to the element.
<br><b>For eg:-</b>
</p>
<br>
<pre class="highlight"><code class="language-css">
h1 {
color: #ff7189;
}
</code>
</pre><br><br>
<p>This way you can give specific values to the colour by searching for their hex codes on google.</p><br><br>
<h3>3. HSL:
</h3><br>
<p>HSL stands for Hue, Saturation and Lightness. Tweaking these values gives different colours, and the syntax
is quite similar to RGB. <br></p>
<br>
<pre class="highlight"><code class="language-css">
Syntax: {color: hsl(hue,saturation,lightness);}.
</code>
</pre><br><br>
<p>Hue refers to the dominant colour family present in that colour, saturation adds the shades to that
dominant colour and lastly, lightness describes the transparency and boldness of that colour. <br><br>
Apart from these methods RGBA and HSLA too are used to give colour to text, but that is something not so
common with beginners.</p><br><br>
</div>
<div class="notes" id="div8" style="display: none;">
<h2>CSS Backgrounds</h2><br><br>
<h3>Background Colour</h3><br>
<p>We’ve already used this property in the Introduction to CSS but just as a refresher, here’s the syntax of
it-</p>
<br>
<pre class="highlight"><code class="language-css">
Syntax: {background-color: color;}
</code>
</pre><br><br>
<p>The colour assignment is exactly similar to how we did for the text previously.</p><br><br>
<h3>Background Image</h3><br>
<p>Often websites add stylish images as a background to make the website look more beautiful. This can be
achieved by using the background-image property.<br>
To use it, just assign the background-image with the URL of the image you want to use. Here’s an example.
</p>
<br>
<pre class="highlight"><code class="language-css">
background-image: url("CSS\ image.png");
</code>
</pre><br><br>
<p>So, before going to the output some of you must be wondering how to write the location of the file, well
with the VS code you can just right-click the file and select the path</p> <br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-backgrounds/copy%20path.webp"
alt=""> <br>
<p>Sorted? Now, this is the image I would be using for the output. Just try to pay attention, the output of
this code is going to shock you.</p><br> <img src="../images/css logo.jpeg" alt=""
style="width: 100px; "><br>
<p>Normally you would expect the image to be displayed once as the background of the website, right? But
that’s not how things work in CSS.</p><br><img src="../images/Screenshot 2023-02-25 184820.png" alt=""> <br>
<p>This is the output of the code written above; CSS repeats the image on both the x and y axis to avoid empty
spaces being left due to the image dimensions. To solve this we will look at the next background property.
</p><br><br>
<h3>Background Repeat</h3><br>
<p>As the name suggests we can control how the image is repeated as the background.</p>
<br>
<pre class="highlight"><code class="language-css">
background-repeat: repeat-x;
</code>
</pre><br><br><img src="../images/Screenshot 2023-02-25 185052.png" alt="">
<br>
<pre class="highlight"><code class="language-css">
background-repeat: repeat-y;
</code>
</pre><br><br><img src="../images/Screenshot 2023-02-25 185306.png" alt="" style="width: 400px;">
<br>
<pre class="highlight"><code class="language-css">
background-repeat: no-repeat;
</code>
</pre><br><br><img src="../images/Screenshot 2023-02-25 185418.png" alt="" style="width: 400px; "><br>
<p>
Apart from this, there are many more properties that you can test on your own. For eg- round, space, etc.
</p>
<br>
<pre class="highlight"><code class="language-css">
Syntax: background-repeat: property; (Here you can test round, space, and other such properties).
</code>
</pre><br><br>
<h3>Background Size</h3><br>
<p>We use this property to set custom sizes for the background of the website. The most common of these are-
<br>
1. Cover: It fits the whole screen according to the dimensions of the HTML document leaving no empty space.
</p>
<br>
<pre class="highlight"><code class="language-css">
background-size: cover;
</code>
</pre><br><br>
<h3>Output:</h3><br><img src="../images/Screenshot 2023-02-25 190152.png" alt=""><br><br>
<p>
2. Contain: Fits the image according to its original dimensions. </p>
<br>
<pre class="highlight"><code class="language-css">
background-size: contain;
</code>
</pre><br><br>
<p>So, the image I chose had a very small dimension and thus this output is very much obvious.</p><br><img
src="../images/Screenshot 2023-02-25 190441.png" alt=""><br>
<p>3. Auto: This is the default size of the image which we saw using the “no-repeat command”. <br><br><b>Note:
All commands listed have been used with no-repeat property, so if you are getting a different output it
could be due to that.</b> <br><br>Apart from these three, you can manually set the width and height of the
background image, as you wish it to be. Here’s a small overview, try running them in your code editor for
more clarity.
<br><br>
1. Equal width and height
</p><br>
<br>
<pre class="highlight"><code class="language-css">
background-size: 100px;
</code>
</pre><br><br>
<p>This command will assign the same value to both the width and height of the background image. <br><br>
2. Distinct width and height</p>
<br>
<pre class="highlight"><code class="language-css">
background-size: 100px 150px;
</code>
</pre><br><br>
<h3>Background Position</h3><br>
<p>This property sets the starting position of the background image. By default, the position is the top left
corner of the website, but using CSS we can change it.
<br><br>
Eg-
</p>
<br>
<pre class="highlight"><code class="language-css">
background-position: top right;
</code>
</pre><br><br>
<h3>Output:</h3><br><img src="../images/Screenshot 2023-02-25 191019.png" alt=""><br>
<p><b>Note:</b> While using the “bottom right/left” as a value, you'll see the background image disappearing
from the main screen. This is because we have been using the image directly in the body. Creating different
divisions will fix this problem.</p><br><br>
<h3>Background Attachment</h3><br>
<p>This property determines what happens to the background image on scrolling. Sometimes we just want the
background to remain the same even if we scroll down the page. In that case, we can use this property.
<br><br>
Eg:
</p>
<br>
<pre class="highlight"><code class="language-css">
background-attachment: fixed;
</code>
</pre><br><br>
<p>After using this the image gets fixated on the screen. </p><br><br>
<h3>Shorthands</h3><br>
<p>We all love shortcuts right, and remembering these many properties isn’t convenient as well. So, for that,
we use shorthands to write everything in a single line. <br><br>
All the properties we used so far, would look something like this in a single line.</p>
<br>
<pre class="highlight"><code class="language-css">
background: purple fixed url("CSS\ image.png") no-repeat right top;
</code>
</pre><br><br>
<h3>Output:</h3><br><img src="../images/Screenshot 2023-02-25 191635.png" alt=""><br><br>
<p>It is your choice which method you want to use. That was all about CSS backgrounds.</p><br><br>
</div>
<div class="notes" id="div9" style="display: none;">
<h2>CSS Borders</h2><br>
<p>Border property helps in creating borders around the text. Various properties in it are discussed in this
module.</p><br><br>
<h3>Border Style</h3><br>
<p>It specifies the type of border a text is going to have. <br><br>
Eg-</p><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20styles.webp"
alt=""><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20styles%20output.webp"
alt=""><br><br>
<h3>Border Width</h3><br>
<p>It sets the width of the border in pixels (or there are key values too like medium, thin, thick) <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
border-style: solid;
border-width: thin;
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20width.webp"
alt=""><br><br>
<p>You can assign values according to your wish or use medium/thick instead of thin if you wish to.</p>
<br><br>
<h3>CSS Border Colour</h3><br>
<p>This property assigns colours to the border of the text. We’ve already discussed in the CSS colours module
different ways to provide the colour value like rgb, hsl, etc. <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
border-style: solid;
border-color: aqua;
</code>
</pre><br><br>
<h3>Output:</h3><br>
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20colour.webp"
alt=""><br><br>
<h3>CSS Border Radius</h3><br>
<p>Rounded borders around buttons look classic, which can be achieved by border-radius property. <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
border-style: solid;
border-radius: 20px;
</code>
</pre><br><br>
<h3>Output:</h3><br>
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20radius.webp"
alt=""><br><br>
<p>In this example, we gave a single value to the property; but if you want to choose for each edge you can
provide two values, three values and four values which resemble the top-left corner, top-right corner,
bottom-left corner, and bottom-right corner. <br><br>
Apart from that, you can control the outer radii as well using “%” or em (relative font size unit in CSS,
we’ll discuss it later in depth).<br><br>
Eg:</p><br>
<br>
<pre class="highlight"><code class="language-css">
border-style: solid;
border-radius: 20px 10em;
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/css%20border%20radius.webp"
alt=""><br><br>
<h3>Border Collapse & Spacing</h3><br>
<p>CSS has these two properties too, to help the user select the spacing between two borders but before you go
testing them, this property requires a table. <br><br>
Which of course we’ll look at later. For now, you can know the syntax of both properties.</p>
<br>
<pre class="highlight"><code class="language-css">
border-collapse: value;
border-spacing: value;
</code>
</pre><br><br>
<h3>Border Shorthand</h3><br>
<p>Just like background shorthands, there exists a border shorthand which takes three properties: width, style
and colour. <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
border: solid red 5px;
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-borders/border%20shorthand.webp"
alt=""><br><br>
</div>
<div class="notes" id="div10" style="display: none;">
<h2>CSS Images</h2><br>
<p>Images help in enhancing website looks therefore CSS provided image styling at our convenience.
<br><br>
Syntax:
</p>
<br>
<pre class="highlight"><code class="language-css">
<img src="source of the image" alt=" ">
</code>
</pre><br><br>
<p>Various CSS rules that can be applied to the image are:</p><br><br>
<h3>Image Border Radius </h3><br>
<p>Rounding the edges of the image. <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
img {border-radius: 10px;}
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-images/1.webp" alt=""><br><br>
<h3>Image Responsiveness </h3><br>
<p>By setting the height as auto you can make the image responsive. <br><br>
Eg:</p>
<br>
<pre class="highlight"><code class="language-css">
img {
max-width: 100%;
height: auto;
}
</code>
</pre><br><br>
<h3>Output:</h3><br><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-images/2.webp" alt=""><br>
<p>Apart from this, you can also use commands like fit-command, max-content, etc to let the image fit
according to its value.</p><br><br>
<h3>Image Opacity </h3><br>
<p>This property controls the transparency of the image visible on the website and ranges from 0 to 1.
<br><br>
Eg:
</p>
<br>
<pre class="highlight"><code class="language-css">
opacity: 0.5;
</code>
</pre><br><br>
<h3>Output:</h3><br><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-images/opacity.webp"
alt=""><br><br>
<h3>Image Filter</h3><br>
<p>Just like the filters on your phone camera, you can do the same with the images you use on your website.
<br><br>
Eg:
</p>
<br>
<pre class="highlight"><code class="language-css">
img {
max-width: 600px;
max-height: 600px;
filter: sepia();
}
</code>
</pre><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-images/filter.webp" alt=""><br>
<p>Other commonly known filters present in CSS are blur(), brightness(), contrast(), drop-shadow(),
grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), etc. As these are just functions
therefore we can pass “%” as the parameters to control how much the filter affects the image.</p><br><br>
</div>
<div class="notes" id="div11" style="display: none;">
<h2>CSS Video Embedding</h2><br>
<p>With the help of CSS and HTML, we can use videos on our website. Here’s an example of the same.</p>
<br><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-video-embedding/css%20video%20embedding%20code.webp"
alt=""><br><br>
<h3>Output:</h3><br><video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video><br><br>
</div>
<div class="notes" id="div12" style="display: none;">
<h2>CSS Fonts</h2><br>
<p>Fonts decide how your text would look on the screen; depending on the website different kinds of fonts are
used. Let’s look at major font attributes.</p><br><br>
<h3>CSS Font Colour</h3><br>
<p>It helps in changing the colour of the font. We have seen this in detail in the colour section. Refer to
this</p><br><br>
<h3>CSS Font Size</h3><br>
<p>This property sets the size of the font. It also has predefined sizes like small, large, larger, medium,
etc. The units of font size are em, px and %. <br><br>
Eg: </p><br><img src="https://www.freecodecamp.org/news/content/images/2021/09/inbuilt-properties.png
" alt=""><br><br>
<h3>Output:</h3><br><img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ek6xgind9rtpi60ycBSCf1neEFb5dgpipLW54AbNCElE_jS7R2WSw7ec73nuLZdPCIQ&usqp=CAU"
alt=""><br>
<h3>CSS Font Style</h3><br>
<p>Using this property, you can display various kinds of font styles like italic, bold, etc. <br><br>
Eg:</p><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-fonts/font%20style.webp"
alt=""><br><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-fonts/font%20style%20output.webp"
alt=""><br>
<h3>CSS Font Variant</h3><br>
<p>Sometimes a paragraph is written in lowercase letters, so converting each word into uppercase seems a
hectic process. Therefore, using this rule, you can do that with just a single line. <br><br>
Eg:</p><br>
<img src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-fonts/font%20variant.webp"
alt=""><br>
<h3>Output:</h3><br><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-fonts/font%20variant%20output.webp"
alt=""> <br>
<h3>CSS Font Weight</h3><br>
<p>This property sets the weight of the text on your website. Various attributes of Font Weight are normal,
bold, lighter, bolder and numbers ranging from 0 to 900. <br><br>
Eg:</p><img
src="https://cwh-full-next-space.fra1.digitaloceanspaces.com/tutorial/css-fonts/font%20weigth.webp"