In the first example, called ch08_css, we will create the layout of our application. We differentiate three styling methods. If the device is a desktop computer, we use regular styling, as in Chapter 2, Applying Custom Styles. If we come through a touch screen device, though, we use different rules for controls. Furthermore, we apply a slightly different style to the application in portrait mode than in landscape mode.
Firstly, we create the required elements in the HTML file in our example:
<body>
<div id="map" class="map">
<div id="toolbar" class="toolbar"></div>
</div>
</body>This part is more simple than ever before. However, in this case, we create our toolbar inside the map element. We will discuss the importance of this step later in this chapter.