Styling the app

Now, let us style the application to make it look a little better. We’ll go back to our index.html and add a few CSS classes as follows:

<!DOCTYPE html>
<html ng-app>
   <head>
         <title>Address Book</title>
<link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body ng-controller="PeopleController">
      <h1>Address Book</h1>	
   <div class="wrapper"
          <div class="contact-item" ng-repeat="person in people">
                <div class="name">{{person.name}} - {{person.phone}}</div>
                <div class="city">{{person.city}} </div>

          </div>
   </div>	

   <script src= "angular.min.js" type="text/javascript"></script>
   <script src= "scripts.js" type="text/javascript"></script>
   </body>
</html>

Now let’s create our styles.css with the following CSS styling:

body{
   font-family: sans-serif;
   font-weight: 100;
   background:#ccc;
}
h1{
   text-align: center;
   color:#666;
   text-shadow:0px 2px 0px #fff;

}

.name{
   font-size:18px; 
}

.city{
   font-style: italic;
   font-size: 13px;
}

.wrapper{
   width:550px;
   margin: 0 auto;
   box-shadow:5px 5px 5px #555;
   background: #fff;
   border-radius: 15px;
   padding: 10px;

}
.contact-item{
   border-bottom: thin solid #ccc; 
   padding:10px;
}

As you can see from the CSS styles, we first style the body to give it a light gray background color using the #ccc (#ccc is the short code for #cccccc) hex code.

The H1 heading tag is styled to align center, with a dark gray text color and a text shadow. The styling for .name and .city is straightforward. Now, let us look at the styles for .wrapper using the following code:

.wrapper{
   width:650px;
   margin: 0 auto;
   box-shadow:5px 5px 5px #555;
   background: #fff;
   border-radius: 15px;
   padding: 10px;

}

Here, we are setting width of the div to 650px. The margin with 0 auto is used to place the div to the center of the screen irrespective of the screen resolution.

Now to make it look a little better, we’ll give it a box-shadow and border radius. The following diagram explains what the options of the border radius mean:

Styling the app

For the .contact-item list, we give a border-bottom and some padding so that things stay a little spaced out.