Cascading StyleSheet Information, pg. 2

Box Model Properties

These properties can only be used on layers and other non-text elements. The "inherit" property tells the element to inherit the declaration from the closest ancestor with a set value.

Longhand Properties
  • background-attachment: sets how the image will "attach" itself to the webpage or element; possible values are "scroll," "fixed" (the text will "float" atop the background), and "inherit"
  • background-color: the background color in words, hexadecimal digits, or RBG values
  • background-image: sets the location of an image you want to use as the background; possible values are "url()" and "inherit"
  • background-position: sets the position of the background on the webpage or element; possible values are names (top, bottom, left, right, center), percentages (% %), and numbers (# #). The names can be written singly or in pairs (top = 50% 0; bottom = 50% 100%; left = 0 50%; right = 100% 50%; center = 50% 50%). Percentages and numbers always come in pairs. Default is "top left" or "0 0."
  • background-repeat: instructs the browser how to handle the repetition background image; possible values are "repeat-x," "repeat-y," "no-repeat," "repeat" (default), and "inherit." If the image is set not to fill the entire webpage then the background color will fill the empty space. If that's not set (or it's set to "transparent") then the color will be the color of the next available ancestor element.
  • border-color: the border color in words, hexadecimal digits, or RBG values
  • border-style: sets how the border will display; possible values are "none," "hidden," "solid," "dashed," "dotted," "double" (must be at least 4px to display), "groove," "ridge," "inset," "outset," and "inherit." The variations are border-top-style, border-right-style, border-bottom-style, border-left-style. IE can only process "solid," "dashed," "double," "none," and "inherit" reliably.
  • border-width: sets the width of the border in numeric values (border-width-top, border-width-right, border-width-bottom, border-width-left)
  • margin: the space beyond the content area and beyond the border, the space between elements (margin-top, margin-right, margin-bottom, margin-left); possible values are numeric (+/-), percentage (+/-), "inherit"
  • outline-color: the outline color in words, hexadecimal digits, or RBG values
  • outline-style: sets how the outline will display; possible values are "none," "hidden," "dotted," "dashed," "solid," "double," "groove," "ridge," "inset," "outset," and "inherit." IE can only process "solid," "dashed," "double," "none," and "inherit" reliably.
  • outline-width: sets the width of the outline in numeric values (outline-width-top, outline-width-right, outline-width-bottom, outline-width-left)
  • padding: the space within the content area but before the border (padding-top, padding-right, padding-bottom, padding-left); possible values are numeric, percentage, and "inherit"
  • height: the height of the content minus any top & bottom padding; possible values are numeric, percentage, "auto," and "inherit"
  • width: the width of the content minus any left & right padding; possible values are numeric, percentage, "auto," and "inherit"
  • top, bottom, left, right: sets the offset of an absolutely positioned, relatively positioned, or fixed position element from the inner edge of the containing element. Top and bottom conflict with each other as do left and right; possible values are numeric (+/-), percentages, "auto," and "inherit"
Shorthand Properties

You can use these in place of individual settings. For margin and padding, the numbers are set clockwise starting at the top. The properties (which represent the longhand properties) should be used in the order listed and properties can be left out if not needed.
  • background: background-color, background-image, background-repeat, background-attachment, background-position;
    • Example: body {background:white url(image/back.gif) repeat-y;}
  • border: border-width, border-style, border-color
    • Example: #container {border:1px dashed gray;}
  • border-top, border-bottom, border-left, border-right: border-width, border-style, border-color (used the same way as the "border" property)
  • margin: margin-top, margin-right, margin-bottom, margin-left
    • Example: margin:5px; (all sides 5px) OR margin:5px 5px 5px 5px; (all sides 5px) OR margin:3px 4px; (top & bottom 3px, left & right 4px)
  • outline: outline-width, outline-style, outline-color
    • Example: img {outline:3px solid #FF0000;}
  • padding: padding-top, padding-right, padding-bottom, padding-left
    • Example: padding:4px; (all sides 4px) OR padding:4px 4px 4px 4px; (all sides 4px) OR padding:0 2px; (top & bottom 0px, left & right 2px)