Your Website Style Guide

This is the style guide for your website. This document sets the styles and standards to be used when updating or contributing to your site. In this guide you will find examples of what your site is supposed to look like and the many HTML elements that you can use in your posts and pages.

Not only can you view how the elements will appear on your site, but you can also see how these elements are implemented by viewing the Your Website Style Guide post within the WordPress post editor.

Branding

Colors & Textures

#F5F5F5
#333333
#111111
#33FFFF
#FF8C00
#4682B4
#DC143C
#3CB371
#DAA520
#DA70D6
#800080
#FF7F50
#FF69B4
#008080

Fonts

Headings

This is an example of an <H1> header.

This is an example of an <H2> header.

This is an example of an <H3> header.

This is an example of an <H4> header.

This is an example of an <H5> header.

This is an example of an <H6> header.

Text Justification

Left Justified

Center Justified

Right Justified

Width Justified

Images and Figures

Left Aligned Image

Image Placeholder

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.

Center Aligned Image

Image Placeholder

Right Aligned Image

Image Placeholder

Left Aligned Figure with Caption

Quotes and Citations

Block Quotes

I can see how it might be possible for a man to look down upon the earth and be an atheist, but I cannot conceive how a man could look up into the heavens and say there is no God.
Honest Abe

Pull Quotes

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue.

Inline Quotes

Use the <q> tag for inline quotes.

Citations

You can cite a reference using the <cite> tag.

List Types

Unordered List (Nested)

List item one
- List item one
  - List item one
  - List item two
  - List item three
  - List item four
- List item two
- List item three
- List item four
List item two
List item three
List item four

Ordered List

List item one
1. List item one
  1. List item one
  2. List item two
  3. List item three
  4. List item four
2. List item two
3. List item three
4. List item four
List item two
List item three
List item four

Definition List

WordPress: WordPress is web software you can use to create a beautiful website or blog.
Sublime Text: Sublime Text is a sophisticated text editor for code, markup and prose.
HiDef, Inc: Catalysts for a Better World.
Sheryle Gillihan: Ideas, insights, and inspiration from a project management wonder woman.

HTML Element Tag Tests

This is an <anchor> tag (otherwise known as a link).

Use the <strong> tag for bold text.

Use the <em> tag to emphasize(italics) text.

The <address> tag takes care of styling addresses. You will need to make use of line breaks (<br>) to have the address formatted as below.

355 1st Street
Suite 202
San Francisco, CA 94105
United States

This abbr. is an example of an <abbr> tag in the middle of a sentence.

You can write code using the <code> tag.

You can emulate keyboard text, using the <kbd> text tag.

You can mark text for ~~deletion~~ using the <del> tag.

Use the <s> tag to mark content that is ~~no longer relevant or accurate~~.

Use the <ins> tag to mark inserted text.

Use the <pre> tag to display blocks of code:

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

Use the <sub> for _subscripting text like H₂O.

Use the <sup> tag for ^{superscripting} text like E = MC².

Use the <var> tag to call out a variable.

Posted in Documentation

Your Website Style Guide

Branding

Colors & Textures

Fonts

Headings

This is an example of an <H1> header.

This is an example of an <H2> header.

This is an example of an <H3> header.

This is an example of an <H4> header.

This is an example of an <H5> header.

This is an example of an <H6> header.

Text Justification

Left Justified

Center Justified

Right Justified

Width Justified

Images and Figures

Left Aligned Image

Center Aligned Image

Right Aligned Image

Left Aligned Figure with Caption

Quotes and Citations

Block Quotes

Pull Quotes

Inline Quotes

Citations

List Types

Unordered List (Nested)

Ordered List

Definition List

HTML Element Tag Tests

3 Comments

Leave a Comment Cancel Reply