Quick Reference Sheets for Webmasters
Quick Reference sheets are packed full of useful information for all webmasters.
CSS Reference Sheet
Colors & Backgrounds
color
This property sets the forground color to use for an element's text content. The color value can be a rgb setting, hexidecimal value or color name. The example below produces the same result for each definition.
Value
color
Default
browser dependant
Applies to
all elements
example:
color: RGB(255,0,0); color: #f00; color: red;
background
The background property is a short-hand property for setting individual background properties in one section of your style sheet. The ordering of the individual properties are the same as listed in the value field below. You do not need to pass all properties using the shorthand property.
Value
background-color |
background-image |
background-repeat |
background-attachment |
background-position
Default
n/a
Applies to
all elements
example:
background: #eee url(image.gif) top left no-repeat
background: #fff repeat-x fixed
background-color
This property sets the background color to the element it's applied to. Values can be either named colors, rgb values, hexadecimal or transparent.
Value
color |
transparent
Default
transparent
Applies to
all elements
example:
background-color: #eeeeee
background-image
The background-image property sets a background image to an element. Typically, it's best to set a background color in combination with a background image so that the background color will show when the image is unavailable. Also your background color will show through the transparent parts of your image.
Value
url |
none
Default
none
Applies to
all elements
example:
background-image: url(pathto/image.gif)
background-repeat
This property is used in conjunction with background-image to specify the images repeat pattern and how. By default, this setting is set to repeat the image like a tile.
Value
repeat |
repeat-x |
repeat-y |
no-repeat
Default
repeat
Applies to
all elements
example:
background-repeat: repeat-y;
background-attachment
This is another property that is used in conjunction with the background-image property. This specifies whether your background-image is to be in fixed or scroll. A fixed background image will stay in it's initial position even when a user scrolls the page as opposed to a scroll background which will scroll with the containg block.
Value
scroll |
fixed
Default
scroll
Applies to
all elements
example:
background-attachment: fixed;
background-position
If a background image has been specified, this property sets the background image's position.
Value
percentage |
lengthtop |
left |
right |
center |
bottom
Default
0% 0%
Applies to
all elements
example:
background-position: top center;
