Wannabe a Writer?

Testing: Styles

The purpose of this page is to show the appearance and styles of the various types of display elements.
It is used for testing and debugging purposes.
The actual content of this page can safely be ignored!

Heading Level One

Heading level 1 is used for main headings and titles. Typically this will be used to display the title of the first page. It can also be used for other major banners.

Heading Level Two

Heading level 2 is for displaying the titles of large, significant divisions of a book. An example of this is where a book is divided into many parts.

Heading Level Three

Heading level 3 is for displaying the titles of chapters, or the nearest equivalent sub-division of a book.

Heading Level Four

Heading level 4 is used for section titles (within chapters).

Heading Level Five

Heading level 5 is used for sub-section titles.

Heading Level Six

Heading level 6 is used for textual breaks between scenes or other significant story units.

Here's a quick summary of the heading levels.

  1. Main titles.
  2. Titles for parts or other major divisions.
  3. Chapter titles.
  4. Section titles.
  5. Sub-section titles.
  6. Scene titles or divisions.

Here is some text to demonstrate the appearance and style of normal paragraphs. You may wish to pay attention to the typeface, size, colour and line spacing.

Normal paragraphs are typically used for the main text of blog postings (articles). They may also contain hyperlinks to other pages or hyperlinks to bookmarks↓ on the same page.

As well as the inter-line and character spacing, you may wish to pay attention to the vertical separation and horizontal indenting.

Deliberate indentation can be achieved with the <blockquote> tag. This may or may not add further styles and indenting, depending on your chosen blog template and style sheets.

If you want to force a new line, then try to avoid using the <br /> tag. Instead, you can use paragraphs with a special class, e.g. <p class="br">.

For example,

I'm going to do some

right now!


Gray text for down-played information (class="dim").
This is normal text for general purposes.
Green text for safety messages (class="safety").
Orange text for warning messages (class="warning").
Red text for error messages (class="error").

The above list was made using <dl> and <dd> tags.


Here is an example of a table.

Symbol Direction
  • Plain tables tend to have basic borders.
  • Tables with class="layout" will be rendered with no borders.
  • Header cells <th> usually have bold text.
  • Data cells <td> usually have normal text.

Data Entry Form

Textual Controls
Selection Controls

This is just for testing the layout and appearance of the controls. Submitting this form will not actually do anything.


To go back to the top of the article, click here.

↑ Top

End ↓

Release 1.8.4You're not logged inPrivacy & Cookies