![]() |
|
CSS PROPERTIES
|
STYLE SYNTAX
|
Remarks
|
| Font-family | P { font-family: verdana, arial, sans-serif } | |
| font-size | p { font-size: 20pt } p { font-size: 20px } I { font-size: 3em} * usually refers to size of parent element ie:3em X parent value. p { font-size: medium } * Other keyword values are: xx-small, x-small, small, medium, large, x-large, xx-large b { font-size: 200%} * usually refers to inherited value from a parent elemet. |
Units to specify the font size are: Pixels, points, ems and percentage values. keywords. Note: - ems: IE 3 doesn't support it. - Pixels: Web pages will not be printed consistently. - Keywords: IE 3 doesn't support some of the values. - Percentage:There are bugs on IE and netscape. |
| font-weight | p { font-weight: bold } * normal, bold | |
| font-style | H2 { font-style: italic } * normal, italic | |
| text-decoration * other values: overline, line-through, blink, none. |
B {text-decoration: underline } |
Note: |
| text-transform * other values: uppercase, capitalize, none. |
B { text-transform: lowercase } | Note: Some of the values are not supported on IE 4 / Mac |
| text-align *other values: Left, center, Justify. |
H2 { text-align: right } | Note: Some of the values are not supported on IE 4 / Mac. |
| text-indent | p { text-indent: 30% } | Note: Some of the values are not supported on IE 4 / Mac. |
| margin-top * other values: margin-bottom, margin-left, margin-right. |
H2 {margin-top: 10px } | Note: Some of the values are not supported on IE 4 / Mac. |
| padding-top * Other Values padding-bottom, padding-left, padding-right. | H2 { padding-top: 20px } | Note: Some of the values are not supported on IE 4 / Mac. |
| border-width * Other values: border-top-width, border-bottom-width, border-left-width, border-right-width. |
H3 { border-top-width: 40px; border-bottom-width: 20px; border-left-width: 10px; border-right-width: 5px } | Note: Some of the values are not supported on IE 4 / Mac. |
| border-style * Other values: double, dotted |
H4 { border-style: solid; border-width: 2px: border-color: red } | Note: Some of the values are not supported on IE 4 / Mac. |
| border-color | H2 { boder-color: #999999; border-style: dotted; border-width: 2px} | Note: Some of the values are not supported on IE 4 / Mac. |
| background-image | k { background-image: url (http://www.kingston.ac.uk/images/map.jpg)
} Click here to see a demo |
|
| background-color | p.red { background-color: black } | |
| color | p {color: red } |
Note: |
| background-position |
p { background-position: top; background-image: url(map.jpg } *other values bottom, left, right, center. p {background-position: 40px 20px; background-image: url(map.jpg) } 40px is horizontal position and 20px is vertical position. |
|
| Position | H2 { position: absolute; left: 20px; top: 35px } * other values relative |