Below you can get an idea of how the default CSS will effect your images and typography when you’re creating pages.

Standard Paragraph Spacing

Sed id mauris ut magna dignissim suscipit. Donec ut urna nunc, id molestie justo. Morbi a venenatis felis. Sed non ligula et urna tincidunt malesuada. Curabitur elementum nunc id ipsum facilisis vel accumsan metus semper. Mauris enim leo, venenatis et lacinia consequat, fringilla nec lectus. Donec mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo. Maecenas nec mi nibh, quis pellentesque magna.

Fusce iaculis vulputate neque, eget lacinia diam laoreet vitae. Pellentesque mauris dolor, egestas eu sagittis vitae, vulputate quis ante. Suspendisse ipsum dolor, venenatis sed porttitor sit amet, dapibus vitae tellus. Mauris sit amet mi arcu. Sed congue, massa consectetur cursus tempus, arcu orci tempor justo, et condimentum ante justo ac dolor. Maecenas at lorem eu dolor gravida dapibus. Pellentesque facilisis sem in ligula pellentesque mollis.

Code:
<p>.....</p>

Tooltips

Sed id mauris ut magna dignissim suscipit fringilla nec lectus. Donec eleifend mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo. Maecenas nec mi nibh, quis pellentesque magna.

Code:
<span rel="tooltip" title="This is a tooltip!">eleifend</span>

Highlight with Colors

Fusce iaculis vulputate neque, eget lacinia diam laoreet vitae. Pellentesque mauris dolor, vulputate quis ante. Suspendisse ipsum dolor, venenatis. Mauris sit amet mi arcu. Sed congue, massa consectetur justo, et condimentum ante justo ac dolor. Maecenas at lorem eu dolor gravida dapibus. Pellentesque facilisis sem in ligula pellentesque mollis.

Code:
<span class="label label-{type}">the text to highlight</span>

Options:
important, warning, success, info, inverse

Dropcaps

Code:
<span class="dropcap">L</span>

Options:
round, square, (to use default style, don't include an additional class).

Text-Wrapped Image with a caption and framed

This is an awesome view

Wrap the image inside a div with class "caption" and either "alignleft" or "alignright". Add class "pretty" to the div if you want the whole thing to be framed. You can also only apply the frame to the image and not the caption by adding the class "pretty" to the image only.

Sed id mauris ut magna dignissim suscipit. Donec ut urna nunc, id molestie justo. Morbi a venenatis felis. Sed non ligula et urna tincidunt malesuada. Curabitur elementum nunc id ipsum facilisis vel accumsan metus semper. Mauris enim leo, venenatis et lacinia consequat, fringilla nec lectus. Donec eleifend mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo. Maecenas nec mi nibh, quis pellentesque magna. Donec eleifend mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo.

Code:
<div class="caption pretty alignleft" style="width: 150px;">
    <img src="image.jpg" />This is an awesome view
</div>

A Standard Image

Code:
<img src="image.jpg" />

An Image with class “pretty”

Code:
<img src="image.jpg" class="pretty" />

An Image That Links to a Lightbox Popup

Code:
<a href="image.jpg" rel="prettyPhoto" title="Example Image"><img src="image.jpg"  class="pretty" /></a>

Headers

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet

H6 Lorem ipsum dolor sit amet

Code:
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>

Unordered List

Code:
<ul class="square">
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

Code:
<ul class="circle">
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

Code:
<ul class="disc">
    <li>Text 1</li>
    <li>Text 2</li>
</ul>

Code:
<ol>
    <li>Text 1</li>
    <li>Text 2</li>
</ol>

Code:
<ul class="icons">
    <li><i class="icon-{name}"></i>Text 1</li>
    <li><i class="icon-{name}"></i>Text 2</li>
</ul>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis dictum eros non laoreet. Sed dui dolor, semper ac convallis sed, gravida eu eros. Praesent faucibus tincidunt volutpat. Aenean ac tellus augue, non suscipit massa. Duis pellentesque dignissim metus ac porta. In ultricies mi in dui consequat ac euismod turpis gravida.

Code:
<blockquote>Lorem ipsum dolor sit amet, consectetur...</blockquote>