| |
CSS1 properties
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
A:link IMG { border: solid blue }
example using a class:
A.external:visited { color: blue }
<A CLASS=external HREF="'url'">external link</A>
<url> format : url(http://www.url.com/filename)
<rgb> format: rgb(n, n, n) n is from 0-255
first value listed should be the default, or initial setting.
| Font properties |
| 'font-family' | [ serif, sans-serif, cursive, fantasy, monospace, (or font name) ] |
| 'font-style' | [ normal | italic | oblique ] |
| 'font-variant' | [ normal | small-caps ] |
| 'font-weight' | [ normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900 ]
note: normal = 400 bold = 700 |
| 'font-size' | [ 8pt, 10pt, 12pt, .... xx-small | x-small | small | medium | large | x-large | xx-large
50%, 75%, 100%, 125%, etc...
.5em, .75em, 1.0em, (same as %) ] |
'font'
(shorthand) |
[ <font-style> || <font-variant> || <font-weight> ] ? <font-size> [ <line-height> ]? <font-family> ] |
examples:
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "tekton", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
|
| Color and background properties |
| 'color' | [ color name | <rgb>) | hex# ] |
| 'background-color' | [ <color> transparent] |
| 'background-image' | [ <url> | none ] |
| 'background-repeat' | [ repeat | repeat-x | repeat-y | no-repeat ] |
| 'background-attachment' | [ scroll | fixed ] |
| 'background-position' | [<percentage> | <length>]{1,2} | [top | center | bottom] ||
[ left | center | right ] |
'background'
(shorthand) |
[ <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position> ] |
examples:
BODY { background: url(banner.jpeg) 50% 0% }
BODY { background-image: url(banner.jpeg);
background-position: top center; }
the above two are equivalent, as are the following two
BODY { background: url(banner.jpeg) top left }
BODY { background: url(banner.jpeg) 0% 0% }
example: P { background: url(chess.png) gray 50% repeat fixed }
|
| Text properties |
| 'word-spacing' | [ normal | <length> ] |
| 'letter-spacing' | [ normal | <length> ] |
| 'text-decoration' | [ none | [ underline || overline || line-through || blink ] |
| 'vertical-align' | [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | ] |
| 'text-transform' | [ none | capitalize | uppercase | lowercase ] |
| 'text-align' | [ left | right | center | justify ] |
| 'text-indent' | [ <length> | <percentage> ] |
| 'line-height' | [ normal | <number> | <length> | <percentage> ]
(negative values are not allowed.) |
| Box properties |
| 'margin-top' | [ <length> | <percentage> | auto ] |
| 'margin-right' | [ <length> | <percentage> | auto ] |
| 'margin-bottom' | [ <length> | <percentage> | auto ] |
| 'margin-left' | [ <length> | <percentage> | auto ] |
'margin'
(shorthand) |
BODY{ margin: 2em } /* all margins 2em */
BODY { margin: 1em 2em }
/* top & bottom = 1em, right & left = 2em */ |
| 'padding-top' | [ <length> | <percentage> ] |
| 'padding-right' | [ <length> | <percentage> ] |
| 'padding-bottom' | [ <length> | <percentage> ] |
| 'padding-left' | [ <length> | <percentage> ] |
| 'padding' (shorthand) |
| 'border-top-width' | [ medium | thin | thick | <length> ] |
| 'border-right-width' | [ medium | thin | thick | <length> ] |
| 'border-bottom-width' | [ medium | thin | thick | <length> ] |
| 'border-left-width' | [ medium | thin | thick | <length> ] |
| 'border-width' (shorthand) |
| 'border-color' | [ <color> ] |
| 'border-style' | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ] |
'border-top'
(shorthand) |
[ <border-top-width> || <border-style> || <color> ] |
'border-right'
(shorthand) |
[ <border-right-width> || <border-style> || <color> ] |
'border'
(shorthand) |
[ <border-width> || <border-style> || <color> ] |
| 'width' | [ auto | <length> | <percentage> ] |
| 'height' | [ auto | <length> | <percentage> ] |
| 'float' | [ none | left | right ] |
| 'clear' | [ none | left | right | both ] |
This property specifies if an element allows floating elements on its sides.
More specifically, the value of this property lists the sides where floating
elements are not accepted. With 'clear' set to 'left', an element will be moved
below any floating element on the left side. With 'clear' set to 'none',
floating elements are allowed on all sides.
|
| Classification properties |
| 'display' | [ block | inline | list-item | none ] |
| 'white-space' | [ normal | pre | nowrap ] |
|
'list-style-type' | [ disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none ] |
| 'list-style-image' | [ <url> | none ] |
| 'list-style-position' | [ outside | inside ] |
'list-style'
(shorthand) | [ <keyword> || <position> || <url> ] |
Units
em - the height of the element's font
ex - x-height, ~ the height of the letter 'x'
px - pixels, relative to canvas
pt - font point size
in - inches
cm - centimeters
mm - millimeters
pc - picas
Sample style sheet:
<STYLE TYPE="text/css">
BODY { margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black; }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
PRE { white-space: pre;
font-family: monospace }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
LI { margin-left: 3em }
HR { border-top: solid }
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
</STYLE>
|