XML —

Getting to Know CSS

You learned in the previous tutorial that CSS allows you to format XML content so that it can be displayed in web browsers. CSS first came about as a means of improving the presentation of HTML content, but it turns out that it also works quite well with XML content. CSS is itself a language that defines style constructs such as fonts, colors, and positioning, which are used to describe how data is displayed. CSS styles are stored in style sheets, which contain style rules that apply styles to elements of a given type. Style sheet rules are usually placed in external style sheet documents with the filename extension .css.

The "cascading" part of CSS refers to the manner in which style sheet rules are applied to elements in an XML (or HTML) document. More specifically, styles in CSS form a hierarchy where more specific styles override more general styles. It is the responsibility of CSS to determine the precedence of style rules according to this hierarchy, which gives the rules a cascading effect. In some ways, you can think of the cascading mechanism in CSS as being similar to genetic inheritance, where general traits are passed on from a parent, but more specific traits are entirely unique to an individual; base style rules are applied throughout a style sheet but can be overridden by more specific style rules.

Like many web-related technologies, CSS has undergone revisions since its original release. The original version of CSS was known as CSS1 and included basic support for formatting web page content. CSS2 built on the feature set of CSS1 by adding powerful new features, such as the absolute positioning of content. There is a CSS3 in the works, but popular web browsers only support CSS1 and CSS2. All of the CSS example code in this tutorial is compliant with CSS1 and CSS2, which means you should have no problem using it with popular web browsers.

The application of CSS style rules is determined by selectors, which are CSS constructs that identify portions of an XML document. A selector establishes the link between a document and a style or set of styles. There are three kinds of selectors used in CSS:

  • Element type Selects an element of a given type

  • Attribute class Selects an element of a certain class that is identified by a special attribute

  • Attribute ID Selects an element with an ID that is identified by a special attribute

An element type selector selects an element of a given type and applies a style or set of styles to it. This is the simplest approach to using CSS because there is a simple one-to-one mapping between element types and styles. As an example, you could use an element type selector to define a set of styles dictating the margins and font for an element named message in an XML document. Any messages marked up with this element would be displayed according to the styles defined in the style rule with the message element type selector. Following is an example of such a style rule:

message {
  display:block;
  margin-bottom:5px;
  font-family:Courier;
  font-size:14pt;
}

This example uses an element type selector to select the message element and apply a series of styles to it. The end result is that all elements of type message appearing in a document will have a 5-pixel margin and will be rendered in a 14-point Courier font. Following is an example of how you might mark up a message in an XML document:

<message>
It's very lonely here  I really miss you.
</message>

By the Way

As you know, there is no standard message element in XML; in fact, there are no standard elements of any kind in XML. This example simply demonstrates how you would apply a style to an element that stores a text message. Notice that the XML code says nothing about how the element is to be displayed this is relegated to the CSS style rule.


An attribute class selector is a little more specific than the element type selector in that it allows you to apply styles to elements based upon an attribute. In addition to applying styles based upon a type of element, CSS uses attribute selectors to look for specific elements containing a special attribute with a certain value. This attribute is named class and is capable of having virtually any value you desire. The premise of the class attribute is that you use it to define classes of styles within a given element type. Following is an example of how you might define a special class of messages that are urgent:

message.urgent {
  display:block;
  margin-bottom:5px;
  font-family:Courier;
  font-size:14pt;
  font-style:italic;
  color:red;
}

The class name in this example is urgent, which is identified by separating it from the element type with a period (.). Following is an example of how you would mark up a paragraph corresponding to this style rule:

<message>
The sky is falling!
</message>

As you can see, the urgent class name is provided as the value of the class attribute of the <message> tag. This is the standard approach to using CSS attribute class selectors in XML documents. However, there is one other option when it comes to using CSS selectors: attribute ID selectors.

