friends of dufferin grove park
Website - Technical - Other Components

On this page:

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 "&lt;" 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. &lt;) 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 &#39; 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 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.

Border, Margin, and Padding Class Modifiers
Element Position Narrow Wide None
border all border-narrow border-wide border-none
top border-top-narrow border-top-wide border-top-none
right border-right-narrow border-right-wide border-right-none
bottom border-bottom-narrow border-bottom-wide border-bottom-none
left border-left-narrow border-left-wide border-left-none
margin all margin-narrow margin-wide margin-none
top margin-top-narrow margin-top-wide margin-top-none
right margin-right-narrow margin-right-wide margin-right-none
bottom margin-bottom-narrow margin-bottom-wide margin-bottom-none, compact
left margin-left-narrow margin-left-wide margin-left-none
padding all padding-narrow padding-wide padding-none
top padding-top-narrow padding-top-wide padding-top-none
right padding-right-narrow padding-right-wide padding-right-none
bottom padding-bottom-narrow padding-bottom-wide padding-bottom-none
left padding-left-narrow padding-left-wide padding-left-none

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.

Colour Palette for
Colour wisp pale mellow bright muted heavy deep light plain dark
red #FFF2F2 #FFCFCF #FF9F9F #FF4040 #DFB5B5 #DFB5B5 #AA5555 #FFCCCC #FF0000 #8B0000
orange #FFFAF2 #FFECCF #FFD99F #FFB340 #DFCEB5 #BFA378 #AA8855 #FFCC00 #FFA500 #FF8C00
green #F2FFF2 #CFFFCF #9FFF9F #40FF40 #B5DFB5 #78BF78 #55AA55 #90EE90 #008000 #006400
blue #F2F5FF #CFDBFF #9FB7FF #4070FF #B5C0D5 #7889BF #556AAA #ADD8E6 #0000FF #00008B
violet #FBF2FF #EFCFFF #DF9FFF #BF40FF #D1B5DF #A778BF #8E55AA #EEC6EE #EE82EE #9400D3
gray #EEEEEE #CCCCCC #999999 #888888 #BBBBBB #777777 #666666 #CCCCCC #A9A9A9 #808080

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.