Web Design Style Guide

Amherst homepage being tested on various screens

Questions?

Have a question about designing your pages, or need help using our styles?

Contact Willa Jarnagin in the Office of Communications.

Creating or editing webpages on the Amherst site? This guide shows the styles available to you via the college’s Content Management System. First, here are a few general tips:


How to Use Headings

When editing a page on the Amherst website, select some text and then choose one of the headings from the “Format” (or “Paragrah”) drop-down menu.

Heading 2 is used automatically for the page title, at the top of the page. Elsewhere on your pages, use:

Heading 3

Header 4

Header 5
Header 6

Tip: Use headings to break up large blocks of text and allow people to scan a page more easily.


How to Apply Styles

When editing a page on the Amherst website, select some text and then choose a style from the “Styles” drop-down menu.

Paragraph Styles

Most of the time you’ll use regular paragraphs, which require no style to be added. Keep it simple!

For captions under photos, please use the “Caption” style, which is a bit smaller and lighter than regular text.

Drop Caps

Amherst. This is Drop cap 1. Select the first letter of a paragraph and apply the “drop cap1” style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nunc id nisl consectetur adipiscing mollis imperdiet purus. Ut malesuada urna ut est consectetur malesuada.

This is Drop cap 2. Select the first letter of a paragraph and apply the “drop cap2” style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id nunc id nisl consectetur adipiscing mollis imperdiet purus. Ut malesuada urna ut est consectetur malesuada.


Images

Keep it simple: Insert a large photo in your article, with a caption under it.

Most of the time you don’t need to add any styles to photos; simply place a large photo under your title, or between paragaphs, and place a caption below, using the “caption” style.

Sometimes you’ll want to use smaller photos:

Walking Toward the Range

The photo at left has the “image align left” style applied to it, which makes the image align to the left, with some margin between the image and text.

A similar style called “image align right” makes the image align to the right side of the page, and text wrap on the left.


Add a horizontal rule if text is wrapping where you don't want it to.