Style Guide

This style guide was based on Style Guide created by Chen Hui Jing.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings with Text

Heading 1

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Heading 2

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Heading 3

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Heading 4

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Heading 5

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Heading 6

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.


Generic Content

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

Placeholder Image and Some Alt Text

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.

"Computers will not be perfected until they can compute how much more than the estimate the job will cost."

Text Elements

The a element example

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The em element example

The del element example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The u element example

The var element example

The ruby element(注音符号) example


Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags

Cupcake ipsum dolor sit amet gummi bears candy. Gummi bears jelly apple pie toffee candy canes. Marshmallow oat cake pie lollipop ice cream apple pie oat cake. Gummies dragée candy canes.


List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Definition List

Definition List Term 1
This is a definition list description.
Definition List Term 2
This is a definition list description.
Definition List Term 3
This is a definition list description.

Tables

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Media Elements

The Audio Element:

The Video Element: