• Change Text to Default
  • Change Text to Red
  • Change Text to Orange
  • Change Text to Yellow
  • Change Text to Green
  • Change Text to Blue
  • Change Text to Violet

CSS Typography

Headings


h1 The quick brown fox jumps over the lazy dog

h2 The quick brown fox jumps over the lazy dog

h3 The quick brown fox jumps over the lazy dog

h4 The quick brown fox jumps over the lazy dog

h5 The quick brown fox jumps over the lazy dog
h6 The quick brown fox jumps over the lazy dog

Paragraph


The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Styles


Bold

The quick brown fox jumps over the lazy dog

Code
<p class="MTextBold">The quick brown fox jumps over the lazy dog</p>

Italics

The quick brown fox jumps over the lazy dog

Code
<p class="MTextItalics">The quick brown fox jumps over the lazy dog</p>

Colors

The quick brown fox jumps over the lazy dog

Code
<p class="MTextRed">The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

Code
<p class="MTextOrange">The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

Code
<p class="MTextYellow">The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

Code
<p class="MTextGreen">The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

Code
<p class="MTextBlue">The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

Code
<p class="MTextViolet">The quick brown fox jumps over the lazy dog</p>

Alignment


Left aligned text.

Center aligned text.

Right aligned text.

Code
<p class="MTextLeft">Left aligned text.</p>
<p class="MTextCentered">Center aligned text.</p>
<p class="MTextRight">Right aligned text.</p>