Side bar

  Colour editing
  Image creation
  JS Tricks
HTML³: Paragraph Styles |


The Styles window contains all the basic headline, paragraph and line break tools to create the layout, alignment and line breaks in your page. For historical reasons the horizontal rule controls are also here.

You can layer on quite a few options on these tags, but by clicking on an icon with the adjust (right) mouse button you should be able to get a pure, un-optioned tag (e.g. <hr> not <hr width="50%" size="5" noshade>)


Headlines range in size from H1 down to H6, which is implemented in HTML³ using a drop-down list - select the headline size you want, click on the Start button to begin your headline and End to finish it. Easy! You can set up some more complex headlines with colour and alignment, but the Reset button will always bring you back to plain old ordinary headlines. You can also adjust-click on the start and end buttons to get plain headline tags without having to reset the options.

Headline tags will separate the text enclosed within them with space above and below, so you cannot have a headline and then have text or graphics follow straight on after (at least not without trickery). Generally you should use <H1> only once at the top of the page for the main headline, and then any subheadings should be <H2>, with sub-sub-headings <H3> and so on. <H4> is often the same size as ordinary text, with <H5> and <H6> smaller than regular text, but this is not a hard and fast rule.

Size 1

Size 2

Size 3

Size 4

Size 5
Size 6

In normal HTML mode, the alignment and colour options will add new tags around the headline tag in an attempt to make sure the options work on as many browsers as possible, for instance: <center><h1><font color="#FF0000">Headline</font></h1></center>
In XHTML mode however the options are built into the headline tag itself, and the older tags aren't used (because some of them are deprecated in XHTML):
<h1 align="center" style="color: #FF0000">Headline</h1>

In WML there are no headline tags; however, in HTML³ I've faked these up using other tags. h1 and h2 are set to big and bold; h3 and h4 just bold; and h5 and h6 are italic. If alignment is specified then properly aligned paragraphs are used, otherwise for the default alignment simple linebreaks are used.

Paragraphs and Sections

This section is basically an expansion on the humble paragraph break - <p>. <div> is similar except that it doesn't put a double linefeed before te text - it's kind of like <br> except that it has a beginning and end, and so can have attributes like alignment. <span> on the other hand doesn't put any linefeeds in at all, and so you can operate on areas of text inside a paragraph or sentence; it does mean you can't give it an alignment attribute.

The three attributes you can add to this section are alignment, foreground colour and background colour. You can only have all of these attributes in XHTML mode however. Plain HTML browsers cannot handle background colours, and foreground colours are handled using <font color...> tags; this means the <span> tag doesn't work at all in HTML mode as without backgrounds and alignment it would just be replicating font tags which are already handled on the Effects window. WML mode is of course even more restricted, to just paragraphs with alignment.

Alignment is pretty much as you'd expect - left align, which is usually the default for all browsers, puts the text aligned to the left hand side (as with most of this document. If you have a page or table cell that's aligned some other way though you might need to set align=left to make the text look "normal".

