A quality style guide is a must for effective branding—esp. when working with teams—and can effectively save you time and money while providing brand consistency.

This style guide provides a blueprint of the this site’s styles—using the über-useful Markdown language—and a peek under-the-hood at what the semantic HTML output looks like.

Headline Styles, the H tags: <h1> <h2> <h3> <h4> <h5> <h6>

What semantic HTML headline tag code looks like:

<h1>Headline One</h1>
<h2>Headline Two</h2>
<h3>Headline Three</h3>
<h4>Headline Four</h4>
<h5>Headline Five</h5>
<h6>Headline Six</h6>

What semantic HTML headline tag code renders in the browser:

Heading One <h1>

HEADING TWO <h2>

Heading Three <h3>

Heading Four <h4>

Heading Five <h5>

Heading Six <h6>

---

BLOCKQUOTE & Cite <blockquote> ...<cite>

The blockquote is used to indicate the quotation of a large section of text from another source. It can be as long or as short as you’d like.

What <blockquote> HTML code looks like:

<blockquote>
 <q>Simplicity is the ultimate form of sophistication.
  <cite>Leonardo Da Vinci</cite></q>   
</blockquote>

What a <blockquote> HTML tag renders to in the browser:

Simplicity is the ultimate form of sophistication.
Leonardo Da Vinci

You can use the <q> tag for "Quote" or <p> tag for paragraph around the quote. Note that most browsers will add handy quote marks around the <q> tag by default—what one would call "native functionality."

---

LIST ITEMS

Unordered Lists (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

What Unordered (bullet) List HTML code looks like:

<ul>
 <li>List item one
  <ul>
   <li>List item one
    <ul>
     <li>List item one</li>
     <li>List item two</li>
     <li>List item three</li>
     <li>List item four</li>
    </ul>
   </li>
   <li>List item two</li>
   <li>List item three</li>
   <li>List item four</li>
  </ul>
 </li>
 <li>List item two</li>
 <li>List item three</li>
 <li>List item four</li>
</ul>

Ordered List (Nested)

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

What Ordered (numbered) List HTML code looks like:

---

DEFINITION LISTS

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

dowork

Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.

Do It Live

I’ll let Bill O’Reilly will explain this one.

---

Accordions

HTML5 Accordion: Native & Extremely Useful...

Additional information can be included here, allowing those users that need this info to obtain it easily—while keeping the bulk of info neatly tucked away so users can easily scan several summaries (think of a summary as a headline for the accordion) and quickly find the one they want. Makes for a nicer User Experience (UX) and User Interface (UI) to boot! **Bonus Points:** * A progressive enhancement. Older browsers that don’t know the details HTML tag will simply not show the accordion functionality and the user sees all content, so no information is rendered inaccessible.

Native Accordion HTML Code

<details>
    <summary>Your Summary (Headline) here</summary>
    Additional information goes here...
</details>

---

CODE FORMATTING

  pre {
    padding: 4%;
    margin-bottom: 1.62em;
    background: #eaecee;
    overflow: auto;
    tab-size: 2;
  }

---

TABLE STYLES

Employee	Salary
John Doe	$1	Because that’s all Steve Jobs needed for a salary.
Jane Doe	$100K	For all the blogging she does.
Fred Bloggs	$100M	Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs	$100B	With hair like that?! Enough said…

IMAGE ALIGNMENT

---

Right Aligned Image

Images may be two-dimensional, such as a photograph, screen display, and as well as a three-dimensional, such as a statue or hologram. They may be captured by optical devices – such as cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water surfaces.

---

Left Aligned Image

The word image is also used in the broader sense of any two-dimensional figure such as a map, a graph, a pie chart, or an abstract painting. In this wider sense, images can also be rendered manually, such as by drawing, painting, carving, rendered automatically by printing or computer graphics technology, or developed by a combination of methods.

---

HTML

These supported tags come from the WordPress.com code FAQ.

Anchor (aka. Link)

This is an example of a link.

Delete

This tag will let you strikeout.

Emphasize

The emphasize tag should italicize text.

Strong Tag

This tag shows bold text.