Client Resources

Online Help

Help Page Text & Styling

Page Text & Styling

Your web page text plays a significant role in attracting customers to your website, so strong well written and emotive text will act to captivate your audience and drive them to your end goal, be that a purchase, a sign-up to your eNewsletter or an invitation to pick up the phone.

There are different ways to approach text on your pages. This section illustrates the various methods available and which ones work best for the type of text content being created.

On this page

  1. The Importance of in-built Text Styles
  2. How to Utilise Your Website’s CSS Styles
  3. How to Override CSS Text Styles
  4. Adding Text From External Word Processors
  5. Using Plain Text

FAQs

  1. How do I create one line of space (rather than two)?
  2. Can I 'undo' changes that I make in the content editor?
  3. How do I remove bullets from my text?
  4. Can I copy and paste from programs other than Microsoft Word?
  5. How do I upload files or documents to my website?
  6. How can I get my headings to look the same across the entire site without worrying about font styles?

Screen illustrations

Clicking this icon will display an illustration relevant to the step being described:  Click this icon to view illustrations

 

The Importance of in-built Text Styles

Tip: Learning SEO techniques

Observe SEO good practice by tagging section headings in correct order. Always ensure that you have the topmost heading tagged as Heading 1 , followed by that section’s paragraph text. The next section heading should be tagged as Heading 2 , and so on.

When your website was built it was given text styles (fonts, sizes, colours) designed to match your branding. Those unique text styles were created via an important file known as your website’s CSS file (commonly referred to as a “style sheet”).

Amongst other things, the CSS file controls the appearance of paragraph text, headings, font sizes and font colours. The CSS file instructs your visitor’s web browser to display your website fonts in a particular way.

When you create new page content, you can instruct the Content Editor to use the CSS file for text styling (recommended), or you can override your CSS file by instructing the Content Editor to use your preferred text styles instead.

Style consistency across your website text content is important for a number of reasons. First, branding only works if set guidelines are adhered to; in this case, defined text styling. 

Second, a website that uses different coloured text styles, fonts and sizes across various pages is at risk of straying from the business branding and if used in ad-hock fashion, lowers the presentation of the website as a whole. Over time, your page text content becomes unsightly which can ultimately lead to a drop in the time that visitors spend on your pages.

  • When you type text directly into the Content Editor , the text automatically takes on the default Paragraph styling provided by your CSS file.
  • Sometimes a WYSIWYG editor is not truly “what you see is what you get” when viewing text from within the Content Editor . Why does this happen? CSS text style instructions only apply to your website’s “front end” and do not appear within the Content Editor.

Top of page


How to Utilise Your Website’s CSS Styles

Your website’s paragraph and section headings text-colour, size and fonts were set up during your website build to ensure consistency of your text elements across your website.

To use in-built CSS text styling:

  1. Go to Pages > Add / Edit Pages (or any other content page that appears in the  Main Menu ).
  2. Navigate to the page you wish to create or edit.
  3. Type text into the Content Editor in the same way that you would type text into a word processor. Create a heading at the start of the page, then press Enter on your keyboard for each new paragraph and heading.
  4. Paragraphs take on the default CSS styles automatically. To style section headings, place your mouse cursor within the line of text (heading) to be styled, then select a heading style from the Format drop-down menu list. As soon as you click on a preferred format, your selected heading will take on its new formatting 
  • This is often referred to as “Tagging”, e.g. Heading 1 tag, Heading 2 tag, and so on.
  • Observe SEO good practice by tagging section headings in correct order. Always ensure that you have the topmost heading tagged as Heading 1 , followed by that section’s paragraph text. The next section heading should be tagged as Heading 2 , and so on.

Top of page


How to Override CSS Text Styles

There may be occasions when you want to enlarge text or introduce a new font style or colour to the page. We recommend that you use this sparingly, and only for special promotion-type pages.

  1. Go to Pages > Add / Edit Pages (or any other content page that appears in the Main Menu ).
  2. Navigate to the page you wish to create or edit.
  3. Use your mouse cursor to select and highlight the text to be re-styled.
  4. Select a Font Family from the drop-down menu list (and/or Font Size and/or Select text Color icon) as required 
  5. As soon as you click on a preferred style format, your selected text will take on its new formatting.
  • When you override CSS styles, the Content Editor inserts new lines of HTML code into your page content. This new code instructs your visitor’s web browser to ignore the CSS styles and instead use the override styles you’ve chosen. This can slow down the page-load time for your visitors if excessive overriding of styles is in place on the page.
  • Your web designer can rewrite your CSS file if you need to change or introduce new styles of text. This is the preferred method of changing CSS styles because you retain consistency across pages.

Top of page


Adding Text From External Word Processors

Preparing text content using an external word processor has advantages such as in-built spelling and grammar tools. However, using a “copy and paste” workflow (i.e. copying text from your word processor to the Content Editor ) can introduce formatting problems.

