Styles and layout - apply text styles

Show more buttons iconThis entry relates to styles and layout, in particular the HTML editor.

For reasons of accessibility, usability, universal design and sustainability, you are advised to apply styles that are built into the HTML editor when working with text. Categories of style usage include headings, quotes and other text elements. 

Font colours

The font colour range is limited making it easier to be consistent. These colours ensure the text is readable on the screen. To view this feature you will need to expand the HTML editor menu.

font colour options

Paragraph styles

Using paragraph styles will ensure that your site looks 'clean' (ie no unnecessary formatting) and consistent. These tools save you time as you don't have to worry about formatting text yourself, and are accessible to users with a sight disability, as their screen reader will be able to make sense of the text. Just as you wouldn't want to read a book that had no chapter headings or subheadings, so web users like 'chunked' text that makes reading easier.

  1. In your FLO activity/resource/module, place your cursor where you want the style (eg heading) to appear, and from the toolbar menu, select the Paragraph styles icon Paragraph styles icon
  2. Make a choice from the Paragraph styles menu 
    paragraph styles menu

  3. Click Save changes once you have finished editing the text 


These styles can be used to highlight something important that you want students to see (eg guest lecturers, assessment items due, preparation for a workshop). Using an option in the Styles menu will make this information stand out in your FLO site.


Please prepare for our next workshop by reflecting on your experiences at placement.

  1. In your FLO activity/resource/module, in the HTML editor toolbar click on the Show more buttons iconShow more buttons icon

  2. Place your cursor where you want the style to appear, and from the toolbar menu select the Styles iconapply text styles

  3. Make a choice from the drop-down Styles menu
    Styles drop-down menu

  4. Click Save changes once you have finished editing the text

» How-to glossary