Skip to main content

Text formatting example

This example is based upon the following CSS codeΒ 

Default Styles (Light Mode) 
/* =============== Default Styles (Light Mode) =============== */

/* 1. Base Settings */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6; /* Improved readability */
    color: #333; /* Standard text color for light mode */
    background-color: #ffffff; /* Background color for light mode */
    margin: 20px;
}

/* 2. Headings (H1-H5) */
h1 {
    font-size: 2.5em;
    color: #003466;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 2em;
    color: #004080;
    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;
}

/* 3. Paragraphs (p) */
p {
    margin-bottom: 1em; /* Space between paragraphs */
    color: #333; /* Default text color */
}

/* 4. Links (a) */
a {
    color: #0066cc;
    text-decoration: none;
}
a:hover {
    text-decoration: underline; /* Underline only on hover for clarity */
}

/* 5. Lists (ul, ol, li) */
ul, ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.5em; /* Indent lists */
}
li {
    margin-bottom: 0.5em; /* Space between list items */
}

/* 6. Blockquote */
blockquote {
    border-left: 4px solid #003466; /* Blue left border for emphasis */
    padding-left: 1em;
    color: #555;
    font-style: italic;
    margin: 1em 0;
}

/* 7. Preformatted Text and Code Blocks */
pre, code {
    background-color: #f5f5f5; /* Light gray background */
    padding: 0.5em;
    border-radius: 4px;
    font-family: monospace;
}

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

/* 8. Table */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
th {
    background-color: #003466; /* Dark blue header background */
    color: #ffffff;
    padding: 0.5em;
    text-align: left;
}
td {
    padding: 0.5em;
    border: 1px solid #ddd;
}

/* 9. Form Elements */
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 {
    padding: 0.5em 1em;
    background-color: #003466;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #00509e;
}

/* 10. Horizontal Rule (hr) */
hr {
    border: 0;
    height: 1px;
    background: #003466; /* Solid blue line */
    margin: 2em 0;
}

Β 

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