Web Style Library

The web style library is a central place to see examples of the styles used and the guidelines established under which those styles should be used on the Evergreen website. Consistent use of the established styles will ensure that users of our web pages will have an experience that is both predictable and efficient.

Do not create new CSS styles or apply styles that deviate from the standards established by the web team.

If you have questions or need help with styles on your pages, please contact us.

Heading Styles

Headings dropdown in the CMSHeadings should be used to separate your content into sections and make it easy for visitors to find what they’re looking for more easily.

  • Use the Format dropdown menu to create Headings.
  • Think of headings like an outline. Start with an h2, and use h3, h4, etc., as content gets more specific.
  • Do not modify the default (left) alignment.
  • Do not use Heading 1. Heading 1 is reserved for the page heading (e.g., the red page heading “Web Style Library” on this page) and must not be used in the body of the page.

Example:

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph Styles

Paragraph formatThe default and standard style for a paragraph.

  • Text is typically put into paragraphs automatically.
  • If you need to turn something into a paragraph (e.g. from a heading), use the Format dropdown menu.

Example:

Some things are best kept simple.

Details

“details” styleThe “details” style can be used for inessential but perhaps useful information.

  • Apply this style using the Styles dropdown menu.
  • You can also use the HTML attribute class="details".

Example:

Style for small details (can be applied to any element).

<p class="details">Style for small details (can be applied to any element).</p>

Notice

“notice” styleThe “notice” style calls attention to targeted content.

  • Apply this style using the Styles dropdown menu.
  • You can also use the HTML attribute class="notice".
  • Use sparingly—just for that one special bit of content you want to draw readers to.

Example:

If you use too many of these on one page, users will stop “noticing” them.

<p class="notice">If you use too many of these on one page, users will stop “noticing” them.</p>

Newsbox

The style for news notices can be applied in the HTML to divs or paragraphs.

Example:

An alternative to the “notice” style.

<p class="newsbox">An alternative to the “notice” style.</p>

List Styles

Unordered list buttonLists are useful for chunking copy for easy scanning.

Example:

  • Unordered list item 1
  • Item 2
  • Item 3

Table Style

Table buttonRemember, tables are used for tabular data—not layout.

Basic Table Style

Simply create a table with the “Insert a new table” button.

Example:

Header row Second column heading
Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2
<table>
    <thead>
        <tr>
            <th>Header row</th>
            <th>Second column heading</th>
        </tr>
    </thead>
    <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
    </tr>
    <tr>
        <td>Row 2, Col 1</td>
        <td>Row 2, Col 2</td>
    </tr>
</table>

Alternate Table Style

“default” table styleThere are no specific rules for using this style over the basic style.

  • The most predictable way to apply this style is in the HTML. Add the class="default" attribute to the <table> element.
  • This can also be done with the WYSIWYG editor, though it can be finicky.
    • Click on the table border—the cursor will be an arrow. This will put white boxes on all sides and corners of the table and the table cell borders will turn blue. If they are not blue, you will need to click again. You have to click exactly on the border of the table (See? Very finicky).
    • Use the “default” style in the Styles dropdown menu.

Example:

Header row Second column heading
Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2
<table class="default">
    <thead>
        <tr>
            <th>Header row</th>
            <th>Second column heading</th>
        </tr>
    </thead>
    <tr>
        <td>Row 1, Col 1</td>
        <td>Row 1, Col 2</td>
    </tr>
    <tr>
        <td>Row 2, Col 1</td>
        <td>Row 2, Col 2</td>
    </tr>
</table>