From 863641afa60f46d271bf89dea256b2d42fe18de1 Mon Sep 17 00:00:00 2001
From: mjfernez <mjf@mjfer.net>
Date: Tue, 23 Jul 2024 01:04:29 -0400
Subject: Fix css tags

---
 tutorials/www/quick-intro-html-css.html | 88 ++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 44 deletions(-)

(limited to 'tutorials/www/quick-intro-html-css.html')

diff --git a/tutorials/www/quick-intro-html-css.html b/tutorials/www/quick-intro-html-css.html
index 05302d8..1ea2fbf 100644
--- a/tutorials/www/quick-intro-html-css.html
+++ b/tutorials/www/quick-intro-html-css.html
@@ -465,18 +465,18 @@ using a CSS file.</p>
 <p>For any HTML tag, you can set an attribute that applies everytime it
 appears in an HTML document that links to the CSS file. A common
 formatting I use for paragraphs is:</p>
-<pre class="htmlcss"><code>p {
-    margin-top: 1.5%;
-    margin-bottom: 1.5%;
-}</code></pre>
+<div class="sourceCode" id="cb12"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb12-1"><a aria-hidden="true" href="#cb12-1" tabindex="-1"></a>p {</span>
+<span id="cb12-2"><a aria-hidden="true" href="#cb12-2" tabindex="-1"></a>    <span class="kw">margin-top</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb12-3"><a aria-hidden="true" href="#cb12-3" tabindex="-1"></a>    <span class="kw">margin-bottom</span>: <span class="dv">1.5</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb12-4"><a aria-hidden="true" href="#cb12-4" tabindex="-1"></a>}</span></code></pre></div>
 <p>And to highlight code, like you've been seeing, I use:</p>
-<pre class="htmlcss"><code>code {
-    display: inline-block;
-    font-size: 125%;
-    background-color: #d8d8d8;
-    white-space: pre-wrap;
-    word-wrap: break-all;
-}</code></pre>
+<div class="sourceCode" id="cb13"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb13-1"><a aria-hidden="true" href="#cb13-1" tabindex="-1"></a>code {</span>
+<span id="cb13-2"><a aria-hidden="true" href="#cb13-2" tabindex="-1"></a>    <span class="kw">display</span>: <span class="dv">inline-block</span><span class="op">;</span></span>
+<span id="cb13-3"><a aria-hidden="true" href="#cb13-3" tabindex="-1"></a>    <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb13-4"><a aria-hidden="true" href="#cb13-4" tabindex="-1"></a>    <span class="kw">background-color</span>: <span class="cn">#d8d8d8</span><span class="op">;</span></span>
+<span id="cb13-5"><a aria-hidden="true" href="#cb13-5" tabindex="-1"></a>    <span class="kw">white-space</span>: <span class="dv">pre-wrap</span><span class="op">;</span></span>
+<span id="cb13-6"><a aria-hidden="true" href="#cb13-6" tabindex="-1"></a>    <span class="kw">word-wrap</span>: break-all<span class="op">;</span></span>
+<span id="cb13-7"><a aria-hidden="true" href="#cb13-7" tabindex="-1"></a>}</span></code></pre></div>
 <p>I get pretty much all the attribute names just by looking them up <a href="https://www.w3schools.com/CSSref/default.asp">here</a>. But in
 order these lines:</p>
 <ul>
@@ -492,11 +492,11 @@ picker</a></li>
 <p>Images get more styles in CSS than I can document in detail, but one
 important bit you'll want to probably add to all images is the
 following.</p>
-<pre class="htmlcss"><code>img {
-    max-width: 100%;
-    height: auto;
-    width: auto;
-}</code></pre>
+<div class="sourceCode" id="cb14"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb14-1"><a aria-hidden="true" href="#cb14-1" tabindex="-1"></a>img {</span>
+<span id="cb14-2"><a aria-hidden="true" href="#cb14-2" tabindex="-1"></a>    <span class="kw">max-width</span>: <span class="dv">100</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb14-3"><a aria-hidden="true" href="#cb14-3" tabindex="-1"></a>    <span class="kw">height</span>: <span class="bu">auto</span><span class="op">;</span></span>
+<span id="cb14-4"><a aria-hidden="true" href="#cb14-4" tabindex="-1"></a>    <span class="kw">width</span>: <span class="bu">auto</span><span class="op">;</span></span>
+<span id="cb14-5"><a aria-hidden="true" href="#cb14-5" tabindex="-1"></a>}</span></code></pre></div>
 <p>This does the following:</p>
 <ul>
 <li>constrains the image so it doesn't stretch the page</li>
