Blonde Girl Sunshine

Example of Posts Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, tortor sed mattis congue, orci mi luctus elit, a vulputate felis arcu malesuada velit. Praesent at leo ut sapien rutrum porttitor. Nam suscipit, quam non ullamcorper hendrerit, metus elit semper dui, id vehicula odio nisi viverra magna. Duis lobortis pharetra dui a viverra. Aliquam luctus nunc eu ante gravida sagittis. Pellentesque sed est facilisis, vulputate mauris vitae, bibendum ligula. Praesent at erat ut augue tempor ullamcorper. Phasellus imperdiet mi a vestibulum pellentesque. Nunc sodales vehicula tellus vitae interdum. Phasellus ultrices urna in augue congue tempor. Nullam hendrerit magna nec justo placerat convallis. Donec dignissim mi at pharetra egestas.

Header 1

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Header 2

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Header 3

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Header 4

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Header 5

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Header 6

Nullam hendrerit eget nulla eget cursus. Phasellus nec laoreet urna. Mauris sodales consequat urna a eleifend. Aliquam venenatis leo orci, sollicitudin faucibus libero pulvinar tempor. Etiam malesuada at magna eget auctor.

Blockquotes

Single line blockquote:

Its good to keep smiling every morning.

Multi line blockquote with a cite reference:

What’s amazing is, if young people understood how doing well in school makes the rest of their life so much interesting, they would be more motivated. It’s so far away in time that they can’t appreciate what it means for their whole life. Bill Gates – Developers’ Conference, 19xx

Tables

EMPLOYEESALARY
John Winston$100Not enough salary for him.
Tom Cruise$100KFor all the he does for promotion of brand.
Hillary Swag$100MMade a good profit this year.
James Bond$98BHere is my annual salary. Isn’t enough?

Lists Style (Disc)

  • 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

List Style (Decimal)

  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

HTML Tags

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

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for “seriously”.

Acronym Tag

The acronym ftw stands for “for the win”.

Big Tag

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

“Code is poetry.” —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
}

Quote Tag

Innovation distinguishes between a leader and a follower. –Steve Jobs

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Tables

CMSPERFORMANCEUSABILITYFEATURES
WordPressGoodBetterGood
DrupalBetterGoodGood
JoomlaBestBestBest
JoomlaBestBestBest

Unordered Lists

An ordered (enumerated) list. The type attribute can be used to specify the kind of ordering, but style sheets give more control: {list-style-type: foo}. The default is Arabic numbering. To use the type attribute, use “< ol type=foo >”, replacing foo with one of the following:

  • Html 5
    CSS 3
    jQuery

Ordered Lists

Ordered (numerated) list. Style sheets can be used to specify the list marker: {list-style-type: foo}. The default marker is a disc. UL existed in HTML Tags, and was standardized in HTML 2.0; still current.

  1. Html 5
    CSS 3
    jQuery

One thought on “Example of Posts Typography

Leave a Reply

Your email address will not be published. Required fields are marked *