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.