1. Chapter 13
Colors & backgrounds

2. 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>

3. 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);

5. 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

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

7. 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: # Min color
color: #FFFFFF Max color
color: #00FF00 Max green
color: #0000FF Max blue
color: #FFFF00 Max yellow
color: #C0C0C0 Light gray
color: # 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

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

10. 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?

11. 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”

12. 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]

13. Pseudo-Classes (cont.)

14. 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