Web Style Library
Web Style Library
The staff in the Office of College Relations have established design directions and styles for all web pages that use Evergreen templates. Consistent use of the established styles for display of information will help assure that users of our web pages have an experience that is both predictable and efficient as they navigate our site.
The web style library is a central place to see examples of the styles used within the Evergreen v4 template and the guidelines established under which those styles should be used on the Evergreen site.
As a general rule, do not create new CSS styles or apply styles that deviate from the standards established by the staff in the Office of College Relations. If you have questions or need help with styles on your pages, please contact us.
Header Styles
Headers should be used to separate your content into sections and make it easy for visitors to find what they're looking for more easily. Headers and content are aligned left by default - do not change the default alignment.
Header 1 is reserved for the page heading (ie: the red page heading "Web Style Library" on this page) and must not be used in the body/content of the page.
Header 2
Header 3
Header 4
Header 5
Header 6
Paragraph style. The default and standard style for a paragraph in the content of pages on web pages at The Evergreen State College. The default and standard style for a paragraph in the content of pages on web pages at The Evergreen State College. The default and standard style for a paragraph in the content of pages on web pages at The Evergreen State College.
Some things are best kept simple
<p>Paragraph style. Pretty basic default style for a paragraph.</p
Style for small details. (can be applied to any element)
<p class="details">Style for small details. (can be applied to any element)</p
Style for notices. Can be applied to divs or paragraphs.
<p class="notice">Style for notices. Can be applied to divs or paragraphs.</p
Style for news notice. Can be applied to divs or paragraphs.
<p class="newsbox">Style for news notice. Can be applied to divs or paragraphs.</p>
Styles for Lists:
- Unordered list item 1
- Item 2
- Item 3
Style for tables (used for tabular data - not layout):
| 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>