For the utmost in styling flexibility, you can use an attribute ID selector, which establishes a style rule that can be applied to any element regardless of its type. Like attribute class selectors, attribute ID selectors rely on a special attribute. However, in this case the attribute is named id, and it isn't associated with any particular element type. Following is an example of creating a style rule using an attribute ID selector:

#groovy {
  color:green;
  font-family:Times;
  font-style:italic;
  font-weight:bold;
}

This example creates a style rule with an attribute ID selector named groovy; the pound sign (#) is used to indicate that this is an attribute ID selector. To use this style, you simply reference it as a value of the id attribute in any element type. Following is an example of how you might use the style with a message element:

<message >
I'm feeling pretty groovy!
</message>

Unlike the urgent attribute class selector, which is specific to the message element, the groovy attribute ID selector can be used with any element, in which case the element will be displayed with the groovy styles. For example, following is an example of how the groovy selector can be used with an element named note:

<note >
Pick up leisure suit from laundry.
</note>

Although selectors play an important role in determining how styles are applied to documents, they are only a part of the CSS equation. The other major part of style sheet syntax is the style declaration, which is used to specify a style property and its associated value. You've already seen style declarations in the preceding selector examples, but now it's time to learn how they work. Style declarations in CSS are similar in some ways to XML attributes in that they assign a value to a property. CSS supports a wide range of style properties that can be set to establish the style of a given style rule. Together with selectors, style declarations comprise the syntax of a CSS style rule, which follows:

Selector {
  Property1:Value1;
  Property2:Value2;
  ...
}

Following is the message style rule that you saw earlier, which helps to reveal the structure of style declarations:

message {
  display:block;
  margin-bottom:5px;
  font-family:Courier;
  font-size:14pt;
}

The message example style rule includes four style properties: display, margin-bottom, font-family, and font-size. Each of these properties has a value associated with it that together comprise the style rule of the message element. Notice that each style property and value is separated by a colon (:), whereas the property/value pairs are separated by semicolons (;).

By the Way

Although semicolons are used to separate styles, not terminate them, it's generally a good practice to terminate the last property/value pair in a style rule with a semicolon so that if you ever decide to add additional styles you will already have a separator in place.


The message example showed how to create a style rule for a single element. It is also possible to create a style rule for multiple elements, in which case the style rule applies to all of the elements. To establish a style rule for multiple elements, you create the style declaration and separate the element types with commas (,) in a single style rule:

ssnum, phonenum, email {
  display:none;
}

In this example, the value none is set in the display style property for the ssnum, phonenum, and email elements. The idea behind this example is that these elements contain sensitive information that you wouldn't want displayed; setting the display property to none results in the elements not being displayed.

A CSS Style Primer

You now have a basic knowledge of CSS style sheets and how they are based upon style rules that describe the appearance of elements in XML documents. It's now worth taking time to get you acquainted with some of the more commonly used style properties in CSS. CSS includes a variety of style properties that are used to control fonts, colors, alignment, and margins, to name just a few facets of XML content styling. The style properties in CSS can be broadly grouped into two major categories:

  • Layout properties

  • Formatting properties

Layout properties consist of properties that impact the positioning of XML content. For example, layout properties allow you to control the width, height margin, padding, and alignment of content and even go so far as to allow you to place content at exact positions on a page.

Layout Properties

One of the most important layout properties is the display property, which describes how an element is displayed with respect to other elements. There are four possible values for the display property:

  • block The element is displayed on a new line, as in a new paragraph

  • list-item The element is displayed on a new line with a list-item mark (bullet) next to it

  • inline The element is displayed inline with the current paragraph

  • none The element is not displayed

It's easier to understand the display property if you visualize each element in an XML document occupying a rectangular area when displayed. The display property controls the manner in which this rectangular area is displayed. For example, the block value results in the element being placed on a new line by itself, whereas the inline value places the element next to the content immediately preceding it. The display property is one of the few style properties that you will define for most style rules. Following is an example of how to set the display property:

display:block;

The display property relies on a concept known as relative positioning, which means that elements are positioned relative to the location of other elements on a page. CSS also supports absolute positioning, which allows you to place an element at an exact location on a page, independent of other elements. You learn more about both of these types of positioning later in the tutorial.

You control the size of the rectangular area for an element with the width and height attributes. Like many size-related CSS properties, width and height property values can be specified in several different units of measurement:

  • in Inches

  • cm Centimeters

  • mm Millimeters

  • px Pixels

  • pt Points

These unit types are used immediately after the value of a measurement in a style sheet. You can mix and match units however you choose within a style sheet, but it's generally a good idea to be consistent across a set of similar style properties. For example, you might want to stick with points for font properties or pixels for dimensions. Following is an example of setting the width of an element using pixel units:

width:200px;

Formatting Properties

CSS formatting properties are used to control the appearance of XML content, as opposed to controlling the physical position of the content. One of the most commonly used formatting properties is the border property, which is used to establish a visible boundary around an element with a box or partial box. The following border properties provide a means of describing the borders of an element:

  • border-width The width of the border edge

  • border-color The color of the border edge

  • border-style The style of the border edge

  • border-left The left side of the border

  • border-right The right side of the border

  • border-top The top of the border

  • border-bottom The bottom of the border

  • border All the border sides

The border-width property is used to establish the width of the border edge and is often expressed in pixels, as the following code demonstrates:

border-width:5px;

The border-color and border-style properties are used to set the border color and style, respectively. Following is an example of how these two properties are set:

border-color:blue;
border-style:dotted;

The border-style property can be set to any of the following values:

  • solid A single-line border

  • double A double-line border

  • dashed A dashed border

  • dotted A dotted border

  • groove A border with a groove appearance

  • ridge A border with a ridge appearance

  • inset A border with an inset appearance

  • outset A border with an outset appearance

  • none No border

The border-style property values are fairly self-explanatory; the solid and double styles are the most common. The default value of the border-style property is none, which is why elements don't have a border unless you set the border property to a different style.

The border-left, border-right, border-top, and border-bottom properties allow you to set the border for each side of an element individually. If you want a border to appear the same on all four sides, you can use the single border property and express the border styles more concisely. Following is an example of using the border property to set a border that consists of two red lines that are a total of 10 pixels in width:

border:10px double red;

The color of an element's border can be set with the border-color property, and the color of the inner region of an element can be set using the color and background-color properties. The color property sets the color of text in an element, and the background-color property sets the color of the background behind the text. Following is an example of setting both color properties to predefined colors:

color:black;
background-color:orange;

You can also assign custom colors to these properties by specifying the colors as hexadecimal RGB (Red Green Blue) values. Following is an example of such assignments:

background-color:#999999;
color:rgb(0,0,255);

In addition to setting the color of XML content and its associated background, you can also control the alignment and indentation associated with the content. This is accomplished with the text-align and text-indent properties, as the following code demonstrates:

text-align:center;
text-indent:12px;

After you have an element properly aligned and indented, you might be interested in setting its font. The following CSS font properties are used to set the various parameters associated with fonts:

  • font-family The family of the font

  • font-size The size of the font

  • font-style The style of the font (normal or italic)

  • font-weight The weight of the font (light, medium, bold, and so on)

The font-family property specifies a prioritized list of font family names. A prioritized list is used instead of a single value to provide alternatives in case a font isn't available on a given system. The font-size property specifies the size of the font using a unit of measurement, usually points. Finally, the font-style property sets the style of the font, whereas the font-weight property sets the weight of the font. Following is an example of setting these font properties:

font-family: Arial, sans-serif;
font-size: 36pt;
font-style: italic;
font-weight: medium;

Style rules wouldn't be of much use if you didn't have a means of wiring them to an XML document in order to style the document's content. Let's move on and find out how this is done.