@@ -508,9 +508,9 @@ view on mobile, the image scales to fit the screen; it never gets cutoff
 or distorted.</p>
 <p>In addition to this basic stuff, you can style your images heavily
 using the filter option like so:</p>
-<pre class="htmlcss"><code>img.gray {
-    filter: grayscale(100%)
-}</code></pre>
+<div class="sourceCode" id="cb15"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb15-1"><a aria-hidden="true" href="#cb15-1" tabindex="-1"></a>img<span class="fu">.gray</span> {</span>
+<span id="cb15-2"><a aria-hidden="true" href="#cb15-2" tabindex="-1"></a>    <span class="kw">filter</span>: <span class="fu">grayscale(</span><span class="dv">100</span><span class="dt">%</span><span class="fu">)</span></span>
+<span id="cb15-3"><a aria-hidden="true" href="#cb15-3" tabindex="-1"></a>}</span></code></pre></div>
 <p>Applied:</p>
 <p><img src="/static/media/jazzcat.jpg" style="filter:grayscale(100%)"/></p>
 <p>You can read lots more options for image formatting <a href="https://www.w3schools.com/css/css3_images.asp">here</a> and about
@@ -520,19 +520,19 @@ the filter property <a href="https://www.w3schools.com/CSSref/css3_pr_filter.asp
 others. An example on this site, I dim the icons a bit so they can
 appear nice on dark theme browsers just as well. But I don't want to dim
 <em>all</em> images like in the following example:</p>
-<pre class="htmlcss"><code>img {
-    filter: invert(50%);
-}</code></pre>
+<div class="sourceCode" id="cb16"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb16-1"><a aria-hidden="true" href="#cb16-1" tabindex="-1"></a>img {</span>
+<span id="cb16-2"><a aria-hidden="true" href="#cb16-2" tabindex="-1"></a>    <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span>
+<span id="cb16-3"><a aria-hidden="true" href="#cb16-3" tabindex="-1"></a>}</span></code></pre></div>
 <p>For one, that will only dim black-and-white images; anything else
 will just turn to mush like this:</p>
 <p><img class="icon" src="/static/media/jazzcat.jpg"/></p>
 <p>Instead, I'd like it to just apply to select elements; I can do so by
 extending the tag with a class. On the CSS side:</p>
-<pre class="htmlcss"><code>img.icon {
-    filter: invert(50%);
-}</code></pre>
+<div class="sourceCode" id="cb17"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb17-1"><a aria-hidden="true" href="#cb17-1" tabindex="-1"></a>img<span class="fu">.icon</span> {</span>
+<span id="cb17-2"><a aria-hidden="true" href="#cb17-2" tabindex="-1"></a>    <span class="kw">filter</span>: <span class="fu">invert(</span><span class="dv">50</span><span class="dt">%</span><span class="fu">)</span><span class="op">;</span></span>
+<span id="cb17-3"><a aria-hidden="true" href="#cb17-3" tabindex="-1"></a>}</span></code></pre></div>
 <p>And to implement it in HTML:</p>
-<pre class="htmlcss"><code>&lt;img class="icon" src="/static/media/rss.svg" /&gt;</code></pre>
+<div class="sourceCode" id="cb18"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb18-1"><a aria-hidden="true" href="#cb18-1" tabindex="-1"></a>&lt;img class="icon" src="/static/media/rss<span class="fu">.svg</span>" /<span class="op">&gt;</span></span></code></pre></div>
 <p><img class="icon" src="/static/media/rss.svg"/></p>
 <h4 id="use-the-div-tag-to-make-sections">Use the div tag to make
 sections</h4>
@@ -542,19 +542,19 @@ Let's say you wanted to center a heading, a paragraph, and a picture,
 and constrain them to only part of the page, so that there's some
 margins on the left and right. We can put them all in one content
 section like this:</p>
-<pre class="htmlcss"><code>.content {
-    text-align: center;
-    max-width: 85%;
-}</code></pre>
+<div class="sourceCode" id="cb19"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb19-1"><a aria-hidden="true" href="#cb19-1" tabindex="-1"></a><span class="fu">.content</span> {</span>
+<span id="cb19-2"><a aria-hidden="true" href="#cb19-2" tabindex="-1"></a>    <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
+<span id="cb19-3"><a aria-hidden="true" href="#cb19-3" tabindex="-1"></a>    <span class="kw">max-width</span>: <span class="dv">85</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb19-4"><a aria-hidden="true" href="#cb19-4" tabindex="-1"></a>}</span></code></pre></div>
 <p>Notice, no leading tag. This can be applied to <em>any</em> element,
 but usually we use a placeholder tag called "div." You can think of
 "div" like a divider for content of similar style. In the present
 example, we can use the class we made with a div tag:</p>
