Formatting and Styling Articles

Applying styles and formatting to individual content elements is an easy and effective way to improve the visual rendering of your content. A consistent visual style increases the readability and attractiveness of the content that is presented to your sites visitors.

Before styling your content using the Style Chooser ( ) it should first be formatted correctly.

Choosing the right Formatting element for the job?

There are two types of elements that make up your page content; block elements and inline elements.

Block elements refer to headings, paragraphs, blockquotes and lists while inline elements include strong (bold), emphasised (italic) or strike through text. Using the correct block and inline elements is essential to increase the readability of your content and keeping visitors on your site longer.

Block or inline element?

Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements begin on a new line.

Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.

Below is a summary of block and inline elements available in the Rich Content Editor

Why Use Heading Tags?

You may be wondering why heading tags are necessary at all. You could achieve the same effect by specifying a larger font, different colour or defining a style class.

Use heading tags and block elements to define your documents hierarchical structure. Well-written headings inform site visitors and helps them navigate through your page. Headings should contain keywords that appear within your content. This will even help increase your site ranking on some search engines.

People do not read content the same way online as they do in print. They're more likely to scan a document quickly and move on if it doesn't catch their interest. Web site visitors use document headings and subheadings to scan the page for interesting content.

Long pages full of continuous text looks uninteresting online, so use header tags to pique visitors' interest in your content sections. Heading content describes what's on your page, so make sure it's descriptive and compelling.

Key points:

• Correct formatting break up content making it easier for the the reader to identify important sections and follow the content.
• Heading tags are used by some search engines to identify words which are more important than the rest of the page text. The theory is that headings will sum up the topic of the page, so they are counted as important keywords.
• Applying formatting make it easy to make global changes to headings.
• Heading tags and formatting will be recognised by browsers which don't recognise style sheets (or use a user-defined style sheet)

Block Element Formatting Reference

Heading elements are not the only useful formatting element you have at your disposal.

Block Element Reference

Block Element	Icon	Description
Paragraph		Use paragraphs for all general content. Apply styles to the paragraph element to change its appearance.
Heading 4		Identifies a new section
Heading 5		A sub section heading
Heading 6		A sub-sub section heading
Blockquote		If you are quoting more than a few lines from a source, use a BLOCKQUOTE to indicate this. If you quote from someone else's work, don't forget to include a credit and/or copyright notice. Do not use BLOCKQUOTE simply to create indented text. This is not the intended use, so you will not achieve the effect you want on all browsers. It will also confuse search engines.
Unordered List		Use an unordered list to combine a list of associated elements in no particular order. The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is. Unordered lists are rendered as a list of items, each one preceded by a red "bullet"
Ordered List		Use an ordered list to combine a list of associated elements in a particular order.

Visually styling block elements

Once you are confident that your page has all the required formatting there may be some content you wish to give a little extra special treatment. This is the appropriate time to apply a style.

When applied correctly styles should add additional focus to a previously formatted element. They must not be used as a substitute for correct formatting.

Applying styles to block elements will change the visual style of the element without changing its meaning adding visual interest to your content.

Adding a style to a block element example

1. Create a new block of content See: Creating Content for more information
2. Position the cursor inside the empty content block
3. Type in a phrase of example content
4. It is very important that your content is a block element. In this example we will apply paragraph formatting to the entered phrase. To achieve this firstly select the content inside the rich content editor.
5. Select 'Paragraph' from the drop down Block Element Chooser to apply the block formatting. Note: When entering the first line of text it may not be set as a block element.
6. The path status bar reflects that the phrase is now a paragraph and the style of the text has changed.
7. Select the whole block paragraph by clicking the 'p' in the path status bar. It is extremely important that when you apply styles you select the correct element by clicking on its corresponding element link in the status bar.
8. Select the information style from the styles drop down menu.
9. The content has now been styled with the pre-defined visual style. The block level element and the style downloads have been updated. The status bar has now displays the shorthand version of the style applied. The content is still a paragraph however it is now styled to represent a piece of emphasised information.
10. To remove the style select the paragraph by clicking on the element link in the status bar (See: Step 7) and choose '--Styles--' from the Style Chooser menu.

