Adding Some Style

30 CHAPTER 2: Building a Mobile HTML Entry Form

This stylesheet can now be included in your form code, with the following HTML tag placed in the head section of the page:

<link rel="stylesheet" media="screen" href="todolist.css" /> Notice that some nonstandard CSS definitions that have been included in the code

(shown in bold in the preceding code snippet). I will discuss these in more detail in the following section.

NOTE: These kinds of CSS definitions will be used throughout the book. They represent early WebKit implementations of CSS3 (the next generation of CSS) that are often used in conjunction with HTML5 to achieve some nice visual effects. HTML5 and CSS3 are very complementary technologies, and their combined use is really the enabler for mobile web apps to compete with native mobile apps.

Figure 2–5 shows the browser output displayed after the preceding CSS is applied to our adjusted HTML.

Figure 2–5. The updated form layout with CSS applied