Upload
alfred-gibbs
View
217
Download
0
Embed Size (px)
Citation preview
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
CascadingStyle Sheets -
Specifying Color
Instructor: Joseph DiVerdi, Ph.D., M.B.A.
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Colors
• 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
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Colors
• 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
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Named Colors
• Named Color Choices:
aqua black blue fuschia
gray green lime maroon
navy olive purple red
silver teal white yellow
• The Original Windows VGA Color Set
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Named Colors
• 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
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
• Several equivalent number systems– Percentage: 0-100%– Decimal Number: 0-255– Hexadecimal Number: 00-FF– Short Hexadecimal Number: 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
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
• Percentages:– 0-100% Red– 0-100% Green– 0-100% Blue
• Syntax:H1 { color: rgb( 20%, 20%, 20%); } /* dark gray */H2 { color: rgb(100%, 0%, 0%); } /* red */H3 { color: rgb(100%, 40%, 0%); } /* orange */H4 { color: rgb(100%, 100%, 0%); } /* yellow */H5 { color: rgb( 0%, 100%, 0%); } /* green */H6 { color: rgb(100%, 0%, 100%); } /* purple */
H6 { color: rgb(rrr, ggg, bbb); }
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
• Decimal Numbers:– 0-255 Red– 0-255 Green– 0-255 Blue
• Syntax:H1 { color: rgb( 51, 51, 51); } /* dark gray */H2 { color: rgb(255, 0, 0); } /* red */H3 { color: rgb(255, 102, 0); } /* orange */H4 { color: rgb(255, 255, 0); } /* yellow */H5 { color: rgb( 0, 255, 0); } /* green */H6 { color: rgb(255, 0, 255); } /* purple */
H6 { color: rgb(rrr, ggg, bbb); }
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
• Hexadecimal Numbers:– 00-FF Red– 00-FF Green– 00-FF Blue
• Syntax:H1 { color: #333333; } /* dark gray */H2 { color: #FF0000; } /* red */H3 { color: #FF6600; } /* orange */H4 { color: #FFFF00; } /* yellow */H5 { color: #00FF00; } /* green */H6 { color: #FF00FF; } /* purple */
H1 { color: #rrggbb; }
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
RGB Colors
• Short Hexadecimal Numbers:– 0-F Red– 0-F Green– 0-F Blue
• Syntax:H1 { color: #333; } /* dark gray */H2 { color: #F00; } /* red */H3 { color: #F60; } /* orange */H4 { color: #FF0; } /* yellow */H5 { color: #0F0; } /* green */H6 { color: #F0F; } /* purple */
H1 { color: #rgb; }
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Color Problems
• 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% 0, 20, 40, 60, 80, 100%
– multiples of 5110 0, 51, 102, 153, 204, 255
– multiples of 3316 00, 33, 66, 99, CC, FF
– multiples of 316 0, 3, 6, 9, C, F
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Color Effected Properties
• background-color sets background color of element
• border-color sets foreground color of overall border of
element• color sets foreground color of
element
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Body Colors
• 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
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Body Colors
BODY {
color: black;
background-color: white;
}
A:LINK {
color: red;
}
A:VISITED {
color: purple;
}
A:ACTIVE {
color: blue;
}
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Body Colors
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>
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Specifying Element Colors
• 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; }
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
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%);
}
CSU - DCE 0715 - Introduction to CSSCSS Colors - Fort Collins, CO
Copyright © XTR Systems, LLC
Personal Web Pages
• 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