Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

CSS 2.1 Properties

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.