Style Guide

HTML content available to style and how it will appear within this sites styling

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Horizontal Rule

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

---

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Links

Generic Link

Mailto Link

Webmaster

Download Link

Link with Class 'download'

File Links

Link with Class 'pdf'

Link with Class 'txt'

Link with Class 'doc'

Link with Class 'xls'

Link with Class 'ppt'

Link with Class 'pic'

Link with Class 'code'

Paragraphs

General Paragraphs

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Paragraphs with Images

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Blockquote

Quisque placerat. Donec et nunc et mauris convallis bibendum.

Classed Paragraphs

class: error

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: notice

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: success

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: small

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: large

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: quiet

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: loud

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

class: highlight

Quisque placerat. Donec et nunc et mauris convallis bibendum. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui. Pellentesque sodales justo sit amet erat. Nulla feugiat, libero in consectetuer luctus, velit enim placerat arcu, tempor auctor nisl nunc non est. Praesent non dui. Sed lacus lectus, dapibus eu, dapibus ac, euismod nec, metus.

Lists

Unordered List

• List Item
• List Item
• List Item
• List Item
• List Item

Unordered List with Links

• Link Item
• Link Item
• Link Item
• Link Item

Ordered List

1. List Item
2. List Item
3. List Item
4. List Item
5. List Item

Ordered List with Links

1. Link Item
2. Link Item
3. Link Item
4. Link Item

Definition List

Term

Quisque placerat. Donec et nunc et mauris convallis bibendum.

Term

Quisque placerat. Donec et nunc et mauris convallis bibendum.

Term

Quisque placerat. Donec et nunc et mauris convallis bibendum.

Term

Quisque placerat. Donec et nunc et mauris convallis bibendum.

Nested Lists

• Unordered List Item
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
  4. Ordered List Item
• Unordered List Item
  • Unordered List Item
  • Unordered List Item
    1. Ordered List Item
    2. Ordered List Item
    3. Ordered List Item
    4. Ordered List Item
• Unordered List Item

Tables

How long it takes the average person to brush his/her teeth

Col Title	Col Title 2	Col Title 3	Col Title 4
Footer Data
Data	Data	Data	Data
Data	Data	Data	Data
Data	Data	Data	Data

Forms

Log In

Username

Password

Personal information

First name

Last name

Medical history

Smallpox
Mumps
Dizziness

Race

African American
Hispanic
White

Your Favorite Pet is a

Dog Cat Fish Hamster

Tell us all your hopes and dreams

I aspire to be like Jeff Brown.

File Upload

Submit as as input tag

Submit as as button tag

Submit

Text Tags

abbr

HTML is a cross-platform text-formatting system for creating web pages, including copy, images, sounds, frames, animation and more.

acronym

The IEEE is the world's leading professional association for the advancement of technology.

address

Webmaster

b

This text is standard, this text is within the b tag

big

This text is standard, this text is within the big tag

cite

This text is standard, this text is within the cite tag

code

This text is standard, this text is within the code tag

del

This text is standard, this text is within the del tag

dfn

Vampires Mythical creatures who try to avoid their own deaths and demise by literally sucking out the blood of their victims.

i

This text is standard, this text is within the i tag

ins

This text is standard, this text is within the ins tag

kbd

This text is standard, this text is within the kbd tag

pre

This text is standard,

   preformatted text
      testing indent
               

q

Twain said, Be careful about reading health books. You may die of a misprint.

samp

The program responded, Program - Initialized

small

This text is standard, this text is within the small tag

strong

This text is standard, this text is within the strong tag

sub

The symbol for water is H ₂ O

sup

N ² = N x N

tt

This text is standard, this text is within the tt tag

var

The variable name is ThisObject

Span

Quisque placerat. Donec et nunc et mauris convallis bibendum. This text is inside a span tag. Donec eu diam sodales felis sagittis volutpat. Suspendisse fermentum condimentum sem. Nulla facilisi. Integer nec dui.