Styling the Weather View

Listing 29.12 shows the CSS code you use to style the weather view defined in the sections above so that you can see why things look and act as they do. Once again, the code is compact to fit better in the book. Figure 29.2 shows the rendered weather view with the CSS styling applied.

Listing 29.12 weather_styles.css: Implementing the CSS styles for the weather view

Click here to view code image

01 .cities { display:inline-block; width:100px; vertical-align: top; }
02 .city{ border: 1px solid black; cursor: pointer; padding: 5px;
03   text-align: center;
04   background-image: -webkit-linear-gradient(top, #CCCCCC, #EEEEEE); }
05 .weatherData { display:inline-block; width:220px;
06   background-color:white; border:3px ridge blue; margin:10px;
07   padding:15px; border-radius:10px; }
08 .weatherInfo { display:inline-block; width:100px;
09   font: 16px/20px Helvetica, sans-serif; }
10 label.weatherInfo{ text-align: right; }
11 span.weatherInfo{ padding-left: 10px; color: blue;
12   font-weight: bold; }
13 .weatherTemp { font: 36px/48px Helvetica, sans-serif;
14   padding-left:20px; color:blue }
15 .weatherCity { font: 28px/36px Georgia, serif;
16   padding:5px; margin:0}
17 .weatherDesc { font: 20px/28px Georgia, serif;
18   padding:5px; margin:0}
19 .weatherInput { padding:3px; border:2px ridge blue;
20   border-radius: 5px; }
21 .weatherButton { padding:3px; width:100px; border:2px ridge blue;
22   border-radius: 5px; background-color: blue; color: white;
23   font-weight: bold; }