Besides elements, you can create selectors using classes. Here's an example. In this case, I'll create a class named RED that specifies that elements it's applied to must use a foreground (text) color of red and a background color of pink; to define a general class such as RED , you must preface it with a dot ( . ), as in .RED : Listing ch09_06.css 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} To apply this class to an individual element, such as the <TITLE> element in our XML document, I can add a CLASS attribute to that element, assuming that the browser I'm using can understand that attribute: Listing ch09_07.xml <?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_06.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> Browsers such as Internet Explorer understand the CLASS attribute, so you can see what this document looks like in Figure 9-5. Figure 9-5. Using style classes.
Note that if you want to make this a valid document, you must declare the CLASS attribute. That might look like this in a DTD: <!ELEMENT TITLE (CDATA)*> <!ATTLIST TITLE CLASS CDATA #IMPLIED> You can also create classes that apply only to specific elements. For example, here's how I style the first paragraph in a document to add some space before that paragraph, creating a class named TOP that applies only to <P> elements. I specify this by calling this class P.TOP (note that general classes such as RED apply to all elements, which is why you declare them as .RED ): Listing ch09_08.css 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} P.TOP {display: block; margin-top: 30} Now I can use this new class with the first paragraph in the document: Listing ch09_09.xml <?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_08.css"?> <DOCUMENT> <TITLE>The Meditations</TITLE> <AUTHOR>By Marcus Aurelius</AUTHOR> <SECTION>Book One</SECTION> <P CLASS="TOP"> 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> You can see the results in Figure 9-6. Figure 9-6. Styling just one paragraph.
|