Skip to content

Commit 2a03ed9

Browse files
culasculas
committed
use code tag instead of span
1 parent 4cde375 commit 2a03ed9

File tree

3 files changed

+36
-36
lines changed

3 files changed

+36
-36
lines changed

‎chapters/concepts.html‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -72,17 +72,17 @@ <h3>Specificity</h3>
7272
<h3>Selector Types</h3>
7373
<p>Different selector types ordered by increasing weight:</p>
7474
<ol>
75-
<li class="fragment">Types (<span class="code">h1</span>) and pseudo-elements (<span class="code">::before</span>)</li>
76-
<li class="fragment">Classes (<span class="code">.red</span>), attributes (<span class="code">[type=radio]</span>), pseudo-classes (<span class="code">:hover</span>)</li>
77-
<li class="fragment">IDs (<span class="code">#title</span>)</li>
75+
<li class="fragment">Types (<code class="code">h1</code>) and pseudo-elements (<code class="code">::before</code>)</li>
76+
<li class="fragment">Classes (<code class="code">.red</code>), attributes (<code class="code">[type=radio]</code>), pseudo-classes (<code class="code">:hover</code>)</li>
77+
<li class="fragment">IDs (<code class="code">#title</code>)</li>
7878
</ol>
7979
<div class="tip fragment">Keep specificity as low a necessary</div>
8080
<aside class="notes">short: explain what pseudo-elements and pseudo-classes are</aside>
8181
</section>
8282

8383
<section>
8484
<h3>Calculate Weight</h3>
85-
<p>The weight can be represented in this format: <span class="code">id-class-tag</span>.</p>
85+
<p>The weight can be represented in this format: <code class="code">id-class-tag</code>.</p>
8686
<pre class="fragment"><code class="hljs css" data-trim data-noescape>div.banner li <span class="fragment">/* 0-1-2 */</span></code></pre>
8787
<pre class="fragment"><code class="hljs css" data-trim data-noescape>#upload > button <span class="fragment">/* 1-0-1 */</span></code></pre>
8888
<pre class="fragment"><code class="hljs css" data-trim data-noescape>form [type="password"] <span class="fragment">/* 0-1-1 */</span></code></pre>
@@ -130,10 +130,10 @@ <h3>Inherited Properties</h3>
130130
<p>When specified, these properties' values are applied as default for all child elements.</p>
131131
<p>Typical examples are <span class="hl">text related</span> properties like:</p>
132132
<ul>
133-
<li><span class="code">color</span></li>
134-
<li><span class="code">font-family</span>, <span class="code">font-size</span>, …</li>
135-
<li><span class="code">line-height</span></li>
136-
<li><span class="code">text-align</span></li>
133+
<li><code class="code">color</code></li>
134+
<li><code class="code">font-family</code>, <code class="code">font-size</code>, …</li>
135+
<li><code class="code">line-height</code></li>
136+
<li><code class="code">text-align</code></li>
137137
</ul>
138138
</section>
139139

@@ -142,11 +142,11 @@ <h3>Non-inherited Properties</h3>
142142
<p>Specifying values for these properties will only apply them to the targeted elements.</p>
143143
<p>Typical examples are <span class="hl">layout related</span> properties like:</p>
144144
<ul>
145-
<li><span class="code">margin</span>, <span class="code">padding</span></li>
146-
<li><span class="code">height</span>, <span class="code">width</span></li>
147-
<li><span class="code">border</span></li>
148-
<li><span class="code">flex</span>, <span class="code">grid</span></li>
149-
<li><span class="code">position</span></li>
145+
<li><code class="code">margin</code>, <code class="code">padding</code></li>
146+
<li><code class="code">height</code>, <code class="code">width</code></li>
147+
<li><code class="code">border</code></li>
148+
<li><code class="code">flex</code>, <code class="code">grid</code></li>
149+
<li><code class="code">position</code></li>
150150
</ul>
151151
</section>
152152
</section>
@@ -279,19 +279,19 @@ <h2>Positioning</h2>
279279

280280
<section>
281281
<h3>Positioning</h3>
282-
<p>The <span class="code">position</span> property determines where the element is rendered:</p>
282+
<p>The <code class="code">position</code> property determines where the element is rendered:</p>
283283
<ul>
284-
<li class="fragment"><span class="code">static</span>: default, rendered in page flow</li>
285-
<li class="fragment"><span class="code">relative</span>: can be offset from its parent, original
284+
<li class="fragment"><code class="code">static</code>: default, rendered in page flow</li>
285+
<li class="fragment"><code class="code">relative</code>: can be offset from its parent, original
286286
space will remain occupied
287287
</li>
288-
<li class="fragment"><span class="code">absolute</span>: removes element from the page flow, allows
289-
positioning in relation to the closest parent not <span class="code">static</span></li>
290-
<li class="fragment"><span class="code">fixed</span>: like <span class="code">absolute</span> but in
288+
<li class="fragment"><code class="code">absolute</code>: removes element from the page flow, allows
289+
positioning in relation to the closest parent not <code class="code">static</code></li>
290+
<li class="fragment"><code class="code">fixed</code>: like <code class="code">absolute</code> but in
291291
relation to the window
292292
</li>
293-
<li class="fragment"><span class="code">sticky</span>: hybrid of <span class="code">relative</span>
294-
and <span class="code">fixed</span></li>
293+
<li class="fragment"><code class="code">sticky</code>: hybrid of <code class="code">relative</code>
294+
and <code class="code">fixed</code></li>
295295
</ul>
296296
</section>
297297
</section>
@@ -391,7 +391,7 @@ <h3>Margin vs. Padding</h3>
391391
<span class="arrow-right"></span> control box
392392
</li>
393393
<li class="fragment">Note: padding is included in the background colour/image and click region (e.g. for links or buttons)</li>
394-
<li class="fragment">Margin can be set to <span class="code">auto</span> or negative numbers</li>
394+
<li class="fragment">Margin can be set to <code class="code">auto</code> or negative numbers</li>
395395
</ul>
396396
</section>
397397

‎chapters/tooling.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,10 +117,10 @@ <h3>Utility Libraries</h3>
117117
<h3>Vendor Prefixes</h3>
118118
<p>Vendor prefixes allow us to use newer features not yet considered stable. This approach is falling out of favor though.</p>
119119
<ul>
120-
<li><span class="code">-webkit-</span>: Chrome-based browsers, Safari</li>
121-
<li><span class="code">-moz-</span>: Firefox</li>
122-
<li><span class="code">-ms-</span>: IE, old Edge (no longer relevant)</li>
123-
<li><span class="code">-o-</span>: Opera (no longer relevant)</li>
120+
<li><code class="code">-webkit-</code>: Chrome-based browsers, Safari</li>
121+
<li><code class="code">-moz-</code>: Firefox</li>
122+
<li><code class="code">-ms-</code>: IE, old Edge (no longer relevant)</li>
123+
<li><code class="code">-o-</code>: Opera (no longer relevant)</li>
124124
</ul>
125125
<div class="tip fragment">Utility libraries such as Tailwind provide this out-of-the-box (if required).</div>
126126
</section>

‎chapters/various.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ <h2>at-rules</h2>
7070

7171
<section>
7272
<h3>at-rules</h3>
73-
<p>They start with an <span class="code">@</span> and are special instructions to provide:</p>
73+
<p>They start with an <code class="code">@</code> and are special instructions to provide:</p>
7474
<ul>
7575
<li><b>meta information</b></li>
7676
<li><b>conditional rules</b></li>
@@ -80,15 +80,15 @@ <h3>at-rules</h3>
8080

8181
<section>
8282
<h3>Imports</h3>
83-
<p>Include style rules from other CSS files with <span class="code">@import</span>:</p>
83+
<p>Include style rules from other CSS files with <code class="code">@import</code>:</p>
8484
<pre><code class="hljs css" data-trim data-noescape>
8585
@import url("my-imported-styles.css");
8686
</code></pre>
8787
</section>
8888

8989
<section>
9090
<h3>Media Queries</h3>
91-
<p>Media Queries (with <span class="code">@media (condition) {…}</span>) are used to style elements depending on certain features, like ...</p>
91+
<p>Media Queries (with <code class="code">@media (condition) {…}</code>) are used to style elements depending on certain features, like ...</p>
9292
</section>
9393

9494
<section>
@@ -163,7 +163,7 @@ <h3>Container Queries</h3>
163163

164164
<section>
165165
<h3>Font Face</h3>
166-
<p><span class="code">@font-face</span> can be used to specify custom fonts.</p>
166+
<p><code class="code">@font-face</code> can be used to specify custom fonts.</p>
167167
<pre><code class="hljs css" data-trim data-noescape>
168168
@font-face {
169169
font-family: "Inter";
@@ -181,7 +181,7 @@ <h3>Font Face</h3>
181181

182182
<section>
183183
<h3>Feature Queries</h3>
184-
<p>Apply rules based on browser support with <span class="code">@supports</span>.</p>
184+
<p>Apply rules based on browser support with <code class="code">@supports</code>.</p>
185185
<pre><code class="hljs css" data-trim data-noescape>
186186
@supports selector(h2 > p) {
187187
/* CSS rules using this kind of selector … */
@@ -251,7 +251,7 @@ <h3>Transition triggers</h3>
251251
</section>
252252

253253
<section>
254-
<p>The property <span class="code">transition</span> (also a shorthand) allows for some simple animation between different states of other properties:</p>
254+
<p>The property <code class="code">transition</code> (also a shorthand) allows for some simple animation between different states of other properties:</p>
255255
<pre><code class="hljs css" data-trim contenteditable>
256256
transition: property duration easing timing-function delay;
257257
</code></pre>
@@ -512,10 +512,10 @@ <h3>Colors</h3>
512512
<div>
513513
<p>They take:</p>
514514
<ul>
515-
<li>named colors (e.g. <span class="code">red</span>)</li>
516-
<li>RGB as hexadecimal (e.g. <span class="code">#ff0000</span>)</li>
517-
<li>… or with <span class="code">rgb(255, 0, 0)</span></li>
518-
<li>other formats (<span class="code">hsl()</span>, <span class="code">hwb()</span>)</li>
515+
<li>named colors (e.g. <code class="code">red</code>)</li>
516+
<li>RGB as hexadecimal (e.g. <code class="code">#ff0000</code>)</li>
517+
<li>… or with <code class="code">rgb(255, 0, 0)</code></li>
518+
<li>other formats (<code class="code">hsl()</code>, <code class="code">hwb()</code>)</li>
519519
</ul>
520520
</div>
521521
</div>

0 commit comments

Comments
 (0)