Adding CSS to Stylize the Views

Listing 28.20 shows the CSS code you use to style the elements in the shopping cart so that you can see why things look and act as they do. The CSS is condensed as much as possible to make it fit into the book. Also, the titles, buttons, and such here are large, so that they display clearly in the book’s figures.

Listing 28.20 cart_styles.css: Implementing the CSS styles for the view HTML files

Click here to view code image

01 p{margin:0}
02 label {width:100px; display:inline-block; text-align:right; }
03 input[type="text"]{ border: 2px ridge blue; padding:3px;
04   border-radius:5px; width:400px; }
05 #banner{ border-bottom: 2px blue ridge; height:100px }
06 #title { text-align:center; background-color:#a0d0ff;
07   font:italic bold 48px/60px Georgia, serif; border-radius: 5px }
08 #bar { background-color:#a0d0ff; }
09 #cartLink { float:right; text-align:right; cursor:pointer }
10 #cartLink img { height:25px; }
11 #main {clear:both;}
12 .listItem{border-bottom: 1px solid black; clear:both;
13   margin-top:10px }
14 .listImg { height:50px; vertical-align:top }
15 .fullImg { width:300px; vertical-align:top }
16 .prodName {font: bold 16px/20px Arial, Sans-serif; }
17 .price{ float:right; color:red; width:75px; text-align:right;
18   display:inline-block}
19 .prodInfo{ display:inline-block; }
20 .itemTitle {font: bold 32px/40px Arial, Sans-serif; }
21 .fullPrice { color:red; font: bold 20px/24px Arial, Sans-serif;
22   text-align:right}
23 .status {color:green; font: bold 14px/18px Arial, Sans-serif;}
24 .prodDesc { font-style: italic; }
25 .button,
26 .cartButton{ font: 18px/24px Arial, Sans-serif; border-radius: 10px;
27   padding:10px; margin-top:35px; cursor: pointer; width:170px;
28   background-image: -webkit-linear-gradient(top, #FFCC66, #FFFF99);
29   text-align:center}
30 .cartButton img { height:20px; float:right}
31 .button{ display:inline-block; margin:10px;}
32 input.quantity { display:inline-block; float:right; width:30px; }
33 label.quantity { display:inline-block; float:right; width:60px;
34   margin-right:8px; }
35 span.orders,
36 span.delete { cursor:pointer; display:inline-block; float:right;
37   background-color:#FF5858;  border-radius: 8px; text-align:center;
38   font: bold 13px/20px Arial, Sans-serif;
39   margin-right:20px; width:80px; }
40 span.orders{ margin-top:5px; margin-right:10px;
41   background-image: -webkit-linear-gradient(top, #FFCC66, #FFFF99);}
42 input.security { width:30px }
43 div.review{ display:inline-block; width:45%; vertical-align:top; }