Style elements make it easy to use the same style for all elements of the same type, which keeps the design consistent and coherent. However, we can also give individual elements their own style. Instead of a style element, we can use a style attribute, which would look something like style="background: red;". This is useful when you want to try a whole bunch of different styles at once, like color palettes! Look at how we set each of these colors in the script:
Black
DarkBlue
Indigo
MediumBlue
Purple
DarkRed
Blue
DarkGreen
DimGray
SaddleBrown
DarkViolet
Brown
SlateBlue
Teal
SteelBlue
Sienna
RoyalBlue
Green
ForestGreen
Olive
Gray
Crimson
MediumPurple
Red
Chocolate
DeepPink
OrangeRed
Peru
Orchid
Magenta
RosyBrown
Tomato
LightCoral
HotPink
Coral
GoldenRod
DarkOrange
Violet
Salmon
LimeGreen
YellowGreen
LightSalmon
Orange
Tan
SandyBrown
Plum
BurlyWood
SkyBlue
Silver
Thistle
Turquoise
LightBlue
Pink
LightGray
PowderBlue
LightGreen
Lime
Gold
Wheat
Cyan
GreenYellow
Aquamarine
Khaki
Lavender
MistyRose
Yellow
SeaShell
WhiteSmoke
LightCyan
LightYellow
HoneyDew
White
The same style settings are available regardless of how you apply them, and you can set as many as you want as long as you separate them with semicolons. For example, the last element in this palette sets both the background color and the text color in the same style attribute to make it easier to read the text against the background.
There are even more color names available, but sometimes you need to design your own color. Color science is complicated, but the short version is that you can make practically any visible color using red, green, and blue light. White light is actually just a balanced mix of all three.
In CSS, you can design a color by writing a hash sign (#) followed by three numbers or letters. That's right, you can use certain letters for even brighter colors. From darkest to lightest, the digits are 0123456789ABCDEF. Pick three of these digits to represent the amount of red, green, and blue light, in that order. Some examples are below:
#000
#F00
#000
#300
#600
#900
#C00
#F00
#00F
#30F
#60F
#90F
#C0F
#F0F
#111
#F60
#010
#310
#610
#910
#C10
#F10
#01F
#31F
#61F
#91F
#C1F
#F1F
#222
#FA0
#020
#320
#620
#920
#C20
#F20
#02F
#32F
#62F
#92F
#C2F
#F2F
#333
#FD0
#030
#330
#630
#930
#C30
#F30
#03F
#33F
#63F
#93F
#C3F
#F3F
#444
#FF0
#040
#340
#640
#940
#C40
#F40
#04F
#34F
#64F
#94F
#C4F
#F4F
#555
#AF0
#050
#350
#650
#950
#C50
#F50
#05F
#35F
#65F
#95F
#C5F
#F5F
#666
#0F0
#060
#360
#660
#960
#C60
#F60
#06F
#36F
#66F
#96F
#C6F
#F6F
#777
#0FB
#070
#370
#670
#970
#C70
#F70
#07F
#37F
#67F
#97F
#C7F
#F7F
#888
#0FF
#080
#380
#680
#980
#C80
#F80
#08F
#38F
#68F
#98F
#C8F
#F8F
#999
#0DF
#090
#390
#690
#990
#C90
#F90
#09F
#39F
#69F
#99F
#C9F
#F9F
#AAA
#0AF
#0A0
#3A0
#6A0
#9A0
#CA0
#FA0
#0AF
#3AF
#6AF
#9AF
#CAF
#FAF
#BBB
#06F
#0B0
#3B0
#6B0
#9B0
#CB0
#FB0
#0BF
#3BF
#6BF
#9BF
#CBF
#FBF
#CCC
#00F
#0C0
#3C0
#6C0
#9C0
#CC0
#FC0
#0CF
#3CF
#6CF
#9CF
#CCF
#FCF
#DDD
#70F
#0D0
#3D0
#6D0
#9D0
#CD0
#FD0
#0DF
#3DF
#6DF
#9DF
#CDF
#FDF
#EEE
#B0F
#0E0
#3E0
#6E0
#9E0
#CE0
#FE0
#0EF
#3EF
#6EF
#9EF
#CEF
#FEF
#FFF
#F0F
#0F0
#3F0
#6F0
#9F0
#CF0
#FF0
#0FF
#3FF
#6FF
#9FF
#CFF
#FFF
If you need even finer control over color, you can use six digits instead of three, like #ABCDEF or #987654. These are actually just three numbers again, but with two-digits each and no spaces between them. They count up the same way as ordinary numbers except instead of ten possible numerals per digit, there are sixteen. This type of number is called hexadecimal. If this is confusing, you can also make the same colors using ordinary decimal numbers like rgb(171, 205, 239) or rgb(152, 118, 84). The biggest decimal number you can use is 255, which is equal to FF in hexadecimal.
Below is a proper style element for you to play with. Change each of these settings to a different color in the script. You can make it as garish or as pleasing as you like, but try using number values to design your own colors.
After you create a beatiful (or hideous!) page, let's move on.