CSS Quick Reference Guide
Table of Contents
Linking:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all">
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="/css/screen.css" media="scren">
</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 to:
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>
Properties
a:link { color: red }
a:visited { color: blue }
a:active { color: lime }
a:hover { color: orange }
a:link img { border: solid blue }
/* example using a class */
a.external:visited { color: blue }
>html<
<a class=external href="'url'">external link</a>
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; }
BODY { background: url(banner.jpeg) top left }
BODY { background: url(banner.jpeg) 0% 0% }
P { background: url(chess.png) gray 50% repeat fixed }
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, 1.25em (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 }
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.)
Spacing Properties
- margin-top
- [ <length> | <percentage> | auto ]
- margin-right
- [ <length> | <percentage> | auto ]
- margin-bottom
- [ <length> | <percentage> | auto ]
- margin-left
- [ <length> | <percentage> | auto ]
- margin
(shorthand)
- [ top right bottom left || top-bottom right-left]
- padding-top
- [ <length> | <percentage> | auto ]
- padding-right
- [ <length> | <percentage> | auto ]
- padding-bottom
- [ <length> | <percentage> | auto ]
- padding-left
- [ <length> | <percentage> | auto ]
- padding
(shorthand)
- [ top right bottom left || top-bottom right-left]
Examples:
BODY{ margin: 5px } /* all margins 5px */
BODY { padding: 10px 5px } /* top & bottom = 1em, right & left = 2em */
Border Properties
- 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)
- [ top right bottom left ]
- 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-top-width> || <border-style> || <color> ]
- border
(shorthand)
- [ <border-width> || <border-style> || <color> ]
Misc Properties
- width
- [ auto | <length> | <percentage> ]
- height
- [ auto | <length> | <percentage> ]
- float
- [ none | left | right ]
- clear
- [ none | left | right | both ]
- 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
- <url>
- format : url(http://www.url.com/filename)
- <rgb>
- format: rgb(n, n, n) n is from 0-255
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>