Cascading Style Sheets

Web authors gain unprecedented control over the look of documents with Cascading Style Sheets (CSS). This section contains a list of articles that are available for CSS.

Overviews/Tutorials

About Element Positioning

Windows Internet Explorer supports the ability to position HTML elements in x- and y-coordinates and to overlap elements in planes along the z-axis, which extends toward and away from the viewer in a Web document. These capabilities allow authors to precisely place elements, images, controls, or text on to a web page. By using scripts to manipulate the position coordinates and other dynamic styles, authors can move elements around a page, creating animated effects. The combination of dynamic styles, positioning, transparent Microsoft ActiveX Controls, and transparent images presents authors with a rich set of animation options.

Color Table

Colors can be specified in HTML pages by using numbers to denote an RGB color value, or by using a color name. In Internet Explorer 9 and later, you can also define colors by hue-saturation-lightness (HSL) values and alpha transparency.

Compatibility in Internet Explorer 5.5

This document describes the features in Microsoft Internet Explorer 5.5 that may not be compatible with applications you developed for earlier versions of Internet Explorer.

Controlling Presentation with Measurement and Location Properties In Quirks Mode

Dynamic HTML (DHTML) exposes measurement and location properties that you can use to change the size and position of HTML elements on your Web pages. When you understand what these properties are and how they affect elements on a page, you can achieve greater control over the appearance of your Web pages. For example, you can use these properties to design pages that are similar to documents in other applications, such as Microsoft PowerPoint or Microsoft Word.

Controlling Presentation with Measurement and Location Properties In Strict Mode

DHTML exposes measurement and location properties that can be used to change the size and position of HTML elements on your web pages. An understanding of these properties and their impact on the elements in a page can help you achieve greater control over the layout of your websites. This article explains how you can use measurement and location properties to control the appearance of a web page that is rendered using the Internet Explorer 7 strict mode.

CSS How-to - Optimize Pages for Printing Using CSS

Using CSS print styles, you can control how your webpage will appear when users transfer the page's contents to paper (or other media) using a printer (or any output device listed in the user's Print dialog box).

CSS Improvements in Internet Explorer 8

Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS2.1) specification and supports some features of CSS, Level 3 (CSS3). This topic is composed of a comprehensive list of the changes to CSS support in Internet Explorer 8.

CSS Length Units Reference

This topic defines the supported values and units for CSS

How to Fly Text in DHTML

This article demonstrates both ways to implement flying text through the marquee element and through CSS positioning.

How to Manipulate Text Effects in Response to Mouse Events

Some DHTML effects require minimal scripting to attain. One such effect, activating text in response to mouse events, is achieved largely through the use of CSS rules and the className property. Creating text effects in this manner yields ease of maintenance and succinct code.

Introduction to Dynamic Styles

You can dynamically change the style of any HTML element in a document. You can change colors, fonts, spacing, indentation, position, and even the visibility of text. Because the DHTML Document Object Model (DOM) makes every HTML element and attribute accessible, it is easy to use scripts to dynamically read and change styles.

Managing Style Sheets

Dynamically changing CSS styles that are applied to documents is not limited to the inline styles (styles defined on HTML elements with the STYLE attribute). Global style sheets defined with a LINK or STYLE tag in the HEAD section of the document can be manipulated through script. Manipulating the global style sheet is a powerful way to dynamically change the styles that apply to Web pages.

Measuring Element Dimension and Location

This topic is designed to help web developers understand how to access the dimension and location of elements on the page through the CSS Object Model (CSSOM) in Internet Explorer 9.

Printing and Style Sheets

The style and link elements support the MEDIA attribute, which defines the output device for the style sheet.

Understanding CSS Selectors

The basic building blocks of a CSS style sheet are its style rules. Selectors are used to "select" elements on an HTML page so that they can be styled. Without selectors, there would be no way to determine how the rules should be applied. This article introduces the fundamentals of CSS declaration syntax, to describe how selectors are used.

Collections

imports

Retrieves a collection of all the imported style sheets defined for the respective styleSheet object.

pages

Retrieves a collection of page objects, which represent @page rules in a styleSheet.

rules

Retrieves a collection of rules defined in a style sheet.

styleSheets

Retrieves a collection of styleSheet objects representing the style sheets that correspond to each instance of a link or style object in the document.

Attributes/Properties

accelerator

Gets or sets a string that indicates whether the object represents a keyboard shortcut.

background

Gets or sets up to five separate background properties of the object.

backgroundAttachment

Gets or sets how the background image is attached to the object within the document.

backgroundClip

Gets or sets the background painting area.

backgroundColor

Gets or sets the color behind the content of the object.

backgroundImage

Gets or sets the background image of the object.

backgroundOrigin

