Type styles

Posted by on Jul 28, 2010 in Admin, site-documentation | No Comments

Title — use class="entry-title"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Paragraphs are set with font: Georgia;
optional fonts: Cambria, Times, Times New Roman, serif;
font-size: 14px;
line-height: 22px;
color: #333;
space after paragraph: 11px.

Subtitle — <h2> has space after; Verdana 13px, color #708266

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Subtitle — <h3> has no space after

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Subtitle — h4 (not used)

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Subtitle — h5 (not used)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Subtitle — h6 (not used)

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum.

Example of drop cap — surround first letter with <span class="drop-cap"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Entry meta — class="entry-meta"

Horizontal rule — <hr>

Use border instead

List types

Ordered list <ol>

  1. List item
  2. List item
  3. List item
    1. List item level 2
    2. List item level 2
      1. List item level 3
      2. List item level 3
        1. List item level 4
        2. List item level 4
          1. List item level 5
          2. List item level 5
  4. List item
  5. List item
  6. List item
  7. List item
  8. List item
  9. List item
  10. List item
  11. List item

Unordered list <ul>

  • List item 01
  • List item 02
  • List item 03
    • List item level 2
    • List item level 2
      • List item level 3
      • List item level 3
  • List item 04

Unordered list with <ul class=”no-bullets”>

  • List item 01
  • List item 02
  • List item 03

Definition list <dl>

Definition list title <dt>
Definition list data <dd>
Definition list title
Definition list data
Definition list title
Definition list data

Dialog

Costello <dt>
Look, you gotta first baseman? <dd>
Abbott
Certainly.
Costello
Who’s playing first?
Abbott
That’s right.
Costello
When you pay off the first baseman every month, who gets the money?
Abbott
Every dollar of it.

Blockquote <blockquote>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <cite>— author name </cite>

blockquote with class=”pullquote” — Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore facilisis. <cite>— author name </cite>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

blockquote with class=”alignright” — Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore facilisis. <cite>— author name </cite>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

blockquote with class=”alignleft” — Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore facilisis. <cite>— author name </cite>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Tables

Table title <caption>
Table header 1 <th> Table header 2
Table row 1, data 1 Table row 1, data 2
Table row 2, data 1 Table row 2, data 2
Table footer, data 1 Table footer, data 2

Other markup code

description html code usage
hyperlink <a>  
abbreviation  
acronym  
bold — offset text typically styled in bold  
cited title or author of a work see blockquote example
code fragment  
deleted text  
defining instance  
emphatic stress  
italic — offset text typically styled in italic  
inserted text  
user input  
marked (highlighted) text  
highlights yellow <span class="highlights-yellow">  
highlights green <span class="highlights-green">  
sample output  
small print  
strong importance (bold)  
superscript  
subscript  
variable or placeholder text  
contact information
<address>  
preformatted text
<pre>  
soft hyphen ­ or ­  

Punctuation

description html code usage
en dash 1900–1999
em dash word — word
ampersand & &
less than < <
greater than > >
single quote left (curly)
single quote right (curly)
single quote low
double quote left (curly)
double quote right (curly)
double quote low
angle quote left « «
angle quote right » »
single angle quote left
single angle quote right
middot · ·
bullet
dagger
double dagger
ellipses
per mile
overline
left arrow
up arrow
right arrow
down arrow
left-right arrow
trademark
copyright © ©
registered ® ®

White space

description html code usage
non-breaking space   x x
en space x x
em space x x
3-per-em space x x
4-per-em space/td>

x x
6-per-em space x x
fiture space x x
punctuation space x x
thin space x x
hair space x x