CSS3_WebDev_Essentials/Intro.html at main · seoProductions/CSS3_WebDev_Essentials · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning CSS3</title>
    <link rel="stylesheet" href="Intro.css">
</head>
<body>
<div class="bordered">
    <h1>How CSS works</h1>
</div>


<p>CSS is a necessity if you want to make any page look nice and appealing. Cool.
    How do we add CSS to our page? </p>

<h4>Use the <strong>Link</strong> tag</h4>
<p>This is a closed tag, only needing attributes to specify the CSS file you want.
    <strong >NOTE:</strong> you can <em>link</em> multiple CSS files; For example,
    you can have a CSS file for Fonts, another for background, another for layout, ect.</p>
<p><strong>NOTE:</strong> Place this tag in the <strong>Head</strong> of the HTML file</p>

<div class="bordered">
    <h4>Attributes</h4>
    <ul>
        <li>href : path to the file </li>
        <li>type : type of document. <strong>This SHOULD be <i>text/css</i></strong> </li>
        <li>rel :  relationship to the HTML page. <strong>this SHOULD be <i>stylesheet</i></strong> </li>
    </ul>
</div>
<h4>You can also utilize the <strong>style</strong> tag. This embeds the CSS code
    directly into the HTML. Please note, this is only recommended for very small scale page's,
</h4>

<hr>

<h1 class="bordered">CSS Selectors</h1>
<p> CSS rules contain 2 parts: <strong>Selector</strong> and <strong>Declaration</strong> </p>
<h4> Lets take a look at the possible selectors CSS uses</h4>
<ul class="bordered" id="list">
    <li>
        <b>
            Universal Selector <span class="syntax"> * </span>
        </b>
        <p> Applies styling to all elements in the document </p>
    </li>
    <li>
        <b>
            Type Selector <span class="syntax"> h1, hr, div </span>
        </b>
        <p> Applies styling to all elements specified </p>
    </li>
    <li>
        <b>
            Class Selector <span class="syntax"> .class </span> <i> or </i> <span class="syntax"> h1.class </span>
        </b>
        <p> Applies styling to all elements in a given class.</p>
    </li>
    <li>
        <b>
            ID Selector <span class="syntax"> #top </span>
        </b>
        <p> Applies styling to all elements in a given ID </p>
    </li>
    <li>
        <b>
            Child Selector <span class="syntax"> p>a </span>
        </b>
        <p> Applies if a specified element is a direct child of another </p>
    </li>
    <li>
        <b>
            Descendant Selector <span class="syntax"> p a </span>
        </b>
        <p> Applies if a specified element is a descendant of another </p>
    </li>
    <li>
        <b>
            Adjacent Selector <span class="syntax"> p+a </span>
        </b>
        <p> Targets the first element <b>a</b> adjacent & after <b>p</b> </p>
    </li>
    <li>
        <b>
            General Sibling Selector <span class="syntax"> p~a </span>
        </b>
        <p> Targets the first element <b>a</b> adjacent & before/after <b>p</b> </p>
    </li>
</ul>

<h2>Precedence</h2>

<p>Another thing about CSS is precedence. CSS will consider more importaint &
    more specific Selectors first than, say, *.</p>

<h4> You can always place <br>
    <span class="syntax"> !important</span> <br>
     within your element's property to tell CSS, <q>hey this is important, don't over-ride this</q>.
     If 2 selectors happen to be <i>identical</i>, the latter one will take precedence.
</h4>

<h2>Inheritance</h2>
<p>Some properties happened to be automatatically inherited from the parent Element. An example
    of this would be <span class="syntax">font-family</span>. There are properties that aren't
    inherited - for a good reason</p>

<h4> You can always force inheritance of a certain property using <br>
    <span class="syntax">font-family: inherit; </span></h4> <br>


</body>
</html>