| a:hover |
Sets how a moused-over link is displayed |
N/A – uses other CSS elements to define the action |
a:hover { color: red; } |
| a:link |
Sets how an unvisited link is displayed |
N/A – uses other CSS elements to define the action |
a:link { color: blue; } |
| a:visited |
Sets how a visited link is displayed |
N/A – uses other CSS elements to define the action |
a:visited { color: green; } |
| Background-attachment |
Sets whether the background image is fixed or scrolls when the web page is
scrolled |
scroll or fixed |
background-attachment: scroll |
| Background-color |
Sets the background color for an element |
red, yellow, blue, black, etc, or hexadecimal color
values (e.g. #ffff00) |
background-color: green |
| Background-image |
Sets the image displayed in the background |
Image file name within ‘url()’ syntax |
background-image: url(“background.gif”) |
| Background-position |
Sets where the background image should be placed within the web page |
left, right, center or numeric (e.g. %, pt, px, em, etc.). Two values are used to
specify X and Y coordinates |
background-position: center center
or
background-position: right right
or
background-position: 50% 50% |
| Background-repeat |
Sets how the background image is repeated |
repeat, no-repeat, repeat-x, and repeat-y |
background-repeat: repeat-x |
| Border-color |
Sets the color of an element’s border |
red, yellow, blue, black, etc, or hexadecimal color
values (e.g. #ffff00) |
border-color: red |
| Border-style |
Sets the style (look) of the border |
none, dotted, dashed, solid, double, groove, ridge, inset, outset |
border-style: dashed |
| Border-width |
Sets the width of an element’s border – need to set border-color and border-style
as well |
thin, medium, thick, auto, or numeric (e.g. pt, px, em, etc.) |
border-width: 2px |
| Color |
Sets the color of an element (usually font) |
red, yellow, blue, black, etc, or hexadecimal color
values (e.g. #ffff00) |
color: red |
| Cursor |
Changes the cursor when the user mouses-over the element (some may be browser
specific) |
hand, crosshair, text, wait, default, help, e-resize, ne-resize, n-resize,
nw-resize, w-resize, sw-resize, s-resize, se-resize, auto |
cursor: hand |
| Display |
Sets how an element is displayed |
none, block, inline, list-item |
display: none |
| Float |
Sets whether or not an element is in flow (e.g. recognized by other
elements) |
none, left, right |
float: left |
| Font-family |
Sets the font |
Any font type or name |
font-family: Arial |
| Font-size |
Sets the size of the font |
xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, or numeric
(e.g. %, pt, px, em, etc.) |
font-size: 10pt |
| Font-style |
Sets the style of the font |
normal, italic, oblique |
font-style: italic |
| Font-weight |
Sets the “boldness” of the font |
bold, bolder, lighter, or numeric values 100-900 |
font-weight: bold |
| Height |
Sets the height of an element |
Numeric (e.g. %, pt, px, em, etc.) or auto |
height: 100% |
| Left |
Sets the amount of space to put on the left of the element |
numeric (e.g. pt, px, em, etc.) |
left: 30px |
| Letter-spacing |
Sets a fixed amount of space to be used between letters |
Numeric (e.g. pt, px, em, etc.) or normal |
letter-spacing: normal |
| List-style-image |
Sets the bullet for bulleted lists as an image |
Image file name within ‘url()’ syntax |
list-style-image: url(“myBullet.gif”) |
| List-style-type |
Sets the bullet for bulleted lists (default = circle) |
none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha |
list-style-type: square |
| Margin |
Adds a margin (space outside the edge) to an element |
Numeric (e.g. pt, px, em, etc.) or auto |
margin: 4pt |
| Overflow |
Sets how text flowing past an element with a set width/height is displayed |
visible, hidden, scroll, auto |
overflow: scroll |
| Padding |
Adds padding (space between the edge and contents) to an element |
Numeric (e.g. pt, px, em, etc.) |
padding: 5px |
| Position |
Sets where on the page the element is positioned from (used with top and left) |
absolute, relative, static |
position: relative |
| Text-align |
Sets the text’s alignment |
left, center, right, justify |
text-align: left |
| Text-decoration |
Sets how the text is “decorated” – e.g. underlined |
Used with underline, overline, line-through, blink, none |
text-decoration: overline |
| Text-indent |
Sets the indent of the text |
Numeric (e.g. pt, px, em, etc.) |
text-indent: 40px |
| Text-transform |
Changes the text to capitalized, uppercase, or lowercase |
uppercase, lowercase, capitalize |
text-transform: uppercase |
| Top |
Sets the amount of space to put on top of the element |
numeric (e.g. pt, px, em, etc.) |
top: 10px |
Width |
Sets the width of an element |
Numeric (e.g. %, pt, px, em, etc.) or auto |
width: 50% |
| Word-spacing |
Sets a fixed amount of space to be used between words |
Numeric (e.g. pt, px, em, etc.) or normal |
word-spacing: normal |
