CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
Cascading
Style Sheets Specifying Color
Instructor: Joseph DiVerdi, Ph.D., M.B.A.
Copyright © XTR Systems, LLC
Specifying Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Several Methods for Specifying Color
• Identical to HTML Methods
• Caveat:
–
–
–
–
CSS is not a precise layout language
HTML is not a precise layout language
There are unavoidable differences among OSes
There are unavoidable differences among
browsers
– With this information you'll be able to do the best
work possible
Copyright © XTR Systems, LLC
Specifying Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Borders, Text, & Backgrounds can possess
color specifications
• Color Specification Methods:
– Named Colors (aka Color Keywords)
– RGB Colors •
•
•
•
Using Decimal Numbers
Using Percentages
Using Hexadecimal Numbers
Using Short Hexadecimal Numbers
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
Named Colors
• Named Color Choices:
aqua
gray
navy
silver
black
green
olive
teal
blue
lime
purple
white
fuschia
maroon
red
yellow
• The Original Windows VGA Color Set
Copyright © XTR Systems, LLC
Named Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• There are no exactly defined RGB values for
these keywords
– It is Up To Browser Developers to Decide What
They Might Mean
– It is Up to BIOS Developers to Decide What They
Might Mean
– It is Up to Monitor Developers to Decide What
They Might Mean
Copyright © XTR Systems, LLC
RGB Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Several equivalent number systems
–
–
–
–
Percentage:
Decimal Number:
Hexadecimal Number:
Short Hexadecimal Number:
0-100%
0-255
00-FF
0-F
• All schemes deconstruct every possible color
into varying amounts of Additive Primaries
– Red, Green, & Blue
• Each scheme uses a different numbering
scheme to define the amounts
Copyright © XTR Systems, LLC
RGB Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
RGB Colors
• Percentages:
– 0-100% Red
– 0-100% Green
– 0-100% Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
rgb( 20%, 20%, 20%); }
rgb(100%, 0%, 0%); }
rgb(100%, 40%, 0%); }
rgb(100%, 100%, 0%); }
rgb( 0%, 100%, 0%); }
rgb(100%, 0%, 100%); }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H6 { color: rgb(rrr, ggg, bbb); }
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
RGB Colors
• Decimal Numbers:
– 0-255 Red
– 0-255 Green
– 0-255 Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
rgb( 51, 51, 51); }
rgb(255, 0, 0); }
rgb(255, 102, 0); }
rgb(255, 255, 0); }
rgb( 0, 255, 0); }
rgb(255, 0, 255); }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H6 { color: rgb(rrr, ggg, bbb); }
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
RGB Colors
• Hexadecimal Numbers:
– 00-FF Red
– 00-FF Green
– 00-FF Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
#333333; }
#FF0000; }
#FF6600; }
#FFFF00; }
#00FF00; }
#FF00FF; }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H1 { color: #rrggbb; }
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
RGB Colors
• Short Hexadecimal Numbers:
– 0-F Red
– 0-F Green
– 0-F Blue
• Syntax:
H1
H2
H3
H4
H5
H6
{
{
{
{
{
{
color:
color:
color:
color:
color:
color:
#333; }
#F00; }
#F60; }
#FF0; }
#0F0; }
#F0F; }
/*
/*
/*
/*
/*
/*
dark gray */
red */
orange */
yellow */
green */
purple */
H1 { color: #rgb; }
Copyright © XTR Systems, LLC
Color Problems
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Colors vary across different OSes & Browsers
• Restricting color choices to so-called Web
Safe Colors increases the consistency of
results
• Web Safe Colors
–
–
–
–
multiples of 20%
multiples of 5110
multiples of 3316
multiples of 316
0, 20, 40, 60, 80, 100%
0, 51, 102, 153, 204, 255
00, 33, 66, 99, CC, FF
0, 3, 6, 9, C, F
Copyright © XTR Systems, LLC
Color Effected Properties
• background-color
• border-color
• color
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
sets background color of
element
sets foreground color of
overall border of
element
sets foreground color of
element
Copyright © XTR Systems, LLC
Specifying Body Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• BODY tag accepts several color attributes
– text color
– background color (or image)
– link
• unvisited or not yet followed
– active (link)
• depressed mouse cursor
– visited (link)
• been there, done that, got the T-shirt, saw the movie...
• CSS properties can be used to replace these
attributes
Copyright © XTR Systems, LLC
Specifying Body Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
BODY {
color: black;
background-color: white;
}
A:LINK {
color: red;
}
A:VISITED {
color: purple;
}
A:ACTIVE {
color: blue;
}
Copyright © XTR Systems, LLC
Specifying Body Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
BODY { color: black; background-color: white; }
A:link { color: red; }
A.external:link { color: green; }
A:visited { color: purple; }
A.external:visited { color: aqua; }
A:active { color: blue; }
<A CLASS= external HREF="...">...</A>
<A HREF="...">...</A>
Copyright © XTR Systems, LLC
Specifying Element Colors
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Each element can have foreground and
background colors specified
• It is also possible to specify "transparent" to
allow the BODY background to show
• Transparent is the default
H1 { color: black; background-color: white; }
H1 { color: black; background-color: transparent; }
Copyright © XTR Systems, LLC
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
Example
BODY {
background-color: aqua;
color: black;
}
A{
background-color: transparent;
color: blue;
}
H1 {
background-color: rgb(255, 100%, 255);
color: rgb(100%, 0%, 0%);
}
Copyright © XTR Systems, LLC
Personal Web Pages
CSU - DCE 0715 - Introduction to CSS
CSS Colors - Fort Collins, CO
• Apply these methods to your Web Site
• Modify your style sheet to apply each method
to some element
• Verify that each method works in your hands
Copyright © XTR Systems, LLC