Style gui­de

Below is just about every HTML ele­ment you might want to use in your blog posts. Check the source code to see the many embed­ded ele­ments wit­hin para­graphs.

Hea­ding Two

Lorem ipsum dolor sit amet, test link adi­pi­scing elit. This is strong. Nullam dignis­sim con­val­lis est. Quis­que ali­quam. This is empha­si­zed.

Hea­ding Three

Don­ec fau­ci­bus. Nunc iacu­lis susci­pit dui. 53 = 125. Water is H2O. Nam sit amet sem. Ali­quam libe­ro nisi, imper­diet at, tin­cid­unt nec, gra­vi­da vehi­cu­la, nisl.
The New York Times (That’s a cita­ti­on).

Hea­ding Four

Under­line. Maece­nas orna­re tortor. Don­ec sed tel­lus eget sapi­en fring­il­la nonum­my. Mau­ris a ante. Sus­pen­dis­se quam sem, con­se­quat at, com­mo­do vitae, feu­gi­at in, nunc. Mor­bi imper­diet augue quis tel­lus.

Hea­ding Five

HTML and CSS are our tools. Mau­ris a ante. Sus­pen­dis­se quam sem, con­se­quat at, com­mo­do vitae, feu­gi­at in, nunc. Mor­bi imper­diet augue quis tel­lus.

Hea­ding Six

Pra­e­sent mat­tis, mas­sa quis luc­tus fer­men­tum, tur­pis mi volut­pat jus­to, eu volut­pat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00.Let’s make that 7. This text has been struck.


“For­mats” Drop­down But­ton Styles

Drop­cap text. App­ly this for­mat on the para­graph its­elf. Lorem ipsum dolor sit amet, con­sec­te­tu­er adi­pi­scing elit, sed diam nonum­my nibh euis­mod tin­cid­unt ut lao­reet dolo­re magna ali­quam erat vol­tu.

Hea­ding style 1

Upper­ca­se text. Duis autem vel eum iri­ure dolor in hend­re­rit in vul­pu­ta­te velit esse.

Hea­ding style 2 on para­graph text

Ut wisi enim ad minim veni­am, high­light­ed text here, quis nostrud exer­ci tati­on ull­am­cor­per, small text here, susci­pit lob­or­tis nisl ut ali­quip ex ea com­mo­do con­se­quat, super­script, sub­script.

Hea­ding style 3 on para­graph text

Hea­ding style texts can be used to force hea­ding 1 – 3 dis­play style on a dif­fe­rent ele­ment, such as para­graph or any of HTML hea­ding tags. Thus allows kee­ping the seman­tic mark­up, but sty­ling it a bit dif­fer­ent­ly.

Dis­play 1 text size

Duis autem vel eum iri­ure dolor in hend­re­rit in vul­pu­ta­te velit esse moles­tie con­se­quat.

Dis­play 2 text size

Duis autem vel eum iri­ure dolor in hend­re­rit in vul­pu­ta­te velit esse moles­tie con­se­quat.

Dis­play 3 text size

Duis autem vel eum iri­ure dolor in hend­re­rit in vul­pu­ta­te velit esse moles­tie con­se­quat.

Dis­play 4 text size

Duis autem vel eum iri­ure dolor in hend­re­rit in vul­pu­ta­te velit esse moles­tie con­se­quat.

Hea­ding with alte­red font weight

Nam liber tem­por cum solu­ta nobis elei­fend opti­on congue nihil imper­diet dom­ing id quod mazim pla­ce­rat facer possim assum.

Dis­play 2 text with alte­red font weight

Easy crea­ting pull­quo­tes and inser­ting quo­te <cite> tags.
by Aut­hor

Typi non habent cla­ri­ta­tem insi­tam; est usus legen­tis in iis qui facit eorum cla­ri­ta­tem. Cla­ri­tas est eti­am pro­ces­sus dyna­mi­cus, qui sequi­tur muta­tio­nem con­su­etu­di­um lec­torum. Mir­um est nota­re quam lit­te­ra gothi­ca, quam nunc puta­mus par­um cla­ram, ante­po­sue­rit lit­terar­um formas huma­ni­ta­tis per seacu­la quar­ta deci­ma et quin­ta deci­ma. Eodem modo typi, qui nunc nobis viden­tur par­um cla­ri, fiant sol­lem­nes in futu­rum. Cla­ri­tas est eti­am pro­ces­sus dyna­mi­cus, qui sequi­tur muta­tio­nem con­su­etu­di­um lec­torum.


Blo­ck­quo­te

The blo­ck­quo­te is used to indi­ca­te the quo­ta­ti­on of a lar­ge sec­tion of text from ano­t­her source. It can be as long or as short as you’d like.

It is what you read when you don’t have to that deter­mi­nes what you will be when you can’t help it.

Oscar Wil­de


List Items

Unor­de­red Lists (Nested)

  • 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

Orde­red List (Nested)

  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

Defi­ni­ti­on Lists

