Remove css classes (#7720)

* Remove irrelevant 'css' classes

* Remove 'property' class

* Remove 'original document information'

* Remove 'language-html' class

* Remove pointless 'css' class on p

* Remove <u>

* Remove 'internal' and 'default' from links and images

* Remove a couple more 'internal' and 'default' that were missed

* Remove cite element and attribute

* Remove 'codepen' class

* Remove 'cleared' class

* Remove empty <a>

* Remove 'highlight' class

* Remove a leftover 'highlight' class

* Remove stray quotation mark

* Remove 'language-js' class

* Fix various markup issues

* Fix a few remaining conversion issues

* Reinstate heading

Author: wbamberg

files/en-us/web/css/@counter-style/system/index.html

@@ -40,9 +40,7 @@ <h2 id="Syntax">Syntax</h2>
 </ul>
 
 <dl>
- <dt>
- <div class="brush: css"><code>cyclic</code></div>
- </dt>
+ <dt><code>cyclic</code></dt>
  <dd>Cycles through the list of symbols provided. Once the end of the list of symbols is reached, it will loop back to the beginning and start over. This system is useful for simple bullet styles with just one symbol, or for styles having multiple symbols. At least one symbol must be specified in the <code>symbols</code> descriptor, or the counter style is not valid.</dd>
  <dt><code>fixed</code></dt>
  <dd>Defines a finite set of symbols are specified. Once the system has looped through all the specified symbols, it will fall back. This system is useful in cases where the counter values are finite. At least one symbol must be specified in the <code>symbols</code> descriptor or the counter style is not valid. Also an optional {{cssxref("&lt;integer&gt;")}} can be specified after the system, as the value of the first symbol. If this integer is omitted, value of the first integer is taken as <code>1</code>.</dd>

files/en-us/web/css/@media/index.html

@@ -103,7 +103,7 @@ <h3 id="Testing_for_print_and_screen_media_types">Testing for print and screen m
 }
 </pre>
 
-<p>For more examples, please see <a class="internal" href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a>.</p>
+<p>For more examples, please see <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a>.</p>
 
 <h2 id="Specifications">Specifications</h2>
 
@@ -116,7 +116,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a class="internal" href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
  <li>In JavaScript, <code>@media</code> can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.</li>
  <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions#media_features">Extended Mozilla media features</a></li>
  <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions#media_features">Extended WebKit media features</a></li>

files/en-us/web/css/@supports/index.html

@@ -135,7 +135,7 @@ <h3 id="Testing_for_the_support_of_a_selector">Testing for the support of a sele
 
 <p>The CSS Conditional Rules Level 4 specification adds the ability to test for support of a selector—for example {{cssxref(":is",":is()")}}.</p>
 
-<pre class="brush: css highlight[6, 14]">/* This rule won't be applied in browsers which don't support :is() */
+<pre class="brush: css">/* This rule won't be applied in browsers which don't support :is() */
 :is(ul, ol) &gt; li {
   … /* CSS applied when the :is(…) selector is supported */
 }

files/en-us/web/css/_colon_checked/index.html

@@ -159,10 +159,10 @@ <h4 id="Result_2">Result</h4>
 
 <h3 id="Image_gallery">Image gallery</h3>
 
-<p>You can use the <code>:checked</code> pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail. See <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a> for a possible cue.</p>
+<p>You can use the <code>:checked</code> pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail. See <a href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a> for a possible cue.</p>
 
 <div class="note">
-  <p><strong>Note:</strong> For an analogous effect, but based on the <a class="internal" href="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class and without hidden radioboxes, see <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a>, taken from the <a class="internal" href="/en-US/docs/Web/CSS/:hover">:hover</a> reference page.</p>
+  <p><strong>Note:</strong> For an analogous effect, but based on the <a href="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class and without hidden radioboxes, see <a href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a>, taken from the <a href="/en-US/docs/Web/CSS/:hover">:hover</a> reference page.</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

files/en-us/web/css/_colon_focus-visible/index.html

@@ -35,7 +35,7 @@ <h3 id="Basic_example">Basic example</h3>
 &lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
 &lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
 
