Cascading style sheet reference

  • Article

Web authors can have significant control over the look of documents by using cascading style sheets.

Overviews and tutorials

The following topics provide overview information about how to create cascading style sheet rules and how they apply to individual elements in an HTML page:

  • Understanding selectors   The basic building blocks of a cascading 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 topic introduces the fundamentals of cascading style sheet declaration syntax, to describe how selectors are used.

  • Length units reference   This section defines the supported length units for cascading style sheets.

  • About element positioning   Most modern browsers can position HTML elements in x and y coordinates and can overlap elements in planes along the z-axis, which extends toward and away from the viewer in a web document. By using these capabilities, you can precisely place elements, images, controls, or text on a web page. By using scripts to manipulate the position coordinates and other dynamic styles, you can move elements around a page, creating animated effects. The combination of dynamic styles, positioning, and transparent images gives you a rich set of animation options.

  • Colors   Colors can be specified in HTML pages in two ways: by name or by RGB value.

  • 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 Office PowerPoint or Microsoft Office Word.

Properties

This section contains reference topics for supported cascading style sheet properties. For a categorized list of cascading style sheet properties, see Properties by category.

  • background   Sets up to five separate background properties of the object.

  • background-attachment   Sets how the background image is attached to the object within the document.

  • background-color   Sets the color behind the content of the object.

  • background-image   Sets the background image of the object.

  • background-position   Sets the position of the background of the object.

  • background-repeat   Sets how the background-image property of the object is tiled.

  • border   Sets the properties to draw around the object.

  • border-collapse   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.

  • border-color   Sets the border color of the object.

  • border-style   Sets the style of the left, right, top, and bottom borders of the object.

  • border-left   Sets the properties of the top border of the object.

  • border-bottom-color   Sets the color of the bottom border of the object.

  • border-left-color   Sets the color of the left border of the object.

  • border-right-color   Sets the color of the right border of the object.

  • border-top-color   Sets the color of the top border of the object.

  • border-bottom-style   Sets the style of the bottom border of the object.

  • border-left-style   Sets the style of the left border of the object.

  • border-right-style   Sets the style of the right border of the object.

  • border-top-style   Sets the style of the top border of the object.

  • border-bottom-width   Sets the width of the bottom border of the object.

  • border-left-width   Sets the width of the left border of the object.

  • border-right-width   Sets the width of the right border of the object.

  • border-top-width   Sets the width of the top border of the object.

  • border-width   Sets the width of the left, right, top, and bottom borders of the object.

  • bottom   Sets the bottom position of the object relative to the bottom of the next positioned object in the document hierarchy.

  • clear   Sets whether the object allows floating objects on its left side, its right side, or both, so that the next object displays after the floating objects.

  • clip   Sets which part of a positioned object is visible.

  • color   Sets the color of the text of the object.

  • cursor   Sets the type of pointer to display as the pointer moves over the object.

  • direction   Sets the reading order of the object.

  • display   Sets whether the object is rendered.

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

  • font-family   Sets the name of the font used for text in the object.

  • font-size   Sets a value that indicates the font size used for text in the object.

  • font-style   Sets the font style of the object as italic, normal, or oblique.

  • font-variant   Sets whether the text of the object is in small uppercase letters.

  • font-weight   Sets the weight of the font of the object.

  • height   Sets the height of the object.

  • left   Sets the position of the object relative to the left edge of the next positioned object in the document hierarchy.

  • letter-spacing   Sets the amount of additional space between letters in the object.

  • line-height   Sets the distance between lines in the object.

  • list-style   Sets up to three separate list-style properties of the object.

  • list-style-image   Sets a value that indicates which image to use as a list-item marker for the object.

  • list-style-position   Sets a variable that indicates how the list-item marker is drawn relative to the content of the object.

  • list-style-type   Sets the predefined type of the line-item marker for the object.

  • margin   Sets the width of the top, right, bottom, and left margins of the object.

  • margin-bottom   Sets the size of the bottom margin of the object.

  • margin-left   Sets the size of the left margin of the object.

  • margin-right   Sets the size of the right margin of the object.

  • margin-top   Sets the size of the top margin of the object.

  • max-height   Sets the maximum height for an element.

  • max-width   Sets the maximum width for an element.

  • min-height   Sets the minimum height for an element.

  • min-width   Sets the minimum width for an element.

  • overflow   Sets a value indicating how to manage the content of the object when the content exceeds the height or width of the object.

  • padding   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.

  • padding-bottom   Sets the amount of space to insert between the bottom border of the object and the content.

  • padding-left   Sets the amount of space to insert between the left border of the object and the content.

  • padding-right   Sets the amount of space to insert between the right border of the object and the content.

  • padding-top   Sets the amount of space to insert between the top border of the object and the content.

  • page-break-after   Sets a value indicating whether a page break occurs after the object.

  • page-break-before   Sets a value indicating whether a page break occurs before the object.

  • position   Sets the type of positioning used for the object.

  • right   Sets the position of the object relative to the right edge of the next positioned object in the document hierarchy.

  • table-layout   Sets a string that indicates whether the table layout is fixed.

  • text-align   Sets whether the text in the object is left-aligned, right-aligned, centered, or justified.

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

  • text-indent   Sets the indentation of the first line of text in the object.

  • text-transform   Sets the rendering of the text in the object.

  • top   Sets the position of the object relative to the top of the next positioned object in the document hierarchy.

  • unicode-bidi   Sets the level of embedding with respect to the bidirectional (right-to-left) algorithm.

  • vertical-align   Sets the vertical alignment of the object.

  • visibility   Sets whether the content of the object is displayed.

  • white-space   Sets a value that indicates whether lines are automatically broken inside the object.

  • width   Sets the width of the object.

  • word-spacing   Sets the amount of additional space between words in the object.

  • z-index   Sets the stacking order of positioned objects.

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.