Styling text

Helpful suggestion: write your text, or an initial draft, first and get that in before you start styling it and adding media.

Styling content

WordPress changes what you write in the editing window into code, which is what web browsers read and what web designers style. Every bit of content will have what we call tags attached (when you click on the Text tab of the editing window, you will see some of them). Tags usually come in pairs and surround the bit of content to give it a particular style or placement. They look like this: <tag>the content<tag>

There are two types of styling:

  • One applies to a whole line/paragraph eg: a heading – these styles are listed under Format (sometimes this list already shows Paragraph) in the VISUAL editor tool bar – and Styles. They appear as individual buttons on the TEXT tool bar.
  • The other applies to any part of the text eg: making a word or character bold – these styles are listed under Styles in the VISUAL editor tool bar and appear as individual buttons on the Text tool bar.

To see what styles are applied to text in the VISUAL editor, click on the text you’re interested in – the heading level is shown in the first dropdown menu (or shows as basic Paragraph), and click on the format drop down to see which style is highlighted.

How to style your content

The styles used on this site have all been fixed by the designer – all you need to do is apply them. Content should be presented in a clear, logical way that will guide the reader through the message. Select the text that you want to style, or put the cursor into the paragraph, and then choose the styling you want, either from the drop down menus and buttons in the VISUAL tool bar, or the appropriate button in TEXT tool bar (everything appears as separate buttons here).

THINGS THAT APPEAR AS INDIVIDUAL BUTTONS IN THE VISUAL EDITOR TOOL BAR:

Bold makes text bold! It is used for emphasis and important text. (The bold tag looks like <strong> in the TEXT view)

Italic makes text italicised and should be applied to text that needs to be distinguished such as a book or play title, or an author or source credit. (The italic tag looks like <em>)

Lists of points in main content

  • Look like this
  • They are made up of sentences with the <li> tag applied plus
  • all these sentences then get one <ul> tag around them
  • (The VISUAL editor button has a picture of a bullet point list on it – like what you might see in Microsoft Word)

THINGS THAT APPEAR IN THE ‘FORMAT/PARAGRAPH’ MENU IN THE VISUAL EDITOR TOOL BAR:

Heading 2

also known as <h2>, used for main sub-headings of text (the <h1> level is the title of the page/post). It is also used for headings in side-column page extras and lists (but they look different depending on where they are used).

Heading 3

also known as <h3>, this is the lower level heading and divides up the content within the secondary level.

Heading 4

The lowest level of heading and is used in other areas of the page to separate off special sections <h4>. You probably won’t use it.

THINGS THAT APPEAR IN THE ‘STYLES’ MENU IN THE VISUAL EDITOR TOOL BAR:

Bigger first paragraph

appears as ‘bigger intro’ in the Text editor. It applies to a whole paragraph. Use it for the first paragraph on a page (or if you want some bigger text somewhere!).

Quote style

appears as ‘quote’ in the editor. Use it to highlight a paragraph of quotation, or to bring out a particular point.

Styling tips

The golden rule for web design is to mark up the text semantically (ie: according to what sort of text it is), rather than to achieve a particular look. People with a visual impairment often use screen-readers to read out the text to them, and these follow the tags to identify the purpose of a particular chunk of text.

If something has gone wrong and is not showing how you think it should, the style tags have probably got mixed up – put the paragraph back to basic format in the list and start again, or deselect the highlighted styles in the format list. OR go to the text editor to fix it – you will see how all the different things you’ve applied have got crossed.