|
|
|
|
|
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
]
|
| |
|
|
|
|
|