Formatting Content

A style guide for formatting content.

How To Force A Line Break (a Soft Return)

Both hard and soft returns move the text cursor to the next line of text. A hard return is created by hitting the Enter or Return key on the keyboard.  This not only drops the cursor to the next line of text, it also starts a new paragraph.  Paragraphs by default are styled with extra spacing between them so that text is easier to read.  So what if you want to start a new line of text but without the extra spacing?  Simple, use a soft return.  To insert a soft return, hold down the Shift key on the keyboard and hit the Enter or Return key. The soft return, or line break, is particularly useful when adding address and contact information to your site.

Here is an example that uses soft returns (line breaks):

OIS Web Support
webhelp@med.unc.edu
(919) 966-3519

Headings and Normal Text

Why you should use headers

  • Headers help to define your page's organizational structure and simplify page readability. Well-selected headers inform visitors and help them navigate your page.
  • Web site visitors use headings to scan the page for interesting content. They can easily determine where new topics are introduced and find what they're interested in.
  • Header content describes what's on your page, so make sure it's descriptive and compelling.
  • The proper use of headings and normal text aids accessibility, by allowing screen-reading devices (used by the sight-impaired) to follow the logical flow of your content. Such a device can inform them of the main headings, and allow them to tab from header to header on a page. If you merely make normal text big and bold, instead of using a heading preset, a screen reader will read that as regular text--not a designated heading.

How to use headers

  • HeadersHeaders can be found in the "Style..." drop-down list.
  • There are five heading sizes: Heading 1 – Heading 5. The series of numbered headers represents the level of priority, with a Heading 1 having the highest priority and the Heading 6 having the lowest.
  • For consistency, start with the highest level header (Heading 1) and work your way down.
  • Each page title is automatically styled as a heading level 1. No other heading on the page should carry as much weight. Because of this, the Heading 1 style has been removed from the "Styles..." drop-down box.
  • Don't use headers just to make text look bigger. There are other pre-defined styles such as XXX-large Font, XX-large Font, X-large Font, etc. that should be used for those purposes.
  • Please do not add additional formatting such as italicizing, bolding, and underlining to headers as this will conflict with the standard look and feel of the School of Medicine web system.
  • A heading style cannot be applied to part of a paragraph.  Even if you select / highlight part of a paragraph and apply a heading style, the heading style will be applied to the entire paragraph.  To prevent too much text from being styled as a header, ensure that your text is appropriately separated with hard returns (not soft returns).
  • The following presets are accessible from the Style drop-down menu that is visible when editing a page:

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

 

How to remove a heading style

To remove a heading style from some text, simply highlight the text and select Normal paragraph from the Styles drop down list.

 

EmphasisBold, Italic, Underlined, and Strike Through

If you have highlighted the text you want to format and select a formatting button, the selected text will have that format applied to it. If the text is not selected, all text which is entered after the button is selected will have the formatting applied to it. Just like a word processor, multiple formats can be applied.

SuperscriptSubscript and Superscript

Highlight the text you want to subscript or superscript and select the either the subscript or superscript button.

ListsUnordered (Bulleted) List / Ordered (Numbered) List/

Select the text you wish to format (each paragraph of the selected text will become its own bulleted item) and select either the Unordered List button to create a bulleted list.  Or, select the Ordered List button to create a numbered list. To create secondary and tertiary levels in the list, select the portion of the list you want to indent and click on the Indent button (see next).

IndentIncrease and Decrease Indent

Increase or decrease and selected lines of text. This tool can also be used to control indents in numbered or bulleted lists.

ParagraphAlignment

Click any of the alignment options to align the text on the page. The default is left aligned and is recommended for most content.

LinkLinks

Select text or an image, and then click the solid link icon to link to an anchor, page, outside URL, or email address. The button on the right removes a link. When creating a link to a page outside of the School of Medicine, be sure to click the "Advanced" tab and change the target to "Open in a new window." This makes the link open in a new browser window so that the user can continue browsing your site at the same time.

AnchorAnchors

Once you've placed an anchor at a specific spot on a page, you can later link to that anchor to make traveling there a breeze. When creating an anchor, you'll be prompted to name it so you can target it specifically.

 

Icon IdeaTip: If a page is long enough to warrant an anchor link that returns users to the top, it's a good idea to create a link like the example at the bottom of this page.  To link to anchors:

  1. Make the link by highlighting the text you wish to link (in this case, the word [top]), then insert a link.
  2. In the Insert/edit link box, browse to & select the page containing the anchor.
  3. On the far right of your screen, choose your anchor from the Anchors drop-down menu, then select Update.

Note
: When you add an anchor to a page, you must save the page before you can link to the anchor.

Link Anchor

 

ImageImages

Click to insert an image. You'll prompted to browse to the image's location, as well as select border, spacing, and alignment properties. By placing a short description in the alternative text field, you make such information accessible to users with disabilities, or who are otherwise unable to view images.  You can also upload images using this tool.

TableTables

Tables are handy containers for information that must be aligned in rows and columns. They can be formatted to your liking, and edited after creation by right-clicking (or control+clicking on a Mac). See Working with Tables for more information.

hrHorizontal Rule

Inserts a simple divider line as shown below:

 


 

CharactersInsert Special Character

Inserts symbols and special characters (trademark, currency, etc.). Place your cursor in the location you want to insert the special character. Click on the Insert Special Character button and choose the character you want to insert. Once you click on the special character, the Select Special Character window will close automatically.

StyleStyle

Select the text you want to format and choose a style from the drop down menu. Four levels of web site headers are included here (heading 2 will create the largest text, heading 5 the smallest), as well as a formatted style. The formatted style choice adds padding around the selected text, fills the background color with a light gray, and adds a slightly darker gray border. With other options, you can increase font size or apply other custom styles, such as discreet text, & highlighted text. You can only apply one style at a time. To remove styles, select the styled text and choose Normal from the drop down menu. (Note: Images can also be styled, with an Image Border.)

Discreet Text

Discreet text is located in the "Style..." drop-down menu that's visible when editing a page.

This is an example of discreet text. This style should be used sparingly and only to clarify or reference other content, like a photo caption.

TextText Color

To change the color of text, select the text and click on the text color button. You can choose from the basic color choices that appear, or choose More Colors. More colors contains a color picker with more color choices. If you know the color hex value that you want to use, enter it in the dialog box and hit ‘OK’.

BackgroundBackground Color

Select the text you want to add a background color to and click on the Background color button. This tool should be used sparingly.

EraseRemove Format

Click this icon to remove formatting such as bold, italic, underline, etc. that is applied to text.  (Note: This button won't remove styles chosen from the Style drop-down menu.)

[top]