CSU - DCE Introduction to CSS CSS Colors - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Specifying Color Instructor: Joseph DiVerdi, Ph.D., M.B.A.

CSU - DCE Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS Colors - Fort Collins, CO Copyright © XTR Systems, LLC Named Colors Named Color Choices: aquablackbluefuschia graygreenlimemaroon navyolivepurplered silvertealwhiteyellow The Original Windows VGA Color Set

CSU - DCE Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS Colors - Fort Collins, CO Copyright © XTR Systems, LLC RGB Colors

CSU - DCE Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS 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 , 51, 102, 153, 204, 255 –multiples of , 33, 66, 99, CC, FF –multiples of , 3, 6, 9, C, F

CSU - DCE Introduction to CSS CSS Colors - Fort Collins, CO Copyright © XTR Systems, LLC Color Effected Properties background-colorsets background color of element border-colorsets foreground color of overall border of element colorsets foreground color of element

CSU - DCE Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS 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; }...

CSU - DCE Introduction to CSS CSS 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 Introduction to CSS CSS 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 Introduction to CSS CSS 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