CSS Support

Cascading Style Sheets, also know as CSS, or simply styles, allow designers to specify how the HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your project just by editing one single CSS document. To make a global change, simply change the style and all elements in your project are updated automatically.

Applying Styles To The HTML Page

The Amulet GEM Compiler supports three ways to apply styles: link to external style sheet, inline and embedded.

There are three different selector types, the CLASS, ID and tag selectors. Only the <A>, <BODY>, <DIV>, <FONT>, <SPAN>, <TABLE> and <TD> tags are allowed to have styles applied to them.

The ID selector permits you to identify single instances where you wish to define the style properties. An ID selector requires definition in the embedded style block and explicit inclusion in the HTML tag. Use the “#” symbol to identify an ID selector. IDs must be unique within a document; no two HTML tags in a single document should have the same ID.

The CLASS selector permits you to identify a class of instances where you wish to define the style properties. Use the "." symbol to identify a CLASS selector. CLASS names can be used on multiple HTML tags within a page.

The tag selector defines the style properties of all instances of a tag used within the page.

Examples:

#Layer1 { css style definitions;}          // ID selector, style assigned to the object with the ID of Layer1
.SpecialFont { css style definitions;}    // CLASS selector, style assigned to any object with the CLASS name of SpecialFont
DIV { css style definitions;}                // tag selector, style assigned to all <DIV> tags

Link to External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:
<LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen">

Where style.css is the name of the external style sheet to be loaded. The <LINK> tag is placed in the document <HEAD> section. External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements.

For example, to define the rules for all <A> tags to not have underlines on the text and to use the LINK, ALINK and VLINK colors specified in the <BODY> tag for the link text in an external style sheet named style.css, the following would be in the file:

A { text-decoration:none; alphacolor:clear;}

Embedded CSS

To embed styles in an HTML page, you place a <STYLE> block in the head section of the document. Every CSS rule consists of two parts: a selector, which defines the <DIV> tag ("floating cell") to which the style rule applies, and a series of property declarations that define the style. This style sheet rule defines a rule for a "floating cell" with the ID named unique, a general CLASS named specialFont, and all <TABLE> tags:

#unique { position:absolute; top:0px; left:0px; width:120px; height:60px; font-family:Arial; font-size:10pt; color:blue; }
.specialFont { font-family:Arial; font-size:10pt; color:red; }
TABLE { font-family:Arial; font-size:10pt; color:black; }

The following is an example of how to embed a style sheet in an HTML page, as shown here in bold:

<html>
   <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <title>Example Embedded CSS</title>
        <style>
            #layer1 { position:absolute; top:160px; left:16px; width:100px; height:32px; font-family:Tahoma; font-size:8pt;}
            #layer2 { position:absolute; top:43px; left:24px; width:100px; height:100px; font-family:Arial; font-size:11pt;}
        </style>
    </head>
    <body>
        <div id="layer1">
            This is floating cell 1, using Tahoma size 8pt!
        </div>
        <div id="layer2">
            This is floating cell 2, using Arial size 11pt!
        </div>
    </body>
</html>

Inline CSS

You can define a style entirely within an appropriate HTML tag. This type of style is referred to as an inline style because it is defined in line with the document's HTML code. The GEM Compiler allows for assigning a style attribute to the <A>, <BODY>, <DIV>, <FONT>, <SPAN>, <TABLE> and <TD> tags. Inline styles take precedence over all other styles, are the easiest to follow and is how both Namo and Dreamweaver instantiate styles for their layers. The properties of the STYLE attribute have a different syntax than regular HTML, though. Each property is comprised of a property name and property value, separated by a colon. For example, to create a "floating cell" which is 100 pixels wide, 50 pixels tall, and is positioned 20 pixels from the top and 30 pixels from the left edge, you could code a line like this:

<DIV STYLE="position:absolute; top:20px; left:30px; width:100px; height:50px; font-family:Arial; font-size:10pt; color:red;">
This is text in a floating cell.
</DIV>

The downside of inline styles is they are essentially hard-coded for each instance, so you lose the power of external style sheets that can affect any and all tags within the project.

