Selecting Elements in Style Sheet Rules

This chapter is dedicated to understanding how to create style sheets. After going through the mechanics, we'll see a lot of examples at work and then spend some time with the actual CSS specification.

I'll start by taking a look at how to create selectors, which indicate the element or elements to which you want to attach a style rule. In the style sheet we've already seen, style.css, the selectors are of the simplest kind and select just one element by giving the name of that element:

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}

For example, here I'm applying this style specification to the <TITLE> element:

{display: block; font-size: 24pt; font-weight: bold;
text-align: center; text-decoration: underline}

I'm applying this one to the <AUTHOR> element:

{display: block; font-size: 18pt; font-weight: bold;
text-align: center}

As you can see, one type of selector just lists the element that you want to style. However, you can create many other types of selectors, such as grouping elements, as described in the next section.

Grouping Elements in Selectors

Another way of creating an element selector in a style rule is to list a number of elements, separated by commas. The same rule applies to the whole group of elements, as in this case, where I'm styling the <TITLE> and <AUTHOR> elements the same way in style.css:

TITLE, AUTHOR {display: block; font-size: 24pt; font-weight: bold;
text-align: center; text-decoration: underline}
SECTION {display: block; font-size: 16pt; font-weight: bold;
text-align: center; font-style: italic}
P {display: block; margin-top: 10}

You can see this style sheet applied to the XML document that we've been using in Figure 9.3. As you see in that figure, the <TITLE> and <AUTHOR> elements are indeed styled the same way in that figure.

Creating Pseudo-Elements

Besides using elements as selectors for rules, you can also use pseudo-elements. There are two pseudo-elements in CSS1: first-letter, which refers to the first letter of a block of text, and first-line, which refers to the block's first line. Two more pseudo-elements were introduced in CSS2—before and after, which let you specify what should go immediately before and after elements. You use these pseudo-elements like this: P:first-letter to refer to the first letter of a <P> element.

Here's an example. In this case, I'm styling the first letter of <P> elements to be larger than the rest of the text and to be a "drop cap," which means that it will appear lower than the rest of the text on the first line. (I'll specify that the top of the first letter should align with the top of the rest of the text on the first line with vertical-align: text-top, and we'll see how this works later in the chapter.)

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:first-letter {font-size: 18pt; float: left; vertical-align: text-top}

These pseudo-elements are not implemented in Internet Explorer, but they are implemented in the preview version of Netscape Navigator 6. You can see this style sheet applied to the XML document in Figure 9.4.

You can also use the before and after pseudo-elements to specify what comes before or after another element. In this case, I'm adding a line of hyphens and asterisks after the <P> element. (The A refers to line breaks—A is the hexadecimal digit for 10 decimal, and that's the UTF-8 code for a line feed character.)

P:after {content: "A-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*A"}

Classes

Besides elements, you can also create selectors using classes. Here's an example. In this case, I'll create a class named RED to specify that elements to which it's applied 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 .RED:

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:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="style.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.

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 to only <P> elements, which I specify 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.)

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:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="style.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.

Creating Pseudo-Classes

CSS also defines a number of pseudo-classes. Here's a sampling of pseudo-classes, which can act as selectors:

Selecting by ID

Another way of selecting elements is by their ID values, which you set with an ID attribute. To create a selector that targets elements with a certain ID, you use the syntax ELEMENT_NAME#ID_VALUE. For example, here's how I create a rule for <P> elements with the ID value "TOP":

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}

To give an element the ID "TOP", I can add an ID attribute like this, assuming that the browser can understand this attribute:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<DOCUMENT>
    <TITLE>The Meditations</TITLE>
    <AUTHOR>By Marcus Aurelius</AUTHOR>
    <SECTION>Book One</SECTION>
    <P ID="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>