Gets or sets the background positioning area of a box or multiple boxes.

backgroundPosition

Sets or retrieves the position of the background of the object.

backgroundPositionX

Gets or sets the x-coordinate of the backgroundPosition property.

backgroundPositionY

Gets or sets the y-coordinate of the backgroundPosition property.

backgroundRepeat

Gets or sets how the backgroundImage property of the object is tiled.

backgroundSize

Gets or sets the size of the background images.

baselineShift

Gets or sets a value that indicates how the dominant baseline should be repositioned relative to the dominant baseline of the parent text content element.

behavior

Gets or sets the location of the DHTML behavior.

border

Sets or retrieves the properties to draw around the object.

borderBottom

Sets or retrieves the properties of the bottom border of the object.

borderBottomColor

Gets or sets the color of the bottom border of the object.

borderBottomLeftRadius

Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the lower-left corner for the outer border edge of the current box.

borderBottomRightRadius

Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the lower-right corner for the outer border edge of the current box.

borderBottomStyle

Gets or sets the style of the bottom border of the object.

borderBottomWidth

Gets or sets the width of the bottom border of the object.

borderCollapse

Gets or sets a value that indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML.

borderColor

Gets or sets the border color of the object.

borderLeft

Sets or retrieves the properties of the left border of the object.

borderLeftColor

Gets or sets the color of the left border of the object.

borderLeftStyle

Gets or sets the style of the left border of the object.

borderLeftWidth

Gets or sets the width of the left border of the object.

borderRadius

Gets or sets one or more values that define the radii of a quarter ellipse that defines the shape of the corners for the outer border edge of the current box.

borderRight

Sets or retrieves the properties of the right border of the object.

borderRightColor

Gets or sets the color of the right border of the object.

borderRightStyle

Gets or sets the style of the right border of the object.

borderRightWidth

Gets or sets the width of the right border of the object.

borderSpacing

Gets or sets the distance between the borders of adjoining cells in a table.

borderStyle

Gets or sets the style of the left, right, top, and bottom borders of the object.

borderTop

Sets or retrieves the properties of the top border of the object.

borderTopColor

Gets or sets the color of the top border of the object.

borderTopLeftRadius

Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the upper-left corner for the outer border edge of the current box.

borderTopRightRadius

Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the upper-right corner for the outer border edge of the current box.

borderTopStyle

Gets or sets the style of the top border of the object.

borderTopWidth

Gets or sets the width of the top border of the object.

borderWidth

Gets or sets the width of the left, right, top, and bottom borders of the object.

bottom

Gets or sets the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy.

boxShadow

Gets or sets a comma-separated list of shadows that attaches one or more drop shadows to the current box.

boxSizing

Gets or sets the box model to use for object sizing.

captionSide

Gets or sets where the caption of a table is located.

clear

Gets or sets whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

clip

Sets or retrieves which part of a positioned object is visible.

clipLeft

Gets the left coordinate of the object clipping region.

clipRight

Gets the right coordinate of the object clipping region.

clipTop

Gets the top coordinate of the object clipping region.

color

Gets or sets the color of the text of the object.

content

Gets or sets generated content to insert before or after an element.

counterIncrement

Gets or sets a list of counters to increment.

counterReset

Gets or sets a list of counters to create or reset to zero.

cssText

Gets or sets the persisted representation of the style rule.

cursor

Gets or sets the type of cursor to display as the mouse pointer moves over the object.

direction

Gets or sets the reading order of the object.

display

Gets or sets whether the object is rendered.

dominantBaseline

Gets or sets a value that determines or redetermines a scaled-baseline table.

emptyCells

Determines whether to show or hide a cell without content.

fill

Gets or sets a value that indicates the color to paint the interior of the given graphical element.

fillOpacity

Gets or sets a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.

fillRule

Gets or sets a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.

filter

Gets or sets the filter or collection of filters that are applied to the object.

font

Sets or retrieves a combination of separate font properties of the object. Alternatively, sets or retrieves one or more of six user-preference fonts.

fontFamily

Gets or sets the name of the font used for text in the object.

fontSize

Gets or sets a value that indicates the font size used for text in the object.

fontSizeAdjust

Gets or sets a value that specifies an aspect value for an element that will effectively preserve the x-height of the first choice font, whether it is substituted or not.

fontStretch

Gets or sets a value that indicates a normal, condensed, or expanded face of a font family.

fontStyle

Gets or sets the font style of the object as italic, normal, or oblique.

fontVariant

Gets or sets whether the text of the object is in small capital letters.

fontWeight

Gets the numeric weight of the font of the object.

fontWeight

Gets or sets the weight of the font of the object.

glyphOrientationHorizontal

Gets or sets a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of horizontal.

