Your Website Title here

Fancy pants slogan

Typography & Elements

H Tags, semantic title markup

This is a huge (h1 tag)

It's normally reserved for your website title but in this case it's replaced by a graphic (logo) cause it often looks much nicer than a big, dark swatch of Arial or Times Roman.

h2h3h4h5

h2 tags are used here primarily for titles in the left column.

h3 tags are used most often as content (article/story) titles in the center column.

h4 and h5 tags are often used as sub-headers (little blurbs beneath content titles).

h6 tags are not used in this design.

Color and formatting variances can be found throughout (view the .css files for my comments).

Links, Lists and the unordered

Below is a humble unordered list;

  • A simple unordered list.
  • A simple unordered list.
  • A simple unordered list.
  • A "nobull" un-bulleted list item.
  • Yet another nobull list item.

Ordered Lists and fancy numbers

Below, an ordered list;

  1. A simple ordered list.
  2. A simple ordered list.
  3. A simple ordered list.
  4. A simple ordered list.
  5. A simple ordered list.
  6. A simple ordered list.

Fantabulous Drop Cap

Here's a simple paragraph with a dropcap as the first element in the paragraph. Note that on repeating this sentence, the capitol "H" doesn't drop like the first instance. Here's a simple paragraph with a dropcap as the first element in the paragraph. It works on the principal of augmenting -just- the first letter of the classed paragraph tag. Saucy markup in the .css.


Quotes, say "I".

"Tempting to use to spruce up an article or story, drop caps can be a bit iffy to screen readers."

Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them. Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them. Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.

Typography included..

css tags: Unordered Lists


<ul > default with square bullet
  • a single item
  • another item to show line height
<ul class="foursquare blue">
  • a single unordered item
<ul class="foursquare beige">
  • a single unordered item
<ul class="kidney blue">
  • a single unordered item
<ul class="kidney beige">
  • a single unordered item

Css tags: Ordered Lists


<ol> default
  1. item 1
  2. item 2
  3. item 3
<ol class="beige"> <span>
  1. item 1
  2. item 2
  3. item 3