Cascading Style Sheets


Reference

Jump to: Backgrounds, Borders, Classification, Dimensions, Filters, Fonts, Lists, Margins, @Media, Padding, Positioning, Print, Pseudo-classes, Pseudo-elements or Text

Backgrounds

Property DescriptionValues
background  background-color
background-image
background-repeat background-attachment background-position
background-attachment scroll
fixed
background-color  color-rgb
color-hex
color-name
transparent
background-image  url
none
background-position  top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat  repeat
repeat-x
repeat-y
no-repeat

Borders

Property DescriptionValues
border  border-width
border-style
border-color
border-bottom *  border-bottom-width
border-style
border-color
border-bottom-color * border-color
border-bottom-style * border-style
border-bottom-width * thin
medium
thick
length
border-color  color
border-style  none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-width  thin
medium
thick
length

Classification

Property DescriptionValues
clear  left
right
both
none
cursor  url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display  none
(others not listed)
float  left
right
none
position  static
relative
absolute
fixed
visibility visible
hidden
collapse

Dimensions

Property DescriptionValues
height * auto
length
%
line-height  normal
number
length
%
width *  auto
%
length

Filters

Property DescriptionValuesExample
alpha  opacity
finishopacity
style
startx
starty
finishx
finishy
filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
blur  add
direction
strength
filter:blur(add=true, direction=90, strength=6);
chroma  colorfilter:chroma(color=#ff0000)
fliph  nonefilter:fliph;
flipv  nonefilter:flipv;
glow  color
strength
filter:glow(color=#ff0000, strength=5);
gray  nonefilter:gray;
invert  nonefilter:invert;
mask  colorfilter:mask(color=#ff0000);
shadow  color
direction
filter:shadow(color=#ff0000, direction=90);
dropshadow color
offx
offy
positive
filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave  add
freq
lightstrength
phase
strength
filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray  nonefilter:xray;
Note: The style width must be specified to make the filters work correctly, plus the background-color needs to be transparent for most of these.

Fonts

Property DescriptionValues
font  font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family  family-name
generic-family
font-size  xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
(additional options not shown)

Lists

Property DescriptionValues
list-style  list-style-type
list-style-position
list-style-image
list-style-image  none
url
list-style-position inside
outside
list-style-type  none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 

Margins

Property DescriptionValues
margin  margin-top
margin-right
margin-bottom
margin-left
margin-bottom *  auto
length
%

@Media Types

Property Used for...
all all media
aural speech and sound synthesizers
braille braille tactile feedback devices
embossed paged braille printers
handheld small or handheld devices
print printers
projectionprojected presentations, like slides
screen computer screens
tty fixed-pitch character grids (like teletypes and terminals)
tv television-type devices

Padding

Property DescriptionValues
padding  padding-top
padding-right
padding-bottom
padding-left
padding-bottom * length
%

Positioning

Property DescriptionValues
position  static
relative
absolute
fixed
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index  auto
number
(additional options not shown)

Print

Property DescriptionValues
orphans  number
marks  none
crop
cross
page  auto
identifier
page-break-after * auto
always
avoid
left
right
page-break-inside  auto
avoid
size  auto
portrait
landscape
widows  number

Pseudo-classes

Property Customizes the style of...
:active an activated element
:focus an element while the element has focus
:hover an element when you mouse over it
:link an unvisited link
:visiteda visited link
(additional options not shown)

Pseudo-elements

Property Customizes the style of...
:first-letterthe first letter of a text
:first-line the first line of a text
(additional options not shown)

Text

Property DescriptionValues
direction  ltr
rtl
letter-spacing  normal
length
text-align  left
right
center
justify
text-decoration none
underline
overline
line-through
blink
text-indent  length
%
text-shadow  none
color
length
text-transform  none
capitalize
uppercase
lowercase
word-spacing  normal
length
(additional options not shown)


[ CSS | Events | DOM | HTML | JavaScript | Links | Home ]