Learn Advanced JavaScript Programming

Specifying Styles for Individual Elements

You can use the STYLE attribute to specify a style for a particular instance of an element. You can specify, for example, that a particular paragraph is green or a particular block quote is bold. This approach mixes style with content, as opposed to style sheets where they are separated. For example:

<BODY>
 <P STYLE="color = 'green'">This paragraph is green.</P>
 <P>This paragraph is in the usual color </P>
</BODY>

Defining Classes of Styles

You can declare classes of styles by using the CLASSES attribute inside the <STYLE> tag. You can define, for example, a green, bold class. Whenever you want an element to be displayed in green bold, you can specify that the element is a member of the green bold class. For example:

<HTML>
<HEAD>
  <TITLE>Title</TITLE>
  <STYLE TYPE="text/javascript">
classes.greenbold.all.color = "#00FF00"
 classes.greenbold.all.fontWeight = "bold"
  </STYLE>
</HEAD>
<BODY>
  <H1 CLASS=greenbold>This heading is way too green</H1>

You can use the keyword all to specify that all tags within the class are affected by the style property or you can selectively identify which elements belong to the class. The following code, for instance, creates a class called red1. Only paragraphs and block quotes can be displayed in this style:

<HTML>
 <HEAD>
   <TITLE>Title</TITLE>
   <STYLE TYPE="text/javascript">
 classes.red1.P.color = "red"
 classes.red1.blockquote.color = "red"
   </STYLE>
 </HEAD>
<BODY>
 <H1 CLASS=red1>This paragraph is in red</H1>
 <P>This paragraph is in the default color, since it is not a member
  of class red1.</P>
 <BLOCKQUOTE CLASS="red1">Oh what a beautifully red quote this is.
 </BLOCKQUOTE>

Format Properties

Javascript-accessible 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 and margins. The padding area uses the same background as the element itself (which is set with the background property). The margins are always transparent, so the parent element shines through. The width of the box is the sum of the element width (that is, the width of the formatted text or image), the padding, and the border. Padding and margin properties are not inherited, but, since the placement of an element is relative to its ancestors and siblings, the parent’s padding and margin properties affect its children.

Box Math

Seven length units influence the horizontal dimension of a box: left margin, left border, left padding, width, right padding, right border, right margin. The width of the element has to be equal to the sum of these units. Therefore, you cannot specify values for all seven properties and expect them to be honored. The relative strengths between them are as follows:

left border
right border
left padding
right padding
width
left margin
right margin

By default, the value of the width property is automatically calculated based on the other properties’ values (auto). If width, however, is assigned another value, or the dimensions do not add up for other reasons, the property with the lowest rank (closest to 7) will automatically be calculated (auto).

Replaced Elements

A replaced element is an element which is replaced by a content pointed to from the element. For example, in HTML, the <IMG> element is replaced by the image pointed to by the SRC attribute.

Replaced elements often come with their own intrinsic width and height. If the value for width is auto, the intrinsic width is used as the width of the element. If a value other than auto is specified in the style sheet, this value is used and the replaced element should be resized accordingly (the resize method will depend on the media type). The height of the element is determined in a similar way.

Setting Margins

You can set the size of the margins for a block level element by specifying the marginLeft, marginRight, marginTop, and marginBottom

properties. You can also use the predefined margins() method to set all four properties simultaneously. For example:

// manual assignment
with(tags.P) {
 marginTop = 30;
 marginBottom = 40;
 marginRight = 50;
 marginLeft = 60;
}

The above manual assignment has the same result as the call to the margins() method shown below:

// assignment using a method
// margins(top, right, bottom, left)
tags.P.margins(30, 50, 40, 60);

To set the default margins for everything in a document, specify the margin properties for the <BODY> tag. The following code, for example, sets the left and right margins to 20:

tags.BODY.margins(0, 20, 0, 20);

The actual distances between boxes is equal to the sum of two adjoining margins. A box with no border, padding, or content is a legal element and may be used to increase the margin between two real boxes. If there are negative margins, the absolute maximum of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.

Settting Border Width

You can set the width of the border surrounding a block level element by specifying the borderTopWidth, borderRightWidth, borderBottomWidth, and borderLeftWidth properties. You can also use the predefined borderWidths() method to set all four properties simultaneously. The style of the border can be specified using the borderStyle property.

Settting the Padding Size

You can set the size of the padding surrounding a block level element by specifying the paddingTop, paddingRight, paddingBottom, and paddingLeft properties. You can also use the predefined paddings() method to set all four properties simultaneously.

Summary

In this chapter, we have introduced new ways to specify a page’s style via JavaScript. You can specify specific styles for certain element types or instances. Style sheets can be specified outside the page and linked into it, or created within a document. The concepts of style class and style inheritance are explained. We described how to specify a page’s paddings and margins, and what the mathematical rules are for governing a page’s settings.

Table of Contents