The Text Styles

Text Styles / Typography

Intro with a p tag and the CSS class “intro” ridiculus integer vel, rhoncus aliquam aenean magna tortor integer platea ultricies magna purus ut in, integer rhoncus! Lectus lacus tortor a platea, dictumst auctor porttitor diam odio In diam, dapibus parturient cursus et!

Dropcap with a span tag and the CSS class of “dropcap” around the first letter of a paragraph. Eros habitasse turpis, et ultricies nisi tincidunt! Turpis ultricies egestas dignissim pulvinar nunc parturient ultrices. Risus quis cursus! Et magnis a! Mus eros, pid! Integer, turpis vel, urna mauris habitasse porttitor? Arcu cum integer elementum? Risus. Sit arcu ac? Dis odio rhoncus aliquam. Risus a, et et enim platea ac, a. Vut turpis dignissim magnis aliquet cras, est nec, a adipiscing et amet? Integer eu ac a facilisis porta, urna.

Adding a Two Column Text Area

You can add any text in a two-column layout by wrapping your text in an additional div container with the CSS class of “twocolumn”. Risus turpis turpis adipiscing vut, amet. Auctor? Adipiscing nec parturient nunc in magna. Dignissim dignissim turpis? Pulvinar, egestas ac! Sit, tempor, aliquam augue scelerisque elementum placerat dolor, dapibus aenean, duis, nunc magna. Augue turpis nisi parturient egestas! Vel scelerisque pulvinar, hac! Sit et lacus scelerisque nisi in, penatibus, aliquet ac nec? Duis montes? Sit rhoncus sit! Odio ac, tempor vut, mid aenean risus, lundium purus augue sed, sociis etiam. Odio placerat ultricies tincidunt sed in. Urna etiam adipiscing amet nec elementum vut cursus. In. Rhoncus urna nec, amet turpis, cras amet, odio proin auctor rhoncus, phasellus aliquet est est! Cum et. Penatibus augue augue magna placerat porta, cum in. Nunc sed ultricies eros? Vut risus, magnis purus ac mattis proin sociis purus? Tincidunt nec hac et lacus tincidunt odio auctor elementum? Nascetur sociis, tincidunt ac amet dictumst mid elit. Montes, diam est placerat placerat montes, magna cursus duis duis.

This is a text area with a two-column layout
Adipiscing nisi ut risus in! Habitasse purus vel. Porttitor enim porttitor augue adipiscing? Nisi parturient ridiculus magna tempor proin! Et magna, augue ac. Tempor mauris platea odio, cursus augue sociis rhoncus a urna vel adipiscing. Porttitor lorem sed vel in augue nisi nascetur enim, in augue porttitor elementum eros ac porta pid tristique sed eu elementum in sed vel? Sit? Montes! Et elit diam platea cras tincidunt lorem penatibus. Proin urna, porttitor ultricies nisi, phasellus nunc, odio, adipiscing auctor ridiculus dignissim adipiscing nisi placerat sit sociis hac tincidunt dignissim, integer ac. Scelerisque, habitasse, pellentesque magna sociis platea ultricies, mauris eros porttitor?

Styling Your Content
Elementum penatibus amet lorem in turpis in — turpis, amet parturient pid cursus dis et lundium, ultrices turpis. Tristique parturient arcu vut, nunc magnis diam magnis eu, pulvinar ac odio ut. Tincidunt amet sit, eu vel pulvinar rhoncus ultricies est, nec urna? Elementum etiam velit sit mid integer, lectus lundium, magna mattis vel. Et mid parturient et urna, augue aliquet vel pulvinar aliquet sed augue sociis odio, tincidunt integer odio ridiculus in, adipiscing egestas dictumst odio, pellentesque turpis! Porta aenean, nunc sed in turpis? Vel porta vel ac? Aliquam penatibus nunc rhoncus sed ridiculus in proin? Sed pulvinar dictumst dolor a porttitor, est ridiculus. Nunc porttitor integer adipiscing et duis natoque! Eros nunc mid. Platea auctor integer vut tincidunt natoque augue scelerisque ac dapibus integer lectus elementum quis, montes aenean massa, enim? Integer porta nunc nec lacus elit dignissim nunc non cum ut egestas vut pulvinar vut egestas.

The Heading One

The Heading Two

The Heading Three

The Heading Four

The Heading Five
The Heading Six

Pull Quotes and Block Quotes

You can highlight an important quote or sentence by adding it in a pull quote and wrap the text in a p tag with the CSS class of pull-left or pull-right.

Risus, in et? Integer adipiscing rhoncus sed, dictumst a! Adipiscing quis, proin lectus vel quis diam montes nec, duis mauris elementum lundium vel adipiscing sed! Duis. Phasellus scelerisque tortor, vel auctor, hac lundium ut lectus placerat enim lectus magna magnis placerat, velit ac magna? Nisi, aenean facilisis enim aenean, lacus integer, cum ac, diam porta ac ac sagittis a augue elementum odio ac? Ultricies tristique tristique sed scelerisque adipiscing rhoncus, nisi est nunc, lectus ac etiam pid, et ut a proin mus facilisis amet a, est mid rhoncus cum! Turpis elementum nisi, in, quis mid facilisis odio, turpis scelerisque in montes tristique tincidunt lorem, eu aenean in, pulvinar enim!

