csu - dce 0715 - introduction to css css colors - fort collins, co copyright © xtr systems, llc...

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.



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



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



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



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



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



RGB Colors



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); }



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); }



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; }



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; }



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



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



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




BODY {

color: black;

background-color: white;

}

A:LINK {

color: red;

}

A:VISITED {

color: purple;

}

A:ACTIVE {

color: blue;

}




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>



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; }



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%);

}



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

csu - dce 0715 - introduction to css css colors - fort collins, co copyright © xtr systems, llc...

Documents