Skip to content

Commit 1cf1fe9

Browse files
FrankGeckoFrankGecko
committed
ch. 23 and 24
1 parent 228ab99 commit 1cf1fe9

File tree

2 files changed

+139
-15
lines changed

2 files changed

+139
-15
lines changed

‎starter/03-CSS-Fundamentals/notes/index.html

Lines changed: 136 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,155 @@ <h2 class="chapter-heading">Ch. 22 Introduction to CSS</h2>
1414
<img src="img/ch22_how_we_select_and_style_elements.png" alt="how we select and style elements" class="lecture-slide">
1515
</article>
1616

17+
<article class="chapter">
18+
<h2 class="chapter-heading">Ch. 23 Inline, Internal and External CSS</h2>
19+
<article class="chapter-sub-section">
20+
<h3 class="chapter-sub-section-heading">Inline CSS</h3>
21+
<article class="chapter-sub-section">
22+
<h4 class="chapter-sub-section-heading">An Example of inline CSS</h4>
23+
<code>
24+
<pre>
25+
&lt;h1 style="color: blue;"&gt;...&lt;/h1&gt;
26+
...
27+
&lt;h1 style="color: blue;"&gt;...&lt;/h1&gt;
28+
...
29+
</pre>
30+
</code>
31+
</article>
32+
</article>
33+
34+
<article class="chapter-sub-section">
35+
<h3 class="chapter-sub-section-heading">Internal CSS</h3>
36+
<article class="chapter-sub-section">
37+
<h4 class="chapter-sub-section-heading">An Example of Internal CSS</h4>
38+
<code>
39+
<pre>
40+
&lt;!DOCTYPE html&gt;
41+
&lt;html&gt;
42+
&lt;head&gt;
43+
...
44+
&lt;style&gt;
45+
h1 {
46+
color: blue;
47+
}
48+
&lt;/style&gt;
49+
&lt;/head&gt;
50+
&lt;body&gt;
51+
&lt;h1&gt;...&lt;h1&gt;
52+
&lt;/body&gt;
53+
&lt;/html&gt;
54+
</pre>
55+
</code>
56+
</article>
57+
</article>
58+
59+
<article class="chapter-sub-section">
60+
<h3 class="chapter-sub-section-heading">External CSS</h3>
61+
<article class="chapter-sub-section">
62+
<h4 class="chapter-sub-section-heading">An Example of External CSS</h4>
63+
<h5 class="chapter-sub-section-heading">style.css</h5>
64+
<code>
65+
<pre>
66+
h1 {
67+
color: blue;
68+
}
69+
</pre>
70+
</code>
71+
72+
<h5 class="chapter-sub-section-heading">index.html</h5>
73+
<code>
74+
<pre>
75+
&lt;!DOCTYPE html&gt;
76+
&lt;html&gt;
77+
&lt;head&gt;
78+
...
79+
&lt;link href="style.css" rel="stylesheet"&gt;
80+
&lt;/head&gt;
81+
&lt;body&gt;
82+
&lt;h1&gt;...&lt;h1&gt;
83+
...
84+
&lt;h1&gt;...&lt;h1&gt;
85+
...
86+
&lt;/body&gt;
87+
&lt;/html&gt;
88+
</pre>
89+
</code>
90+
</article>
91+
92+
<article class="chapter-sub-section">
93+
<h3 class="chapter-sub-section-heading">Separation of Concern (SoC)</h3>
94+
<p>
95+
A design principle of separating a program into sections, with each section having a singular concern.
96+
</p>
97+
</article>
98+
99+
<article class="chapter-sub-section">
100+
<h3 class="chapter-sub-section-heading">Don't Repeat Yourself (DRY) (Modular Design)</h3>
101+
<p>
102+
When Separation of Concern is adhered to strongly enough, sections of a program can be re-used,
103+
thereby reducing the amount of repetative code.
104+
</p>
105+
</article>
106+
107+
<p>
108+
With 'Modular Design' in mind, the best to worst approach would be external,
109+
internal and then inline CSS.
110+
</p>
111+
</article>
112+
17113
<article class="chapter">
18114
<h2 class="chapter-heading">Ch 24. Styling Text</h2>
115+
<article class="chapter-sub-section">
116+
<h3 class="chapter-sub-section-heading">A Selection of Properties</h3>
117+
<ul>
118+
<li><code>color</code></li>
119+
<li><code>font-family</code></li>
120+
<li><code>font-size</code></li>
121+
<li><code>font-style</code></li>
122+
<li><code>line-height</code></li>
123+
<li><code>text-align</code></li>
124+
<li><code>text-transform</code></li>
125+
</ul>
126+
</article>
19127
<p>Serif means those short, spike-like edges of text.</p>
20-
<p>The style of an element affects the style of its child elements.</p>
128+
<p>The default font-size is 16px.</p>
21129
<p>
22-
The style 'text-align: center' positions the text at the center of
23-
parent element.
130+
It's not about memorizing every property, since therea rea so many, rather get
131+
to know what is possible with CSS, and in time, you will memorize properties that
132+
you use a lot.
24133
</p>
25-
<p>The default font-size is 16px.</p>
26134
</article>
27135

28136
<article class="chapter">
29137
<h2 class="chapter-heading">Ch. 25 Combining Selectors</h2>
30-
<section class="chapter-sub-section">
31-
<p>
32-
A list of selectors can be supplied for a CSS rule (known as a
33-
'list-selector').
34-
</p>
138+
<article class="chapter-sub-section">
139+
<h3 class="chapter-sub-section-heading">Why Combine Selectors?</h3>
140+
<p>It reduces the repetativeness of writing CSS (DRY).</p>
141+
</article>
142+
143+
<article class="chapter-sub-section">
144+
<h3 class="chapter-sub-section-heading">List-Selectors</h3>
35145
<p>
36-
A string of selectors, separated by white-space, can be supplied for a
37-
CSS rule (known as a 'descendent-selector').
146+
A list of selectors supplied for a CSS rule, whereby every match, for example:
38147
</p>
39-
</section>
40-
148+
<code>
149+
<pre>h1, h2, h3, h4, p, li {
150+
...
151+
}</pre>
152+
</code>
153+
</article>
154+
41155
<article class="chapter-sub-section">
42156
<h3 class="chapter-sub-section-heading">Descendent-Selectors</h3>
157+
<p>
158+
A string of selectors, separated by white-space, supplied for a
159+
CSS rule, for example:
160+
</p>
161+
<code>
162+
<pre>p strong {
163+
...
164+
}</pre>
165+
</code>
43166
<p>
44167
Descendent-selectors are incredibly useful, but if it is written as to
45168
reflect the HTML structure, it will lead to code that is harder to

‎starter/03-CSS-Fundamentals/notes/style.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
* {
2+
background-color: #f7f7f7;
3+
color: #444;
24
margin: 0;
35
padding: 0;
4-
color: #444;
5-
background-color: #f7f7f7;
66
}
77

88
.page-container {
99
width: 825px;
1010
margin: 50px auto;
11+
font-family: arial;
1112
}
1213

1314
img {

0 commit comments

Comments
 (0)