Help:CSS/Properties and values
This is a list of all properties and values that they take.
Measurements Edit
Some values are measurements, and take units; those described here are possible options
Percentage (%) Edit
This is measured as a percentage of the container size (for width, height, padding, margin) or font size (for font-size).
- Examples
Em Edit
This is measured in terms of the browser's set font size, where 1 is default and anything lower or higher varies the size proportionally. Allows the values for width, height, padding and margin to be defined relative to the font size.
Pixels (px) Edit
This is measured in pixels. It is the smallest measurement on a display.
Multiple values Edit
Some properties, such as border ones, padding and margin, take up to four values, one for each side of the element. by adding -top, -right, -left or -bottom to the property, the value for one of these can be defined. Leaving the property as it is means values are defined as follows:
- 1 value: value is for all sides.
- 2 values: first value is for top and bottom, second value is for right and left.
- 3 values: first value is for top, second for right and left, third for bottom.
- 4 values: assigned in the order top, right, bottom, left.
1 value: value1 | ||
value1 | ||
value1 | value1 | |
value1 |
2 values: value1 value2 | ||
value1 | ||
value2 | value2 | |
value1 |
3 values: value1 value2 value3 | ||
value1 | ||
value2 | value2 | |
value3 |
4 values: value1 value2 value3 value4 | ||
value1 | ||
value4 | value2 | |
value3 |
Colors Edit
Some properties take a color value.
Color names Edit
You can use a pre-defined color name. There are 139 color names.This list is shown below.
HTML name | R G B | |
---|---|---|
Hex | Decimal | |
Pink colors | ||
MediumVioletRed | C71585 | 199, 21, 133 |
DeepPink | FF1493 | 255, 20, 147 |
PaleVioletRed | DB7093 | 219, 112, 147 |
HotPink | FF69B4 | 255, 105, 180 |
LightPink | FFB6C1 | 255, 182, 193 |
Pink | FFC0CB | 255, 192, 203 |
Red colors | ||
DarkRed | 8B0000 | 139, 0, 0 |
Red | FF0000 | 255, 0, 0 |
Firebrick | B22222 | 178, 34, 34 |
Crimson | DC143C | 220, 20, 60 |
IndianRed | CD5C5C | 205, 92, 92 |
LightCoral | F08080 | 240, 128, 128 |
Salmon | FA8072 | 250, 128, 114 |
DarkSalmon | E9967A | 233, 150, 122 |
LightSalmon | FFA07A | 255, 160, 122 |
Orange colors | ||
OrangeRed | FF4500 | 255, 69, 0 |
Tomato | FF6347 | 255, 99, 71 |
DarkOrange | FF8C00 | 255, 140, 0 |
Coral | FF7F50 | 255, 127, 80 |
Orange | FFA500 | 255, 165, 0 |
Yellow colors | ||
DarkKhaki | BDB76B | 189, 183, 107 |
Gold | FFD700 | 255, 215, 0 |
Khaki | F0E68C | 240, 230, 140 |
PeachPuff | FFDAB9 | 255, 218, 185 |
Yellow | FFFF00 | 255, 255, 0 |
PaleGoldenrod | EEE8AA | 238, 232, 170 |
Moccasin | FFE4B5 | 255, 228, 181 |
PapayaWhip | FFEFD5 | 255, 239, 213 |
LightGoldenrodYellow | FAFAD2 | 250, 250, 210 |
LemonChiffon | FFFACD | 255, 250, 205 |
LightYellow | FFFFE0 | 255, 255, 224 |
Brown colors | ||
Maroon | 800000 | 128, 0, 0 |
Brown | A52A2A | 165, 42, 42 |
SaddleBrown | 8B4513 | 139, 69, 19 |
Sienna | A0522D | 160, 82, 45 |
Chocolate | D2691E | 210, 105, 30 |
DarkGoldenrod | B8860B | 184, 134, 11 |
Peru | CD853F | 205, 133, 63 |
RosyBrown | BC8F8F | 188, 143, 143 |
Goldenrod | DAA520 | 218, 165, 32 |
SandyBrown | F4A460 | 244, 164, 96 |
Tan | D2B48C | 210, 180, 140 |
Burlywood | DEB887 | 222, 184, 135 |
Wheat | F5DEB3 | 245, 222, 179 |
NavajoWhite | FFDEAD | 255, 222, 173 |
Bisque | FFE4C4 | 255, 228, 196 |
BlanchedAlmond | FFEBCD | 255, 235, 205 |
Cornsilk | FFF8DC | 255, 248, 220 |
HTML name | R G B | |
---|---|---|
Hex | Decimal | |
Purple, violet, and magenta colors | ||
Indigo | 4B0082 | 75, 0, 130 |
Purple | 800080 | 128, 0, 128 |
DarkMagenta | 8B008B | 139, 0, 139 |
DarkViolet | 9400D3 | 148, 0, 211 |
DarkSlateBlue | 483D8B | 72, 61, 139 |
BlueViolet | 8A2BE2 | 138, 43, 226 |
DarkOrchid | 9932CC | 153, 50, 204 |
Fuchsia | FF00FF | 255, 0, 255 |
Magenta | FF00FF | 255, 0, 255 |
SlateBlue | 6A5ACD | 106, 90, 205 |
MediumSlateBlue | 7B68EE | 123, 104, 238 |
MediumOrchid | BA55D3 | 186, 85, 211 |
MediumPurple | 9370DB | 147, 112, 219 |
Orchid | DA70D6 | 218, 112, 214 |
Violet | EE82EE | 238, 130, 238 |
Plum | DDA0DD | 221, 160, 221 |
Thistle | D8BFD8 | 216, 191, 216 |
Lavender | E6E6FA | 230, 230, 250 |
Blue colors | ||
MidnightBlue | 191970 | 25, 25, 112 |
Navy | 000080 | 0, 0, 128 |
DarkBlue | 00008B | 0, 0, 139 |
MediumBlue | 0000CD | 0, 0, 205 |
Blue | 0000FF | 0, 0, 255 |
RoyalBlue | 4169E1 | 65, 105, 225 |
SteelBlue | 4682B4 | 70, 130, 180 |
DodgerBlue | 1E90FF | 30, 144, 255 |
DeepSkyBlue | 00BFFF | 0, 191, 255 |
CornflowerBlue | 6495ED | 100, 149, 237 |
SkyBlue | 87CEEB | 135, 206, 235 |
LightSkyBlue | 87CEFA | 135, 206, 250 |
LightSteelBlue | B0C4DE | 176, 196, 222 |
LightBlue | ADD8E6 | 173, 216, 230 |
PowderBlue | B0E0E6 | 176, 224, 230 |
Cyan colors | ||
Teal | 008080 | 0, 128, 128 |
DarkCyan | 008B8B | 0, 139, 139 |
LightSeaGreen | 20B2AA | 32, 178, 170 |
CadetBlue | 5F9EA0 | 95, 158, 160 |
DarkTurquoise | 00CED1 | 0, 206, 209 |
MediumTurquoise | 48D1CC | 72, 209, 204 |
Turquoise | 40E0D0 | 64, 224, 208 |
Aqua | 00FFFF | 0, 255, 255 |
Cyan | 00FFFF | 0, 255, 255 |
Aquamarine | 7FFFD4 | 127, 255, 212 |
PaleTurquoise | AFEEEE | 175, 238, 238 |
LightCyan | E0FFFF | 224, 255, 255 |
HTML name | mR G B | |
---|---|---|
Hex | Decimal | |
Green colors | ||
DarkGreen | 006400 | 0, 100, 0 |
Green | 008000 | 0, 128, 0 |
DarkOliveGreen | 556B2F | 85, 107, 47 |
ForestGreen | 228B22 | 34, 139, 34 |
SeaGreen | 2E8B57 | 46, 139, 87 |
Olive | 808000 | 128, 128, 0 |
OliveDrab | 6B8E23 | 107, 142, 35 |
MediumSeaGreen | 3CB371 | 60, 179, 113 |
LimeGreen | 32CD32 | 50, 205, 50 |
Lime | 00FF00 | 0, 255, 0 |
SpringGreen | 00FF7F | 0, 255, 127 |
MediumSpringGreen | 00FA9A | 0, 250, 154 |
DarkSeaGreen | 8FBC8F | 143, 188, 143 |
MediumAquamarine | 66CDAA | 102, 205, 170 |
YellowGreen | 9ACD32 | 154, 205, 50 |
LawnGreen | 7CFC00 | 124, 252, 0 |
Chartreuse | 7FFF00 | 127, 255, 0 |
LightGreen | 90EE90 | 144, 238, 144 |
GreenYellow | ADFF2F | 173, 255, 47 |
PaleGreen | 98FB98 | 152, 251, 152 |
White colors | ||
MistyRose | FFE4E1 | 255, 228, 225 |
AntiqueWhite | FAEBD7 | 250, 235, 215 |
Linen | FAF0E6 | 250, 240, 230 |
Beige | F5F5DC | 245, 245, 220 |
WhiteSmoke | F5F5F5 | 245, 245, 245 |
LavenderBlush | FFF0F5 | 255, 240, 245 |
OldLace | FDF5E6 | 253, 245, 230 |
AliceBlue | F0F8FF | 240, 248, 255 |
Seashell | FFF5EE | 255, 245, 238 |
GhostWhite | F8F8FF | 248, 248, 255 |
Honeydew | F0FFF0 | 240, 255, 240 |
FloralWhite | FFFAF0 | 255, 250, 240 |
Azure | F0FFFF | 240, 255, 255 |
MintCream | F5FFFA | 245, 255, 250 |
Snow | FFFAFA | 255, 250, 250 |
Ivory | FFFFF0 | 255, 255, 240 |
White | FFFFFF | 255, 255, 255 |
Gray and black colors | ||
Black | 000000 | 0, 0, 0 |
DarkSlateGray | 2F4F4F | 47, 79, 79 |
DimGray | 696969 | 105, 105, 105 |
SlateGray | 708090 | 112, 128, 144 |
Gray | 808080 | 128, 128, 128 |
LightSlateGray | 778899 | 119, 136, 153 |
DarkGray | A9A9A9 | 169, 169, 169 |
Silver | C0C0C0 | 192, 192, 192 |
LightGray | D3D3D3 | 211, 211, 211 |
Gainsboro | DCDCDC | 220, 220, 220 |
Hex colors Edit
You can use three-, four-, six- or eight-digit hexadecimal colors
- #RRGGBBAA - a full hex color with red, green, blue and alpha (4 billion combinations)
- #RRGGBB - a full hex color with red, green, and blue (16 million combinations)
- #RGBA - a shorthand hex color with red, green, blue and alpha (65,536 combinations)
- #RGB - a shorthand hex color with red, green and blue (4,096 combinations)
The value of each parameter is defined as 1- or 2-digit hexadecimal values and represents the intensity of each parameter.
For #XYXYXY, the intensity formula is 16X + Y. For #XXX, the intensity formula is 17X.
Hex | Decimal | Red | Green | Blue | All |
---|---|---|---|---|---|
00 | 0 | ||||
01 | 1 | ||||
02 | 2 | ||||
03 | 3 | ||||
04 | 4 | ||||
05 | 5 | ||||
06 | 6 | ||||
07 | 7 | ||||
08 | 8 | ||||
09 | 9 | ||||
0A | 10 | ||||
0B | 11 | ||||
0C | 12 | ||||
0D | 13 | ||||
0E | 14 | ||||
0F | 15 | ||||
10 | 16 | ||||
20 | 32 | ||||
30 | 48 | ||||
40 | 64 | ||||
50 | 80 | ||||
60 | 96 | ||||
70 | 112 | ||||
80 | 128 | ||||
90 | 144 | ||||
A0 | 160 | ||||
B0 | 176 | ||||
C0 | 192 | ||||
D0 | 208 | ||||
E0 | 224 | ||||
F0 | 240 | ||||
FF | 255 |
For shorthand Hex colors, this will convert to longer form, by duplicating each value. For example #39C converts to #3399CC.
RGB colors Edit
rgb(red, green, blue) works in a similar way to Hex colors, albeit with decimal numbers instead of hexadecimal.