Using the Paste from Word button located on the WYSIWYG Toolbar can save post-editing time because it helps to remove unwanted styling code unique to Microsoft Word® word processing software. While suitable for Microsoft Word® documents, this unique code is not typically supported by modern web browsers and if left unchecked, can cause incorrect text display across some web browsers.

The Paste from Word tool will retain formatting such as paragraph spaces, bold and italic text, and heading hierarchy.

  1. Go to Pages > Add / Edit Pages
  2. Navigate to the page you wish to create or edit.
  3. Copy the text from your Microsoft Word® word processing software document.
  4. Click the Paste from Word tool from the WYSIWYG Toolbar.  A pop up window will appear for you to paste the text into. Paste your text into this box then click Insert.
  5. You will see that your text is automatically formatted to the style of the rest of your page (so long as your page uses default CSS styles). At this point you can make any necessary formatting edits.
  6. Save & Exit the page; Publish the website.

Top of page


Using Plain Text

This “copy and paste” method is recommended if you want to obtain absolutely clean text, free from anomalous style code introduced by your chosen word processing software.

Although more time is required to post-edit and style your section headings and paragraph styles such as bold and italics, this method is preferred by content editors with a keen eye to detail, and who insist on building “clean code” on their web pages.

After preparing your text using your external word processor:

  1. Go to Pages > Add / Edit Pages
  2. Navigate to the page you wish to create or edit.
  3. Copy the text from your external word processing software document.
  4. Click the Paste as Plain Text tool from the WYSIWYG Toolbar.  This toggles-on Plain Text editing.
  5. Paste the text from your external word processing software document. The text will now appear as plain paragraph text and will take on your CSS file’s paragraph style by default unless you style the restyle the text using any of the methods described in the Content Editor  section.
  6. Save & Exit the page; Publish the website.

Top of page


How do I create one line of space (rather than two)?

Tip: Create visitor friendly text

Website visitors like to be able to scan through content on a web page.

Good web pages contain content that is separated by headings and paragraph spaces.

Space makes it easy for visitors to scan through content on a page to find the information that they need quickly.

As a general rule, whenever you press the Enter (or Return) button on your keyboard a website editing program will always insert two lines of space before your cursor. This means that you will create what is commonly used as a paragraph space just by pressing the Enter or Return key once.  Here's an example:

This is an example of a paragraph which exists on a web page.

This is an example of a new paragraph that has been created by pressing the Enter key once.

To create one line of space between one line and the next line in a web editor, you must hold down the Shift key when you press Enter or Return (SHIFT + ENTER) . When you do this, you will create the following:

This is an example of a paragraph which exists on a web page.
This is an example of a new line that has been created by pressing the Shift + Enter keys at the same time.

When you paste content from an external word processing program into the content editor, there will be double line spaces for all of the paragraphs in your document.

To delete unwanted lines of space, place your cursor before the new paragraph spaces that have been created and press the Backspace key.

Top of page


Can I 'undo' changes that I make in the Content Editor?

If you need to undo the last edit that you made in the content editor use the Undo tool in the content editor tool bar or the common keyboard shortcut for undo (hold down the 'CTRL' key while you press the 'Z' key for Windows; for Mac, 'Apple command' key while you press the 'Z' key).

You can continue to undo changes until you reach the starting point of your page editing session.

To revert the page to how it was at the start of the page editing session, click Cancel.

Top of page


How do I remove bullets from my text?

The bullet button in the toolbar toggles bullets on and off.

  1. Go to Pages > Add/Edit Pages
  2. Highlight the text in the bulleted list.
  3. Click the Insert/remove bulleted list  tool on the Content Editor 's WYSIWYG toolbar  Bullet list icon
  4. The bullets will now be removed and the text will align to the left.

Top of page


Can I copy and paste from programs other than Microsoft Word?

You can copy and paste text from many applications. The content editor has been tested with content copied from Microsoft Excel, PowerPoint, Word Perfect and many other programs that use text and have a copy and paste function.

Top of page


How do I upload files or documents to my website?

Adding a downloadable document is a two step process. The first step is to upload the file or document to your website, the second is to create a link on a page that visitors can click on to download the file. See the article Managing Hyperlinks for more information.

Top of page


How can I get my headings to look the same across the entire site without worrying about font styles?

As a general rule, most website templates have three heading styles designed into them. They are called Heading 1 (which is usually the largest), Heading 2 and Heading 3 (some websites also have Heading 4, Heading 5 and Heading 6 styles).

The benefit of using these pre-defined heading styles is that it allows you to keep the information hierarchy on your website consistent. This makes your website look professional and helps your site to be user friendly. It also saves you a lot of time as you are not required to edit font color, style or size.

To change text to a pre-designed heading style:

  1. Go to Pages > Add/Edit Pages.  Select the page that you wish to edit.
  2. In the content editor, highlight the text you wish to change to a heading style.
  3. From the Format menu in the content editor toolbar, select Heading 1,  etc. You will see the text size change in the Content Editor.

Top of page


For free technical support, please contact support@sitesuite.com.au or call (02) 8904 7500