Adding CSS to Stylize the Views

Listing 27.14 shows the CSS code used to style the elements in the photo view as well as the AngularJS partial templates.

Listing 27.14 comment_styles.css: Implementing the CSS styles for the view HTML files

Click here to view code image

01 div#photosContainer{
02   background:black; color: white;
03   border: 4px ridge blue; width:800px;
04 }
05 div.photoItem{ display:inline-block; width:120px; }
06 div#photoContainer,
07 div#photoComments{
08   background:black; color: white; width: 400px; height:450px;
09   display: inline-block;  float:left; border: 2px ridge blue;
10 }
11 div#photoComments{ background:white; color: black;
12   max-height:500px; overflow-y:scroll;
13 }
14 div#pageComments{ margin:0px; clear:both; width:810px; }
15 div.comment{ border: 2px ridge blue; padding:10px;
16   border-radius: 5px;
17 }
18 img.listPhoto{ width:100px; }
19 img.mainPhoto{ width:400px; }
20 .commentBody{ background-color:lightgray;
21   border-radius: 5px; padding: 5px; margin:0;
22 }
23 .imageTitle{ font-size: 28px; font-weight: bold;
24   text-align: center; margin:0
25 }
26 .commentTitle{ font-size: 18px; font-weight: bold;}
27 .username{ font-style: italic; color:blue; }
28 .subject{ font-weight: bold;}
29 .timestamp{ color:#555555; font-style: italic;
30   font-size: 12px; text-align: right; margin:0;
31 }
32 input[type="text"],
33 textarea{ border: 2px ridge blue; border-radius: 5px;
34   padding:3px; width:95%;
35 }
36 input[type="button"]{ background-color:blue;color:white;
37   border-radius: 5px;
38 }