-<pre class="brush: css highlight[9]">input, button {
+<pre class="brush: css">input, button {
   margin: 10px;
 }
 
@@ -56,7 +56,7 @@ <h3 id="Selectively_showing_the_focus_indicator">Selectively showing the focus i
 
 <pre class="brush: html">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
 
-<pre class="brush: css highlight[13, 19]">custom-button {
+<pre class="brush: css">custom-button {
   display: inline-block;
   margin: 10px;
 }

files/en-us/web/css/_colon_focus/index.html

@@ -37,7 +37,7 @@ <h3 id="HTML">HTML</h3>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css highlight[1, 6]">.red-input:focus {
+<pre class="brush: css">.red-input:focus {
   background: yellow;
   color: red;
 }

files/en-us/web/css/_colon_hover/index.html

@@ -54,10 +54,10 @@ <h4 id="Result">Result</h4>
 
 <h3 id="Image_gallery">Image gallery</h3>
 
-<p>You can use the <code>:hover</code> pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. See <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a> for a possible cue.</p>
+<p>You can use the <code>:hover</code> pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail. See <a href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">this demo</a> for a possible cue.</p>
 
 <div class="note">
-  <p><strong>Note:</strong> For an analogous effect, but based on the <a class="internal" href="/en-US/docs/Web/CSS/:checked"><code>:checked</code></a> pseudo-class (applied to hidden radioboxes), see <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a>, taken from the <a class="internal" href="/en-US/docs/Web/CSS/:checked">:checked</a> reference page.</p>
+  <p><strong>Note:</strong> For an analogous effect, but based on the <a href="/en-US/docs/Web/CSS/:checked"><code>:checked</code></a> pseudo-class (applied to hidden radioboxes), see <a href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">this demo</a>, taken from the <a href="/en-US/docs/Web/CSS/:checked">:checked</a> reference page.</p>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

files/en-us/web/css/_doublecolon_-webkit-scrollbar/index.html

@@ -45,7 +45,7 @@ <h2 id="Examples">Examples</h2>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css; highlight[8-10, 14-18,21-23]">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
   display: block;
   width: 10em;
   overflow: auto;
@@ -72,7 +72,7 @@ <h3 id="CSS">CSS</h3>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html; highlight[1,15,19]">&lt;div class="visible-scrollbar"&gt;
+<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;
   Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
   Proin at nulla elementum, consectetur ex eget, commodo ante.
   Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus

files/en-us/web/css/_doublecolon_placeholder/index.html

@@ -54,7 +54,7 @@ <h4 id="Usability">Usability</h4>
 
 <p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p>
 
-<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
+<pre class="brush: html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
 &lt;span id="user-email-hint" class="input-hint"&gt;Example: [email protected]&lt;/span&gt;
 &lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
 </pre>
@@ -88,7 +88,7 @@ <h3 id="Change_placeholder_appearance">Change placeholder appearance</h3>
 
 <h4 id="HTML">HTML</h4>
 
-<pre class="brush:html line-numbers language-html">&lt;input placeholder="Type here..."&gt;</pre>
+<pre class="brush: html">&lt;input placeholder="Type here..."&gt;</pre>
 
 <h4 id="CSS">CSS</h4>
 
@@ -108,7 +108,7 @@ <h3 id="Opaque_text">Opaque text</h3>
 
 <h4 id="HTML_2">HTML</h4>
 
-<pre class="brush:html line-numbers language-html">&lt;input placeholder="Default opacity..."&gt;
+<pre class="brush: html">&lt;input placeholder="Default opacity..."&gt;
 &lt;input placeholder="Full opacity..." class="force-opaque"&gt;
 </pre>
 

files/en-us/web/css/background-clip/index.html

@@ -41,7 +41,7 @@ <h2 id="Syntax">Syntax</h2>
 background-clip: unset;
 </pre>
 
-<h3 class="brush: css" id="Values">Values</h3>
+<h3 id="Values">Values</h3>
 
 <dl>
  <dt><code>border-box</code></dt>

files/en-us/web/css/background/index.html

@@ -121,7 +121,7 @@ <h4 id="HTML">HTML</h4>
 
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush:css' highlight:[2,6];">.warning {
+<pre class="brush:css">.warning {
   background: pink;
 }
 

files/en-us/web/css/border-bottom-left-radius/index.html

@@ -17,7 +17,7 @@
 
 <p>The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.</p>
 
-<img alt="border-bottom-left-radius.png" class="default internal" src="border-bottom-left-radius.png">
+<img alt="border-bottom-left-radius.png" src="border-bottom-left-radius.png">
 
 <p>A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.</p>
 

files/en-us/web/css/border-bottom-right-radius/index.html

@@ -17,7 +17,7 @@
 
 <p>The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.</p>
 
-<img alt="border-bottom-right-radius.png" class="default internal" src="border-bottom-right-radius.png">
+<img alt="border-bottom-right-radius.png" src="border-bottom-right-radius.png">
 
 <p>A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.</p>
 

files/en-us/web/css/border-radius/index.html

@@ -83,37 +83,37 @@ <h3 id="Values">Values</h3>
  <tbody>
   <tr>
    <td><em>radius</em></td>
-   <td><img alt="all-corner.png" class="default internal" src="all-corner.png"></td>
+   <td><img alt="all-corner.png" src="all-corner.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td>
   </tr>
   <tr>
    <td><em>top-left-and-bottom-right</em></td>
-   <td><img alt="top-left-bottom-right.png" class="default internal" src="top-left-bottom-right.png"></td>
+   <td><img alt="top-left-bottom-right.png" src="top-left-bottom-right.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td>
   </tr>
   <tr>
    <td><em>top-right-and-bottom-left</em></td>
-   <td><img alt="top-right-bottom-left.png" class="default internal" src="top-right-bottom-left.png"></td>
+   <td><img alt="top-right-bottom-left.png" src="top-right-bottom-left.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td>
   </tr>
   <tr>
    <td><em>top-left</em></td>
-   <td><img alt="top-left.png" class="default internal" src="top-left.png"></td>
+   <td><img alt="top-left.png" src="top-left.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
   </tr>
   <tr>
    <td><em>top-right</em></td>
-   <td><img alt="top-right.png" class="default internal" src="top-right.png"></td>
+   <td><img alt="top-right.png" src="top-right.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td>
   </tr>
   <tr>
    <td><em>bottom-right</em></td>
-   <td><img alt="bottom-rigth.png" class="default internal" src="bottom-rigth.png"></td>
+   <td><img alt="bottom-rigth.png" src="bottom-rigth.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td>
   </tr>
   <tr>
    <td><em>bottom-left</em></td>
-   <td><img alt="bottom-left.png" class="default internal" src="bottom-left.png"></td>
+   <td><img alt="bottom-left.png" src="bottom-left.png"></td>
    <td>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td>
   </tr>
  </tbody>

files/en-us/web/css/border-top-left-radius/index.html

@@ -17,7 +17,7 @@
 
 <p>The rounding can be a circle or an ellipse, or if one of the value is <code>0,</code>no rounding is done and the corner is square.</p>
 
-<img alt="border-radius.png" class="default internal" src="border-radius.png">
+<img alt="border-radius.png" src="border-radius.png">
 
 <p>A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.</p>
 

files/en-us/web/css/border-top-right-radius/index.html

@@ -17,7 +17,7 @@
 
 <p>The rounding can be a circle or an ellipse, or if one of the value is <code>0</code> no rounding is done and the corner is square.</p>
 
-<img alt="border-top-right-radius.png" class="default internal" src="border-top-right-radius.png">
+<img alt="border-top-right-radius.png" src="border-top-right-radius.png">
 
 <p>A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.</p>
 

files/en-us/web/css/cascade/index.html

@@ -14,7 +14,7 @@
 ---
 <div>{{CSSRef}}</div>
 
-<p>The <strong>cascade</strong> is an algorithm that defines how to combine property values originating from different sources. It lies at the core of CSS, as emphasized by the name: <em>Cascading</em> Style Sheets. This article explains what the cascade is, the order in which {{Glossary("CSS")}} <a href="/en-US/docs/Web/API/CSSStyleDeclaration">declarations</a> cascade, and how this affects you, the web developer.</span></p>
+<p>The <strong>cascade</strong> is an algorithm that defines how to combine property values originating from different sources. It lies at the core of CSS, as emphasized by the name: <em>Cascading</em> Style Sheets. This article explains what the cascade is, the order in which {{Glossary("CSS")}} <a href="/en-US/docs/Web/API/CSSStyleDeclaration">declarations</a> cascade, and how this affects you, the web developer.</p>
 
 <h2 id="Which_CSS_entities_participate_in_the_cascade">Which CSS entities participate in the cascade</h2>
 
@@ -126,11 +126,11 @@ <h2 id="Example">Example</h2>
 
 <pre class="brush:css;">li { margin-left: 10px }</pre>
 
-<p><strong class="brush:css;">Author CSS 1:</strong></p>
+<p><strong>Author CSS 1:</strong></p>
 
 <pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
 
-<p><strong class="brush:css;">Author CSS 2:</strong></p>
+<p><strong>Author CSS 2:</strong></p>
 
 <pre class="brush:css;">@media screen {
   li { margin-left: 3px }
@@ -141,7 +141,7 @@ <h2 id="Example">Example</h2>
 }
 </pre>
 
-<p><strong class="brush:css;">User CSS:</strong></p>
+<p><strong>User CSS:</strong></p>
 
 <pre class="brush:css;">.specific { margin-left: 1em }</pre>
 

files/en-us/web/css/color_value/index.html

@@ -907,7 +907,7 @@ <h3 id="HSL_colors">HSL colors</h3>
 
 <h4 id="Syntax_3">Syntax</h4>
 
-<p>HSL colors are expressed through the functional <code">hsl()</code> and <code>hsla()</code> notations.</p>
+<p>HSL colors are expressed through the functional <code>hsl()</code> and <code>hsla()</code> notations.</p>
 
 <div class="note">
 <p><strong>Note:</strong> As of CSS Colors Level 4, <code>hsla()</code> is an alias for <code>hsl()</code>. In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.</p>

files/en-us/web/css/cross-fade()/index.html

@@ -71,7 +71,7 @@ <h3 id="Older_implemented_syntax">Older, implemented syntax</h3>
 cross-fade(url(white.png), url(black.png), 100%); /* fully white */
 </pre>
 
-<p>In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from <span class="css">100%, with the difference being the opacity of the second image</span>.</p>
+<p>In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from 100%, with the difference being the opacity of the second image.</p>
 
 <p>The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.</p>
 

files/en-us/web/css/css_background_and_borders/border-radius_generator/index.html

@@ -803,7 +803,7 @@
 
 </pre>
 
-<pre class="brush: js hidden"><code class="language-js">'use strict';
+<pre class="brush: js hidden"><code>'use strict';
 
 /**
  * UI-InputSliderManager

files/en-us/web/css/css_fonts/opentype_fonts_guide/index.html

@@ -38,7 +38,7 @@ <h2 id="Why_you_would_use_them">Why you would use them?</h2>
 <p>While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.</p>
 
 <blockquote>
-<p>OpenType features are like secret compartments in fonts. Unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography. <cite><em>-- Tim Brown, Head of Typography at Adobe</em>.</cite></p>
+<p>OpenType features are like secret compartments in fonts. Unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography. <em>-- Tim Brown, Head of Typography at Adobe</em>.</p>
 </blockquote>
 
 <h3 id="Sometimes_its_substance_not_just_style">Sometimes it's substance, not just style</h3>
@@ -168,10 +168,10 @@ <h2 id="Font_feature_settings">Font feature settings</h2>
   font-feature-settings: "liga" 0, "dlig" 0;
 }</pre>
 
-<h4 class="brush: css" id="More_on_font-feature-settings_codes">More on font-feature-settings codes</h4>
+<h4 id="More_on_font-feature-settings_codes">More on font-feature-settings codes</h4>
 
 <ul>
- <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">'The Complete CSS Demo for OpenType Features'</a> (can't vouch for the truth of the name, but it's pretty big)</li>
+ <li><a href="https://sparanoid.com/lab/opentype-features/">'The Complete CSS Demo for OpenType Features'</a> (can't vouch for the truth of the name, but it's pretty big)</li>
  <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">A list of OpenType features on Wikipedia</a></li>
 </ul>