CSS

Using XHTML with CSS to render Ajax response data adds layers of separation to our code, which allows us to update specific areas of the application without ever touching others. Now that we know how to render the data as XHTML by adding it to div elements with JavaScript, we can begin to add design to the page. We will do this by creating CSS classes that will define individual element styles and, ultimately, the entire page layout. The first step in using CSS in our HTML page is importing the CSS files that will define the styles for the page elements. Let's first create a new file and name it layout.css. Building on the examples in Chapter 2, "The Request," and Chapter 3, we will add the following code to the head of our index HTML file in order to import the CSS:

<link href="css/layout.css" rel="stylesheet" type="text/css" />

Because we have already identified and populated the HTML elements in our page, we know what elements we will need to create styles for. Before we create the styles, we must visualize how we want the page layout to look. If it does not come easy to mentally visualize a page layout, we could create wire frames or mockups in a graphics editor. Either way, after we have a concept we can begin to arrange the elements through CSS. The look we are going for with this example is a grid of mail data, with section headers and data that pertains to the sections displayed underneath the headers in sets of rows. Figure 4.1 shows the final layout of the data within this grid structure.

Figure 4.1. The final grid layout for response data after CSS has been applied to the HTML elements.

In our new CSS file, we will create four classes: body, header, item, and icon. These are the four elements we have already added to the page through our response methods in the ajax.js file from the previous section. Starting with the body div, which was added to the page by default, we will create a class with a width of 570px. This width will compensate for the margin we will add around each of the items in the grid, but we will talk more about this after we have completed adding the header and item classes. The following is the code that creates the body class:

#body {     width: 570px; }

Next, we will create a class for the header div element. Looking back at the XML and JSON files we are requesting, we can see there are three headers and three items. These headers and items should sit next to each other to form rows of data. To accomplish this, we must start by adding a float attribute with a value of left. This will left-align each header and item tag next to each other to form a row of data. Each new row will start when we have reached the container's width limit, which we defined in the body class. We have also added a pointer cursor to distinguish each item as clickable. Following is the code that each of the headers and items is assigned:

#header {     float: left;     width: 180px;     padding: 10px 0px 10px 0px;     background-color: #666;     color: #fff;     margin: 1px; } #item {     float: left;     width: 180px;     padding: 10px 0px 10px 0px;     background-color: #eaeaea;     color: #333;     margin: 1px;     cursor: pointer; }

The width we have set for the body accommodates the width and the margin of the three items that will display in each row, plus the width and margin of the icons. If we wanted to display more items in a row, we would simply adjust the width of the container, taking the margin and other spacing of the elements into consideration. Figure 4.2 reveals an inside look at the different elements that appear in the grid.

Figure 4.2. An inside look at the HTML elements that define the grid.

As you can see, we have stylized the headers and items a bit with background colors, font colors, and a pointer cursor for each item to make it obvious that they are clickable. There are millions of ways to customize these elements; my suggestion is to have fun experimenting.

The last element we have to create a class for is the icon element. The icon will be very small, so it should not take up the same width as a typical item, which is the reason we have created a separate class for icons. The icon element will be used as both a placeholder for the space that is required for each icon in the header and the actual icon that will be placed to the left of the items. It floats left as all the elements in the grid have to do in order to create the rows. It also has other common properties, such as a width, padding, font color, and margin.

#icon {     float: left;     width: 20px;     padding: 5px 0px 5px 0px;     color: #333;     margin: 1px; }

Now that we have the knowledge to request data, receive a response, and stylize a page of dynamic data with CSS and XHTML, we can take it up a notch by creating a cleaner process and encapsulating code into objects and an Ajax engine. The next chapter will explain how to create an object-oriented Ajax engine with JavaScript, how to debug our requests and responses, and how to extend the engine by creating additional objects that streamline the process of creating Ajax-enabled web applications.