Skip to main content

Text formatting example

This example is based upon the following CSS codeΒ 

Default Styles (Light Mode) 
/* =============== 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