In this reference, you'll find information about the selectors and properties available for use in CSS 2.1. Selectors are defined and described, an example is provided, and usage tips are offered. For properties, each property is first defined and described, with its media classification given. This is followed by an example and helpful usage tips
The following selector types, pseudo classes, and pseudo elements are available for use in CSS 2.1.
Selector: Adjacent sibling selector
Description: Selects an adjacent sibling (one that is directly adjacent to the first defined selector and that shares the same parents)
Example:
h1 + p {
text-indent: 0;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Attribute selector
Description: Selects an element based on its attributes
Example:
acronym [title] {
color: red;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Child selector
Description: Selects the children of a given element
Example:
#content > p {
padding: 10px;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it, or for hacks.
Selector: Class selector
Description: Allows the creation of a custom class. Called in the HTML or XHTML using the class attribute within the element to be selected.
Example:
.notation {
font-size: xx-small;
}
Tips: This selector is widely supported and, therefore, overused. Avoid overuse by streamlining CSS with descendant selectors instead.
Selector: Descendant selector
Description: Selects all the descendant elements of a parent element
Example:
#content p {
font-family: Arial, Helvetica, sans-serif;
}
Tips: This selector is widely supported and should be used as often as possible, to reduce reliance on class selectors.
Selector: ID selector
Description: Allows the creation of a uniquely identified selector. Called in the HTML or XHTML using the id attribute within the element to be selected. Can be used only once per document.
Example:
#content {
margin-left: 25px;
margin-right: 25px;
}
Tips: This selector is widely supported and typically used to describe sections of a document used for layout. It is also used to bind elements to scripts in DHTML.
Selector: Universal selector
Description: Selects all elements
Example:
* {
border: 1px dashed blue;
}
Tips: This selector is very helpful when working with diagnostics, but it should be avoided for general use. Some problems with universal selector behavior exist in Internet Explorer versions.
Selector: Element (type) selector
Description: A selector matching the element type
Example:
h1 {
font-size: 22px;
}
Tips: Very widely supported, this is the most commonly used selector.
Selector: :active dynamic pseudo class
Description: Selects an element while that element is being activated by the user
Example:
a:active {
color: red;
}
Tips: This selector is widely supported. When styling links, you must follow the LoVe/HAte order of link, visited, hover, active, or results might be inconsistent.
Selector: :after pseudo element
Description: Used to insert generated text after the selected element
Example:
a:after {
content: link;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :before pseudo element
Description: Used to insert generated text before the selected element
Example:
a:before {
content: link;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :firstchild pseudo class
Description: Used to select the first child of an element only
Example:
p:firstchild em {
font-weight: bold;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :firstletter pseudo element
Description: Used to select the first letter of an element only
Example:
#content p:firstletter {
font-size: larger;
}
Tips: Good support exists in all contemporary browsers. This selector is helpful in creating nonimage-based drop caps.
Selector: :firstline pseudo element
Description: Used to select the first line of an element only
Example:
#content p:firstline {
color: red;
}
Tips: Good support exists in all contemporary browsers. This selector applies the style to the first line. If the line length changes because of browser resize, the style is still applied to whatever the first line is.
Selector: :focus dynamic pseudo class
Description: Applies the style when an element has focus (is accepting keyboard input, such as in a form)
Example:
input:focus {
border: 1px solid red;
}
Tips: This selector is unavailable for use in Internet Explorer and, therefore, is used primarily for enhancing styles in browsers that do support it.
Selector: :hover dynamic pseudo class
Description: Applies the style when an element is hovered over with the mouse or pointing device
Example:
#toggle:hover {
border: 1px solid green;
}
Tips: This selector is unavailable for use in Internet Explorer except as applied to the a element. Therefore, it is used primarily for enhancing styles in browsers that do support it.
Selector: :lang pseudo class
Description: Selects an element based on its language
Example:
p:lang(de) {
quotes: '»' '«' '\2039' '\203A'
}
Tips: Inconsistent support exists. This selector is used for multilingual documents and internationalization.
Selector: :link link pseudo class
Description: Selects a link in the normal state
Example:
a:link {
color: #ccc;
}
Tips: This selector is very widely supported. Remember the LoVe/HAte order rule, to avoid inconsistent behavior.
Selector: :visited link pseudo class
Description: Selects a link in the visited state
Example:
a:visited {
color: #333;
}
Tips: This selector is very widely supported. Remember the LoVe/HAte order rule, to avoid inconsistent behavior
Property: background
Media Type(s): Visual
Description: Shorthand property for all individual background properties
Example:
body: {
background: url(images/body-back.gif) #ccc 50% no-repeat fixed;
}
Tips: Shorthand properties are often unique. In this case, you need to watch order: image, color, position, repeat, and attachment. If you aren't using all the options, just be sure to keep the integrity of the order.
Property: background-attachment
Description: Used to manage scrolling of backgrounds
Media Type(s): Visual
Example:
body {
background-attachment: scroll;
}
Tips: A scroll value means the background scrolls with the content; if fixed is used, the background remains fixed while the content scrolls over it.
Property: background-color
Description: Defines a color for an element background
Media Type(s): Visual
Example:
div#content {
background-color: #fff;
}
Tips: Use a background color along with a background image, and choose a color that is close to the end effect of the image. This will help you avoid problems that can arise when a background image doesn't load for some reason.
Property: background-image
Description: Specifies an image path for an element background
Media Type(s): Visual
Example:
div#nav {
background-image: url(images/nav.gif);
}
Tips: You will sometimes see quotations around the image's path and filename. This is not necessary; leaving out the quotes might actually save you a few bytes of data.
Property: background-position
Description: Enables you to position a background image in relation to its element
Media Type(s): Visual
Example:
div#nav {
background-position: top left;
}
Tips: You can position backgrounds using percentages or length value keywords (top, right, center, bottom, left). If only one value is given, it sets the horizontal position only. If both values are provided, the horizontal value is first in the order. You can use negative position percentage values.
Property: background-repeat
Description: Describes the way a background image repeats or does not repeat
Media Type(s): Visual
Example:
div#content {
background-repeat: repeat-x;
}
Tips: Once upon a time, all backgrounds simply tiled into the main body. Now you can control tiling within an element, tile the image completely, tile only along the x- or y-axis, or not tile at all.
Property: border
Description: Shorthand property that enables you to apply width, style, and color to all four sides of an element box
Media Type(s): Visual
Example:
blockquote {
border: 1px dotted red;
}
Tips: Using the border property to help outline elements can be very helpful for diagnostics, as well as provide a nice design option for the element's presentation. You cannot set four different sides using this shorthand property; you need to specify the longhand, individual sides to do so.
Property: border-collapse
Description: Defines the border model for table borders. A value of separate enables you to display cell borders separately; a value of collapse sets the collapsing border model.
Media Type(s): Visual
Example:
#table01 {
border-collapse: separate;
}
Tips: The model you choose to display table borders is wholly an aesthetic choice.
Property: border-color
Description: Sets a border color for any element. Can be used in place of border-top-color, border-right-color, border-bottom-color, and border-left-color.
Media Type(s): Visual
Example:
#sidebar {
border-color: red blue green yellow;
}
Tips: If you're setting more than one color, you must follow the TRouBLe order rule: top, right, bottom, left. If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value, and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Property: border-spacing
Description: Defines the space between adjoining cells within tables
Media Type(s): Visual
Example:
table {
border-spacing: 1.0em;
}
Tips: If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative.
Property: border-style
Description: Sets the style of an element's borders. Can be used in place of border-top-style, border-bottom-style, border-left-style, and border-right-style.
Media Type(s): Visual
Example:
#sidebar {
border-style: solid dotted dashed none;
}
Tips: If you're setting more than one style, you must follow the TRouBLe order rule: top, right, bottom, left. If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value, and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Property: border-top
Description: Shorthand property to style an element's top border with a width, style, and color
Media Type(s): Visual
Example:
#sidebar {
border-top: 2px dashed green;
}
Tips: You don't have to use all three values. If you want to set only the width, for example, you can do so and use the border-style and border-color properties to set those values.
Property: border-right
Description: Shorthand property to style an element's right border with a width, style, and color
Media Type(s): Visual
Example:
#sidebar {
border-right: 2px solid green;
}
Tips: You don't have to use all three values. If you want to set only the width, for example, you can do so and use the border-style and border-color properties to set those values.
Property: border-bottom
Description: Shorthand property to style an element's bottom border with a width, style, and color
Media Type(s): Visual
Example:
#sidebar {
border-bottom: 2px dashed green;
}
Tips: You don't have to use all three values. If you want to set only the width, for example, you can do so and use the border-style and border-color properties to set those values.
Property: border-left
Description: Shorthand property to style an element's left border with a width, style, and color
Media Type(s): Visual
Example:
#sidebar {
border-bottom: 2px solid green;
}
Tips: You don't have to use all three values. If you want to set only the width, for example, you can do so and use the border-style and border-color properties to set those values.
Property: border-top-color
Description: Sets the color for the top border of an element
Media Type(s): Visual
Example:
#nav {
border-top-color: #c30;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-right-color
Description: Sets the color for the right border of an element
Media Type(s): Visual
Example:
#nav {
border-right-color: red;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-bottom-color
Description: Sets the color for the bottom border of an element
Media Type(s): Visual
Example:
#nav {
border-bottom-color: #808080;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-left-color
Description: Sets the color for the left border of an element
Media Type(s): Visual
Example:
#nav {
border-left-color: red;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-top-style
Description: Sets the style for the top border of an element
Media Type(s): Visual
Example:
blockquote {
border-top-style: dashed;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary. Styles include dotted, dashed, solid, double, groove, ridge, inset, and outset. There are also values for none (displays none) and hidden.
Property: border-right-style
Description: Defines the style for the right border of an element
Media Type(s): Visual
Example:
blockquote {
border-right-style: groove;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary. Styles include dotted, dashed, solid, double, groove, ridge, inset, and outset. There are also values for none (displays none) and hidden.
Property: border-bottom-style
Description: Sets the style for the bottom border of an element
Media Type(s): Visual
Example:
blockquote {
border-bottom-style: ridge;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary. Styles include dotted, dashed, solid, double, groove, ridge, inset, and outset. There are also values for none (displays none) and hidden.
Property: border-left-style
Description: Sets the style for the left border of an element
Media Type(s): Visual
Example:
blockquote {
border-left-style: none;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary. Styles include dotted, dashed, solid, double, groove, ridge, inset, and outset. There are also values for none (displays none) and hidden.
Property: border-top-width
Description: Sets a width for the top border of an element
Media Type(s): Visual
Example:
#content {
border-top-width: 2px;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-right-width
Description: Defines the width for the right border of an element
Media Type(s): Visual
Example:
#content {
border-right-width: 4px;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-bottom-width
Description: Defines the width for the bottom border of an element
Media Type(s): Visual
Example:
#content {
border-bottom-width: 2px;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-left-width
Description: Sets the width for the left border of an element
Media Type(s): Visual
Example:
#content {
border-left-width: 4px;
}
Tips: Using shorthand options can result in more streamlined CSS. Use longhand border properties only when really necessary.
Property: border-width
Description: Shorthand property used to define the width of an element's borders
Media Type(s): Visual
Example:
#content {
border-width: 2px 4px 8px 10px;
}
Tips: If you're setting more than one side's width, you must follow the TRouBLe order rule: top, right, bottom, left. If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value, and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Property: bottom
Description: Specifies the offset of a positioned box's bottom
Media Type(s): Value
Example:
#content {
position: absolute;
bottom: 45px;
}
Tips: The positioning scheme used affects which aspect of the element box will be offset. Absolutely positioned boxes compute the value according to the containing block. With relatively positioned boxes, the offset is in relation to the element's box.
Property: caption-side
Description: Used to position the caption box in tables with a caption element
Media Type(s): Visual
Example:
caption {
caption-side: bottom;
}
Tips: Poor support in current browsers limits the use of this property.
Property: clear
Description: Used to clear elements away from floated elements.
Media Type(s): Visual
Example:
#tipscolumn {
clear: both;
}
Tips: Values include left, right, and both. This property is used in the same manner the HTML clear attribute was used in presentational markup.
Property: clip
Description: Defines which portion of a box is visible
Media Type(s): Visual
Example:
#dynamicbox {
clip: rect(15px, 20px, 15px, 25px);
}
Tips: This property is often used along with scripting and the Document Object Model (DOM) to add a dynamic behavior to the element in question.
Property: color
Description: Defines the foreground color of an element's text content
Media Type(s): Visual
Example:
p {
color: blue;
}
Tips: No known issues exist. This property has been in widespread use since the earliest days of CSS.
Property: content
Description: Used for generated content along with the pseudo elements :before and :after
Media Type(s): All
Example:
a:after {
content: "link"
}
Tips: Generated content is not supported by IE 6.0. As a result, use of this property is, unfortunately, quite limited at this time.
Property: cursor
Description: Defines the kind of cursor to be displayed
Media Type(s): Visual, interactive
Example:
a {
cursor: pointer;
}
Tips: This property is very helpful in providing additional cues about an item that has focus. It is useful for accessibility and improved usability.
Property: direction
Description: Specifies writing direction within blocks
Media Type(s): Visual
Example:
p {
direction: rtl;
}
Tips: Values are rtl (right to left) and ltr (left to right). This is incredibly important in internationalization and multilingual document development.
Property: display
Description: Sets the visual display type of an element
Media Type(s): All
Example:
ul, li {
display: inline;
}
Tips: This property is extremely useful for layout and navigation design in contemporary practices.
Property: empty-cells
Description: Determines whether to show or hide empty cells within a table
Media Type(s): Visual
Example:
table {
Empty-cells: show;
}
Tips: This property is used with the separated borders model (see border-collapse).
Property: float
Description: Allows an element to be floated to the right or left
Media Type(s): Visual
Example:
#contentcolumn {
float: right;
}
Tips: Floats were originally developed to manage such floating elements as images.
Property: font
Description: Shorthand property to manage font display
Media Type(s): Visual
Example:
p {
font: italic small-caps bold 100%/100% Arial, sans-serif;
}
Tips: You must always follow the required order with the font shorthand property: font-style, font-variant, font-weight, font-size/line-height, font-family. You do not need to include all properties, but the order is significant. You must also have at least the font size and family identified.
Property: font-family
Description: Sets the font family for the element's text
Media Type(s): Visual
Example:
p {
font-family: Georgia, "Times New Roman", serif;
}
Tips: It's always wise to include the generic font family (serif, sans-serif, fantasy, monospace) for the fonts you're using. Also, note that each font name is comma delimited, and the only time quotes are used is for multiword font names.
Property: font-size
Description: Determines the size of the font
Media Type(s): Visual
Example:
.notation {
font-size: small;
}
Tips: You can use absolute sizing via keywords (xx-small to xx-large), relative sizing keywords (larger, smaller), and the common length and percentage values.
Property: font-style
Description: Sets the font's style, typically italic and oblique
Media Type(s): Visual
Example:
.notation {
font-style: italic;
}
Tips: Use font styles for auxiliary text such as notes and captions. Italic and oblique styles are not ideal for larger sections of text.
Property: font-variant
Description: Sets a variant of small caps
Media Type(s): Visual
Example:
h1 {
font-variant: small-caps;
}
Tips: This property can be very useful for creating attractive headings and accent text. It is not meant for body text. If a browser doesn't support the property, normal display of the font occurs.
Property: font-weight
Description: Sets the weight of the font
Media Type(s): Visual
Example:
.highlight {
font-weight: bold;
}
Tips: Numeric values 100 to 900 are inconsistently supported and, therefore, should not be relied upon.
Property: height
Description: Sets the content height of an element
Media Type(s): Visual
Example:
#content {
height: 400px;
}
Tips: This property is inconsistently supported and should not be relied upon. Note that height does not apply to nonreplaced inline elements.
Property: letter-spacing
Description: Specifies spacing between text characters
Media Type(s): Visual
Example:
#content p {
letter-spacing: 0.1em;
}
Tips: Designers with a taste for control over type appreciate this property, but support is somewhat inconsistent. If a browser can't render the property, the default spacing is used.
Property: line-height
Description: Describes the height of a given line of text
Media Type(s): Visual
Example:
#content p {
line-height: 120%;
}
Tips: Typically, line-height should be close to the size of the font. The shorter the line height is in relation to the font, the closer the lines will be, and vice versa. Too much or too little space in either direction can cause problems with readability.
Property: list-style
Description: Shorthand property to manage the list's type, position, and image
Media Type(s): Visual
Example:
#content ul {
list-style: disc outside url(images/bullet.gif);
}
Tips: If the image is unavailable, the style disc will be displayed in its place.
Property: list-style-image
Description: Adds an image to list items
Media Type(s): Visual
Example:
#nav ul {
list-style-image: url(images/nav-bullet.gif);
}
Tips: If you'd like to add a list style in case the image doesn't load, you can gain a little more control over display. If you don't add a list style value and the image doesn't display, the default list style for that list type will be displayed.
Property: list-style-position
Description: Describes the positioning of the marker box for the list
Media Type(s): Visual
Example:
#content ul {
list-style-position: inside;
}
Tips: A value of inside starts the second line of text within a list item directly below the marker. A value of outside starts the second line of text within a list item outside the box, resulting in the conventional and familiar indents seen in most lists.
Property: list-style-type
Description: Sets the style of the list marker
Media Type(s): Visual
Example:
#content ol {
list-style-type: decimal-leading-zero;
}
Tips: Markers include disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, none, and inherit. Note that a value of none removes all markers, which is useful in list-based navigation design.
Property: margin
Description: Shorthand property for an element's margin values.
Media Type(s): Visual
Example:
#content {
margin: 10px 20px 30px;
}
Tips: You must follow the TRouBLe order rule: top, right, bottom, left. If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value, and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left. Margin values are not inherited.
Property: margin-right
Description: Sets the margin for an element's right margin
Media Type(s): Visual
Example:
#nav {
margin-right: 20px;
}
Tips: Margin values are not inherited.
Property: margin-left
Description: Sets the margin for an element's left margin
Media Type(s): Visual
Example:
#nav {
margin-left: 2.0em;
}
Tips: Margin values are not inherited.
Property: margin-top
Description: Sets the margin for an element's top margin
Media Type(s): Visual
Example:
#nav {
margin-top: 10%;
}
Tips: Margin values are not inherited.
Property: margin-bottom
Description: Defines the margin for an element's bottom margin
Media Type(s): Visual
Example:
#nav {
margin-bottom: 20px;
}
Tips: Margin values are not inherited.
Property: max-height
Description: Sets a maximum height for an element box
Media Type(s): Visual
Example:
h2 {
max-height: 35px;
}
Tips: No negative values are allowed. This doesn't apply to nonreplaced inline elements or tables.
Property: max-width
Description: Sets a maximum width
Media Type(s): Visual
Example:
p {
max-width: 80%
}
Tips: This property is helpful in limiting lines of text so they don't become overly long. Unfortunately, this property is unsupported in Internet Explorer 6.0, causing frustration for visual designers who appreciate being able to have this intended level of typographic control.
Property: min-height
Description: Sets a minimum height for an element box
Media Type(s): Visual
Example:
h2 {
min-height: 100px;
}
Tips: This doesn't apply to nonreplaced inline elements or tables.
Property: min-width
Description: Sets a minimum width for an element box
Media Type(s): Visual
Example:
p {
min-width: 80%
}
Tips: This property is helpful in ensuring that lines of text are at least a minimum width. Unfortunately, this property is unsupported in Internet Explorer 6.0, causing frustration for visual designers who appreciate being able to have this intended level of typographic control.
Property: outline
Description: Shorthand that creates a dynamic outline for form controls and objects
Media Type(s): Visual, interactive
Example:
img {
outline: red solid thick;
}
Tips: All dynamic outline properties are unlike borders, in that they do not take up space (are not calculated as part of the box model width or height) and they may be nonrectangular. Support for these properties is very limited (Safari 1.2 has support for outline properties), so they are rarely used at this time.
Property: outline-color
Description: Defines an outline color for form controls and objects
Media Type(s): Visual, interactive
Example:
img {
outline-color: blue;
}
Tips: All dynamic outline properties are unlike borders, in that they do not take up space (are not calculated as part of the box model width or height) and they may be nonrectangular. All colors are available for this property, with the addition of a value of invert. This inverts the color, which can be helpful to ensure that the outline is visible when the control or object is in focus. Support for these properties is very limited (Safari 1.2 has support for outline properties), so they are rarely used at this time.
Property: outline-style
Description: Sets an outline style for form controls and objects
Media Type(s): Visual, interactive
Example:
img {
outline-style: groove;
}
Tips: All dynamic outline properties are unlike borders, in that they do not take up space (are not calculated as part of the box model width or height) and they may be nonrectangular. This property accepts the same styles as for border-style, with the exception of the hidden value. Support for these properties is very limited (Safari 1.2 has support for outline properties), so they are rarely used at this time.
Property: outline-width
Description: Sets the outline width for form controls and objects
Media Type(s): Visual, interactive
Example:
input {
outline-width: 2px;
}
Tips: All dynamic outline properties are unlike borders, in that they do not take up space (are not calculated as part of the box model width or height) and they may be nonrectangular. This property accepts the same styles as for border-width. Support for these properties is very limited (Safari 1.2 has support for outline properties), so they are rarely used at this time.
Property: overflow
Description: Used to manage content that overflows an element box
Media Type(s): Visual
Example:
#tipscolumn {
overflow: scroll;
}
Tips: Values include visible, which makes the content visible outside the box; hidden, which hides all overflow; scroll, which forces a scrollbar into the element box that contains the content; and auto, which automatically provides a scroll if it's required.
Property: padding
Description: Shorthand property to define the padding of an element box
Media Type(s): Visual
Example:
#content {
padding: 10px 20px 15px 0;
}
Tips: You must follow the TRouBLe order rule: top, right, bottom, left. If there is only one value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value, and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Property: padding-top
Description: Sets the padding for the top of an element box
Media Type(s): Visual
Example:
#content>p {
padding-top: 10px;
}
Tips: Padding is considered a part of the box model, and values must be included when calculating widths and heights.
Property: padding-right
Description: Sets the padding for the right side of an element box
Media Type(s): Visual
Example:
#content p {
padding-right: 10%;
}
Tips: Padding is considered a part of the box model, and values must be included when calculating widths and heights.
Property: padding-bottom
Description: Sets the padding for the bottom of an element box
Media Type(s): Visual
Example:
#content+p {
padding-bottom: 2.0em;
}
Tips: Padding is considered a part of the box model, and values must be included when calculating widths and heights.
Property: padding-left
Description: Sets the padding for the left side of an element box
Media Type(s): Visual
Example:
#content {
padding-left: 16px;
}
Tips: Padding is considered a part of the box model, and values must be included when calculating widths and heights.
Property: page-break-after
Description: Forces a page to break according to the values included
Media Type(s): Visual, paged
Example:
#content {
page-break-after: always;
}
Tips: The values for page-break properties include auto (no forced break), always (always force the break), avoid (avoid breaking a page at the element in question), left (break the page and resume content on the left page), and right (break the page and resume content on the right page).
Property: page-break-before
Description: Forces a page to break according to the values included
Media Type(s): Visual, paged
Example:
h2 {
page-break-before: right;
}
Tips: The values for page-break properties include auto (no forced break), always (always force the break), avoid (avoid breaking a page at the element in question), left (break the page and resume content on the left page), and right (break the page and resume content on the right page).
Property: page-break-inside
Description: Forces a page to break according to the values included
Media Type(s): Visual, paged
Example:
h2 {
page-break-inside: avoid;
}
Tips: The values for page-break properties include auto (no forced break), always (always force the break), avoid (avoid breaking a page at the element in question), left (break the page and resume content on the left page), and right (break the page and resume content on the right page).
Property: position
Description: Defines a positioning scheme of static, relative, absolute, or fixed
Media Type(s): Visual
Example:
#topnav {
position: absolute;
top: 0;
left: 0;
}
Tips: Fixed positioning is not supported by Internet Explorer. Static positioning refers to the default normal flow of the browser.
Property: quotes
Description: Specifies quotation marks for embedded quotations
Media Type(s): Visual
Example:
blockquote:before {
content: open-quote
}
blockquote:after {
content: close-quote
}
Tips: This property is typically used with generated content, as the example demonstrates. Because generated content is unavailable in older browsers and Internet Explorer 6.0, its use is limited to supported environments only, or workarounds are employed to manage other browsers.
Property: right
Description: Specifies a right margin offset in positioning
Media Type(s): Visual
Example:
#topnav {
position: absolute;
right: 20px;
}
Tips: The positioning scheme used affects which aspect of the element box will be offset. Absolutely positioned boxes compute the value according to the containing block. With relatively positioned boxes, the offset is in relation to the element's box.
Property: table-layout
Description: Controls the way browsers manage tables
Media Type(s): Visual
Example:
table {
table-layout: fixed;
}
Tips: Two algorithms are used for managing tables. One is fixed, which is considered a faster rendering method because it doesn't depend upon the content of cells to determine width. The other is auto, which does depend on width and is the typical default behavior of most browsers. Although table-layout has fairly good support, the results vary enough among browsers that most people avoid using it and rely on the native agent's algorithm instead.
Property: text-align
Description: Specifies an alignment of left, right, center, or justify for text
Media Type(s): Visual
Example:
p {
text-align: justify;
}
Tips: Broad browser support exists. Many designers recommend avoiding the justify value because they feel that it's not appropriate for onscreen; others feel that judicious use is fine.
Property: text-decoration
Description: Sets a decoration for selected text
Media Type(s): Visual
Example:
a {
text-decoration: none;
}
Tips: Values include none, underline, overline, line-through, and blink. The use of none with anchors as described in the example removes underlines from links. Most web designers avoid using underline because it's felt that underlining is too easily confused with the default behavior for links. The values of overline and line-through are typically used for editing or for whimsical design features. The blink value should be used with extreme caution; the fact that it even exists is probably more of an inside joke than a realistic desire to provide this less-than-accessible or attractive style to text.
Property: text-indent
Description: Sets an indentation
Media Type(s): Visual
Example:
p {
text-indent: 5px;
}
Tips: Using this property, you can create a very professional look for long sections of text. You may also use negative values to create an outdent effect.
Property: text-transform
Description: Transforms selected text into capital case, upper case, or lower case, no matter how the text is input in the document
Media Type(s): Visual
Example:
h3 {
text-transform: uppercase;
}
Tips: Widespread support exists. This property is helpful in keeping headers and other important text items consistent.
Property: top
Description: Specifies the offset of a positioned box's bottom
Media Type(s): Visual
Example:
#nav {
position: relative; top: 20px;
}
Tips: The positioning scheme used affects which aspect of the element box will be offset. Absolutely positioned boxes compute the value according to the containing block. With relatively positioned boxes, the offset is in relation to the element's box.
Property: unicode-bidi
Description: Helps to manage the bidirectional algorithm used to determine the direction of letters within a given language
Media Type(s): Visual
Example:
p.hebrew {
direction: rtl;
unicode-bidi: embed;
}
Tips: The use of unicode-bidi is limited to document authors concerned with maintaining control over the bidirectional algorithms within browsers.
Property: vertical-align
Description: Sets a vertical alignment using the keywords baseline, sub, super, top, text-top, middle, bottom, text-bottom, or a percentage or length value.
Media Type(s): Visual
Example:
img {
vertical-align: baseline;
}
Tips: This property works only with images in Netscape 4.x browsers.
Property: visibility
Description: Determines whether the box generated by an element will be rendered as visible, hidden, or collapsed.
Media Type(s): Visual
Example:
#container {
visibility: hidden;
}
Tips: Invisible boxes affect layout. If you want to completely suppress box generation, use the display property with a value of none instead. The collapse value is used with tables.
Property: white-space
Description: Determines how whitespace within an element is managed
Media Type(s): Visual
Example:
td {
white-space: nowrap;
}
Tips: Values are pre, which acts just like preformatted text; nowrap, which suppresses line breaks; pre-wrap, which breaks lines at new lines within the source; and pre-line, which collapses sequences of whitespace.
Property: width
Description: Sets the content width of an element
Media Type(s): Visual
Example:
#content p {
width: 225px;
}
Tips: This does not apply to nonreplaced inline elements.
Property: word-spacing
Description: Sets the spacing between words
Media Type(s): Visual
Example:
#content p {
word-spacing: 1.0em;
}
Tips: You can use negative values to decrease the space between words.
Property: z-index
Description: Used with position boxes to determine stacking order
Media Type(s): Visual
Example:
.boxtwo {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
Tips: The higher the integer is, the closer to the viewer the box in the stack appears.
discuss this topic to forum
