8. Example keywords:
p { color: aqua; }
p { color: black; }
p { color: blue; }
p { color: fuchsia; }
p { color: gray; }
p { color: green; }
p { color: lime; }
12. Three-digit hexadecimal
notation allows authors to
replace double ‘rr’, ‘gg’ or ‘bb’
values with single values (#rgb):
p { color: #663399; }
p { color: #639; }
p { color: #aaff55; }
p { color: #af5; }
13. The six-digit RGB notation
(#rrggbb) can only by converted
into three-digit form (#rgb) if each
the rr, gg, and bb values each
use duplicate digits. Many six-
digit values cannot be converted.
Cannot convert
p { color: #953d3d; }
p { color: #34d209; } Cannot convert
18. RGB percentage notation uses
'rgb(' followed by a comma-
separated list of three percentage
values, followed by ')'.
p {
color: rgb(0%,10%,100%); }
19. RGB percentage notation
allows values between 0%
(black) and 100% (white). All
values must include % symbol.
21. CSS2.1 allowed System colors
to be used to specify colors that
matched the operating system's
graphic style.
p { color: ButtonFace; }
22. Note:
System Colors have been
deprecated in favor of the
CSS3 UI “appearance’
property for specifying the
complete look of user
interface related elements.
27. While CSS2.1 allowed us to use
17 basic color keywords, CSS3
allows us to use and additional
130 extended color keywords.
This is a total of 147 keywords.
28. Example color keywords:
p { color: peru; }
p { color: salmon; }
p { color: thisle; }
p { color: firebrick; }
p { color: ghostwhite; }
p { color: goldenrod; }
p { color: honeydew; }
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40. Quick tip:
Do you have trouble spelling the
keyword gray/grey?
Well, CSS3 color keywords have
got you covered. They include
gray, grey, darkgrey and
darkgray.
49. With CSS3 we can add an alpha
channel to RGB values. This
allows us to set our colors to
specific levels of opacity.
50. While the ‘opacity’ property
sets the opacity/transparency of
entire elements, RGBA is used
to set the opacity of color
values only.
51. RGBA numeric notation
uses 'rgba(' followed by a
comma-separated list of three
integer values, followed by an
alpha value followed by a ‘)’.
p { color: rgba(100, 66, 255, 1); }
52. The three integer values must be
between 0 (black) and 255
(white). No unit identifier is
required. For example:
255
0
53. This alpha value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5
54. An alpha value of 1 means
the color will be fully opaque
(displayed as a solid color).
An alpha value of 0.5 will be
half opaque.
55. You should always include a
backup for browsers that do not
support this property.
p
{
color: rgb(100, 66, 255);
color: rgba(100, 66, 255, 0.5);
}
58. RGBA percentage notation
uses 'rgba(' followed by a
comma-separated list of three
percentage values, followed by
an alpha value followed by a ‘)’.
p { color: rgba(10%, 6%, 20%, 1); }
59. The three percentage values
must be between 0% (black) and
100% (white). All values must
include % symbol. For example:
100%
0%
60. This alpha value must be a
number, which is zero or more
digits followed by a dot (.)
followed by one or more digits.
For example:
0.5
.5
82. CSS1 and CSS2 defined
the initial value of the ‘border-
color’ property to be “the
value of the ‘color’ property” .
However, there is no
corresponding keyword.
83. We had no way of specifying a
border-color to match the color.
p
{
color: red;
border-width: 1px;
border-style: solid;
border-color: “the value of the
‘color’ property”;
}
84. CSS3 allows us to the
currentColor keyword for this:
p
{
color: red;
border-width: 1px;
border-style: solid;
border-color: currentColor;
}