-<pre class="htmlcss"><code>&lt;div class="content"&gt;
-&lt;h1&gt;My cat&lt;/h1&gt;
-&lt;p&gt;He's a cool cat&lt;/p&gt;
-&lt;img src="/cat.jpg" /&gt;
-&lt;/div&gt;</code></pre>
+<div class="sourceCode" id="cb20"><pre class="sourceCode html"><code class="sourceCode html"><span id="cb20-1"><a aria-hidden="true" href="#cb20-1" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">div</span> <span class="er">class</span><span class="ot">=</span><span class="st">"content"</span><span class="dt">&gt;</span></span>
+<span id="cb20-2"><a aria-hidden="true" href="#cb20-2" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">h1</span><span class="dt">&gt;</span>My cat<span class="dt">&lt;/</span><span class="kw">h1</span><span class="dt">&gt;</span></span>
+<span id="cb20-3"><a aria-hidden="true" href="#cb20-3" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span><span class="dt">&gt;</span>He's a cool cat<span class="dt">&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
+<span id="cb20-4"><a aria-hidden="true" href="#cb20-4" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">img</span> <span class="er">src</span><span class="ot">=</span><span class="st">"/cat.jpg"</span> <span class="dt">/&gt;</span></span>
+<span id="cb20-5"><a aria-hidden="true" href="#cb20-5" tabindex="-1"></a><span class="dt">&lt;/</span><span class="kw">div</span><span class="dt">&gt;</span></span></code></pre></div>
 <h3 id="mobile-optimization">Mobile Optimization</h3>
 <p>In early development, reading this site on my phone was a painful
 experience. Fortunately, in addition to some tricks above like the
@@ -563,12 +563,12 @@ allow you to directly manipulate your website based on properties of the
 user's device or web browser.</p>
 <p>I won't go into as gory details as <a href="https://www.w3.org/TR/mediaqueries-4/">here</a> or <a href="https://3body-net.medium.com/building-mobile-optimized-layouts-with-css-html-1a736d779b1b">here</a>,
 but for your basic smartphone, you can copy and paste this block:</p>
-<pre class="htmlcss"><code>@media screen and (max-device-width: 480px) {
-    // override your tags here
-    body {
-        font-size: 125%;
-    }
-}</code></pre>
+<div class="sourceCode" id="cb21"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb21-1"><a aria-hidden="true" href="#cb21-1" tabindex="-1"></a><span class="im">@media</span> <span class="dv">screen</span> <span class="kw">and</span> (<span class="kw">max-device-width</span>: <span class="dv">480</span><span class="dt">px</span>) {</span>
+<span id="cb21-2"><a aria-hidden="true" href="#cb21-2" tabindex="-1"></a>    <span class="er">// override your tags here</span></span>
+<span id="cb21-3"><a aria-hidden="true" href="#cb21-3" tabindex="-1"></a>    body {</span>
+<span id="cb21-4"><a aria-hidden="true" href="#cb21-4" tabindex="-1"></a>        <span class="kw">font-size</span>: <span class="dv">125</span><span class="dt">%</span><span class="op">;</span></span>
+<span id="cb21-5"><a aria-hidden="true" href="#cb21-5" tabindex="-1"></a>    }</span>
+<span id="cb21-6"><a aria-hidden="true" href="#cb21-6" tabindex="-1"></a>}</span></code></pre></div>
 <p>This basic example makes the text slightly bigger on smartphone
 screens, but you can change everything you need to. I typically find I
 need to adjust the padding or the margins since it seems mobile browsers
@@ -577,9 +577,9 @@ add a little more style than a typical desktop web browser.</p>
 your CSS attributes, so that size is always defined relative to all the
 other elements. This makes functions like zoom work a lot better. You
 can for example put a pixel value like this:</p>
-<pre class="htmlcss"><code>body {
-    font-size: 14px;
-}</code></pre>
+<div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a aria-hidden="true" href="#cb22-1" tabindex="-1"></a>body {</span>
+<span id="cb22-2"><a aria-hidden="true" href="#cb22-2" tabindex="-1"></a>    <span class="kw">font-size</span>: <span class="dv">14</span><span class="dt">px</span><span class="op">;</span></span>
+<span id="cb22-3"><a aria-hidden="true" href="#cb22-3" tabindex="-1"></a>}</span></code></pre></div>
 <p>But this binds the size to 14 pixels which may look great on desktop,
 but small on a smart phone.</p>
 <h2 id="how-to-look-things-up">How to look things up</h2>
-- 
cgit v1.2.3