Chapter 13 Colors & backgrounds

What can you do with color? Three common places where you specify color Text color .box { color: blue; } Background color .box { background-color: darkgray; } Borders color .box { border: 1px solid red; } Context: <div class=“box> Here is some content that will be in a box with blue text, darkgray background and a red border </div>

Specifying colors Five ways to specify color Color name color: purple; Hexadecimal 3 digit (#RGB) color: #F08; Hexadecimal 6 digit (#RRGGBB) color: #F3008d rgb function color: rgb(255, 0, 128); rgba function color: rgb(255, 0, 128, 0.4);

HEXADECIMAL HEX DECIMAL F 15 E 14 D 13 C 12 B 11 A 10 9 8 7 6 5 4 3 2 HEXADECIMAL color: #000 Min color (black) color: #FFF Max color (white) color: #0F0 Max green color: #00F Max blue color: #FF0 Max yellow color: #CCC Light gray color: #003 Dark blue color: #CCF Light blue color: #000 Min color (black) color: #FFF Max color (white) color: #0F0 Max green color: #00F Max blue color: #FF0 Max yellow color: #CCC Light gray color: #003 Dark blue color: #CCF Light blue

Color depth 16 values of red X 16 values of green X 16 values of blue X --------------------------------------- 4096 different colors

HEXADECIMAL HEX DECIMAL F0 240 E0 224 D0 208 C0 192 B0 176 A0 160 90 144 80 128 70 112 60 96 50 40 64 33 48 20 32 10 16 00 HEXADECIMAL color: #000000 Min color color: #FFFFFF Max color color: #00FF00 Max green color: #0000FF Max blue color: #FFFF00 Max yellow color: #C0C0C0 Light gray color: #000030 Dark blue color: #C0C0F0 Light blue color: #000 Min color (black) color: #FFF Max color (white) color: #0F0 Max green color: #00F Max blue color: #FF0 Max yellow color: #CCC Light gray color: #003 Dark blue color: #CCF Light blue

Color depth 256 values of red X 256 values of green X 256 values of blue X --------------------------------------- 16,777,216 different colors

Best way to specify color* *Dr. B’s opinion Use rgb with percentages: rgb(0%, 50%, 25%) Why? Intuitive and minimal memorization needed Don’t need to remember hexadecimal scale Don’t need to remember 0 – 255 scale Q: Why do you still need to study the other methods?

Pseudo-Classes link visited focus hover active color of unvisited link visited color of visited link focus color when an link is selected hover color if mouse is over the link active color when a link is selected and it is loading the page Must be in that order! “LoVe For Hell’s Angels”

Pseudo-Classes (cont.) first-line The first line of text first-letter The first letter in a specified element [attribute selectors] Select an element based on attribute input[type=text]

Pseudo-Classes (cont.)

Background Images background-image background-repeat background-image: url(location of image); default is to start in upper left hand corner and tile to fill page background-repeat repeat, repeat-x, repeat-y, no-repeat directs the amount and direction of tiling background-position measurement, left, center, right, top, bottom background-position: left bottom; background-position: 15% 100%; background-attachment scroll, fixed