glyphOrientationVertical

Gets or sets a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of vertical.

hasLayout

Gets a value that indicates whether the object has layout.

height

Gets or sets the height of the object.

imeMode

Gets or sets the state of an Input Method Editor (IME).

kerning

Gets or sets a value that indicates whether Internet Explorer should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (that is, enable auto-kerning) or instead disable auto-kerning and set inter-character spacing to a specific length (typically zero).

layoutFlow

Gets or sets the direction and flow of the content in the object.

layoutGrid

Sets or retrieves the composite document grid properties that specify the layout of text characters.

layoutGridChar

Gets or sets the size of the character grid used for rendering the text content of an element.

layoutGridLine

Gets or sets the gridline value used for rendering the text content of an element.

layoutGridMode

Gets or sets whether the text layout grid uses two dimensions.

layoutGridType

Gets or sets the type of grid used for rendering the text content of an element.

left

Gets or sets the position of the object relative to the left edge of the next positioned object in the document hierarchy.

letterSpacing

Gets or sets the amount of additional space between letters in the object.

lineBreak

Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean.

lineHeight

Gets or sets the distance between lines in the object.

listStyle

Sets or retrieves up to three separate listStyle properties of the object.

listStyleImage

Gets or sets a value that indicates which image to use as a list-item marker for the object.

listStylePosition

Gets or sets a variable that indicates how the list-item marker is drawn relative to the content of the object.

listStyleType

Gets or sets the predefined type of the line-item marker for the object.

margin

Gets or sets the width of the top, right, bottom, and left margins of the object.

marginBottom

Gets or sets the height of the bottom margin of the object.

marginLeft

Gets or sets the width of the left margin of the object.

marginRight

Gets or sets the width of the right margin of the object.

marginTop

Gets or sets the height of the top margin of the object.

marker

Gets or sets a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.

markerEnd

Gets or sets a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.

markerMid

Gets or sets a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.

markerStart

Gets or sets a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.

mask

Gets or sets a value that indicates a Scalable Vector Graphics (SVG) mask.

maxHeight

Gets or sets the maximum height for an element.

maxWidth

Gets or sets the maximum width for an element.

minHeight

Gets or sets the minimum height for an element.

minWidth

Gets or sets the minimum width for an element.

msBlockProgression

Gets or sets the block progression and layout orientation.

msInterpolationMode

Obsolete. Gets or sets the interpolation (resampling) method used to stretch images.

msTransform

Gets or sets a list of one or more transform functions that specify how to translate, rotate, or scale an element in 2-D space.

msTransformOrigin

Gets or sets one or two values that establish the origin of transformation for an element.

opacity

Gets or sets a value that specifies object or group opacity in CSS or SVG.

orphans

Gets or sets the minimum number of lines of a paragraph that must appear at the bottom of a page.

outline

Gets or sets the color, style, and width of the outline frame.

outlineColor

Gets or sets the color of the outline frame.

outlineStyle

Gets or sets the style of the outline frame.

outlineWidth

Gets or sets the width of the outline frame.

overflow

Gets or sets a value indicating how to manage the content of the object when the content exceeds the height or width of the object.

overflowX

Gets or sets how to manage the content of the object when the content exceeds the width of the object.

overflowY

Gets or sets how to manage the content of the object when the content exceeds the height of the object.

padding

Gets or sets the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.

paddingBottom

Gets or sets the amount of space to insert between the bottom border of the object and the content.

paddingLeft

Gets or sets the amount of space to insert between the left border of the object and the content.

paddingRight

Gets or sets the amount of space to insert between the right border of the object and the content.

paddingTop

Gets or sets the amount of space to insert between the top border of the object and the content.

pageBreakAfter

Gets or sets a value indicating whether a page break occurs after the object.

pageBreakBefore

Gets or sets a string indicating whether a page break occurs before the object.

pageBreakInside

Gets or sets a string indicating whether a page break is allowed to occur inside the object.

pixelBottom

Sets or retrieves the bottom position of the object.

pixelHeight

Sets or retrieves the height of the object.

pixelLeft

Sets or retrieves the left position of the object.

pixelRight

Sets or retrieves the right position of the object.

pixelTop

Sets or retrieves the top position of the object.

pixelWidth

Sets or retrieves the width of the object.

pointerEvents

Gets or sets a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.

posBottom

Sets or retrieves the bottom position of the object in the units specified by the bottom attribute.

posHeight

Sets or retrieves the height of the object in the units specified by the height attribute.

position

Gets or sets the type of positioning used for the object.

posLeft

Sets or retrieves the left position of the object in the units specified by the left attribute.

posRight

Sets or retrieves the right position of the object in the units specified by the right attribute.

posTop

Sets or retrieves the top position of the object in the units specified by the top attribute.

