Advanced CSS Animator Manual

Reference: Basic CSS properties

Text

Font-size - Determines the font size of the element. The font size can be set in several ways. A collection of constants (xx-small, x-small, small, medium, large, x-large, xx-large) defines what are known as absolute sizes. In truth, these are absolute as far as a single browser in a single operating system goes because the reference point for these sizes varies with browser and operating system (analogous to the old HTML font sizes of 1 through 7).

Line-height – Sets the height of the inline box (the box holding one physical line of content). Under normal circumstances, the line-height of the tallest font in a line of text or the tallest object governs the line height for that content line. Mainstream browsers have come a long way since the Version 4 wrinkles that frequently made a visual mess out of mixed font sizes and line heights in the same block-level element.

Text-indent – Sets the size of indenting of the first line of a block of inline text (such as a p element). Only the first line is affected by this setting. A negative value can be used to outdent the first line, but be sure the text does not run beyond the left edge of the browser window or frame.

Box

Border-width – This is a shortcut attribute that lets you set multiple border edges to the same or different widths. You may supply one to four space-delimited width length values. The number of values determines which sides receive the assigned widths.

Border-top-width, Border-right-width, Border-bottom-width, Border-left-width – Each attribute sets the width of a single border edge of an element. Note that Navigator 4's initial value is zero, which means that you must set the width for all border attribute settings if you expect to see the border in that browser. See also the border-width attribute for setting the width of multiple edges in one statement.

Width – Sets the width of a block-level, replaced, and positioned element's content width (exclusive of borders, padding, and margins).

IE for Windows counts left and right margins, padding, and borders when calculating the width of an element until you reach IE 6 in standards compatibility mode. When observing the CSS standards, the width applies to only the content portion of an element, irrespective of borders, padding, or margins. This change may have significant impact on legacy code that you are bringing up to W3C compatibility.

Height – Sets the height of a block-level, replaced, and positioned element's content height (exclusive of borders, padding, and margins).

IE for Windows counts top and bottom margins, padding, and borders when calculating the height of an element until you reach IE 6 in standards-compatibility mode. When observing the CSS standards, the height applies to only the content portion of an element, irrespective of borders, padding, or margins. This change may have significant impact on legacy code that you are bringing up to W3C compatibility.

Padding, Padding-top, Padding-right, Padding-bottom, Padding-left – This is a shortcut attribute that can set the padding widths of up to four edges of an element with one statement. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size. You may supply one to four space-delimited padding values. The number of values determines which sides receive the assigned padding.

Min-width/Max-width – These attributes let you establish a minimum and/or maximum width for an element. You can bracket the permissible width of an element regardless of the width caused by the natural flow of the content within a parent container.

Min-height/Max-height - These attributes let you establish a maximum and/or minimum height for an element. You can bracket the permissible height of an element regardless of the height caused by the natural flow of the content.

When you set the max-height attribute of an element that has content that may extend beyond that maximum, you should also set the overflow style attribute to hidden so that excess content is cropped. Failure to do so causes the overflowing content to bleed into the succeeding elements' content. Netscape 6 supports both attributes for block-level and positioned elements.

Internet Explorer 6 for Windows supports only the min-height attribute, and is limited to td, th, and tr elements inside a table with its table-layout style attribute is set to fixed. This conflicts with the CSS2 specification, which explicitly excludes table-related elements from being influenced by these attributes. As such, min-height settings you make for td, th, or tr elements in IE 6 do not affect Netscape 6. IE 5 for Macintosh supports neither attribute.

Positioning

Left – For positionable elements, defines the offset position of the left edge of an element's box (content plus left padding, border, and/or margin) relative to the left edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the left edge of the inline location of where the element would normally appear in the content.

Top – For positioned elements, this defines the position of the top edge of an element box (content plus top padding, border, and/or margin) relative to the top edge of the next outermost block content container.

Right – For positionable elements, this defines the position of the right edge of an element box (content plus padding, border, and/or margin) relative to the right edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the right edge of the inline location of where the element would normally appear in the content.

Bottom – The CSS specification calls for this attribute to define the position of the bottom edge of a positioned element's content (exclusive of borders and margins) relative to the bottom edge of the next outermost block content container. Of mainstream browsers, only IE 5 for Macintosh behaves this way.

IE for Windows and Netscape 6 do something unexpected when the positioned element uses the root positioning context: instead of using the bottom of the document as the comparative edge, these browsers use the bottom of the browser window space (the viewport in CSS terminology).

As a result, the precise bottom position of the element varies with the user's browser window size. This discrepancy makes it more practical to use the bottom property for a positioned element nested inside another positioned element. When the element is relative-positioned, the offset is based on the bottom edge of the inline location of where the element would normally appear in the content.

Margin, Margin-top, Margin-right, Margin-bottom, Margin-left – All four attributes set the width of a single margin edge of an element. A margin is space that extends beyond the element's border and is not calculated as part of the element's width or height.

Other

Opacity – The opacity property defines how transparent the object on the screen should be to objects below it.

Z-index - For a positioned element, this sets the stacking order relative to other elements within the same parent container.