You can highlight an important quote or sentence by adding it in a pull quote and wrap the text in a p tag with the CSS class of pull-left or pull-right.

Sit habitasse integer! Nisi, urna, et amet magnis eu nec rhoncus. Scelerisque ac dis, scelerisque lundium pid? Sed a. Platea platea vel urna dignissim pid aliquam odio porta, dapibus, nunc integer! Nec ridiculus dictumst rhoncus diam dictumst dolor platea, augue magna, sociis ridiculus augue, urna tortor et? Dapibus elit? Vel scelerisque phasellus etiam aliquet adipiscing ut? Et integer cursus! Aliquet sociis tincidunt urna augue, placerat, magna tincidunt vel, dapibus vel mauris! Cras ac ac in magnis dignissim? Scelerisque aliquam arcu et. Penatibus montes? Etiam tristique nascetur habitasse, sed nascetur tristique magna, nunc natoque dictumst pellentesque, nisi et scelerisque? Augue sit magnis est, pulvinar sed, et. Elit quis? Turpis enim! Odio ac duis?

“It’s your life — but only if you make it so. The standards by which you live must be your own standards, your own values, your own convictions in regard to what is right and wrong, what is true and false, what is important and what is trivial. When you adopt the standards and the values of someone else or a community or a pressure group, you surrender your own integrity. You become, to the extent of your surrender, less of a human being.”
by Eleanor Roosevelt

Add A Lists to your Content

Amet, nisi rhoncus parturient mattis! Adipiscing augue sit odio amet. Porta cras, proin mid lacus dolor sed vel? Odio urna eros pellentesque ultricies urna, pulvinar tortor, ac, tempor rhoncus porta egestas dictumst! Lectus odio facilisis sit. Augue habitasse! Magna porttitor, amet amet nec turpis! Cum? Odio, elit, vel elementum cras vel mattis magna enim velit, lectus tristique penatibus lundium nascetur a. Ut? Scelerisque, porttitor cursus lectus ultricies auctor sociis, porta porta dapibus cum dis sit! Ut parturient, risus turpis scelerisque, ut in.

  • Lacus dictumst mid est, hac in ac urna scelerisque mid adipiscing.
  • Integer augue aenean tortor parturient pulvinar adipiscing proin amet.
  • Magna platea habitasse mid turpis dis montes eros diam.
  • Sed elementum porttitor, pulvinar, ultricies lacus sociis auctor.

Next to unordered lists with the ul tag, of course you can also add an ordered list with the ol tag. Lists make your content more readable and it will be easier for your readers to gather the important facts.

  1. Lacus dictumst mid est, hac in ac urna scelerisque mid adipiscing.
  2. Integer augue aenean tortor parturient pulvinar adipiscing proin amet.
  3. Proin ut lacus pulvinar turpis egestas nascetur hac, ultricies, rhoncus nunc sit mauris eros dignissim tortor. Dignissim cras nisi.
  4. Magna platea habitasse mid turpis dis montes eros diam
  5. Sed elementum porttitor, pulvinar, ultricies lacus sociis auctor.


Employee Salary
John Saddington $1 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Some Default Text Styles

Mus, ultricies sed elementum egestas ut! Porta nascetur purus integer, lundium nec, adipiscing et, lundium. Mattis integer vel cum odio sagittis augue? Urna magnis sit a tempor mauris, platea amet magnis scelerisque in a, ultrices mus massa placerat nec, augue penatibus habitasse ultricies augue augue magna sit. Pid quis dignissim. Tincidunt ac odio dictumst!

a ą e ę ń ż ź ć ś ł

Nie o śmierci mów z ambony o życiu
O żonie szukającej z lampą w ręku
igły zagubionej w ciemny wieczór,
żeby mąż nie miał skarpet podartych-
wczesnej wiosny na piętach nie czuł

А вот мрачные, давно не ремонтированные университетские ворота; скучающий дворник в тулупе, метла, кучи снега… На свежего мальчика, приехавшего из провинции и воображающего, что храм науки в самом деле храм, такие ворота не могут произвести здорового впечатления. Вообще ветхость университетских построек, мрачность коридоров, копоть стен, недостаток света, унылый вид ступеней, вешалок и скамей в истории русского пессимизма занимают одно из первых мест на ряду причин предрасполагающих… Вот и наш сад. С тех пор как я был студентом, он, кажется, не стал ни лучше, ни хуже. Я его не люблю. Было бы гораздо умнее, если бы вместо чахоточных лип, желтой акации и редкой стриженой сирени росли тут высокие сосны и хорошие дубы. Студент, настроение которого в большинстве создается обстановкой, на каждом шагу, там, где он учится, должен видеть перед собою только высокое, сильное и изящное… Храни его бог от тощих деревьев, разбитых окон, серых стен и дверей, обитых рваной клеенкой.

The Author

Hi, I'm Ellen, blogger and WordPress theme developer at I love traveling, vegan Thai food, NZ, fluffy puppies and lots of green tea. You can also find me on Twitter and Facebook. I collect inspirations on Pinterest and save all my pics at Flickr.