HTML Tags Example

Below you will find all the HTML tags and the defined styles for each.

When to use this pattern?

You should use all these HTML tags when building your pages.

Do not create your own styles for pages as it completely defeats the efforts of our design strategy to enhance our brand value and visitor experience with a single, comprehensive site-wide stylesheet.

This means your pages should look like the examples presented on this online style guide when you are done editing.

Please do not use special fonts, use different font colors, create your own font sizes, or use images larger than this middle content area can hold.

Using the stylesheet created for the St. Mary's University website will ensure that our visitor experience is rich and consistent across the site and lessen the amount work necessary to create it.

How to use this pattern?

You are free to use any HTML tag presented here. Just type them in your pages when needed and the stylesheet will take care of the rest.

Level 1 heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 1 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 1 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 1 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 02 Heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 2 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 2 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 2 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 03 Heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 3 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 3 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 3 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 04 Heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 4 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 4 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 4 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 05 Heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 5 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 5 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 5 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 06 Heading

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 6 heading class="fancy"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 6 heading class="thin"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Level 6 heading class="caps"

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.

Blockquote Example:

Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.



Address: Example address 224, Sweden
Preformated:Testing one row
				 and another

I am the a tag example
I am the abbr tag example
I am the acronym tag example
I am the b tag example
I am the big tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the font tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag inside a q tag example
I am the s tag example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strike tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
I am the tt tag example
I am the var tag example
I am the u tag example
I am the small class example
I am the large class example
I am the large BOLD class example
I am the xlarge class example
I am the quiet class example
I am the highlight class example
I am the lowlight class example

  1. Ordered list 01
  2. Ordered list 02
  3. Ordered list 03
    1. Ordered list inside list level 2
    2. Ordered list inside list level 2
      1. Ordered list inside list level 3
      2. Ordered list inside list level 3
Description list title 01
Description list description 01
Description list title 02
Description list description 02
Description list description 03



Change Password Cancel

I am a word document link, so readers know that I'm not a normal link.
I am a pdf document link, so readers know that I'm not a normal link.
I am an external website link, so readers know that I'm not a normal link.
I am an rss feed link, so readers know that I'm not a normal link.
I am an excel spreadsheet link, so readers know that I'm not a normal link.
I am an AIM screenname link, so readers know that I'm not a normal link.
I am an email address link, so readers know that I'm not a normal link.
I am an internal link. Change the stylesheet's "http://yourwebsite.com" to your domain name so I don't look like an external link.
I am an ANCHOR link to another page.

This is a paragraph with class="success" and a link.

This is a paragraph with class="error" and a link.

This is a paragraph with class="notice" and a link.