Center alignment (or centre if you're British!)
puts the text in the middle of the page.

right alignment makes the text hug the right hand side of the page.

Justified text spreads the text out slightly so both the left and right hand edges of the text are straight lines, where the right hand side would usually end wherever the last word on the line gets to. It's often used in word processors. This text should be justified if your browser supports it. Be wary as some browsers go strange if you fully justify text like this and have linefeeds at the top of the text, or if you try to flow the text around an inline image.

As far as I know only Oregano will display XHTML mode background and foreground colours under RISC OS due to its CSS support. However, I've prepared a few images for you to see what you're missing.

By setting up red text on a light yellow background...
a <div>ision tag will produce something like this:
<div style="color: #FF0000; background: #FFFF99;">
This is some text with a background

Result 1

A paragraph with right alignment produces something a little surprising however: CSS2
<p align="right" style="color: #330066; background: #99FF00;">
This is a bit garish

Result 2

The right alignment has caused the whole line to take on the background colour, green in this example, and because it's a paragraph break there's green above the text too.

Breaks, Styles and Markers

Line <br>eaks are fairly standard commands for adding line break into text, or for instance making sure a graphic starts on a new line rather than at the end of a line of text. Unlike paragraph breaks they don't add a blank line between the two sections, and there's no closing tag so you can't add attributes like alignment. You can however have a clear attribute - this means that if you have an inline image that is aligned to the right or left, you can force the browser to go to the bottom of the image before starting a new line of text. You can clear the side the image is on - left or right - or there's a catch-all called, well, all.

A number of other style and division tags are supported - <center> is a very common one and so has buttons all to itself, and some less well used style tags - blockquote, pre, tt, address, code etc. - are available from a drop-down list. These have been chosen carefully so that they should all work in HTML and XHTML browsers, although in reality most of them seem to render in the same way - the address, code etc. type tags all seem to render in italics or a fixed-width font. I'm sure you can get around this with a nice style sheet though!

BlockQuoteIntended to show a large block of text being quoted, it's now also used to indent a whole area of code (although some people prefer to use <UL>; partly because ArcWeb just displayed blockquotes as italic text and didn't allow any other tags inside).
Blockquote test
PrePreformatted text. This is a special command as it basically allows you to break some of the rules of HTML; it was for displaying plain text files exactly as-is, so instead of ignoring linefeeds it uses them, instead of trimming multiple spaces it displays them all, instead of word-wrapping your text it will carry on until it finds a linefeed, and it changes to a typewriter-style font (courier, or corpus as we know it). That's all she wrote in some browsers, although the more modern ones will allow you to use HTML tags within a preformatted area.
Preformatted test
TTTeletype. This just displays an area of text in a fixed with font, but unlike <PRE> it doesn't make any other changes, nor does it put linefeeds before and after the marked area, so it can be used as a simple effect tag like bold or italic.
TT test
AddressUsed to mark out an address.
I've seen it indented and italicised (ArcWeb?), and just plain text with linefeeds above and below (Fresco).
address test
Cite Contains a citation or a reference to other sources.
cite test
Samp Designates sample output from programs, scripts, etc.
samp test
CodeRepresents computer code.
code test
var This is to mark out variables when writing about computer programmes.
var test
KBD Used to mark something that's supposed to represent a user's input at the keyboard.
kbd test
DFN Indicates that this is the defining instance of the enclosed term.
dfn test

WML has no style tags in this way (surprise), so I've switched all of these into underline tags in WML mode; except for <pre>, which I've switched to a left-aligned non-wrapping paragraph.


The Marker uses the <span> tag with a CSS background style so that you can mark out a section of text to look like you've gone over it with one of those highlighter marker pens. The eagle eyed amongst you might have spotted that this feature is a bit redundant as you can do exactly the same thing by creating your own <span> tag with background (and foreground) colours in the paragraph section above. This is true, but I've added the Marker so that you can have fast access to some nice pastel marker colours (or shades of grey if you're not using a light page background), and you don't have to mess around with the colours in the paragraph section. Note that this trick only works in browsers with style sheet support, which means pretty much any recent PC/Mac/Linux browser, but to my knowledge only Oregano under RISC OS.

Marker test: this is not highlighted but this is and now we're back to plain text.

If you can't see any change, this is how Oregano 1.10 renders that:
Marker Test

Horizontal Rule

A simple <HR> command puts a nice 3D line right across the page (there's one above, although it probably doesn't look 3D on a white background, and is restricted by the table that allows me to have the green margin down the side of the page). It's a nice clean way of breaking up a long page into easily manageable sections.

However, it can be extended so that it's not the full width of the available area; using the width attribute you can make it small (or even larger) than the currently available page (set to 100% to switch this function off, as this is the default width). The size attribute can make it taller than the usual three pixels or so (set to 0 for default); and finally there's an option to make it Solid instead of 3D although this only works on PCs at the time of writing. The colour can also be changed when viewing on a PC, but as this again doesn't work on Acorns I haven't gone overboard with controls to change the individual light and dark parts.

Guess what? No rules in WML. However, I've implemented text-based rules with rudimentary width and height support; you can have between 3 and 20 characters (20 characters is 100% or 800+ pixels), which range from dashes (height of 0 or 1), equals signs (height of 2 or 3), or hashes (above 3). If you don't specify any width or height attributes then -=oOo=- is used instead, as this is generally a much prettier rule-off. The solid flag makes the text bold.

HTML³: © Richard Goodwin 1997-2002