These are the properties you use to set color and backgrounds:
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.cssDOCUMENT {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.
Although dozens of colors are predefined in most browsers, the CSS standards define only 16 colors:
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} |