CSS PropertiesEdit
background · background-attachment · background-color · background-image · background-position · background-repeat · border-collapse · border-color · border-spacing · bottom · caption-side · clear · clip · color · content · counter-increment · counter-reset · cursor · direction · display · empty-cells · font · font-size-adjust · font-stretch · font-style · font-variant · height · left · letter-spacing · line-break · line-height · list-style · list-style-image · list-style-position · list-style-type · marker-offset · max-height · max-width · min-height · min-width · outline · outline-color · outline-style · outline-width · overflow · position · quotes · right · ruby-align · ruby-overhang · ruby-position · table-layout · text-autospace · text-indent · text-justify · text-kashida-space · text-shadow · text-transform · text-underline-position · top · unicode-bidi · vertical-align · visibility · voice-family · volume · white-space · widows · width · word-break · word-spacing · word-wrap
(size)Edit
Sizes (width,height,font-size,border-width) in CSS take a number followed by one of the unit identifiers below.
|
|
px | Pixels, relative to the resolution of the screen |
|
|
% | Percent, relative to the container |
|
|
pc | Picas, absolute typographer unit (1pc = 12pt) |
|
|
pt | Points, absolute typographer unit (1pt=1/72in) |
|
|
em | Height of uppercase M, relative to the font size of the container |
|
|
ex | Height of lowercase x, relative to the font size of the container |
|
|
mm | Millimeters, absolute metric unit |
|
|
cm | Centimeters, absolute metric unit |
|
|
in | Inches, absolute imperial unit (1in = 2.54cm) |
(location)Edit
Absolute or relative top (y) and left (x) position of a component.
| auto | |
| inherit | |
| (size) |
azimuthEdit
| behind | |
| center | |
| center-left | |
| center-right | |
| far-left | |
| far-right | |
| inherit | |
| left | |
| left-side | |
| leftwards | |
| right | |
| right-side | |
| rightwards |
background-repeatEdit
|
■ ■ ■
■ ■ ■ ■ ■ ■ |
repeat | The background image will be tiled vertically and horizontally |
|
■ ■ ■
|
repeat-x | The background image will be repeated horizontally. Slim long images are often used to create vertical gradients. |
|
■
■ ■ |
repeat-y | The background image will be repeated vertically |
| no-repeat | The background-image will be displayed only once |
borderEdit
Shorthand property for border-width, border-style,border-color affecting all 4 borders.
border-styleEdit
- if only one value is passed it will affect all 4 borders.
- if two values are passed, the first one will affect the horizontal borders and the second the vertical ones.
- if four values are passed it will refer to the borders in this order: top, right, bottom, left
| none | ||
| hidden | ||
| dotted | ||
| dashed | ||
| solid | ||
| double | ||
| groove | ||
| ridge | ||
| inset | ||
| outset |
border-widthEdit
- if only one value is passed it will affect all 4 borders.
- if two values are passed, the first one will affect the horizontal borders and the second the vertical ones.
- if four values are passed it will refer to the borders in this order: top, right, bottom, left
| thin | Defines a thin border. |
| medium | Defines a medium border. |
| thick | Defines a thick border. |
| (size) | Allows you to define the thickness of the borders. |
caption-sideEdit
| bottom | |
| inherit | |
| left | |
| right | |
| top |
clearEdit
| both | |
| inherit | |
| left | |
| none | |
| right |
colorEdit
A CSS color value can be defined in RGB, HEX or by name. The system colors are based on the colors used by the client user interface. See List of colors for more information.
| rgb(RRR,GGG,BBB) | Every part is an integer number between 0 and 255. Example: rgb(127,0,255) | |
| #RRGGBB | Every part is a hexadecimal integer value between 00 and FF. Example: #AABBCC | |
| aliceblue | #F0F8FF | |
| antiquewhite | #FAEBD7 | |
| aqua | #00FFFF | |
| aquamarine | #7FFFD4 | |
| azure | #F0FFFF | |
| beige | #F5F5DC | |
| bisque | #FFE4C4 | |
| black | #000000 | |
| blanchedalmond | #FFEBCD | |
| blue | #0000FF | |
| blueviolet | #8A2BE2 | |
| brown | #A52A2A | |
| burlywood | #DEB887 | |
| cadetblue | #5F9EA0 | |
| chartreuse | #7FFF00 | |
| chocolate | #D2691E | |
| coral | #FF7F50 | |
| cornflowerblue | #6495ED | |
| cornsilk | #FFF8DC | |
| crimson | #DC143C | |
| cyan | #00FFFF | |
| darkblue | #00008B | |
| darkcyan | #008B8B | |
| darkgoldenrod | #B8860B | |
| darkgray | #A9A9A9 | |
| darkgreen | #006400 | |
| darkkhaki | #BDB76B | |
| darkmagenta | #8B008B | |
| darkolivegreen | #556B2F | |
| darkorange | #FF8C00 | |
| darkorchid | #9932CC | |
| darkred | #8B0000 | |
| darksalmon | #E9967A | |
| darkseagreen | #8FBC8B | |
| darkslateblue | #483D8B | |
| darkslategray | #2F4F4F | |
| darkturquoise | #00CED1 | |
| darkviolet | #9400D3 | |
| deeppink | #FF1493 | |
| deepskyblue | #00BFFF | |
| dimgray | #696969 | |
| dodgerblue | #1E90FF | |
| firebrick | #B22222 | |
| floralwhite | #FFFAF0 | |
| forestgreen | #228B22 | |
| fuchsia | #FF00FF | |
| gainsboro | #DCDCDC | |
| ghostwhite | #F8F8FF | |
| gold | #FFD700 | |
| goldenrod | #DAA520 | |
| gray | #808080 | |
| green | #008000 | |
| greenyellow | #ADFF2F | |
| honeydew | #F0FFF0 | |
| hotpink | #FF69B4 | |
| indianred | #CD5C5C | |
| indigo | #4B0082 | |
| ivory | #FFFFF0 | |
| khaki | #F0E68C | |
| lavender | #E6E6FA | |
| lavenderblush | #FFF0F5 | |
| lawngreen | #7CFC00 | |
| lemonchiffon | #FFFACD | |
| lightblue | #ADD8E6 | |
| lightcoral | #F08080 | |
| lightcyan | #E0FFFF | |
| lightgoldenrodyellow | #FAFAD2 | |
| lightgreen | #90EE90 | |
| lightgrey | #D3D3D3 | |
| lightpink | #FFB6C1 | |
| lightsalmon | #FFA07A | |
| lightseagreen | #20B2AA | |
| lightskyblue | #87CEFA | |
| lightslategray | #778899 | |
| lightsteelblue | #B0C4DE | |
| lightyellow | #FFFFE0 | |
| lime | #00FF00 | |
| limegreen | #32CD32 | |
| linen | #FAF0E6 | |
| magenta | #FF00FF | |
| maroon | #800000 | |
| mediumaquamarine | #66CDAA | |
| mediumblue | #0000CD | |
| mediumorchid | #BA55D3 | |
| mediumpurple | #9370DB | |
| mediumseagreen | #3CB371 | |
| mediumslateblue | #7B68EE | |
| mediumspringgreen | #00FA9A | |
| mediumturquoise | #48D1CC | |
| mediumvioletred | #C71585 | |
| midnightblue | #191970 | |
| mintcream | #F5FFFA | |
| mistyrose | #FFE4E1 | |
| moccasin | #FFE4B5 | |
| navajowhite | #FFDEAD | |
| navy | #000080 | |
| oldlace | #FDF5E6 | |
| olive | #808000 | |
| olivedrab | #6B8E23 | |
| orange | #FFA500 | |
| orangered | #FF4500 | |
| orchid | #DA70D6 | |
| palegoldenrod | #EEE8AA | |
| palegreen | #98FB98 | |
| paleturquoise | #AFEEEE | |
| palevioletred | #DB7093 | |
| papayawhip | #FFEFD5 | |
| peachpuff | #FFDAB9 | |
| peru | #CD853F | |
| pink | #FFC0CB | |
| plum | #DDA0DD | |
| powderblue | #B0E0E6 | |
| purple | #800080 | |
| red | #FF0000 | |
| rosybrown | #BC8F8F | |
| royalblue | #041690 | |
| saddlebrown | #8B4513 | |
| salmon | #FA8072 | |
| sandybrown | #F4A460 | |
| seagreen | #2E8B57 | |
| seashell | #FFF5EE | |
| sienna | #A0522D | |
| silver | #C0C0C0 | |
| skyblue | #87CEEB | |
| slateblue | #6A5ACD | |
| slategray | #708090 | |
| snow | #FFFAFA | |
| springgreen | #00FF7F | |
| steelblue | #4682B4 | |
| tan | #D2B48C | |
| teal | #008080 | |
| thistle | #D8BFD8 | |
| tomato | #FF6347 | |
| turquoise | #40E0D0 | |
| violet | #EE82EE | |
| wheat | #F5DEB3 | |
| white | #FFFFFF | |
| whitesmoke | #F5F5F5 | |
| yellow | #FFFF00 | |
| yellowgreen | #9ACD32 |
| transparent | transparent |  |
 |
 |
 |
 |
 |
 |
 |
