Style

Headings are used to structurally order and display content on a page. The use of heading hierarchy will help visitors relate one paragraph to another within the overall content structure.

Heading 1, when linked

Heading 2, when linked

Heading 3, when linked

Heading 4, when linked

Paragraph styles

Large areas of text, as with the printed medium, tend to be organised in terms of sub-headings and paragraphs. Below are visual presentation options for these paragraphs that can increase visual interest or viewer focus for your site visitor.

Page summary

This paragraph style is for page summary paragraphs, the first paragraph on the page, located under the page heading (heading 1).

Standard

This paragraph style is for standard paragraphs, and is the starting point for all paragraph styles.

In-page links

This paragraph contains an in-page link to nowhere.

Highlight

This paragraph style is for highlighting a certain paragraph for a greater focus when site vistors are viewing your page.

Highlight 1

This paragraph style is also for highlighting a certain paragraph. Different attributes can be set to add a second highlight focus from the above ‘highlight’ visual style.

Image placement options

To increase the visual impact of a page, the use of images can do wonders. Images can be placed in three ways in relation to a paragraph, above, left or right.

Image above

example image: blank

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Image left

example image: blank

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Image right

example image: blank

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Unordered lists

Unordered lists allow dot point organisation of content, different styles can be utilised to highlight different dot point levels.

  • list style disc
  • list style circle
  • list style square

Ordered lists

Unordered lists allow dot point organisation of content, different styles can be utilised to highlight different dot point levels. Nestling of ordered lists can provide numbered lists and sublists for the visitor.

  1. list style lower roman
  2. list style upper roman
  3. list style decimal
  4. list style decimal leading zero
  5. list style lower alpha
  6. list style upper alpha

Example ordered list: nestled

  1. List element 1
  2. List element 1
  3. List element 1
    1. List element 2
    2. List element 2
    3. List element 2

Quote styles

When present, the correct mark-up of quotes can add to the visual presentation of your page. Quotes come in two styles. a ‘blockquote’ and an inline quote ‘q’. Both of these options have different visual styles that can be customised as required.

Blockquote styles

The default look of a blockquote

A blockquote using the ‘quote’ style

Joe Bloggs

A blockquote using the ‘quote1’ style

Inline quote styles

This sentence contains A quote with the default look by Joanne Smith. This sentence contains A quote with the ‘quote’ look by Joanne Smith.

Table example

Business Address Phone
Angas Park Store 3 Murray St Angaston +61 8 8561 0830
 
Bottega Rotolo 7 Osmond Terrace Norwood +61 8 8362 0455
 
Berri Direct Sturt Highway Berri +61 8 8582 3428
 
Charlesworth Nuts Stall 70 Central Market Gouger Street Adelaide +61 8 8231 9449
Charlesworth Nuts Adelaide Myer Centre Rundle Mall Adelaide +61 8 8410 0880
Charlesworth Nuts Shop 18 City Cross Rundle Mall Adelaide +61 8 8211 7883
Charlesworth Nuts Marion Westfield Shopping Centre Marion +61 8 8298 3585
Charlesworth Nuts West Lakes Mall West Lakes +61 8 8235 9114
Charlesworth Nuts Tea Tree Plaza Westfield Shopping Centre +61 8 8264 9156
Charlesworth Nuts Elizabeth City Centre Elizabeth +61 8 8410 0880
Charlesworth Nuts Noarlunga Colonnades Shopping Centre +61 8 8384 4964
 
David Jones Rundle Mall Adelaide +61 8 8305 3000

Comments are closed.