CSS 2.1 Properties
Property:
background
Media Type(s):
Visual
Description:
Shorthand property for all individual background properties
Example:
body: {
background: url(/images/010/body-back.gif) #ccc 50% no-repeat fixed;
}
Tips 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 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/010/nav.gif);
}
Tips
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
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
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; 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 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
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 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;
}
Tipsdotted, 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;
}
Tipsdotted, 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 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 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
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
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 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
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
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 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/010/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/010/nav-bullet.gif);
}
Tips 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
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 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 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 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 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 for this property, with the addition of a value of invert 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 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 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 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 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 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
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
Property:
text-indent
Description:
Sets an indentation
Media Type(s):
Visual
Example:
p {
text-indent: 5px;
}
Tips
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 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:
Tips:
The higher the integer is, the closer to the viewer the box in the stack appears.
| 