View the source code of this page and you will see how to use the Link element to add External Style Sheets, lines 6 & 7.
| background | Shorthand method that can set any one or more of the 5 background properties. Multiple properties are space separated. For example, to place the Raider logo in the center of the window, on a light yellow background and allow text to scroll over it, you could use the following CSS rule, background: #FFFFCC url("images/raider_logo.gif") 50% fixed no-repeat; |
| background-attachment | scroll | fixed (Scroll is default. Fixed locks the background image and text scrolls above.) |
| background-color | use one of 17 keywords | numeric RGB |
| background-image | url( ); The name and location of the image goes within the ( ). |
| background-position | First give the horizontal position then a space then the vertical position. Left top is 0 0 or 0% 0% or 0px 0px or left top. The center of the window is 50% 50%. |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat |
| border | border-width | border-style | border-color For example, to set a 1pixel wide, solid, red border use border: 1px solid red; |
| border-color | Use one of 17 keywords | numeric RGB. A shorthand method may be used to assign different colors to the four border segments. Multiple colors are space separated, starting with the top border segment and proceeding clockwise. For example, to set the top segment to red, right to green, bottom to blue and left to purple, you would use this rule; border-color: red green blue purple. Note: Border-color is only one of three properties that must be set in order to display a border. The other two properties are border-style and border-width. |
| border-style | Allowed values are: hidden, none, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-top | border-width | border-style | border-color For example, to set a 1pixel wide, solid, red border to the top of the element use border-top: 1px solid red; |
| border-right | border-width | border-style | border-color For example, to set a 1pixel wide, solid, red border to the right of the element use border-right: 1px solid red; |
| border-bottom | border-width | border-style | border-color For example, to set a 1pixel wide, solid, red border to the bottom of the element use border-bottom: 1px solid red; |
| border-left | border-width | border-style | border-color For example, to set a 1pixel wide, solid, red border to the left of the element use border-left: 1px solid red; |
| border-top-color | use one of 17 keywords | numeric RGB |
| border-right-color | use one of 17 keywords | numeric RGB |
| border-bottom-color | use one of 17 keywords | numeric RGB |
| border-left-color | use one of 17 keywords | numeric RGB |
| border-top-style | Allowed values are: hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-right-style | Allowed values are: hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-bottom-style | Allowed values are: hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-left-style | Allowed values are: hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-top-width | Give the width in pixels (px), such as 5px, or use keywords thin, medium, thick. |
| border-right-width | Give the width in pixels (px), such as 5px, or use keywords thin, medium, thick. |
| border-bottom-width | Give the width in pixels (px), such as 5px, or use keywords thin, medium, thick. |
| border-left-width | Give the width in pixels (px), such as 5px, or use keywords thin, medium, thick. |
| border-width | Give the width in pixels (px), such as 5px, or use keywords thin, medium, thick. length |
| clear | none | left | right | both |
| color | Controls text color, use one of 17 keywords or numeric RGB |
| display | inline | block For others check the CSS reference. |
| float | This property specifies the position of a box. Allowed values are either left or right. This property is often used to position images. |
| font | font-style | font-variant | font-weight | font-size/line-height | font-family |
| font-family | family-name | generic-family Use a prioritized list of font-family options, such as: body { font-family: Arial, Helvetica, sans-serif } |
| font-size | absolute-size ( xx-small | x-small | small | medium | large | x-large | xx-large) | relative-size (larger | smaller) | length (examples: px, pt, em) | percentage (example: 120%), length | percentage |
| font-style | normal | italic | oblique |
| font-variant | normal | small-caps |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| height | length (example: 20px) | percentage (example 10%) | auto length | percentage |
| letter-spacing | normal | length (example: 3px) Note that this property adds to the current spacing. It does not replace the current value. Normal is used to deactivate a previously set length. |
| line-height | normal | number (value times the font-size gives the line-height) | length | percentage (Line-height is this value times the font-size) |
| list-style | One or more of list-style-type | list-style-position | list-style-image Example: list-style: upper-roman inside |
| list-style-image | url( ); The name and location of the image goes within the ( ). |
| list-style-position | inside | outside |
| list-style-type | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |
| margin | length (example: 20px) | percentage (example 10%) | auto To set margins individually use space separated values, starting with the top and go clockwise. length | percentage |
| margin-top | length (example: 20px) | percentage (example 10%) | auto |
| margin-right | length (example: 20px) | percentage (example 10%) | auto |
| margin-bottom | length (example: 20px) | percentage (example 10%) | auto |
| margin-left | length (example: 20px) | percentage (example 10%) | auto |
| padding | length (example: 20px) | percentage (example 10%) To set paddings individually use space separated values, starting with the top and go clockwise. length | percentage |
| padding-top | length (example: 20px) | percentage (example 10%) |
| padding-right | length (example: 20px) | percentage (example 10%) |
| padding-bottom | length (example: 20px) | percentage (example 10%) |
| padding-left | length (example: 20px) | percentage (example 10%) |
| text-align | left | right | center | justify |
| text-decoration | none | underline | overline | line-through | blink |
| text-indent | length | percentage |
| text-transform | capitalize | uppercase | lowercase |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom |
| white-space | normal | pre | nowrap | pre-wrap | pre-line |
| width | length (example: 20px) | percentage (example 10%) | auto length | percentage |
| word-spacing | normal | length (example: 3px) Note that this property adds to the current spacing. It does not replace the current value. Normal is used to deactivate a previously set length. |