The Amulet GEM Compiler only supports a subset of all available style properties. These styles are only supported by the <A>, <BODY>, <DIV>, <FONT>, <SPAN>, <TABLE> and <TD> tags. The following matrix describes each available style property.

Matrix of Supported Style Properties

PROPERTIES DESCRIPTION

background-image

Sets the background image of an element. All background images are positioned at the top-left pixel of the floating cell. Background images tile to fit the size of the floating cell. To disable the automatic tiling, use the background-repeat:no-repeat; property, which is described below.

Syntax: background-image:url(imageFile); where imageFile is a .jpg, .gif, or .png static image.

Example usage:
background-image:url(myImage.gif);

background-color

Specifies the background color within the floating box's dimensions. Uses standard HTML color conventions.

Syntax: background-color:color; where color follows the color entry conventions.

Example usage:
background-color:yellow;

background-repeat

Used to force the background image to not be tiled within the floating box's dimensions. Can be used to make background images in tables(<TABLE>) and table cells(<TD>) not tile as well. By default, all background images tile to fit the dimensions of the div, table or table cell, the background image is defined in. The only option supported by the GEM Compiler is "no-repeat;".

Syntax: background-repeat:no-repeat;

Example usage:
background-repeat:no-repeat;

border-color

Specifies the color of the of the line bordering the floating cell. Uses standard HTML color conventions.

Syntax: border-color:color; where color follows the color entry conventions.

Example usage:
border-color:#CC1180;

border-width
Specifies the weight of the line bordering the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Range is 1px-15px. If border-width not specified, default is no border around the floating cell.
Syntax: border-width:nnpx; where nn is the floating cell's border line weight, in pixels.

Example usage:
border-width:2px;

font-color

Specifies the default color to use for all text within the floating box. See section on colors for more information. If no font color is specified, the default color is black.

Syntax: font-color:color; where color follows the color entry conventions.

Example usage:
font-color:blue;

font-family
Specifies the default font face to use for all text within the floating cell. This is the equivalent to the <FONT> tag and the FACE= attribute. One major difference is that if the font name has any whitespace within the name, such as Amulet Sans Serif, then it is required to bracket the font name with single quotes. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletGEMFontConverter for more information regarding the creation of .amf files. If no font-family specified, default is Amulet Sans Serif.
Syntax: font-family:fontName; where fontName is the desired default font.

Example usage:
font-family:'Courier New';

font-size
Specifies the default font size to use for all text within the floating cell. This is similar to the <FONT> tag and the SIZE= attribute. All font sizes using font-size are specified in point size. Only point sizes are accepted. The size must be followed by pt, which designates point. Range is 8pt-99pt. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletGEMFontConverter for more information regarding the creation of .amf files. If no font-size specified, default size is 12pt.
Syntax: font-size:nnpt; where nn is the desired default font size, in points.

Example usage:
font-size:9pt;

height
Specifies the height of the floating cell, in pixels. Used in conjunction with the width property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: height:nnpx; where nn is the height of the floating cell, in pixels.

Example usage:
height:150px;

left
Specifies the left most pixel location of the floating cell. Used in conjunction with the top property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: left:nnpx; where nn is the left most pixel location of the floating cell.

Example usage:
left:10px;

position
Specifies the type of positioning to use for the floating cell. The GEM Compiler only accepts absolute positioning. This is a required property in order to use floating cells.
Syntax: position:absolute;

Example usage:
position:absolute;

text-decoration
Specifies an anchor text will not have an underline. By default, any text anchor will have an underline under the text. This is the only way to keep the underline from appearing. The GEM Compiler only accepts "none".
Syntax: text-decoration:none;

Example usage:
text-decoration:none;

top
Specifies the top most pixel location of the floating cell. Used in conjunction with the left property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: top:nnpx; where nn is the top most pixel location of the floating cell.

Example usage:
top:140px;

width
Specifies the width of the floating cell, in pixels. Used in conjunction with the height property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel.
Syntax: width:nnpx; where nn is the width of the floating cell, in pixels.

Example usage:
width:150px;

