Skip Navigation

Web Developer Network

Text & Font Styles

There are a variety of text and font styling resources available for giving your website a bit of added flavor.

See a full list of all of the currently-available styles.

Heading and Text Styles

The classes "sec_header" and "sec_main" will style any tag that they are associated with. For instance, the following code:

<p class="sec_header">p class sec_header</p>

Will display like this:

p class sec_header


Whereas an h4 tag styled with the same class:

<h4 class="sec_header">h4 class sec_header</h4>

Will display like this:

h4 class sec_header


"sec_main" will style your text and headings in a slightly different way:

<p class="sec_main">p class sec_main</p>

p class sec_main


Likewise, an h4 tag styled with the same class:

<h4 class="sec_header">h4 class sec_main</h4>

Will display like this:

h4 class sec_main

Heading tags allow you to arrange content on your page based on importance.

<h1>this is an h1 tag</h1>
<h2>this is an h2 tag</h2>
<h3>this is an h3 tag</h3>
<h4>this is an h4 tag</h4>
<h5>this is an h5 tag</h5>
<h6>this is an h6 tag</h6>

this is an h1 tag

this is an h2 tag

this is an h3 tag

this is an h4 tag

this is an h5 tag
this is an h6 tag

Content Box Styling

Code example for zenboxes (switch class for different color): 

<div class="zenbox bright">
  <h3>This is a zenbox bright</h3>
  <p>This is some text. This is some text. This is some text.</p>
  <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul>
</div>

This is a zenbox bright

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

This is a zenbox cool

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

This is a zenbox energetic

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

This is a zenbox soothing

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

This is a zenbox primary

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

This is a zenbox neutral

This is some text. This is some text. This is some text.

  • Item 1
  • Item 2
  • Item 3

Content Table Styling

Code example for zentables (like zenboxes, you just switch the class for different color): 

<table class="zentable bright">
   <thead>
      <tr>
          <th colspan="3">zentable bright</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>row1 col1</td>
          <td>row1 col2</td>
          <td>row1 col3</td>
      </tr>
      <tr>
          <td>row2 col1</td>
          <td>row2 col2</td>
          <td>row2 col3</td>
      </tr>
  </tbody>
</table>
zentable bright
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3

zentable cool
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3

zentable energetic
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3
zentable soothing
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3

zentable primary
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3

zentable neutral
row1 col1 row1 col2 row1 col3
row2 col1 row2 col2 row2 col3