posWidth

Sets or retrieves the width of the object in the units specified by the width attribute.

quotes

Gets or sets the pairs of strings to be used as quotes in generated content.

right

Gets or sets the position of the object relative to the right edge of the next positioned object in the document hierarchy.

rubyAlign

Gets or sets the position of the ruby text specified by the rt object.

rubyOverhang

Gets or sets the position of the ruby text specified by the rt object.

rubyPosition

Gets or sets the position of the ruby text specified by the rt object.

scrollbar3dLightColor

Gets or sets the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarArrowColor

Gets or sets the color of the arrow elements of a scroll arrow.

scrollbarBaseColor

Gets or sets the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.

scrollbarDarkShadowColor

Gets or sets the color of the gutter of a scroll bar.

scrollbarFaceColor

Gets or sets the color of the scroll box and scroll arrows of a scroll bar.

scrollbarHighlightColor

Gets or sets the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarShadowColor

Gets or sets the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.

scrollbarTrackColor

Gets or sets the color of the track element of a scroll bar.

stopColor

Gets or sets a value that indicates what color to use at the current gradient stop.

stopOpacity

Gets or sets a value that defines the opacity of the current gradient stop.

stroke

Gets or sets a value that indicates the color to paint along the outline of a given graphical element.

strokeDasharray

Gets or sets one or more values that indicate the pattern of dashes and gaps used to stroke paths.

strokeDashoffset

Gets or sets a value that specifies the distance into the dash pattern to start the dash.

strokeLinecap

Gets or sets a value that specifies the shape to be used at the end of open subpaths when they are stroked.

strokeLinejoin

Gets or sets a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.

strokeMiterlimit

Gets or sets a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).

strokeOpacity

Gets or sets a value that specifies the opacity of the painting operation that is used to stroke the current object.

strokeWidth

Gets or sets a value that specifies the width of the stroke on the current object.

styleFloat

Gets or sets on which side of the object the text will flow.

tableLayout

Gets or sets a string that indicates whether the table layout is fixed.

textAlign

Gets or sets whether the text in the object is left-aligned, right-aligned, centered, or justified.

textAlignLast

Gets or sets how to align the last line or only line of text in the object.

textAutospace

Gets or sets the autospacing and narrow space width adjustment of text.

textDecoration

Gets or sets a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.

textDecorationBlink

Sets or retrieves a Boolean value that indicates whether the object's textDecoration property has a value of "blink."

textDecorationLineThrough

Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn through it.

textDecorationNone

Sets or retrieves the Boolean value indicating whether the textDecoration property for the object has been set to none.

textDecorationOverline

Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn over it.

textDecorationUnderline

Sets or retrieves whether the text in the object is underlined.

textIndent

Gets or sets the indentation of the first line of text in the object.

textJustify

Gets or sets the type of alignment used to justify text in the object.

textKashidaSpace

Gets or sets the ratio of kashida expansion to white space expansion when justifying lines of text in the object.

textOverflow

Gets or sets a value that indicates whether to render ellipses(...) to indicate text overflow.

textTransform

Gets or sets the rendering of the text in the object.

textUnderlinePosition

Gets or sets the position of the underline decoration that is set through the textDecoration property of the object.

top

Gets or sets the position of the object relative to the top of the next positioned object in the document hierarchy.

type

Retrieves the CSS language in which the style sheet is written.

unicodeBidi

Gets or sets the level of embedding with respect to the bidirectional algorithm.

verticalAlign

Gets or sets the vertical alignment of the object.

visibility

Gets or sets whether the content of the object is displayed.

whiteSpace

Gets or sets a value that indicates whether lines are automatically broken inside the object.

widows

Gets or sets the minimum number of lines of a paragraph that must appear at the top of a document.

width

Gets or sets the width of the object.

wordBreak

Gets or sets line-breaking behavior within words, particularly where multiple languages appear in the object.

wordSpacing

Gets or sets the amount of additional space between words in the object.

wordWrap

Gets or sets whether to break words when the content exceeds the boundaries of its container.

writingMode

Gets or sets the direction and flow of the content in the object.

zIndex

Gets or sets the stacking order of positioned objects.

zoom

Gets or sets the magnification scale of the object.

Methods

addImport

Adds a style sheet to the imports collection for the specified style sheet.

addRule

Creates a new rule for a style sheet.

createStyleSheet

Creates a style sheet for the document.

getExpression

Retrieves the expression for the given property.

removeExpression

Removes the expression from the specified property.

removeImport

Removes the imported style sheet from the imports collection based on ordinal position.

removeRule

Deletes an existing style rule for the styleSheet object, and adjusts the index of the rules collection accordingly.

setExpression

Sets an expression for the specified object.