Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client

As I explained before, writing the required CSS declarations for properly styling the POP 3 client is really a breeze. Since its user interface is comprised of only three DIV elements, most of the CSS styles will be applied to them. In addition I will declare some CSS classes to improve the look of the control buttons. In accordance with this, the CSS rules that control the visual presentation of my web-based POP 3 client are as follows:

body {
            margin: 10px 0 0 0;
}
#serverinfo {
            width: 700px;
            height: 22px;
            padding: 2px 5px 2px 5px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            background: #9cf;
            margin-left: auto;
            margin-right: auto;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}
#mailcontainer {
            width: 700px;
            height: 520px;
            padding: 2px 5px 2px 5px;
            border: 2px solid #000;
            background: #eee;
            margin-left: auto;
            margin-right: auto;
            font: 12px normal Arial, Helvetica, sans-serif;
            color: #000;
            overflow: auto;
}
#navbar {
            width: 700px;
            height: 22px;
            padding: 2px 5px 2px 5px;
            border-left: 2px solid #000;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            background: #9cf;
            margin-left: auto;
            margin-right: auto;
}
form {
            display: inline;
}
.inputbox {
            width: 150px;
            border: 1px solid #000;
            background: #eee;
}
.formbutton {
            width: 70px;
            height: 20px;
            font: bold 11px Verdana, Arial, Helvetica, sans-
serif;
            color: #000;
}

As shown above, I've used three different contextual selectors for styling each of the different sections that makes up the client program, by including the "#serverinfo," "#mailcontainer," and "#navbar" selectors respectively. In a similar way, I've added some styles to the user input fields and the control buttons together, so they look a little more appealing. You can change their appearance by coding your own CSS rules, in accordance with your personal preferences.

All right, since the CSS code listed above isn't rocket science, let's get rid of these boring details, and jump to the next section. There, we will write the (X)HTML markup in question, which conforms the actual building blocks for creating the front-end of the POP3 client application.