Reference
Linking
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
Shortcuts
h1, h2, h3 { font-family: helvetica }
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
/* equivalent */
h1 { font: bold 12pt/14pt helvetica }
Classes
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
.yellowy { color: #00FFFF }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
<H2 CLASS=yellowy>Yellow Text</H2>
<H3 CLASS=pastoral>Regular Text (NOT Green)</H3>
<P CLASS=yellowy>This whole paragraph would be yellow</P>
</BODY>
</HTML>
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 } |
| '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 ] |
| 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>