Help:CSS/Properties and values

From the Nintendo Wiki, a wiki covering all things Nintendo
Jump to navigationJump to search

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
This is 90% width
This is 80% width
This is 70% width
This is 60% width
This is 50% width
This is 40% width
This is 30% width
This is 20% width
This is 10% width

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.

This is 32em width
This is 16em width
This is 8em width

Pixels (px)[edit]

This is measured in pixels. It is the smallest measurement on a display.

This is 400px width
This is 300px width
This is 200px width
This is 100px width

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.