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

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 Justified

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.

Right Justified

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.

Width Justified

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.

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

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.

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.

Right 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.

Left Aligned Figure with Caption

Image Placeholder
Redcatcher Media

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. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam.

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

  1. 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
  2. List item two
  3. List item three
  4. 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 H2O.

Use the <sup> tag for superscripting text like E = MC2.

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

3 Comments

  1. SuperDude on April 26, 2013 at 12:38 pm

    The is a comment!

    • Sheryle Gillihan on April 26, 2013 at 12:39 pm

      This is a reply from the post author.

    • SuperDude on April 26, 2013 at 12:41 pm

      This is a reply from the original commenter.

Leave a Comment