|
| activeborder | Active window border. | |||||||||
| activecaption | Active window caption. (Titlebar) | |||||||||
| appworkspace | Background color of multiple document interface (MDI). | |||||||||
| background | Desktop background. | |||||||||
| buttonface | Face color for three-dimensional display elements. | |||||||||
| buttonhighlight | Highlight color for three-dimensional display elements (for edges facing away from the light source). | |||||||||
| buttonshadow | Shadow color for three-dimensional display elements. | |||||||||
| buttontext | Text on push buttons. | |||||||||
| captiontext | Text in caption (titlebar), size box, and scrollbar arrow box. | |||||||||
| graytext | Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. | |||||||||
| highlight | Item(s) selected in a control. | |||||||||
| highlighttext | Text of item(s) selected in a control. | |||||||||
| inactiveborder | Inactive window border. | |||||||||
| inactivecaption | Inactive window caption (titlebar). | |||||||||
| inactivecaptiontext | Color of text in an inactive caption (titlebar). | |||||||||
| infobackground | Background color for tooltip controls. | |||||||||
| infotext | Text color for tooltip controls. | |||||||||
| menu | Menu background. | |||||||||
| menutext | Text in menus. | |||||||||
| scrollbar | Scroll bar gray area. | |||||||||
| threeddarkshadow | Dark shadow for three-dimensional display elements. | |||||||||
| threedface | Face color for three-dimensional display elements. | |||||||||
| threedhighlight | Highlight color for three-dimensional display elements. | |||||||||
| threedlightshadow | Light color for three-dimensional display elements (for edges facing the light source). | |||||||||
| threedshadow | threedshadow | |||||||||
| window | Window background. | |||||||||
| windowframe | Window frame. | |||||||||
| windowtext | Text in windows. |
floatEdit
font-familyEdit
| Font Family | cursive | default cursive font on client computer |
| Font Family | fantasy | default fantasy font on client computer |
| Font Family | monospace | default monospace font on client computer |
| Font Family | sans-serif | default sans-serif font on client computer |
| Font Family | serif | default serif font on client computer |
| Font Family | (font name) | Example: Impact |
| Font Family | (csv list of font names) | Example: Verdana,Arial,Helvetica,sans-serif |
| Font Family | (csv list of font names) | Example: 'Times New Roman',serif |
| Font Family | (csv list of font names) | Example: 'Courier New',Courier,monospace |
font-sizeEdit
| Font Size | (size) | Example:11px |
| Font Size | xx-small | very small relative to default |
| Font Size | x-small | extra small relative to default |
| Font Size | smaller | smaller than default |
| Font Size | small | small |
| Font Size | inherit | inherit the font size of the parent or default |
| Font Size | medium | medium |
| Font Size | larger | larger than default |
| Font Size | large | large |
| Font Size | x-large | extra large relative to default |
| Font Size | xx-large | very large relative to default |
font-styleEdit
| normal | normal |
| italic | italic |
| oblique | a variant of italic |
font-variantEdit
| normal | The browser displays a normal font |
| small-caps | The browser displays a small-caps font |
font-weightEdit
| 100 | |
| 200 | |
| 300 | |
| 400 | |
| 500 | |
| 600 | |
| 700 | |
| 800 | |
| 900 | |
| bold | |
| bolder | |
| lighter | |
| normal |
positionEdit
| inherit | |
| absolute | |
| fixed | |
| relative | |
| static |
text-alignEdit
|
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
inherit | inherited from the container |
|
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
left | left (default in LTR language) |
|
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
center | center |
|
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
right | right (default in RTL languages) |
|
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
justify | space is added between words to create a visual block of text |
text-decorationEdit
| text-decoration | blink | replaces the Netscape <blink> element. |
| text-decoration | inherit | |
| text-decoration | line-through | replaces the deprecated <s> and <strike> elements. |
| text-decoration | none | |
| text-decoration | overline | |
| text-decoration | underline | replaces the deprecated <u> element. |
text-transformEdit
| text-transform | none | Default. Text is not transformed. |
| text-transform | capitalize | Transforms the first character of each word to uppercase. |
| text-transform | uppercase | Transforms all the characters to uppercase. |
| text-transform | lowercase | Transforms all the characters to lowercase. |
vertical-alignEdit
| baseline | The element is placed on the baseline of the parent element |
| sub | Aligns the element as it was subscript |
| super | Aligns the element as it was superscript |
| top | The top of the element is aligned with the top of the tallest element on the line |
| text-top | The top of the element is aligned with the top of the parent element's font |
| middle | The element is placed in the middle of the parent element |
| bottom | The bottom of the element is aligned with the lowest element on the line |
| text-bottom | The bottom of the element is aligned with the bottom of the parent element's font |
| % | Aligns the element in a % value of the line-height property. Negative values are allowed |
visibilityEdit
| collapse | |
| hidden | |
| inherit | |
| visible |
volumeEdit
| inherit | |
| loud | |
| medium | |
| silent | |
| soft | |
| x-loud | |
| x-soft |
white-spaceEdit
| inherit | |
| normal | |
| nowrap | |
| pre |
word-spacingEdit
| inherit | |
| normal | |
| (size) |
z-indexEdit
| auto | |
| inherit | |
| (integer) |