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.

Page Breaks

The break, above causes the page to have an index at the top. If you don't add any breaks, the article has no index and the reader just needs to scroll down to read to the end. With breaks, there are "next" buttons to navigate to the next page.

Links

You can link to other articles on the site like the "About us" article. If there's any punctuation around a link, like quotes or a full stop, make sure it's not inside the link. Links are not underlined on this site. They are green and change to white with a green background when you hover over them. This is part of the site design. Please do not use bold to highlight links.

Lists

There are two kinds of list:-

1. Ones with numbers;
2. Such as;
3. One;
4. Two; and
5. Three.

And ones with bullets:-

• First;
• Second;
• third.

Currently these don't display correctly in the editor but please don't try to create lists by using full stops in separate paragraphs. Things like screen readers may understand pages better when they can see a list rather than paragraphs that start with full stops.

More on Images

Images can float to the right, if you set that when you add the image. Images will have 15 pixels of margin around them except on the side next to the margin.

Don't try to add empty paragraphs or headings to add spacing. If there's something wrong with the template then please ask for it to be fixed. Images normally will float into the next paragraph, as mentioned above. This doesn't happen with images in the last paragraph in an article. It's important not to add empty paragraphs at the end of an article as this can cause an image to float outside the area of the article at the bottom.

If this were the last paragraph it would have no margin at the bottom so it would fit up against the bottom of the page. Also the owl to the left won't stick out of the bottom of the article. If you have problems with spaces at the bottom of an article or if an image sticks out, then you may have empty paragraphs at the bottom. When you have page breaks, there is a next or previous button at the page bottom.

Images that are full width, like this one can be uploaded as 550px width. Images where the width is set to 500-599 will be displayed at the width of the page.

Figures with Captions

We don't have an editor component for this, but this is the better way to display an image caption:-