Internet Explorer lets you use ID attributes with XML elements, so selecting by ID like this gives you the same results that you see in Figure 9.6. Note that, as with the CLASS attribute, you must declare the ID attribute if you want to use it; such a declaration might look like this in a DTD (note that I'm declaring this attribute of type ID):

<!ELEMENT P (#PCDATA)>
<!ATTLIST P ID ID #REQUIRED>

Using Contextual Selectors

You can use contextual selectors to specify the style of elements that appear within other elements. For example, you might want an element to appear one way when it's by itself, but another way when enclosed in another element. Here's how that might look—in this case, I'm specifying that when used inside <P> elements, the <UL> element must underline its enclosed text:

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 UL {text-decoration: underline}

Now I can use the <UL> element inside a <P> element:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<DOCUMENT>
    <TITLE>The Meditations</TITLE>
    <AUTHOR>By Marcus Aurelius</AUTHOR>
    <SECTION>Book One</SECTION>
    <P>
        From my grandfather, <UL>Verus</UL>, 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>

And you can see the results in Figure 9.7, where you can see the <UL> tag doing its job on the name Verus in the first sentence.

Using Inline Styles

As mentioned earlier, you can also create inline styles using the STYLE attribute, if the browser that you're using understands that attribute in XML documents. Using the STYLE attribute, you can specify a rule directly. For example, here's how I style the <UL> element used in the previous example using the STYLE attribute:

<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<DOCUMENT>
    <TITLE>The Meditations</TITLE>
    <AUTHOR>By Marcus Aurelius</AUTHOR>
    <SECTION>Book One</SECTION>
    <P>
        From my grandfather,
        <UL STYLE="text-decoration: underline">Verus</UL>,
        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>

This document gives the same results that you see in Figure 9.7. Note that if you want to make this document valid, you'll have to declare the STYLE attribute, which might look like this in a DTD:

<!ELEMENT UL (CDATA)*>
<!ATTLIST UL STYLE CDATA #IMPLIED>

Style purists recommend that you stay away from the STYLE attribute because using this attribute means that your style declarations will be all over the document, not just in a centralized style sheet. However, this attribute is certainly recognized by browsers, so the choice is up to you.

Using Inheritance

You might have noticed that although the <UL> element in the previous examples specified only one aspect of the element's style—that is, that text should be underlined (by using this rule: UL {text-decoration: underline})—the underlined text appeared in the same font as the surrounding text, as you see in Figure 9.7. The reason is that styled elements inherit the styles of their parent elements; in this case, the <UL> element's parent element is <P>:

<?xml-stylesheet type="text/css" href="style.css"?>
<DOCUMENT>
    <TITLE>The Meditations</TITLE>
    <AUTHOR>By Marcus Aurelius</AUTHOR>
    <SECTION>Book One</SECTION>
    <P>
        From my grandfather, <UL>Verus</UL>, 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>

Inheritance is very useful: As you see, you don't have to specify all aspects of a child element's style if you want it to retain those aspects from the parent element. When you want to override some aspects of a style from the parent's style, you just need to define them in a rule for the child element.

Because style rules can inherit other rules, the order in which rules are applied becomes important; this ordering process is called a style cascade, from which cascading style sheets take their name.

Understanding Cascades

You can use multiple style sheets for one XML document in several ways because there are multiple ways of attaching style sheets. For example, you can use the <?xml-stylesheet?> processing instruction, and you can use the @import directive. This directive will import a style sheet:

@import url(http://www.starpowder.com/style.css);

In a style sheet to import another style sheet, the reader of a document may use browser-specific techniques to use style sheets; in fact, the reader's software can even supply default style sheets.

In addition, the author or reader of a document can use another declaration, the !important declaration, to specify that some aspect of a style should not be overridden by inheritance. For example, this declaration specifies that it's important for <UL> elements color their text red:

UL {color: red !important text-decoration: underline}).

When multiple style rules are involved, what order are they applied in? Generally speaking, the most specific rules are the ones that are applied if a conflict arises. For example, rules that you apply by ID are preferred to those applied by class. However, rules applied by class are preferred to those applied to all elements of the same type. If no selector fits the situation, the element will inherit styles from its parent; if there is no parent, a default style is used.

If there's a conflict, here's the order in which the rules are applied: rules that the document author specified as important are preferred, followed by rules that the reader specified as important, followed by general author rules (that is, those not marked as important), followed by general reader rules, and followed by the most recent rule in the style sheet(s) that applies.