Skip to main content

Text formatting example

The site can run in Light Light-Mode or Dark-Mode. Dark-Mode has been renamed HW Mode.
Selecting either at the index page will cause a change of the main colours and fonts.

Below is how the formatting of documents will look, for respectively selected Mode.

Light Mode is based upon the following CSS code 

Light Mode CSS 
/* =============== Default Light Mode Styles =============== */

/* ========== Global Base Settings ========== */

/* Base settings for the page */
html {
    font-family: Arial, sans-serif;
    line-height: 1.6; /* Improved readability */
    color: #333333; /* Softer dark gray text */
    background-color: #FFFFFF; /* White background for light mode */
    margin: 0;
    padding: 20px; /* Adds padding around main content */
}

/* ========== Headings (H1 - H5) ========== */

/* Headings are styled with a clear color hierarchy and spacing for readability */
h1 {
    font-size: 2.5em;
    color: #003466; /* Dark blue for main heading */
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 2em;
    color: #004080; /* Slightly lighter blue for second-level headings */
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h3 {
    font-size: 1.75em;
    color: #004d99;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}
h4 {
    font-size: 1.5em;
    color: #0059b3;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}
h5 {
    font-size: 1.25em;
    color: #0066cc;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ========== Paragraphs and Text ========== */

/* General paragraph styling for better readability */
p {
    font-size: 1.1em; /* Slightly larger font size for readability */
    line-height: 1.6; /* Relaxed line spacing */
    margin-bottom: 1.2em; /* Space after each paragraph */
}

/* ========== Links (a) ========== */

/* Links are styled with a distinct color and an underline on hover */
a {
    color: #0066cc; /* Blue link color */
    text-decoration: none;
}
a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
}

/* ========== Lists (ul, ol, li) ========== */

/* List styling with extra padding for readability */
ul, ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.5em; /* Indented list items */
}
li {
    margin-bottom: 0.5em; /* Space between list items */
}

/* ========== Blockquotes ========== */

/* Blockquotes are highlighted with a left border and italics */
blockquote {
    border-left: 4px solid #003466; /* Blue left border */
    padding-left: 1em;
    color: #555; /* Dark gray text color */
    font-style: italic;
    margin: 1em 0;
    background-color: #f9f9f9; /* Light background for contrast */
}

/* ========== Preformatted Text and Code Blocks ========== */

/* Code and preformatted text blocks have a soft background and padding */
pre, code {
    background-color: #f5f5f5; /* Light gray background for readability */
    padding: 0.5em;
    border-radius: 4px;
    font-family: monospace;
}

/* Inline code styling */
code {
    background-color: #e9ecef; /* Lighter gray background */
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* ========== Tables ========== */

/* Tables are styled with padding and background colors for readability */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
th {
    background-color: #003466; /* Dark blue background for headers */
    color: #ffffff; /* White text for headers */
    padding: 0.5em;
    text-align: left;
}
td {
    padding: 0.5em;
    border: 1px solid #ddd; /* Light border for cell separation */
}

/* ========== Form Elements ========== */

/* Form styling for inputs, textareas, and buttons */
input[type="text"], select, textarea {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1em;
}

/* Button styling */
button, .cta-button {
    padding: 0.5em 1em;
    background-color: #003466;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
button:hover, .cta-button:hover {
    background-color: #00509e;
}

/* ========== Horizontal Rule (hr) ========== */

/* Styling for horizontal rules for section separation */
hr {
    border: 0;
    height: 1px;
    background: #003466; /* Solid blue line */
    margin: 2em 0;
}

/* ========== Footer (Example) ========== */

/* Footer styling if applicable */
.footer {
    background-color: #003466; /* Dark blue background for footer */
    color: #ffffff; /* White text for contrast */
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
}
.footer a {
    color: #66ccff;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}

 

Heading Level 1 (H1)

Heading Level 2 (H2)

Heading Level 3 (H3)

Heading Level 4 (H4)

Heading Level 5 (H5)

This is a paragraph (p) with bold text, italicized text, and underlined text.

Here’s a paragraph with a link (a) to demonstrate how links are styled.

Unordered List

  • List Item 1 (li)
  • List Item 2 (li)
  • List Item 3 (li)

Ordered List

  1. List Item 1 (li)
  2. List Item 2 (li)
  3. List Item 3 (li)

Blockquote

This is a blockquote (blockquote). It’s typically used to represent a quotation or an excerpt from another source.

Preformatted Text

  This is preformatted text (pre). 
  It preserves spaces     and line breaks.
  Useful for code snippets.

Inline Code

Use <code> tags to display inline code.

Code Block


  // This is a code block (pre > code)
  function helloWorld() {
      console.log("Hello, world!");
  }

Table

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

Form Elements










This is a horizontal rule (hr) separating sections above and below.

Back to top