Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client - Styling the web-based POP 3 client: writing the CSS declarations

(Page 2 of 4 )

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.

Next: Defining the POP3 client's structure: coding the (X)HTML markup >>
 

More XML Articles
More By Alejandro Gervasio

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

· Considering the numerous web applications that use AJAX to emulate desktop software,...    · Thanks for writing this tutrial, I am eager to see what next week has prepared for...    · Thank you for your kind comments about my AJAX tutorial. I hope the next ones will...    · Oh and btw your php-code gives an error-message: Parse error: parse error,...    · Kinda late, but he should have mentioned that this script requires PHP5.    · Thank you for commenting on my article. I'm sorry that you had some problems getting...    · I have read the artice. But i want to know how to implement this. I...    · Thank you for your comments on my AJAX article. Concerning your question, using the...    · Can't log in to the server .. a backslash has been slipped into one of the...    · Thank you for commenting on my Ajax article. Now, regarding your problem, it’s easy...   >>> Post your comment now!