This page is a guide to help keep styling consistent across the website. If you are an external visitor, you probably won't find this page very interesting.

The title above which is an <h1> heading inside a <header> element comes from the "Title" field in the CMS. The banner image, also above is the "Full Article Image" from the CMS.

This guide applies to the main website only.

This is a Top Level Heading h1

The above heading appears in blue and bold font. You should not need to set headings bold. Currently, headings should contain text only and not images or links.

All headings currently display in 13px font with a 17px line height. They are aligned left, against the margin.

This is a Second Level Heading h2

Second level headings are black and bold. Again please do not use bold or any other markup to change this.

This is a Third Level Heading h3

Third level headings appear in blue ordinary weight font.

This is a Fourth Level Heading

These show up in grey bold.

Paragraphs

Ordinary text will appear in paragraphs like this one which end here.

Paragraphs have 10px of top and bottom margin. Please don't put in blank lines or headings to add more space. If there's something wrong with the spacing in an article, then the problem probably appears elsewhere and should be fixed in the style-sheet.

Paragraphs Containing Images

If you place an image in a paragraph, it will float to the left of the text, like this Biology week image (left). Headings will not float next to images. The exact layout in the editor might not be exactly what you see on the site and remember that your article has to display on mobile screens so the text might wrap differently.

When you start a new paragraph, the text will still float around an image in the previous paragraph.

But when you add a Heading (h3)

It will start on a new line. As mentioned above.

• Next