Style Examples for This Website

H1 Heading 1

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate. Aliquam et ex eu quam elementum feugiat. Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

H2 Heading 2

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate. Aliquam et ex eu quam elementum feugiat. Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

H3 Heading 3

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate. Aliquam et ex eu quam elementum feugiat. Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

H4 Heading 4

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate. Aliquam et ex eu quam elementum feugiat. Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

H5 Heading 5

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate.

H6 Heading 6

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum suscipit consectetur. Aenean eget tortor id libero vulputate vulputate. Aliquam et ex eu quam elementum feugiat.

Blockquote Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

Aliquam et ex eu quam elementum (var) feugiat. Nulla sed tempus dui. Etiam tristique hendrerit nulla id ultricies. Vivamus ullamcorper fermentum tristique. Praesent eget (var) egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

Lists

  • Lorem ipsum dolor
  • Sit amet consectetur
  • Adipiscing elit curabitur
  • Rutrum suscipit consectetur
    • Vulputate aliquam et
    • Eu quam elementum feugiat
    • Ex nulla sed
    • Tempus dui etiam
      • Tempus dui etiam
      • Tristique hendrerit nulla
      • Id ultricies vivamus
    • Tristique hendrerit nulla
    • Id ultricies vivamus
  • Aenean eget tortor
  • Id libero vulputate
  1. Lorem ipsum dolor
  2. Sit amet consectetur
  3. Adipiscing elit curabitur
  4. Rutrum suscipit consectetur
    1. Vulputate aliquam et
    2. Eu quam elementum feugiat
    3. Ex nulla sed
    4. Tempus dui etiam
      1. Tempus dui etiam
      2. Tristique hendrerit nulla
      3. Id ultricies vivamus
    5. Tristique hendrerit nulla
    6. Id ultricies vivamus
  5. Aenean eget tortor
  6. Id libero vulputate

Ullamcorper fermentum tristique
Praesent eget egestas eros. Morbi facilisis urna nec vestibulum ultrices. Quisque eu tristique urna, et sodales nulla.

Sortable Table

Person Monthly pay
jan molby (lower-case) $12,000
Steve Nicol $8,500
Steve McMahon $9,200
John Barnes $15,300
TOTAL $45,000

Colored Boxes

This is an example of the “code-box” box.
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789- ↩

<script>// <![CDATA[
    document.write("This is your User Agent (browser):<br />");
    document.write(navigator.userAgent);
// ]]></script>
This is an example of the “example-code-box” box.
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789- ↩
　
<script>// <![CDATA[
　　document.write(“This is your User Agent (browser):<br />”);
　　document.write(navigator.userAgent);
// ]]></script>
　
This is an example of the “important-box” box. This is a box with something important in it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales felis auctor sollicitudin faucibus. In imperdiet elementum aliquet. Morbi eleifend porttitor metus, sit amet tristique orci.

This is an example of the “issue-box” box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales felis auctor sollicitudin faucibus. In imperdiet elementum aliquet. Morbi eleifend porttitor metus, sit amet tristique orci.

This is an example of the “note-box” box. This is a box with a note in it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales felis auctor sollicitudin faucibus. In imperdiet elementum aliquet. Morbi eleifend porttitor metus, sit amet tristique orci.

This is an example of the “output-box” box.
123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789- ↩

This is an example of the “forestgreen-box” box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales felis auctor sollicitudin faucibus. In imperdiet elementum aliquet. Morbi eleifend porttitor metus, sit amet tristique orci.

This is an example of the “rebeccapurple-box” box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales felis auctor sollicitudin faucibus. In imperdiet elementum aliquet. Morbi eleifend porttitor metus, sit amet tristique orci.

Miscellaneous Style Examples

Superscripts and Subscripts

IIIIIIIIIIIIIII — III<sup>III</sup>III<sub>III</sub>III
I3 Vitamin B12 — I<sup>3</sup> Vitamin B<sub>12</sub>

Font x-Height

xxxxxxxxx — xxx<code>xxx</code>xxx

“Web Safe” Fonts

Serif Fonts

Pack my box with five dozen liquor jugs. Book Antiqua
Pack my box with five dozen liquor jugs. Georgia
Pack my box with five dozen liquor jugs. Palatino
Pack my box with five dozen liquor jugs. Palatino Linotype
Pack my box with five dozen liquor jugs. serif
Pack my box with five dozen liquor jugs. Times
Pack my box with five dozen liquor jugs. Times New Roman

Sans-Serif Fonts

Pack my box with five dozen liquor jugs. Arial
Pack my box with five dozen liquor jugs. Arial Black
Pack my box with five dozen liquor jugs. Charcoal
Pack my box with five dozen liquor jugs. Comic Sans MS
Pack my box with five dozen liquor jugs. Gadget
Pack my box with five dozen liquor jugs. Geneva
Pack my box with five dozen liquor jugs. Helvetica
Pack my box with five dozen liquor jugs. Impact
Pack my box with five dozen liquor jugs. Lucida Grande
Pack my box with five dozen liquor jugs. Lucida Sans Unicode
Pack my box with five dozen liquor jugs. sans-serif
Pack my box with five dozen liquor jugs. Tahoma
Pack my box with five dozen liquor jugs. Trebuchet MS
Pack my box with five dozen liquor jugs. Verdana

Monospace Fonts

Pack my box with five dozen liquor jugs. Courier
Pack my box with five dozen liquor jugs. Courier New
Pack my box with five dozen liquor jugs. Lucida Console
Pack my box with five dozen liquor jugs. Monaco
Pack my box with five dozen liquor jugs. monospace

Cursive Fonts

Pack my box with five dozen liquor jugs. cursive

Abandoned Fonts

These fonts were tried and then abandoned as they weren’t suitable.

Alegreya

The short numbers were difficult to read and didn’t look right in superscripts and subscripts.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 B12 1010

Oxygen

The numbers were not spaced well, making the “1” difficult to read.

1234567890 111 0987654321

Leave a Reply