©2003-2010 Amulet Technologies. U.S. & European Patents Granted. Other Patents Pending.
GEMstudio, Graphical Operating System, Graphical OS Chip, µHTML are Trademarks of Amulet Technologies

Back to Welcome - Contact Amulet - Amulet Home

PROPERTIES	DESCRIPTION

background-image	Sets the background image of an element. All background images are positioned at the top-left pixel of the floating cell. Background images tile to fit the size of the floating cell. To disable the automatic tiling, use the background-repeat:no-repeat; property, which is described below. Syntax: background-image:url(imageFile); where imageFile is a .jpg, .gif, or .png static image. Example usage: background-image:url(myImage.gif);

background-color	Specifies the background color within the floating box's dimensions. Uses standard HTML color conventions. Syntax: *background-color:color;* where color follows the color entry conventions. Example usage: background-color:yellow;

background-repeat	Used to force the background image to not be tiled within the floating box's dimensions. Can be used to make background images in tables(<TABLE>) and table cells(<TD>) not tile as well. By default, all background images tile to fit the dimensions of the div, table or table cell, the background image is defined in. The only option supported by the GEM Compiler is "no-repeat;". Syntax: background-repeat:no-repeat; Example usage: background-repeat:no-repeat;

border-color	Specifies the color of the of the line bordering the floating cell. Uses standard HTML color conventions. Syntax: *border-color:color;* where color follows the color entry conventions. Example usage: border-color:#CC1180;

border-width	Specifies the weight of the line bordering the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Range is 1px-15px. If border-width not specified, default is no border around the floating cell. Syntax: border-width:nnpx; where nn is the floating cell's border line weight, in pixels. Example usage: border-width:2px;

font-color	Specifies the default color to use for all text within the floating box. See section on colors for more information. If no font color is specified, the default color is black. Syntax: *font-color:color;* where color follows the color entry conventions. Example usage: font-color:blue;

font-family	Specifies the default font face to use for all text within the floating cell. This is the equivalent to the <FONT> tag and the FACE= attribute. One major difference is that if the font name has any whitespace within the name, such as Amulet Sans Serif, then it is required to bracket the font name with single quotes. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletGEMFontConverter for more information regarding the creation of .amf files. If no font-family specified, default is Amulet Sans Serif. Syntax: *font-family:fontName;* where fontName is the desired default font. Example usage: font-family:'Courier New';

font-size	Specifies the default font size to use for all text within the floating cell. This is similar to the <FONT> tag and the SIZE= attribute. All font sizes using font-size are specified in point size. Only point sizes are accepted. The size must be followed by pt, which designates point. Range is 8pt-99pt. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletGEMFontConverter for more information regarding the creation of .amf files. If no font-size specified, default size is 12pt. Syntax: font-size:nnpt; where nn is the desired default font size, in points. Example usage: font-size:9pt;

height	Specifies the height of the floating cell, in pixels. Used in conjunction with the width property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: height:nnpx; where nn is the height of the floating cell, in pixels. Example usage: height:150px;

left	Specifies the left most pixel location of the floating cell. Used in conjunction with the top property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: left:nnpx; where nn is the left most pixel location of the floating cell. Example usage: left:10px;

position	Specifies the type of positioning to use for the floating cell. The GEM Compiler only accepts absolute positioning. This is a required property in order to use floating cells. Syntax: position:absolute; Example usage: position:absolute;

text-decoration	Specifies an anchor text will not have an underline. By default, any text anchor will have an underline under the text. This is the only way to keep the underline from appearing. The GEM Compiler only accepts "none". Syntax: text-decoration:none; Example usage: text-decoration:none;

top	Specifies the top most pixel location of the floating cell. Used in conjunction with the left property to determine the absolute position of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: top:nnpx; where nn is the top most pixel location of the floating cell. Example usage: top:140px;

width	Specifies the width of the floating cell, in pixels. Used in conjunction with the height property to determine the dimensions of the floating cell. Only pixel values are accepted. The value must be followed by px, which designates pixel. Syntax: width:nnpx; where nn is the width of the floating cell, in pixels. Example usage: width:150px;