Typography

You can create some beautiful content by using some simple HTML elements. Mozen template offers some neat styles for all HTML elements and a great set of CSS classes to style your content. Basic HTML is very easy to learn and this small guide shows you how to use all styles provided by the Mozen theme.

Basic
HTML Elements

Here is a short demonstration of text-level semantics.

The <p> element creates a new paragraph. It will have some space before and after itself.

Text-level
semantics

You can emphasize text using the
<em> element
or to imply any extra importance the
<strong> element
. Highlight text with no semantic meaning using the [
mark
] element[
/mark
]. Markup document changes like inserted or deleted text with the
[
del
] element[
/del
]
or
[
ins
] element [
/ins
]
. To define an abbreviation use the
[
abbr
] element [
/abbr
]
and to define a definition term use the
[
dfn
] element [
/dfn
]
.

Basic
Bullet List

Apple iPad
mj-bullet1

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet2

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet3

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet4

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet5

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet6

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet7

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet8

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet9

Apple iPod

Apple iPod Nano

Apple iPad
mj-bullet10

Apple iPod

Apple iPod Nano

To use the bullet list style create a list in the following format

[list mj-bullet1][li]...[/li][li]...[/li][/list]

Featured
Bullet List

Apple iPad
mj-special1

Apple iPod

Apple iPod Nano

Apple iPad
mj-special2

Apple iPod

Apple iPod Nano

Apple iPad
mj-special3

Apple iPod

Apple iPod Nano

Apple iPad
mj-special4

Apple iPod

Apple iPod Nano

Apple iPad
mj-special5

Apple iPod

Apple iPod Nano

Apple iPad
mj-special6

Apple iPod

Apple iPod Nano

Apple iPad
mj-special7

Apple iPod

Apple iPod Nano

Apple iPad
mj-special8

Apple iPod

Apple iPod Nano

Apple iPad
bullet-9

Apple iPod

Apple iPod Nano

Apple iPad
mj-special10

Apple iPod

Apple iPod Nano

Apple iPad
mj-special11

Apple iPod

Apple iPod Nano

Apple iPad
mj-special12

Apple iPod

Apple iPod Nano

To use the special list style create a list in the following format

[list mj-special1 ][ li ]... [/li] [li]... [/li][/list]

Default
Headings

Lorem Ipsum dummy Text for H1.

Lorem Ipsum dummy Text for H2.

Lorem Ipsum dummy Text for H3.

Lorem Ipsum dummy Text for H4.

Lorem Ipsum dummy Text for H5.

Lorem Ipsum dummy Text for H6.

Text for H1 with dotted line.

Text for H2 with dotted line.

Text for H3 with dotted line.

Text for H4 with dotted line.

Text for H5 with dotted line.

Text for H6 with dotted line.

Content
Highlighter

Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. Can be used by using the CSS class
dropcap
. To emphasize text with some small boxes use
<em> element
with the CSS class
box
.

This simple box can be used by using the CSS class [
mj-boxcontent
]...[
/box
].

This simple box can be used by using the CSS class [
mj-boxnote
]...[
/box
].

This simple box can be used by using the CSS class [
mj-boxinfo
]...[
/box
].

This simple box can be used by using the CSS class [
mj-boxwarning
]...[
/box
].

This simple box can be used by using the CSS class [
mj-boxhint
]...[
/box
].

This simple box can be used by using the CSS class [
mj-boxdownload
]...[
/box
].