page-break-before
CSS Attributes Reference

page-break-before

Description

Indicates when to set a page break and on what page (left or right) the subsequent content should resume.

The values are defined as follows:

auto
Do a page break before the element only if necessary.
always
Always do a page break before the element.
left
Do one or two page breaks before the element until a blank left page is reached.
right
Do one or two page breaks before the element until a blank right page is reached.

If there are conflicts between this property and the page-break-after value on the next element (as formatted on the canvas), the value that results in the largest number of page breaks will be used.

Syntax

{ page-break-before: auto | always | left | right}

Remarks

This attribute is not inherited.

Example

In the following example, a page break is inserted in the document before all H1> elements.

<STYLE>
    H1 { page-break-before: always }
</STYLE>
  ...
  <H1 CLASS=chapter>
  ...

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, HTML, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

pageBreakBefore


position

Description

Specifies the type of positioning for an element. The initial state is static, which means no special positioning, and simply obey the layout rules of HTML.

An absolutely positioned element is always relative to either the next positioned parent or, if there isn't one, the BODY by default. Values for left and top are relative to the upper-left corner of the next positioned element in the hierarchy.

Syntax

{ position: absolute | relative | static}

Remarks

This attribute is not inherited.

Examples

To place an image at the top left corner of the document, set the attributes to 0.

<IMG SRC="sample.gif" STYLE="position:absolute; left:0; top:0">

Setting an absolute position pulls the element out of the "flow" of the document and positions it irrespective of the layout of surrounding elements. If other elements already occupy the given position, they do not affect the positioned element, nor does the positioned element affect them. Instead, all elements are drawn at the same place, causing the objects to overlap. You can control this overlap by using the z-index attribute.

Setting the CSS position attribute to relative places the element in the natural HTML flow of the document but offsets the position of the element based on the preceding content. For example, placing a piece of text within a paragraph with relative positioning will render the text relative to the text in the paragraph that precedes it.

<p>The superscript in this name<SPAN STYLE="position: relative; top:-3px">xyz</SPAN> is "xyz".

Text and elements that follow a relatively positioned element occupy their own space and do not overlap the natural space for the positioned element. Contrast this with an absolutely positioned element, where subsequent text and elements occupy what would have been the natural space for the positioned element before the positioned element was pulled out of the flow.

See Positioning for an overview on how to use dynamic positioning.

Be sure to note the Applies To listings for elements that can be relatively and absolutely positioned.

Applies To

For position:absolute

TABLE, INPUT, SELECT, TEXTAREA, INPUT type=button, DIV, SPAN, OBJECT, APPLET, EMBED, IFRAME, IMG, HR, MARQUEE, FIELDSET

For position:relative

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

position

See Also

top, left, height, width, z-index


text-align

Description

Describes how text is aligned within the element.

Since this property is inherited, all block-level elements inside the DIV element with CLASS=center will be centered.

Syntax

{ text-align: left | right | center | justify}

Remarks

This attribute is inherited.

Example

The following example centers the text.

DIV.center { text-align: center }

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP

Scripting Property

textAlign


text-decoration

Description

Describes decorations that are added to the text of an element. Internet Explorer 4.0 supports the keyword blink, but does not render the blink effect.

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.

Syntax

{ text-decoration: none | [ underline || overline || line-through || blink]}

Remarks

This attribute is not inherited

Example

This example would underline the text of all links in all states of navigation.

A:link, A:visited, A:active, A:hover { text-decoration: underline }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

textDecoration, textDecorationLineThrough, textDecorationOverline, textDecorationUnderline


text-indent

Description

Specifies the indent that appears before the first formatted line. This property can be negative. An indent is not inserted in the middle of an element that was broken by another (such as BR in HTML).

Syntax

{ text-indent: length | percentage}

Remarks

This attribute is inherited.

Example

This example indents text by 3 ems.

P { text-indent: 3em }

Applies To

BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, TABLE, TD, TH, TR, UL, XMP

Scripting Property

textIndent


text-transform

Description

Changes the rendering of text.

The values are defined as follows:
capitalize Transforms the first character of each word to uppercase.
uppercase Transforms all the characters to uppercase characters.
lowercase Transforms all the characters to lowercase characters.

Syntax

{ text-transform: capitalize | uppercase | lowercase | none}

Remarks

This attribute is inherited.

Example

This example puts H1 elements in uppercase text.

H1 { text-transform: uppercase }

Applies To

A, ADDRESS, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HTML, I, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text

Scripting Property

textTransform


top

Description

Specifies the position of the element relative to the top of the document. Used with the position attribute.

This value corresponds to the offsetTop property of the element, and does not include the border of the parent element (noteworthy for the BODY that draws the border inside the client region). auto is the default position of the element according to the regular HTML layout of the page. Percentage values are based on the parent's position.

This attribute, like all other CSS attributes, specifies a string value. When scripting the top property, use either the pixelTop or posTop property for numeric manipulation of a top value.

Syntax

{ top: length | percentage | auto}

Remarks

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

top

See Also

width, height, left, posTop, pixelTop


vertical-align

Description

Affects the vertical positioning of the element. The sub value vertically aligns as subscript. The super value vertically aligns as superscript.

Syntax

{ vertical-align: sub | super }

Example

This example aligns the text as subscript.

SPAN.subscript { vertical-align: sub }

Applies To

CAPTION, COL, IMG, SPAN,TBODY, TABLE, TD, TH, THEAD, TFOOT, TR

This attribute is not inherited.

Scripting Property

verticalAlign


visibility

Description

Indicates whether the content of a positioned element is displayed.

Unlike display:none, elements that are not visible still reserve the same physical space in the content layout as they would if they were visible. Changing the visibility through scripting is useful for showing and hiding content based on a user interaction. Note that for a child element to be visible, the parent element must also be visible. See Dynamic Styles for document style scripting information.

Syntax

{ visibility: visible | hidden | inherit}

Remarks

This attribute is not inherited.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BODY, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HR, HTML, I, IFRAME, IMG, INPUT, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, INPUT type=button, INPUT type=file, INPUT type=reset, INPUT type=submit, INPUT type=text, INPUT type=checkbox, INPUT type=radio, INPUT type=image

Scripting Property

visibility

See Also

display

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.