13.07.2015 Views

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Part I: The BasicsThis rule applies to any element contained in the document. I have specified that each elementshould have black text, a red background, and a thin, solid orange border around the element. In thisexample, black, red, and orange are color keywords, so a color keyword is simply the name of the color.In <strong>CSS</strong> 3, 147 colors are named. Browser support <strong>for</strong> these colors is very good. I have found only a singlecolor not supported by IE 6. That color is lightgray, spelled with an a; however, the browser does supportlightgrey, spelled with an e. This is an obscure bug that arises because Internet Explorer allowsonly the British spelling of grey and not the American English gray. The <strong>CSS</strong> specification supports bothspellings of gray. Firefox, Opera, and Safari support all 147 named colors.A complete table of <strong>CSS</strong>-supported color keywords is available in Appendix C.RGB ColorsRGB stands <strong>for</strong> Red, Green, and Blue. These are the primary colors used to display the color of pixels ona computer monitor. When you use these three colors in various combinations, it is possible to createevery color of the rainbow. This is done through different colored lights either overlapping each other orappearing side by side in different intensities to display color. RGB is also known as luminous or additivecolor. Luminous means that RGB uses light in varying intensities to create color, and additive meanscolors are added to one another to produce the colors of the spectrum. Many computer monitors arecapable of displaying millions of colors: 16,777,216 colors, in fact. <strong>CSS</strong> RGB color is specified using aspecial three-number syntax, with each one representing a color channel. This first number is red, thesecond green, and the third blue:body {background-color: rgb(128, 128, 128);}This produces the same color as the <strong>CSS</strong> color keyword gray. Equal amounts of all three channels <strong>for</strong>ma variation of gray, where 0, 0, 0 is black and 255, 255, 255 is white.Here’s another example:body {background-color: rgb(135, 206, 235);}This produces the same color as the <strong>CSS</strong> color keyword skyblue. The number 135 refers to the red channel,206 to the green channel, and 235 to the blue channel. RGB values may also be represented usingpercentages:body {background-color: rgb(50%, 50%, 50%);}This also produces the same color as the <strong>CSS</strong> color keyword gray.<strong>CSS</strong> 3 is to introduce one more variation on the RGB scheme, with RGBA. This specification includesan alpha channel, which is used to make an element transparent. The alpha channel of RGBA is specifiedin the same manner as regular RGB with the A indicating how transparent the color is, with 0being fully opaque, and 255 being fully transparent. No browser supports the RGBA specification yet.48

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!