Styles-Text

How to Code Paragraph Text Styles Inside Text Box

The text styling can be changed using the class feature. See samples below. The syntax is class=”class class“, replacing class with any combination of available classes – adding one space between each – to style the text.

Here is a list of the available ‘P’ tag classes.

COLOR: dk-blue, logo-blue, lt-blue, orange, bgd-yellow, bgd-orange, black, white

FONT SIZE: small, standard, large, xlarge, xxlarge

FONT WEIGHT: thin, medium, bold, heavy, xheavy, xxheavy, fat

FONT STYLE: sans-serif, serif

ALIGNMENT: left, center, right, justify

Standard Text Paragraph

HTML CODE: <p>paragraph text here</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac ipsum tortor. Suspendisse semper orci nisi, quis sodales mauris sodales quis. Suspendisse consequat fermentum lacus, ut mollis augue rhoncus vitae. Quisque aliquet placerat ipsum eget tincidunt. Cras sit amet varius augue, in blandit diam. Duis finibus elementum metus, eu facilisis nulla venenatis quis. Curabitur malesuada quam neque, quis finibus enim sagittis ac. Mauris vitae diam augue. Nam quam arcu, laoreet sed varius ornare, rhoncus in augue. Morbi consectetur interdum facilisis. Duis tincidunt eget ligula id viverra. Integer vel ultricies lectus. Morbi mattis mauris sed dictum scelerisque. Praesent placerat purus eget commodo scelerisque. Nam scelerisque nibh vitae ligula volutpat, sit amet feugiat risus congue.

Centered Paragraph

HTML CODE: <p class="center">paragraph text here</p>

Suspendisse ultricies mollis nisi, sed porttitor sapien cursus in. Quisque luctus risus vel elit ultricies, sit amet tristique ante blandit. In facilisis nec dui eu volutpat. Praesent iaculis auctor leo vitae consequat. Curabitur aliquet nibh libero, non facilisis massa bibendum et. Sed vestibulum purus mauris, id sagittis sem efficitur vel. Sed hendrerit erat mi, non placerat massa aliquet vel. Integer at nulla tortor.

Justified Paragraph

HTML CODE: <p class="justify">paragraph text here</p>

Aliquam at justo sed velit egestas mattis. Donec vulputate, sem vel vestibulum ultrices, lacus odio rhoncus nunc, in laoreet felis lacus id diam. Sed faucibus mauris nisl, a iaculis nisl vehicula ut. Duis viverra, mauris eget dignissim tempor, nisl leo ullamcorper purus, et imperdiet metus tellus et magna. Aliquam consequat, mi laoreet aliquet rhoncus, arcu sapien maximus est, et rhoncus turpis tortor et ex. Aliquam erat volutpat. Etiam ut lobortis nibh. Sed id tempus urna, non ultricies dui. Curabitur dignissim consequat turpis in finibus. Nam gravida, ante nec euismod accumsan, lectus quam eleifend lectus, ut bibendum nulla eros vitae tortor. Aliquam tempor finibus massa tristique pellentesque. Phasellus quis consequat tellus, quis blandit tellus. Ut velit nibh, imperdiet id sem eu, pellentesque consequat orci. Nam sit amet tortor id enim feugiat volutpat. Nunc aliquet consequat arcu, sed lobortis sapien tincidunt eget.

Justified Paragraphs, Automatic Columns

HTML CODE:

<div class="columns">

<p class="justify">

first paragraph text here

</p>

<p class="justify">

second paragraph text here, etc for each additional paragraph

</p>

</div>