On this page:

• Character entities
• Class modifiers
• Style modifiers
• Colour palette

Character entities

Character entities are syntactic constructs that inform the browser to render the character entity literally, rather than interpret the character as a control character. For example if the HTML author wants the "less-than" symbol (<) to be rendered in the text, then the author has to write "<" rather than "<" so that the browser does not interpret the character as the beginning of an HTML tag.

The construct for a named character entity (eg. <) is a mnemonic preceded by an ampersand and followed by a semi-colon. When named character entities are not available, any renderable ASCII character can be rendered by constructing a character entity of a leading ampersand, followed by a pound sign/hash mark (#), followed by the ASCII number, followed by a semi-colon. For example ' is the character entity for an apostrophe (single quote - ')

The most commonly used character entities are:

• less-than (<): &lt;
• greater-than (>): &gt;
• ampersand (&): &amp;
• quote ("): &quot;
• apostrophe ('): &#39;

Note carefully the leading ampersand and trailing semi-colon in each case.

For a list of ASCII characters, see for example http://hotwired.lycos.com/webmonkey/reference/special_characters/ or google "character entities".

Class modifiers

Class modifiers are class attribute values used in conjunction with class identifiers typically to over-ride a default style of the object, or to enhance the style. Multiple class values can be assigned to a class attribute by separating the values with a space. For example

<h3 class="section-divider-high compact">My Heading</h3>

is the declaration of a heading, with the "compact" over-ride to declare that the heading will have no bottom margin.

A common construction for the last paragraph of a sidebar is:

<p class="compact">My last paragraph</p>

which would prevent a space appearing between the bottom characters of the paragraph and the bottom of the sidebar box.

In general these class modifiers should be used sparingly.

Borders, Margins, and Padding

Padding is space inside the border; margin is space outside the border.

<div class="text-align-center">
 <table 
   class="standard margin-vertical-auto">
   ...
 </table>
</div>

In addition we have defined margin-vertical-auto to be used in conjunction with a "text-align-center" wrapper to center a block in all browsers (see sidebar).

Font Modifiers

• font-size-larger
• font-size-smaller
• font-size-normal
• font-weight-bold
• font-style-italic
• font-smallcaps
• font-normal

Text Alignment

• text-align-left
• text-align-center
• text-align-right

Positioning modifiers

• float-left
• float-right
• clear-left
• clear-right
• clear-both

Style modifiers

Style modifiers are values applied to the style attribute of HTML elements. We have encountered these in the application of width values to the style attribute of our custom block level elements. These are the only applications of style attributes that are recommended for normal use. However, other style values are available that may be of use in special circumstances: height, color, background-color, and border-color. We provide a summary here. For more detailed information, see in-line application of CSS styles in any CSS book.

Here is a list of these style values, and formats. widths and heights are represented as pixels, with a number followed by the characters "px". Colour values are represented as hexadecimal values, with the hash mark followed by 3 pairs of numbers (hexadecimal values for red, green, and blue components). Value names and values are separated by colons. Individual name/value pairs are separated by semi-colons, as style="width:100px;height:100px". Here are the patterns:

• width:0px
• height:0px
• color:#000000
• background-color:#000000
• border-color:#000000

Colour palette

For general reference, these are the colour codes used in the cascading style sheets for the various elements. We discourage the use of colour codes embedded in HTML code.

16 color names are supported by the W3C CSS standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow), although these may be rendered differently by different browsers.