|
|
|
|
|
|
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 | Description | Values |
| 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 | Description | Values |
| 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 | Description | Values |
| 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 | Description | Values |
| height * | | auto
length
% |
| line-height | | normal
number
length
% |
| width * | | auto
%
length |
Filters
| Property | Description | Values | Example |
| 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 | | color | filter:chroma(color=#ff0000) |
| fliph | | none | filter:fliph; |
| flipv | | none | filter:flipv; |
| glow | | color
strength | filter:glow(color=#ff0000, strength=5); |
| gray | | none | filter:gray; |
| invert | | none | filter:invert; |
| mask | | color | filter: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 | | none | filter: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 | Description | Values |
| 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 | Description | Values |
| 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 | Description | Values |
| 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 |
| projection | projected presentations, like slides |
| screen | computer screens |
| tty | fixed-pitch character grids (like teletypes and terminals) |
| tv | television-type devices |
Padding
| Property | Description | Values |
| padding | | padding-top
padding-right
padding-bottom
padding-left |
| padding-bottom * | | length
% |
Positioning
| Property | Description | Values |
| 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 | Description | Values |
| 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 |
| :visited | a visited link |
| (additional options not shown) |
Pseudo-elements
| Property | Customizes the style of... |
| :first-letter | the first letter of a text |
| :first-line | the first line of a text |
| (additional options not shown) |
Text
| Property | Description | Values |
| 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
]
|
| |
|
|
|
|
|