Defi­ni­ti­on List Tit­le
Defi­ni­ti­on list divi­si­on.
Start­up
A start­up com­pa­ny or start­up is a com­pa­ny or tem­pora­ry orga­ni­za­ti­on desi­gned to search for a repeata­ble and scala­b­le busi­ness model.
#dowork
Coined by Rob Dyr­dek and his per­so­nal body guard Chris­to­pher “Big Black” Boy­kins, “Do Work” works as a self moti­va­tor, to moti­vat­ing your fri­ends.
Do It Live
I’ll let Bill O’Reil­ly will exp­lain this one.

Code For­mat­ting

Code can be pre­sen­ted inli­ne, like <?php bloginfo('stylesheet_url'); ?>, or wit­hin a <pre> block.

pre {
	padding: 4%;
	margin-bottom: 1.62em;
	background: #eaecee;
	overflow: auto;
	tab-size: 2;
}

Table Styles

Table Hea­der 1 Table Hea­der 2 Table Hea­der 3
Divi­si­on 1 Divi­si­on 2 Divi­si­on 3
Divi­si­on 1 Divi­si­on 2 Divi­si­on 3
Divi­si­on 1 Divi­si­on 2 Divi­si­on 3

High­light Text Style

To use the high­light, you sim­ply need to wrap the text in mark HTML tag. This can be done in the Text edi­tor view. See an examp­le below:

<mark>This will be highlighted.</mark>

Image Align­ment

placeholder image
Cap­tio­ned image

Right Ali­gned Image

placeholder textImages may be two-dimen­sio­nal, such as a pho­to­graph, screen dis­play, and as well as a three-dimen­sio­nal, such as a sta­tue or holo­gram. They may be cap­tu­red by opti­cal devices – such as came­ras, mir­rors, len­ses, tele­scopes, micro­scopes, etc. and natu­ral objec­ts and phe­no­me­na, such as the human eye or water sur­faces.


Left Ali­gned Image

placeholder imageThe word image is also used in the broa­der sen­se of any two-dimen­sio­nal figu­re such as a map, a graph, a pie chart, or an abs­tract pain­ting. In this wider sen­se, images can also be ren­de­red manu­al­ly, such as by drawing, pain­ting, car­ving, ren­de­red auto­ma­ti­cal­ly by prin­ting or com­pu­ter gra­phics tech­no­lo­gy, or deve­lo­ped by a com­bi­na­ti­on of methods.


Pull Quo­te Styles

To use the pull quo­te, you sim­ply need to add a class of alignright or alignleft to your con­tent. This can be done in Visu­al edi­tor with addi­tio­nal style but­tons that the­me pro­vi­des. See an examp­le below:

<blockquote class="alignright">Pull this text right.</blockquote>

This pull quo­te is just han­ging out on the right side of the post. Lorem ipsum dolor sit amet, con­sec­te­tur.

A pull quo­te (also known as a lift-out quo­te) is a quo­ta­ti­on or excerpt from an arti­cle that is typi­cal­ly pla­ced in a lar­ger or dis­tinc­tive typeface on the same page, ser­ving to ent­i­ce readers into an arti­cle or to high­light a key topic. The term is princi­pal­ly used in jour­na­lism and publi­shing.

Pla­ce­ment of a pull quo­te on a page may be defi­ned in a publication’s or website’s style gui­de. Such a typo­gra­phic device may or may not be ali­gned with a column on the page. Some desi­gners, for examp­le, choo­se not to align the quo­te. In that case, the quo­ta­ti­on cuts into two or more columns, as in the examp­le shown.

And this pull quo­te is pul­ling text to the left, like a sir. Lorem ipsum dolor sit amet, con­sec­te­tur.

Pull quo­tes need not be a ver­ba­tim copy of the text being quo­ted; depen­ding on a publication’s house style pull quo­tes may be abbre­via­ted for space and/or para­phra­sed for cla­ri­ty, with or wit­hout indi­ca­ti­on. The­re are no hard-and-fast rules for the exact for­mat­ting of pull quo­tes.


Image Gal­le­ry Stan­dard

This is a tra­di­tio­nal Word­Press thumb­nail gal­le­ry avail­ab­le in all Word­Press sites. To add this gal­le­ry, sim­ply click Add Media in your post edi­tor and click Crea­te Gal­le­ry. In the Gal­le­ry Set­tings area, choo­se Thumb­nail Grid as the type of gal­le­ry.


Jet­pack Mosaic Image Gal­le­ry

This awe­so­me mosaic thumb­nail gal­le­ry is pro­vi­ded by the Jet­pack plugin. To add this gal­le­ry you will need Jet­pack instal­led. Once instal­led, sim­ply click Add Media in your post edi­tor and click Crea­te Gal­le­ry. In the Gal­le­ry Set­tings area, choo­se Tiled Mosaic as the type of gal­le­ry.


Address Tag

1 Infi­ni­te Loop
Cup­er­ti­no, CA 95014
United Sta­tes