The text of an element can be styled in terms of the color, the font size, the heaviness of the font, and the typeface to use. Multiple options can be specified for fonts, to allow graceful degradation in situations where a desired font is not installed on a client machine. To style a paragraph in gray, terminal-style text, we could define a styling:

.robotic{

font-size: 14pt;

font-family: courier new, courier, monospace;

font-weight: bold;

color: gray;

}

Or, more concisely, we could amalgamate the font elements:

.robotic{

font: bold 14pt courier new, courier, monospace;

color: gray;

}

In either case, the multiple styling properties are written in a key-value pair notation, separated by semicolons. CSS can define the layout and size (often referred to as the box-model) of an element, by specifying margins and padding elements, either for all four sides or for each side individually:

.padded{ padding: 4px; }

.eccentricPadded {

padding-bottom: 8px;

padding-top: 2px;

padding-left: 2px;

padding-right: 16px;

margin: 1px;

}

The dimensions of an element can be specified by the width and height properties. The position of an element can be specified as either absolute or relative. Absolutely positioned elements can be positioned on the page by setting the top and left properties, whereas relatively positioned elements will flow with the rest of the page.

Licensed to jonathan zheng

40

CHAPTER 2

First steps with Ajax

Background colors can be set to elements using the background-color property. In addition, a background image can be set, using the background-image property:

.titlebar{ background-image: url(images/topbar.png); }

Elements can be hidden from view by setting either visibility:hidden or display:none. In the former case, the item will still occupy space on the page, if relatively positioned, whereas in the latter case, it won’t.

This covers the basic styling properties required to construct user interfaces for Ajax applications using CSS. In the following section, we’ll look at an example of putting CSS into practice.

2.3.3 A simple CSS example

We’ve raced through the core concepts of Cascading Style Sheets. Let’s try putting them into practice now. CSS can be used to create elegant graphic design, but in an Ajax application, we’re often more concerned with creating user interfaces that mimic desktop widgets. As a simple example of this type of CSS use, figure 2.2 shows a folder widget styled using CSS.

CSS performs two roles in creating the widget that we see on the right in figure 2.2. Let’s look at each of them in turn.

Using CSS for layout

The first job is the positioning of the elements. The outermost element, representing the window as a whole, is assigned an absolute position: Figure 2.2 Using CSS to style a user interface widget. Both screenshots were generated from identical HTML, with only the stylesheets altered. The stylesheet used on the left retains only the positioning elements, whereas the stylesheet used to render the right adds in the decorative elements, such as colors and images. Licensed to jonathan zheng

Defining look and feel using CSS

41

div.window{

position: absolute;

overflow: auto;

margin: 8px;

padding: 0px;

width: 420px;

height: 280px;

}

Within the content area, the icons are styled using the float property so as to flow within the confines of their parent element, wrapping around to a new line where necessary:

div.item{

position: relative;

height: 64px;

width: 56px;

float: left;

padding: 0px;

margin: 8px;

}

The itemName element, which is nested inside the item element, has the text positioned below the icon by setting an upper margin as large as the icon graphic: div.item div.itemName{