CSS has become one of the most essential elements of modern web design. The following can be used as a cheat sheet of compiled properties to refer to when in need.
.el will represent any attribute that the tags can customize.
PROPERTIES
background-attachment - BODY {background-attachment: fixed;}
Used to keep a background fixed in position on the page, or to scroll with the page. Values - scroll, fixed
background-color - BODY {background-color: #CCFF00;}
sets the background color of the element or as in the case above, the background of the entire body of the page. Values - transparent, or any color name/rgb/or hex code.
background-image - BODY {background-image: url(yourimage.jpg);}
used to set an image as the background for the element.
background-position - BODY {background-position: bottom left;}
When setting the starting point of a background. Values - top, bottom, left, right, center, top left, top center, top right, bottom left, bottom center, bottom right, x% y% (set the x and y as the percentage horizontally and vertically), x y.
background-repeat - BODY {background-repeat: repeat-x;}
Used with the background-image property it sets the background image to repeat tiled, verticaly(y) or horizontally(x). Values - repeat, repeat-y, repeat-x, no-repeat
border-bottom-width - .el {border-bottom-width: 2px;}
Set the thickness of the bottom border of an element. Values - px, in, em, %
border-color - .el {border-color: #CCFF00;}
Define the color of the border of an element. Values - hexadecimal, rgb, color name.
border-left-width - .el {border-left-width: 2px;}
Set the thickness of the top border of an element. Values - px, in, em, %
border-right-width - .el {border-right-width: 2px;}
Set the thickness of the right border of an element. Values - px, in, em, %
border-style - .el {border-style: dashed;}
Changes the style of the border. Values - dashed, dotted, double, outset, inset, solid, ridge, groove, none
border-top-width - .el {border-top-width: 2px;}
Set the thickness of the top border of an element. Values - px, in, em, %
border-width - .el {border-width: 2px;}
Set the thickness of the border on all sides. Values - px, in, em, %
clear - .el {clear: left;}
Used to make it so no other floating elements can be on top of it. Values - left, right, both, none
color - .el {color: #CCFF00;}
used to set any element to the color of your choice.
cursor - .el {cursor: crosshair;}
Used to change the curser when it is inside an element. Values - crosshair, help, move, pointer, text, wait, e-resize, n-resize, ne-resize, nw-resize, w-resize, sw-resize, se-resize, s-resize, auto, default
float - .el {float: right;}
Moves an element to one side and makes any text wrap around it. Values - right, left, none
font-family - .el {font-family: verdana;}
set the font for the text of any element. Usually it is good to use more than one in case the first choice isn't available on the computer of the viewer.
font-size - .el {font-size: large;}
Used to select the size of the font. Values - xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large, pt, in, cm, px, em, ex
font-style - .el {font-style: italic;}
Used to change the font to italics or normal. Values - italic, normal
font-variant - .el {font-variant: small-caps;}
Used to change the font to small-caps so that all lowercase letters will be converted to capitals but of a smaller size than the rest of the text. Values - small-caps, normal
font-weight - .el {font-weight: bold;}
Change the weight of the font. Values - bold, bolder, lighter, normal, and number values 100-900
height - .el {height: 40%;}
Sets an elements' height. Values - px, in, %, auto
left - .el {left: 15px;}
Sets the elements' position in relation to the left side of the screen. Values - auto, pt, in, cm, px, %
letter-spacing - .el {letter-spacing: 0.2em;}
Define the amount of white space between letters/characters.
line-height - .el {line-height: 150%;}
Set the space between the top and bottom of the element. Values - %, pt
list-style-image - ul {list-style-image: url(yourimage.jpg);}
Set any image to be the bullet in a list. Can be used for ul (unordered list) or ol (ordered list).
list-style-position - ul {list-style-position: outside;}
Set the position of the bullet in a list in relation to the list items. Can be used for ul (unordered list) or ol (ordered list). Values - inside, outside
list-style-type - ul {list-style-type: disc;}
Set the shape of the bullet in a list. Can be used for ul (unordered list) or ol (ordered list). Values - circle, disc, decimal, square, lower-roman, upper-roman, lower-alpha, upper-alpha, none
margin-bottom - .el {margin-bottom: 2px;}
Change the size of the bottom margin of an element. Values - px, em, in, %
margin-left - .el {margin-left: 2px;}
Change the size of the left margin of an element. Values - px, em, in, %
margin-right - .el {margin-right: 2px;}
Change the size of the right margin of an element. Values - px, em, in, %
margin-top - .el {margin-top: 2px;}
Change the size of the top margin of an element. Values - px, em, in, %
overflow - .el {overflow: auto;}
Sets what is to be done if the content of an element is larger than the defined area of an element. Values: hidden, scroll, visible, auto
padding-bottom - .el {padding-bottom: 2px;}
Change the amount of padding on the bottom of an element. Values - px, em, in %
padding-left - .el {padding-left: 2px;}
Change the amount of padding on the left of an element. Values - px, em, in %
padding-right - .el {padding-right: 2px;}
Change the amount of padding on the right of an element. Values - px, em, in %
padding-top - .el {padding-top: 2px;}
Change the amount of padding on the top of an element. Values - px, em, in %
position - .el {position: absolute;}
Defines if an element is able to be positioned. Values - absolute (positioning is done with regards to the top left corner of the element), relative (positioning is done in addition to the normal positioning), static (ignores positioning declarations).
text-align - .el {text-align: center;}
Aligns the text in an element horizontally. Values - justify, center, left, right
text-decoration - .el {text-decoration: overline;}
Change the look of text by setting one of the possible values or combinging them. Values - underline, overline, blink, line-through, none
text-indent - .el {text-indent: 2px;}
Sets the indent of the first line. Values - em, px, -px
text-transform - .el {text-transform: lowercase;}
Sets all text in the element to be either uppercase, lowercase, or the first letter of each word capitalized. Valued - uppercase, lowercase, capitalize
top - .el {top: 15px;}
Sets the elements' position in relation to the top of the screen. Values - auto, pt, in, cm, px, %
vertical-align - .el {vertical-align: text-top;}
This property is used to set the alignment of the text vertically. Values - sub, super, text-top, top, middle, text-bottom, length, baseline, %, bottom
visible - .el {visible: hidden;}
Used to make an element invisible or visible. Values - hidden, visible
width - .el {width: 40%;}
Sets the elements' width. Values - px, in, %, auto
word-spacing - .el {word-spacing: 0.2em;}
Set the space between words to be more or less than normal. Values - em, normal
z-index - .el {z-index: 3;}
Used to stack elements on top of each other. An element with a higher x-index will be displayed above elements with a lower z-index. Values - auto, number value
CSS on the Web: