Twitter icon
YouTube icon

Typography

Typography

Paragraphs

This is an example of how paragraphs will display spacing

We always begin with a free 30 minute consultation lesson to start building our relationship and so that we can work out where to begin and how to work together.

Every pupil has a different starting point no matter what age they are.

Some pupils come never having had any experience of music at all, some enjoying listening or dancing to music, some play a different instrument, sing or have learnt the piano or other instrument in the past, and some want to continue learning but with a new teacher.

Whatever your age or experience, the lessons are individually tailored to your musical needs and development.

And in summary this is what it looks like

Types of list

There are three types of lists in web pages:

Unordered Lists
Unordered Lists can appear with or without Bullets next to each item
Ordered Lists
Ordered Lists appear with Numbers or Letters next to each item:
Definition Lists
Definition Lists consist of a Definition Term and Definition Description.
They can contain multiple Definition Descriptions including Paragraphs and even other lists.

The three items above are an example of a Definition List each contain a Definition Term and Definition Description(s).

Spacing below headings

Unordered List appears the same distance below Headings as Paragraphs.

EXAMPLE - AN UNORDERED BELOW A HEADING

  • Item 1.1
  • Item 1.2
  • Item 1.3

SPACING - BELOW PARAGRAPHS

Unordered Lists have special spacing below Paragraphs, they have a negative top-margin removing the space so that the list appears directly beneath the Paragraph.

This gives the visual appearance of a Line Break rather than a Paragraph Break.

EXAMPLE - AN UNORDERED LIST BELOW A PARAGRAPH

The list below begins below a paragraph:

  • Item 1.1
  • Item 1.2
  • Item 1.3

SPACING - BELOW LISTS

Lists visually have the same spacing as a Paragraph beneath them.

EXAMPLE - A PARAGRAPH BELOW AN UNORDERED LIST

  • Item 1.1
  • Item 1.2
  • Item 1.3

This spacing is only applied to the initial List Item, subsequent Child Items do not have the additional margin beneath them allowing close and consistent nesting of List Items.

NESTING LISTS

EXAMPLE - AN UNORDERED LIST

  • Item 1.1
    • Item 2.1
      • Item 3.1
      • Item 3.2
      • Item 3.3
    • Item 2.2
    • Item 2.3
  • Item 1.2
  • Item 1.3

EXAMPLE - AN ORDERED LIST

  1. Item 1.1
    1. Item 2.1
    2. Item 2.2
      1. Item 3.1
      2. Item 3.2
      3. Item 3.3
    3. Item 2.3
  2. Item 2.2
  3. Item 2.3
  4. Item 2.4
  5. Item 2.5
  6. Item 2.6
  7. Item 2.7
  8. Item 2.8
  9. Item 2.9
  10. Item 2.10
  11. Item 2.11

EXAMPLE - A DEFINITION LIST

A Definition Term
A Definition Description
A Definition Term
A Definition Description
A Definition Term with two Definition Descriptions
A Definition Description
Another Definition Description

Below a Paragraph:

A Definition Term
A Definition Description
A Definition Term
A Definition Description
A Definition Term with two Definition Descriptions
A Definition Description
Another Definition Description