Content Styles

  • It is important to understand the intended uses of the styles and formatting options available in the CMS, and the benefits of using them properly.

    Why Apply Styles?

    Styles, or set formatting options in the CMS, serve multiple purposes. They visually organize the content on your page to help visitors read and find information easily. Styles are also important for "searchability" for search engines, like Google. The better organized your content, the better the chances of increasing your search results ranking, and in turn, increasing visitors to your site. 

    In addition, proper use of styles increases the accessibility of your site for those with disabilities. Having the correct hierarchy of styles and headings will make your page easier to "read" for adaptive technology, like screen readers.

    What's the Proper Way to Use Styles?

    To know how to best style your content, it is important to understand the intended use of each style. Below are the intended uses for the styles available in the CMS.

    For more information about page style and structure, see Use Meaningful Styles and Use Styles and Structural Elements According to Their Meaning, in Technical Best Practices.)

    Note: Styles may look different in the Workarea due to the limitations of Ektron. It is always suggested that you check in your work and preview it in the browser.

    Introduction

    Use on the first sentence of the page as an introduction. This draws the eye to the starting point of your page. Be sure to apply to only the first sentence, and keep that sentence fairly short (approximately 30 words). Not intended to be used to highlight text throughout the document, or the whole document.

     

    Example

    This draws the eye to the starting point of your page.

    Be sure to apply to only the first sentence, and keep that sentence fairly short (approximately 30 words). Not intended to be used to highlight text throughout the document, or the whole document.

     

    Instructions

    Used only for forms. Most web maintainers will not need this style.

    Indented

    Use when information needs to be highlighted or otherwise separated from the main body of text.

     

    Example

    For more information, please contact our office:

    1011 South Drive
    Indiana, PA 15705

     

    Large

    Use to emphasize the importance of select text. Not to be used on whole paragraphs or large sections of text.

     

    Example

    This is the normal font size

    This is the Large font size.

     

    Small

    Use for captions or providing further information (as would be noted with an asterisk).

     

    Example

    Freshman move-in day is scheduled for the Saturday before classes begin.*

    *Check for times.

     

    Checklist

    Useful for pages that may be printed and would be used as a checklist or to-do list.

    Note: To apply the Checklist style, you must first select the text, then apply the Bulleted List format (using the bulleted list icon in the toolbar). Then apply the Checklist style from the drop-down menu.

     

    Example

    What You’ll Need

    You will need these items to complete your application:

    • Official high school transcript
    • For transfer students, transcripts from all colleges,universities, and/or other schools attended. See How to Transfer.
    • Official SAT or ACT scores
    • $40 dollar fee

     

    Left-aligned, Right-aligned Images

    For use with images only and only images that are less than the full width of the page. This style sets the alignment of your image on your page, either left or right. This also should be set in the Image Properties section. For more information about image placement, please see How to Place an Image on Your Page.

    Headings

    Heading styles are used as the name implies, to style headings. Because they mark specific content as such for search engines and assistive software it is important to use the Heading styles for their intended page structuring and not for any other purpose.

    There are 4 heading styles available, ranging in size and importance starting with Heading 2 down to Heading 5. Heading 2 should be used for almost all headings. When there are multiple sub-sections, Headings 3, 4, and 5 should be used.

    Note: Heading 1 is listed in the menu, but you should not use this style. It is used already in the page structure, and can only appear once in a page. If you use Heading 1, it will be changed to Heading 2 before it is published.

     

    Example

    Section Title (Heading 2)

    1. Sub Section (Heading 3)

    A. Sub Section (Heading 4)

    Text Text Text

    B. Sub Section (Heading 4)

    Text Text Text

    2. Sub Section (Heading 3)

    A. Sub Section (Heading 4)

    Text Text Text

    B. Sub Section (Heading 4)

    Text Text Text

     

    Formatted

    Do not use this style.

    Address

    Do not use this style.