This section includes reference information for both CSS syntax and JavaScript syntax. It covers style sheet functionality that is implemented in Netscape Navigator 4.0.
This reference does not include style sheet properties that can be used to specify positions for blocks of HTML content. These properties are discussed in Part 2. Positioning HTML Content.
This chapter is organized in the following sections:
Comments in style sheets are similar to those in the C programming language. For example:
B {color:blue;} /* bold text will be blue */
tags.B.color = "blue"; /* bold text will be blue */
JavaScript style sheet syntax also supports comments in the C++ style, for example:
tags.B.color = "blue"; // bold text will be blue
Comments cannot be nested.
This section lists the HTML tags that are useful for working with styles.
The <STYLE> and </STYLE> tags indicate a style sheet. Inside <STYLE> and </STYLE> you can specify styles for elements, define classes and IDs, and generally establish styles for use within the document.
To specify that the style sheet uses JavaScript syntax, set the TYPE attribute to "text/javascript". To specify that the style sheet uses CSS syntax, set the TYPE attribute to "text/css". The default value for TYPE is "text/CSS".
For example:
<STYLE TYPE="text/css">
BODY {margin-right: 20%; margin-left:20%;}
PRE {color:green;}
all.CLASS1 {float:right; font-weight: bold;}
</STYLE>
Use the <LINK> element to link to an external style sheet for use in a document. For example:
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL=STYLESHEET TYPE="text/javascript"
HREF="http://style.com/mystyles1.htm">
</HEAD>
Use the inline <SPAN> and </SPAN> elements to indicate the beginning and end of a piece of text to which a style is to be applied.
The following example applies an individual style to a piece of text.
<P>Here is some normal paragraph text. It looks OK, but would be much better if it was<SPAN style="color:blue; font-weight:bold; font- style:italic"> in bright, bold, italic blue. </SPAN>The blue text stands out much more.</P>
This example works in Netscape Navigator 4.0+. Example results:
Here is some normal paragraph text. It looks OK, but would be much better if it was in bright, bold, italic blue. The blue text stands out much more.
You can use the <SPAN> element to achieve effects such as a large initial letter, for example:
<STYLE TYPE="text/css">
init-letter.all {font-size:400%; font-weight:bold;}
</STYLE>
<P><SPAN class="init-letter">T</SPAN>his is...</P>
This example works in Netscape Navigator 4.0+. Example results:
This is...
This section lists the new attributes for existing HTML tags that are useful for working with styles. These attributes can be used with any HTML tag to specify the style for that tag.
The STYLE attribute determines the style of a specific element. For example:
<H3 STYLE="line-height:24pt; font-weight:bold; color:cyan;">
Cyan Heading</H3>
<H3 STYLE="lineHeight='24pt'; fontWeight='bold'; color='cyan'">
Cyan Heading</H3>
This example works in Netscape Navigator 4.0+. Example results:
The CLASSES JavaScript property allows you to define classes of styles in a style sheet. The CLASS attribute specifies a style class to apply to an element.
Although CSS syntax and JavaScript syntax use slightly different syntax to define classes of styles, the use of the CLASS attribute is the same in both syntaxes. For example:
<STYLE TYPE="text/css">
H3.class1 {font-style:italic; color:red;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
classes.class1.H3.color="red";
</STYLE>
<H3 CLASS="class1">This H3 is in red italic letters.</H3>
Class names are case-sensitive.
Each HTML element can use only one style class.
To specify that a class can apply to all elements, use the element selector all when you set the properties for the class. For example, the code sample below specifies that the class LEMON can be applied to any element, and all elements that use the style class LEMON are yellow.
<STYLE TYPE="text/css">
all.LEMON {color:yellow;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.LEMON.all.color="yellow";
</STYLE>
<H1 class="LEMON">A Nice Yellow Heading</P>
<P CLASS="LEMON">What a nice shade of yellow this paragraph is.</P>
For more information about creating classes of style and for more examples, see the section Defining Classes of Styles in Chapter 3, "Creating Style Sheets and Assigning Styles."
When defining style sheets, you can create individual named styles.
An element can use a style class and also use a named style. This allows you to use named styles to express individual stylistic exceptions to a style class.
To define an individual names style in CSS syntax, you use the # sign to indicate a name for an individual style, while In JavaScript syntax, you use the ID selector.
In both CSS syntax and JavaScript syntax, you use the ID attribute in an HTML element to specify the style for that element.
ID names are case-sensitive.
ID styles are particularly useful for working with layers of precisely positioned HTML content, as discussed in Part 2. Positioning HTML Content.
The following code shows an example of the use of individual named styles. In this example, the STYLE1 class defines a style with several characteristics. The named style A1 specifies that the color is blue. This style can be used to specify that a paragraph has all the style characteristics of STYLE1, except that its color is blue instead of red.
<STYLE TYPE="text/css">
P.STYLE1 {
color:red; font-size:24pt; line-height:26pt;
font-style:italic; font-weight:bold;
}
#A1 {color: blue;}
</STYLE>
<STYLE TYPE="text/javascript">
with (classes.STYLE1.P) {
color="red";
fontSize="24pt";
lineHeight="26pt";
fontStyle="italic";
fontWeight="bold";
}
ids.A1.color= "blue";
</STYLE>
<P CLASS="STYLE1">Big red text</P>
<P CLASS="STYLE1" ID="A1">Big blue text</P>
This example works in Netscape Navigator 4.0+. Example results:
Big red text
Big blue text
This section discusses the new JavaScript object properties that are useful for defining style sheets using JavaScript syntax.
When using JavaScript syntax within the <STYLE> element, you can set styles by using the tags property of the JavaScript object document.
The following example uses JavaScript syntax to specify that all paragraphs appear in red:
<STYLE TYPE="text/javascript">
tags.P.color = red;
</STYLE>
In CSS syntax, this would be:
<STYLE TYPE="text/css">
P {color:red;}
</STYLE>
The tags property always applies to the document object for the current document, so you can omit document from the expression document.tags. For example, the following two statements both say the same thing:
document.tags.P.color = "red";
tags.P.color = "red";
To set default styles for all elements in a document, you can set the desired style on the <BODY> element, since all other elements inherit from <BODY>. For example, to set a universal right margin for the document:
tags.body.marginRight="20pt"; /*JavaScript syntax */
BODY {margin-right:20pt;} /* CSS syntax */
See the CLASS section for a discussion of the classes JavaScript property.
See the ID section for a discussion of the ids JavaScript property.
Using styles, you can specify font size, font family, font style, and font weight for any element.
CSS syntax name: font-size
JavaScript syntax name: fontSize
|
|
|
|
Possible values:
|
absolute-size, relative-size, length, percentage
|
|
Initial value:
|
medium
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
relative to parent element's font size
|
absolute-size
An absolute-size is a keyword such as:
xx-small
x-small
small
medium
large
x-large
xx-large
relative-size
A relative-size keyword is interpreted relative to the font size of the parent element. Note that relative values only equate to actual values when the element whose font size is a relative value has a parent element that has a font size. (A relative size has to have something to be relative to.)
Possible values are:
larger
smaller
For example, if the parent element has a font size of medium, a value of larger will make the font size of the current element be large.
length
A length is a number followed by a unit of measurement, such as 24pt.
percentage
A percentage keyword sets the font size to a percentage of the parent element's font size.
P {font-size:12pt;}
EM {font-size:120%};
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}
tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%;
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";
CSS syntax name: font-family
JavaScript syntax name: fontFamily
|
|
|
|
Possible values:
|
fontFamily
|
|
Initial value:
|
the default font, which comes from user preferences.
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
NA
|
fontFamily
The fontFamily indicates the font family to use, such as Helvetica or Arial. If a list of font names is given, the browser tries each named font in turn until it finds one that exists on the user's system. If none of the specified font families are available on the user's system, the default font is used instead.
If you link a font definition file to your web page, the font definition file will be downloaded with the page, thus guaranteeing that all the fonts in the definition file are available on the user's system while the user is viewing that page. For more information about linking fonts to a document, see Part 3. Downloadable Fonts.
There is a set of generic family names that are guaranteed to indicate a font on every system, but that exact font is system-dependent. The five generic font families are:
<STYLE TYPE="text/css">
H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>
<STYLE TYPE="text/javascript">
tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>
CSS syntax name: font-weight
JavaScript syntax name: fontWeight
|
|
|
|---|---|
|
Possible values:
|
normal, bold, bolder, lighter, 100 - 900
|
|
Initial value:
|
normal
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
The font weight indicates the weight of the font. For example:
<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>
<STYLE>
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>
The possible values are normal, bold, bolder, and lighter. You can also specify weight as a numerical value from 100 to 900, where 100 is the lightest and 900 is the heaviest.
CSS syntax name: font-style
JavaScript syntax name: fontStyle
|
|
|
|---|---|
|
Possible values:
|
normal, italic
|
|
Initial value:
|
normal
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
This property determines the style of the font.
The following example specifies that emphasized text within <H1> elements appears in italic.
<STYLE>
H1 EM {font-style: italic;}
</STYLE>
<STYLE>
contextual(tags.H1, tags.EM).fontStyle = "italic";
</STYLE>
The use of style sheets allows you to set text properties such as line height and text decoration.
CSS syntax name: line-height
JavaScript syntax name: lineHeight
|
|
|
|---|---|
|
Possible values
|
number, length, percentage, normal
|
|
Initial value:
|
normal for the font
|
|
Applies to:
|
block-level elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
refers to the font size of the element itself
|
This property sets the distance between the baselines of two adjacent lines. It applies only to block-level elements.
number:
If you specify a numerical value without a unit of measurement, the line height is the font size of the current element multiplied by the numerical value. This differs from a percentage value in the way it inherits: when a numerical value is specified, child elements inherit the factor itself, not the resultant value (as is the case with percentage and other units).
For example:
fontSize:10pt;line-height:1.2; /* line height is now 120%, ie 12pt */font-size:20pt; /* line height is now 24 pt, */
length:
An expression of line height as a measurement, for example:
line-height:0.4in;line-height:18pt;
percentage
Percentage of the element's font size, for example:
line-height:150%;
Negative values are not allowed.
CSS syntax name: text-decoration
JavaScript syntax name: textDecoration
|
|
|
|---|---|
|
Possible values:
|
none, underline, line-through, blink
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no, but see clarification below
|
|
Percentage values:
|
N/A
|
This property describes decorations that are added to the text of an element. If the element has no text (for example, the <IMG> element in HTML) or is an empty element (for example, "<EM></EM>"), this property has no effect.
This property is not inherited, but children elements will match their parent. For example, if an element is underlined, the line should span the child elements. The color of the underlining will remain the same even if child elements have different color values.
For example:
BLOCKQUOTE {text-decoration: underline;}
The text decoration options do not include color options, since the color of text is derived from the color property value.
.
CSS syntax name: text-transform
JavaScript syntax name: textTransform
|
|
|
|---|---|
|
Possible values:,
|
capitalize, uppercase, lowercase, none
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
This property indicates text case.
capitalize
Display the first character of each word in uppercase.
uppercase
Display all letters of the element in uppercase.
lowercase
Display all letters of the element in lowercase.
none
Neutralizes inherited value.
For example:
<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>
<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>
<H1>This is a regular level-one heading</H1>
<H1 CLASS=CAPH1>important heading</H1>
This example works in Netscape Navigator 4.0+. Example results:
CSS syntax name: text-align
JavaScript syntax name: textAlign
|
|
|
|---|---|
|
Possible values:
|
left, right, center, justify
|
|
Initial value:
|
left
|
|
Applies to:
|
block-level elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
This property describes how text is aligned within the element.
Example:
tags.P.textAlign = "center"
<STYLE TYPE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";
classes.JUSTP.P.color="red";
</STYLE>
<H3>A Normal Heading</H3>
<H3 CLASS=RIGHTHEAD>A Right-Aligned Heading</H3>
<P>This is a normal paragraph. This is what paragraphs usually look like, when they are left to their own devices, and you do not use style sheets to control their text alignment.</P>
<P CLASS = LEFTP>This paragraph is left-justified, which means it has a ragged right edge. Whenever paragraphs contain excessively, perhaps unnecessarily, long words, the raggedness of the justification becomes more manifestly apparent than in the case where all the words in the sentence are short.</P>
This example works in Netscape Navigator 4.0+. Example results:
This is a normal paragraph. This is what paragraphs usually look like, when they are left to their own devices, and you do not use style sheets to control their text alignment.
This paragraph is left-justified, which means it has a ragged right edge. Whenever paragraphs contain excessively, perhaps unnecessarily, long words, the raggedness of the justification becomes more manifestly apparent than in the case where all the words in the sentence are short.
CSS syntax name: text-indent
JavaScript syntax name: textIndent
|
|
|
|---|---|
|
Possible values:
|
length, percentage
|
|
Initial value:
|
0
|
|
Applies to:
|
block-level elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
refer to parent element's width
|
The property specifies indentation that appears before the first formatted line. The text-indent value may be negative. An indent is not inserted in the middle of an element that was broken by another element (such as <BR> in HTML).
length
Length of the indent as a numerical value with units, for example:
P {text-indent:3em;}
percentage
Length of the indent as a percentage of the parent element's width, for example:
P {text-indent:25%;}
<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>
<STYLE TYPE="text/css">
classes.INDENTED.P.textIndent="25%";
</STYLE>
<P CLASS=INDENTED>
The first line is indented 25 percent of the width of the parent element, which in this case happens to be the BODY tag, since this element is not embedded in anything else.</P>
<BLOCKQUOTE>
<P CLASS=INDENTED>
This time the first line is indented 25 percent from the blockquote that surrounds this element. A blockquote automatically indents its contents.
</P>
</BLOCKQUOTE>
This example works in Netscape Navigator 4.0+. Example results:
The first line is indented 25 percent of the width of the parent element, which in this case happens to be the BODY tag, since this element is not embedded in anything else.
This time the first line is indented 25 percent from the blockquote that surrounds this element. A blockquote automatically indents its contents.
Style sheets treat each block-level element as if it is surrounded by a box. Block-level elements start on a new line, for example, <H1> and <P> are block-level elements, but <EM> is not.
Each box can have padding, border, and margins.You can set values for top, bottom, left and right paddings, border widths, and margins.
For a more detailed overview discussion of block-level formatting, see Chapter 4, "Format Properties for Block-Level Elements."
CSS syntax names: margin-left, margin-right, margin-top, margin-bottom, margin
JavaScript syntax names: marginLeft, marginRight, marginTop, marginBottom and margins()
|
|
|
|---|---|
|
Possible values
|
length, percentage, auto
|
|
Initial value:
|
0
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
refer to parent element's width
|
These properties set the margin of an element. The margins express the minimal distance between the borders of two adjacent elements.
You can set each margin individually by specifying values for margin-left/marginLeft, margin-right/marginRight, margin-top/marginTop and margin-bottom/marginBottom.
In CSS syntax you can set all margins to the same value at one time by setting the margin property (note that the property name is singular). In JavaScript syntax you can use the margins() method sets the margins for all four sides at once. (Note that the function name is plural.)
The arguments to the margin property and margins() method are top, right, bottom and left margins respectively. For example:
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {margin:10pt 20pt 30pt 40pt;}
/* set all P margins to 40 pt */
P {margin:40pt;}
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.BODY.margins("10pt", "20pt", "30pt", "40pt");
/* set all P margins to 40 pt */
tags.P.margins("40pt");
Adjoining margins of adjacent elements are added together, unless one of the elements has no content, in which case its margins are ignored. For example, if an <H1> element with a bottom margin of 40 points, is followed by a <P> element with a top margin of 30 points, then the separation between the two elements is 70 points. However, if the <H1> element has content, but the <P> element is empty, then the margin between them is 40 points.
When margin properties are applied to replaced elements (such as an <IMG> tag), they express the minimal distance from the replaced element to any of the content of the parent element.
The use of negative margins is not recommended because it may have unpredictable results.
For a working example of setting margins, see the section Block-level Formatting Overview and Example.
CSS syntax names: padding-top, padding-right, padding-bottom, padding-left, paddings
JavaScript syntax names: paddingTop, paddingRight, paddingBottom, paddingLeft, and paddings()
|
|
|
|---|---|
|
Possible values:
|
length, percentage
|
|
Initial value:
|
0
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
refer to parent element's width
|
These properties describe how much space to insert between the border of an element and the content (such as text or image). You can set the padding on each side individually by specifying values for padding-top/paddingTop, padding-right/paddingRight, padding-left/paddingLeft and padding-bottom/paddingBottom.
In CSS syntax you can use the padding property (note that it is padding singular) to set the padding for all four sides at once. In JavaScript syntax you can use the paddings() method to set the margins for all four sides at once.
The arguments to the padding property (CSS syntax) and the paddings() method (JavaScript syntax) are the top, right, bottom and left padding values respectively.
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
P {padding:10pt 20pt 30pt 40pt;}
/* set the padding on all sides of P to 40 pt */
P {padding:40pt;}
/* top=10pt, right=20pt, bottom=30pt, left=40pt */
tags.P.paddings("10pt", "20pt", "30pt", "40pt")
/* set the padding on all sides of P to 40 pt */
tags.P.paddings("40pt");
Padding values cannot be negative.
To specify the color or image that appears in the padding area, you can set the background color or background image of the element. For information about setting background color, see the section Background Color. For information about setting a background image, see the section Background Image.
For a working example of setting paddings, see the section Block-level Formatting Overview and Example.
CSS syntax names: border-top-width, border-bottom-width, border-left-width, border-right-width, border-width
JavaScript syntax names: borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, and borderWidths()
|
|
|
|---|---|
|
Possible values:
|
length
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
These properties set the width of a border around an element.
You can set the width of the top border by specifying a value for border-top-width/borderTopWidth. You can set the width of the right border by specifying a value for border-right-width/borderRightWidth. You can set the width of the bottom border by specifying a value for border-bottom-width/borderBottomWidth. You can set the width of the bottom border by specifying a value for border-left-width/ borderLeftWidth.
In CSS syntax, you can set all four borders at once by setting the border-width property. In JavaScript syntax you can set all four borders at once by using the borderWidths() function.
The arguments to the border-width property (CSS syntax) and the borderWidths() function (JavaScript syntax) are the top, right, bottom and left border widths respectively.
/* top=1pt, right=2pt, bottom=3pt, left=4pt */
P {border-width:1pt 2pt 3pt 4pt;} /* CSS */
tags.P.borderWidths("1pt", "2pt", "3pt", "4pt"); /* JavaScript syntax */
/* set the border width to 2 pt on all sides */
P {border-width:40pt;} /* CSS */
tags.P.borderWidths("40pt"); /* JavaScript syntax */
For a working example of setting border widths, see the section Block-level Formatting Overview and Example.
CSS syntax name: border-style
JavaScript syntax name: borderStyle
|
|
|
|---|---|
|
Possible values:,
|
none, solid, double, inset, outset, groove, ridge
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property sets the style of a border around a block-level element.
For the border to be visible however, you must also specify the border width. For details of setting the border width see the section Setting Border Widths, Color, and Style or the section Border Widths.
For an example of each of the border values, see:
borders.htm
CSS name: JavaScript syntax name:
Border Color
border-colorborderColor
|
|
|
|---|---|
|
Possible values:
|
none, colorvalue
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property sets the color of the border. The color can either be a named color or a 6-digit hexadecimal value indicating a color or an rgb color value.
For a list of the named colors, see the section Color Units.
For example:
P {border-color:blue;}
BLOCKQUOTE {border-color:#0000FF;}
H1 {border-color:rgb(0%, 0%, 100%);}
tags.P.borderColor="blue";
tags.BLOCKQUOTE.borderColor="#0000FF";
tags.H1.borderColor="rgb(0%, 0%, 100%);
For a working example of setting border color, see the section Block-level Formatting Overview and Example.
CSS syntax name: width
JavaScript syntax name: width
|
|
|
|---|---|
|
Possible values:
|
length, percentage, auto
|
|
Initial value:
|
auto
|
|
Applies to:
|
block-level and replaced elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
refer to parent element's width
|
This property determines the width of an element.
Note that if you set the left and right margins, and also the width of a property, the margin settings take precedence over the width setting. For example, if the left margin setting is 25%, the right margin setting is 10%, and the width setting is 100%, the width setting is ignored. (The width will end up being 65% total.)
all.NARROW {width:50%;}
all.INDENTEDNARROW {margin-left:20%; width:60%;}
classes.NARROW.all.width = "50%";
classes.INDENTEDNARROW.all.width = "60%";
classes.INDENTEDNARROW.all.marginLeft = "20%";
For a working example of setting the width of an element, see the section Block-level Formatting Overview and Example.
CSS syntax name: float
JavaScript syntax name: align
|
|
|
|---|---|
|
Possible values:
|
left, right, none
|
|
Initial values:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
The float property (CSS syntax) and align property (JavaScript syntax) determine the alignment of an element within its parent. (Note that the text-align/textAlign property determines the alignment of the content of text elements.)
The term float is a reserved word in JavaScript, which is why the JavaScript syntax uses the name align instead of float for this property.
Using the float/align property, you can make an element float to the left or the right and indicate how other content wraps around it.
If no value is specified, the default value is none. If the value is none, the element is displayed where it appears in the text.
If the value is left or right, the element is displayed on the left or the right (after taking margin properties into account). Other content appears on the right or left side of the floating element. If the value is left or right, the element is treated as a block-level element.
Using the float/align property, you can declare elements to be outside the normal flow of elements. For example, if the float/align property of an element is left, the normal flow wraps around on the right side.
If you set an element's float/align property set, do not also specify margins for it. If you do, the wrapping effect will not work properly. However, if you want a floating element to have a left or right margin, you can put it inside another element, such as a <DIV> block, that has the desired margins.
<STYLE TYPE="text/css">
H4 {
width:70%;
border-style:outset;
border-width:2pt;
border-color:green;
background-color:rgb(70%, 90%, 80%);
padding:5%;
font-weight:bold;
}
H4.TEXTRIGHT {text-align:right; margin-right:30%;}
H4.TEXTRIGHT_FLOATLEFT {text-align:right; float:left;}
H4.FLOATRIGHT {float:right;}
H4.FIXED_RIGHT_MARGIN {float:right; margin-right:30%;}
</STYLE>
<STYLE TYPE="text/javascript">
with (tags.H4) {
width="70%";
borderStyle="outset";
borderWidth="2pt";
borderColor="green";
backgroundColor = "rgb(70%, 90%, 80%)";
paddings("5%");
fontWeight="bold";
}
classes.TEXTRIGHT.H4.textAlign="right";
classes.TEXTRIGHT.H4.marginRight="30%;"
classes.TEXTRIGHT_FLOATLEFT.H4.textAlign="right";
classes.TEXTRIGHT_FLOATLEFT.H4.align="left";}
classes.FLOATRIGHT.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.align="right";
classes.FIXED_RIGHT_MARGIN.H4.marginRight="30%";
</STYLE>
<BODY>
<H4>Level-Four Heading</H4>
<P>I am a plain paragraph, positioned below a non-floating level-four heading.
</P>
<H4 CLASS=TEXTRIGHT>H4 - My Text On Right, No Float</H4>
<P>I am also a plain paragraph, positioned below a non-floating level- four heading. It just happens that the heading above me has its text alignment set to right.
</P>
<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>
<P>I am a regular paragraph. There's not much more you can say about me. I am positioned after a level-four heading that is floating to the right, so I come out positioned to the left of it.</P>
<BR CLEAR>
<H4 CLASS=TEXTRIGHT_FLOATLEFT>H4 - My Text on Right, Float = Left </H4>
<P>I'm also just a plain old paragraph going wherever the flow takes me.
</P>
<BR CLEAR>
<H4 CLASS=FIXED_RIGHT_MARGIN>H4 - Float = Right, Fixed Right Margin</H4>
<P>Hello? Hello!! I am wrapping round an H4 that is floating to the right and has a fixed right margin. When I try to satisfy all these requirements, you see what happens! For best results, do not set the left and/or right margin when you set the float (CSS syntax) or align (JavaScript syntax) property. Use an enclosing element with margins instead.
</P>
<BR CLEAR>
<DIV STYLE="margin-left:30%;">
<H4 CLASS = FLOATRIGHT>H4 - Float = Right</H4>
<P>Notice how the heading next to me seems to have a right margin. That's because we are both inside a DIV block that has a right margin.</ P>
<BR CLEAR>
</DIV>
</BODY>
This example works in Netscape Navigator 4.0+. Example results:
I am a plain paragraph, positioned below a non-floating level-four heading.
I am also a plain paragraph, positioned below a non-floating level-four heading. It just happens that the heading above me has its text alignment set to right.
I am a regular paragraph. There's not much more you can say about me. I am positioned after a level-four heading that is floating to the right, so I come out positioned to the left of it.
I'm also just a plain old paragraph going wherever the flow takes me.
Hello? Hello!! I am wrapping round an H4 that is floating to the right and has a fixed right margin. When I try to satisfy all these requirements, you see what happens! For best results, do not set the left and/or right margin when you set the float (CSS syntax) or align (JavaScript syntax) property. Use an enclosing element with margins instead.
Notice how the heading next to me seems to have a right margin. That's because we are both inside a DIV block that has a right margin.
CSS syntax name: clear
JavaScript syntax name: clear
|
|
|
|---|---|
|
Possible values:
|
none, left, right, both
|
|
Initial value:
|
none
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property specifies whether an element allows floating elements on its sides. More specifically, the value of this property lists the sides where floating elements are not accepted. With clear set to left, an element will be moved below any floating element on the left side. With clear set to none, floating elements are allowed on all sides.
Example:
P {clear:left;}
tags.H1.clear = "left";
Just as you can set color and background properties for a document as a whole, you can set them for block-level elements too. These properties are applied to the "box" that contains the element.
CSS syntax name: color
JavaScript syntax name: color
|
|
|
|---|---|
|
Possible values:
|
color
|
|
Initial value:
|
black
|
|
Applies to:
|
all elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
This property describes the text color of an element, that is, the "foreground" color.
See the section Color Units for information about how to specify colors.
The following examples illustrate the ways to set the color to red.
<STYLE TYPE="text/css">
EM {color:red;}
B {color:rgb(255, 0, 0);}
I {color:rgb(100%, 0%, 0%);}
CODE {color:#FF0000;}
</STYLE>
<STYLE TYPE="text/javascript">
tags.EM.color="red";
tags.B.color="rgb(255, 0, 0)";
tags.I.color="rgb(100%, 0%, 0%)";
tags.CODE.color="#FF0000";
</STYLE>
CSS syntax name: background-image
JavaScript syntax name: backgroundImage
|
|
|
|---|---|
|
Possible values:
|
url
|
|
Initial value:
|
empty
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property specifies the background image of an element.
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.
<STYLE TYPE="text/css">
H1.SPECIAL {
background-image:url(images/glass2.gif);
padding:20pt;
color:yellow;
}
H2.SPECIAL {
padding:20pt;
background-color:#FFFF33;
border-style:solid;
border-width:1pt;
border-color:black;
}
P.SPECIAL B {background-image:url(images/tile1a.gif); }
P.SPECIAL I {background-color:cyan;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.SPECIAL.H1.backgroundImage = "images/glass2.gif";
classes.SPECIAL.H1.paddings("20pt");
classes.SPECIAL.H1.color="yellow";
classes.SPECIAL.H2.paddings("20pt");
classes.SPECIAL.H2.backgroundColor="FFFF33";
classes.SPECIAL.H2.borderStyle="solid";
classes.SPECIAL.H2.borderWidth="1pt";
classes.SPECIAL.H2.borderColor="black";
contextual(classes.SPECIAL.P, tags.B).backgroundImage=
"images/tile1a.gif";
contextual(classes.SPECIAL.P, tags.I).backgroundColor="cyan";
</STYLE>
<H1 CLASS=SPECIAL>Heading One with Image Background</H1>
<P CLASS=SPECIAL>
Hello. Notice how the portion of this paragraph that has an <B>image background</B> is promoted to being a block-level element on its own line.</P>
<H2 CLASS=SPECIAL>Heading Two with Solid Color Background</H2>
<P CLASS=SPECIAL>Hello, here is some <I>very interesting</I> information. Notice that each <I>colored portion</I> of this paragraph just continues right along in its normal place.
</P>
This example works in Netscape Navigator 4.0+. Example results:
Hello. Notice how the portion of this paragraph that has an image background is promoted to being a block-level element on its own line.
Hello, here is some very interesting information. Notice that each colored portion of this paragraph just continues right along in its normal place.
CSS syntax name: background-color
JavaScript syntax name: backgroundColor
|
|
|
|---|---|
|
Possible Values:
|
color
|
|
Initial value:
|
empty
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property specifies a solid background color for an element.
See the previous section, Background Image, for a working example.
These properties classify elements into categories more than they set specific visual parameters.
CSS syntax name: display
JavaScript syntax name: display
|
|
|
|---|---|
|
Possible values:,
|
block, inline, list-item
none
|
|
Initial value:
|
according to HTML
|
|
Applies to:
|
all elements
|
|
Inherited:
|
no
|
|
Percentage values:
|
N/A
|
This property indicates whether an element is inline (for example, <EM> in HTML), block-level element (for example. <H1> in HTML), or a block-level list item (for example, <LI> in HTML). For HTML documents, the initial value is taken from the HTML specification.
A value of none turns off the display of the element, including children elements and the surrounding box. (Thus if the value is set to none, the element is not be displayed.)
Note that block-level elements do not seem to respond to having their display property set to inline.
EM.LISTEM {display:list-item;}
classes.LISTEM.EM.display="list-item";
CSS syntax name: list-style-type
JavaScript syntax name: listStyleType
This property describes how list items (that is, elements with a display value of list-item) are formatted.
This property can be set on any element, and its children will inherit the value. However, the list style is only displayed on elements that have a display value of list-item. In HTML this is typically the case for the <LI> element.
<STYLE TYPE="text/css">
UL.BLUELIST {color:blue;}
UL.BLUELIST LI {color:aqua;list-style-type:square;}
OL.REDLIST {color:red;}
OL.REDLIST LI {color:magenta; list-style-type:upper-roman;}
</STYLE>
<STYLE TYPE="text/javascript">
classes.BLUELIST.UL.color="blue";
contextual(classes.BLUELIST.UL, tags.LI).color="aqua";
contextual(classes.BLUELIST.UL, tags.LI).listStyleType="square";
classes.REDLIST.OL.color="red";
contextual(classes.REDLIST.OL, tags.LI).color="magenta";
contextual(classes.REDLIST.OL, tags.LI).listStyleType="upper-roman";
</STYLE>
<UL CLASS=BLUELIST> <!-- LI elements inherit from UL -->
<LI>Consulting
<LI>Development
<LI>Technology integration
</UL>
<OL CLASS=REDLIST> <!-- LI elements inherit from OL -->
<LI>Start the program.
<LI>Enter your user name and password.
<LI>From the File menu, choose the Magic command.
</OL>
This example works in Netscape Navigator 4.0+. Example results:
CSS syntax name: white-space
JavaScript syntax name: whiteSpace
|
|
|
|---|---|
|
Possible values:
|
normal, pre
|
|
Initial value:
|
according to HTML
|
|
Applies to:
|
block-level elements
|
|
Inherited:
|
yes
|
|
Percentage values:
|
N/A
|
This property declares how white space inside the element should be handled. The choices are:
normal (white space is collapsed),
pre (behaves like the <PRE> element in HTML) .
For example:
P.KEEPSPACES {white-space:pre;} /* CSS syntax */
classes.KEEPSPACES.P.whiteSpace = "pre"; /* JavaScript syntax */
This section discusses units of measurement.
The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number followed by a unit of measurement. For example, 12pt, 2em, 3mm.
There are three types of length units: relative, pixel and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will scale more easily from one medium to another (for example, from a computer display to a laser printer). Percentage units and keyword values (such as x-large) offer similar advantages.
Child elements inherit the computed value, not the relative value, for example:
BODY {font-size:12pt; text-indent:3em;}
H1 {font-size:15pt;}
In the example above, the text indent value of H1 elements will be 36pt, not 45pt.
The following relative units are supported:
em -- the height of the element's font, typically the width or height of the capital letter M
ex -- half the height of the element's font, which is typically the height of the letter 'x'
px -- pixels, relative to rendering surface
The following absolute units are supported:
pt -- points
pc -- picas
px -- pixels
in -- inches
mm -- millimeters
cm -- centimeters
A color value is a either a color name or a numerical RGB specification.
The suggested list of color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. These 16 colors are taken from the Windows VGA palette and will also be used in HTML 3.2.
tags.BODY.color = "black";
tags.backgroundColor = "white";
tags.H1.color = "maroon";
tags.H2.color = "olive";
You can specify an RGB color by a six digit hexadecimal number where the first two digits indicate the red value, the second two digits indicate the green value, and the last two digits indicate the blue value. For example:
BODY {color: #FF0000}; /* red */
BODY {background-color:#333333";} /* gray */
You can also specify an RGB color by using the rgb() function which takes three arguments, for the red, green, and blue values. Each color value can either be an integer from 0 to 255 inclusive, or a percentage, as in this example:
P {color: rgb(200, 20, 240);) /* bright purple */
BLOCKQUOTE {background-color: rgb(100%, 100%, 20%); /* bright yellow */
Last Updated: 08/07/97 15:21:45