Style Reference

Style Reference

Style	Apply to	Description
Image (Left)	Paragraphs containing images and captions	Floats a paragraph containing an image and caption to the left of the main content block Adds a light grey border around the floated paragraph Automatically forces caption under the image Adds a margin to the right and bottom of the paragraph Image Left Example This dummy paragraph of content follows the floated image to the left. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta auctor lacus. Quisque nunc magna, sollicitudin eu, elementum ac, consectetuer sit amet, tortor. Donec adipiscing urna non nulla. Vivamus bibendum vestibulum ligula. Curabitur molestie justo. Mauris convallis felis a metus. Nulla tortor. Curabitur posuere malesuada nulla.
Image (Right)	Paragraphs containing images and captions	Floats a paragraph containing an image and caption to the right of the main content block. Adds a light grey border around the floated paragraph. Automatically forces caption under the image. Image Right Example This dummy paragraph of content follows the floated image to the right. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta auctor lacus. Quisque nunc magna, sollicitudin eu, elementum ac, consectetuer sit amet, tortor. Donec adipiscing urna non nulla. Vivamus bibendum vestibulum ligula. Curabitur molestie justo. Mauris convallis felis a metus. Nulla tortor. Curabitur posuere malesuada nulla.
Pull Quote (Left)	Paragraphs	Floats a paragraph of text to the left of the main content block. Increased the first letter of the paragraph in size. This is a pull quote that is floated to the left This dummy paragraph of content follows the pull quote to the left. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta auctor lacus. Quisque nunc magna, sollicitudin eu, elementum ac, consectetuer sit amet, tortor. Donec adipiscing urna non nulla. Vivamus bibendum vestibulum ligula. Curabitur molestie justo. Mauris convallis felis a metus. Nulla tortor. Curabitur posuere malesuada nulla.
Pull Quote (Right)	Paragraphs	Floats a paragraph of text to the right of the main content block. Increased the first letter of the paragraph in size. This is a pull quote that is floated to the right This dummy paragraph of content follows the pull quote to the right. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum porta auctor lacus. Quisque nunc magna, sollicitudin eu, elementum ac, consectetuer sit amet, tortor. Donec adipiscing urna non nulla. Vivamus bibendum vestibulum ligula. Curabitur molestie justo. Mauris convallis felis a metus. Nulla tortor. Curabitur posuere malesuada nulla.
Information	Paragraphs	Displays the paragraph with a light blue background Adds a darker blue border Adds an information icon to the left of the paragraph Example of a paragraph with the Information style applied
Help	Paragraphs	Displays the paragraph with a light blue background Adds a darker blue border Adds an help icon to the left of the paragraph Example of a paragraph with the Help style applied
Success	Paragraphs	Displays the paragraph with a light green background Adds a darker green border Adds an success icon to the left of the paragraph Example of a paragraph with the Success style applied
Warning	Paragraphs	Displays the paragraph with a light yellow background Adds a darker yellow border Adds an warning icon to the left of the paragraph Example of a paragraph with the Warning style applied
Error	Paragraphs	Displays the paragraph with a light red background Adds a darker red border Adds an error icon to the left of the paragraph Example of a paragraph with the Error style applied
Force Under	Any element following a floated element.	Forces the element below the previous floated element.

Now you might want to read:

• Setting up your AMAZing Place account
• Creating Articles
• Viewing/Editing Articles
• Deleting Articles
• Rich Content Editor � How the content bar works
• Adding Links � hyperlinks to other areas and emails
• Adding & Managing Pictures
• Guidelines to Writing a Good Article for Users and Search Engine Optimisation
• Video Tutorial: Creating Articles