HTML Template

Introduction

This is the last time I am rewriting these freaking web pages - Dave

I know what you are thinking. This is not the last time. Bah. Simply seeing another web page with a cool font or layout and there I go again editing a hundred web pages. This rewrite credit goes to Alex Kladov discussing classless CSS.

This web page does not use CSS classes. It uses only HTML elements which are styled directly. This removes classes from the HTML source and the CSS style sheet. It is a massive simplification and makes it easier to manage a fleet of web pages. In cases where the default style needs to be overridden, use inline styles. Inline styles isolate the overrides to a single web page.

The HTML template is a model that showcases the standard web page design and features. It is a basis for new web pages, and a consistent guide for existing pages. A shared CSS file is key. Changes to the shared CSS file affects all of the web pages without having to edit them individually.

Blockquote

This is an example of a blockquote. Blockquotes are indented and centered.

Color Scheme

The CSS style sheet supports a light and dark color scheme depending on the operating system display settings.

Preformatted text block.
123456789012345678901234

Preformatted text block.
123456789012345678901234

CSS

This is the Classless CSS stylesheet.

HTML Source

This is the HTML source for this web page.

This is the code to display the index.html source code for this web page.

<pre id="source" style="height: 400px; overflow: auto;"></pre>
  <script>
    fetch('index.html')
      .then(r => r.text())
      .then(t => {
        document.getElementById('source').textContent = t;
      });
  </script>

Table

Table cell text alignment is left by default. This works well for text labels. Numbers are usually aligned to the right. Instead of using a CSS class use an inline style.

<td style="text-align: right;">.989</td>

Video