CSS Help Sheet

liqu
q i
u di
d ci
c ty
t
CS
C S
S
S He
H l
e p
p Sh
S e
h e
e t
e .t
Syntax
This Needs a Diagram
Shorthand
Syntax
height
height; width;
background
selector {property: value;}
margin-top;
border
External Style Sheet
margin-right;
border-bottom
width
margin-bottom;
border-left
<link rel=”stylesheet” type=”text/css”
margin-left;
border-right
href=”style.css” />
padding-top;
border-top
Internal Style
padding-right;
font
<style type=”text/css”>
padding-bottom;
list-style
border
selector {property: value}
padding-left;
margin
margin
padding
</style>
padding
Inline Style
Comments
Border
<tag style=”property: value”>
border-width
/* Comments */
Width of the border
border-style
dashed; dotted; double; groove; inset;
Pseudo
General
outset; ridge; solid; none;
Selectors
class
String preceded by a full stop [.]
border-color Colour of the border
:hover
ID
String preceded by a hash [#]
:active
Position
div
:focus
Formats structure or block of text
clear
If any floating elements around the element
:link
span
Inline formatting
both, left, right, none
:visited
color
Foreground colour
:first-line
float
Floats to a specified side
cursor
Appearance of the cursor
:first-letter
left, right, none
display
block; inline; list-item; none
left
The left position of an element
Media Types
overflow
How to handle content that
auto, length values [pt, in, cm, px]
all
overflows its box.
top
The top position of an element
braille
visible, hidden, scroll, auto
auto, length values [pt, in, cm, px]
embossed
visibility
visible, hidden
handheld
position
static, relative, absolute
print
z-index
Above or below overlapping elements
projection
Font
auto, integer [higher numbers on top]
screen
font-style italic, normal
speech
font-
normal, small-caps
Background
tty
variant
tv
background-color Colour of background
font-
bold, normal, lighter, bolder,
background-image Background image
Units
weight
integer [100-900]
background-repeat repeat, no-repeat, repeat-x, repeat-y
Length
font-size
Size of the font
%
background-
Background image scrolls with element
em
font-family Specific font[s] to be used.
attachment
scroll, fixed
pt
background-
(x y), top, center, bottom, left, right
px
Text
position
Keywords
letter-spacing Space between letters
bolder
List
lighter
line-height
Vertical space between baselines
larger
text-align
Horizontal alignment
list-style-
Type of bullet or numbering in the list
text-
blink, line-through, none,
type
disc; circle; square; decimal; lower-roman;
decoration
overline, underline
upper-roman; lower-alpha; upper-alpha; none
text-indent
list-style-
First line indentation
Position of the bullet or number in a list
position
inside; outside
text-
capitalise, lowercase, uppercase
transform
list-style-
Image to be used as the bullet in the list
vertical-align Vertical alignment
image
word-spacing Spacing between words
© 2007 Go Squared Ltd.

---