Styles You Choose: Common Styles Used to Format Content Pages

There are a variety of styles available for use on links, text, and quotations that can achieve a number of effects. Authors should use the appropriate styles whenever possible to provide a consistent user experience across the URMC website.

Link Styles

Style Name	Appearance	Usage Notes
link-audio	Listen to audio	Use when linking to an audio file.
link-email	user_email@urmc.rochester.edu	Use when linking email addresses.
link-external	Link to ExternalDomain.org	Use when linking to websites not on the URMC servers.
link-file	My File	Use when linking generic files.
link-pdf	My PDF	Use when linking PDF files.
link-ppt	My PowerPoint Slide Show	Use when linking PowerPoint files.
link-print	Print My Document	Use when linking to a printable document.
link-profile	My Faculty Profile	Use when linking to eCV profiles.
link-rss	Subscribe to news feeds	Use when linking to news feed sign up.
link-video	My Video	Use when linking video files.
link-word	My Word Document	Use when linking Word files.
link-xls	My Excel File	Use when linking Excel files.

Paragraph Styles

Using paragraph styles is a good way to group related text or add interest to your page. They will affect a block of text, causing it to appear on its own line, as opposed to inline in the middle of a sentence. The style options for paragraphs are illustrated below.

box-callout

My important text to highlight

Use to bring out any important information relating to the content on the page, such as a statistic or a testimonial.

box-notice

Alert: This is an example of a box notice. If this had been an actual box notice, you would have been instructed what to do.

Use to highlight important instructions or alerts.

box-directory

A | B | C | D ...

Use to present an alphabetical list of links to other elements within the same page. (See the Departments and Centers page for a live example.)

Pull Quotes

pull-quote-right

This is my testimonial in a right-aligned pull quote.

Use to bring a quote out from text to the right.

A pull quote is a snippet of text from within the page that the author wishes to highlight.

pull-quote-left

This is my testimonial in a left-aligned pull quote.

Use this style to bring a quote out from text to the left.

The quoted text is floated to the left of the main content it is extracted from.

Text Styles

Text styles are styles that can be applied inline; that is, they can be used within a sentence without breaking the paragraph to start a new line. Text styles you'll find useful include:

Style Name	Appearance	Usage Notes
text-bold-caps	Sample text using text-bold-caps	Use for uppercase bold lettering.
text-small	Sample text using text-small	Use for text that is 80% smaller than the default font.
text-large	Sample text using text-large	Use for text that is 118% larger than the default font.
text-xl	Sample text using text-xl	Use for text that is 145% larger than the default font.
text-xl-fancy	Sample text using text-xl	Use for text that is 145% larger, serif, and italic.

FAQ Lists

To create a FAQ list, you'll need to create a definition list (see our Contribute Training Manual for instructions). Then you can apply the style, "faq," to the list. The results will look like:

Question 1: Answer 1.
Question 2: Answer 2.
Question 3: Answer 3.

Images

imgFrameLeft

There are several options available for styling images. You can "float" an image to the right or left, with text wrapping around them, either with or without a border. The image to the left is using the style "imgFrameLeft." The image is aligned to the left while the text wraps around to its right. A light gray border and padding are also applied automatically with this style.

imgFrameRight

Nurse checking on patient's monitor By contrast, the image to the right is using the style "imgFrameRight." The image is floated to the right while text wraps around its left side. Note that to get this paragraph to not wrap around the image above, we applied a style called "clear" to the paragraph, which in effect turns off any preceding alignment.

imgFrame

Nurse checking on patient's monitor

The image above uses a style that has no float applied to it. This is what you want to use if the image you are using is not associated with a paragraph of text, but you still want the frame around it. Depending on where you apply this style to an image, it will depend whether it aligns left, right, or center.

img-left

quality couple This class is similar to the one above, but this one floats the image to the left only, and removes the border and padding. This style is good to use for images with a white background that don't need an edge to separate it from the content around it.

img-right

example Floats your image to the right, no border.

Images with Captions

This is a caption for this little photo.

For Contribute and Dreamweaver users, adding captions to images will soon be easier than creating tables. It will merely require the insertion of an HTML code snippet, pre-written sections of code that you can customize for your needs.

Meanwhile, if you are using Dreamweaver, here are sample blocks of HTML markup for achieving the effect seen to the right (note that this effect does not yet carry to printed styles):

<div class="img-right"> <img src="/folder/image.jpg" alt="Alt tag required!" /> <p>Caption for photo if desired.</p> </div>

<div class="img-left"> <img src="/folder/image.jpg" alt="Alt tag required!" /> <p>Caption for photo if desired.</p> </div>

Notes

Please be aware that the styles described above apply only to "content" pages, such as those written with the URMC "content" template. Other pages, such as "department homepages," "section homepages," or "portals" may have a different stylesheet and result in different looks for identical elements. Also be aware that the look of styles on the URMC website are subject to change with little or no notice at the discretion of Web Services.