Setting Colors and Backgrounds

These are the properties you use to set color and backgrounds:

  • color Sets the foreground (text) color.

  • background-color Sets the background color.

  • background-image Sets the background image.

  • background-repeat Specifies whether the background image should be tiled. You can set this to repeat , repeat-x , repeat-y , or no-repeat .

  • background-attachment Specifies whether the background scrolls with the rest of the document.

  • background-position Sets the initial position of the background.

You also can use a background shorthand property to set the background color , image , repeat , attachment , and position all at once (list those values in order). I'll cover how to use this shorthand property at the end of the chapter.

In this next example, I'm styling both the background and the foreground (that is, the text color) of a document. In this case, I'm setting the background color of the <DOCUMENT> element to coral. Note that because all the other elements in the document are children of this element, they'll all inherit this background colorexcept for the <P> element, in which I'm specifically setting the background to white and coloring the text blue:

Listing ch09_15.css
 DOCUMENT {background-color: coral} TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; background-color: white; color: blue} 

You can see the results in Figure 9-9.

Figure 9-9. Using font properties.

graphics/09fig09.gif

Although dozens of colors are predefined in most browsers, the CSS standards define only 16 colors:

  • Aqua

  • Black

  • Blue

  • Fuchsia

  • Gray

  • Green

  • Lime

  • Maroon

  • Navy

  • Olive

  • Purple

  • Red

  • Silver

  • Teal

  • White

  • Yellow

In this example, I used the predefined colors coral, blue, and white, but you can also define your own colors as color triplets: # rrggbb . Here, rr , gg , and bb are two-digit hexadecimal values that you use to specify the red, green, and blue components of a color, just as you do in HTML. For example, white is #ffffff , black is #000000 , pure blue is #0000ff , pure red is #ff0000 , pink is #ffcccc , orange is #ffcc00 , and coral is #ff7f50 . (You can find good selections of color values online, along with the corresponding colors; see http://www.ecn.bgu.edu/users/gallery/ webwork /11_hexcolors.html for an example.) Using color triplets, here's what the previous stylesheet looks like:

 DOCUMENT {background-color: #ff7f50}  TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; background-color: #ffffff; color: #0000ff} 

Here's another example that we saw in the beginning of this chapter, in which I gave the <TITLE> element a pink background and red foreground:

 <?xml version="1.0" standalone="yes"?>  <?xml-stylesheet type="text/css" href="ch09_02.css"?> <DOCUMENT>  <TITLE CLASS="RED">The Meditations</TITLE>  <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT> 

The RED class was defined this way:

 TITLE {display: block; font-size: 24pt; font-weight: bold;  text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}  .RED {color:red; background-color: pink}  


Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net