Building the User Interface for a Web Site Indexing Application with Prototype - Defining the look and feel of the web site indexing application: creating a few simple CSS styles

(Page 3 of 4 )

In order to achieve the visual appearance that was shown in the two screen shots in the previous section, I'm going to define some straightforward CSS styles. As you may guess, these styles will be attached later on to the corresponding structural markup that integrates this web site indexing application.

Since this topic bears little discussion, please have a look at the following set of CSS rules, which logically are aimed at defining the look and feel of the program in question. Here they are:

<style type="text/css">
body{
  padding: 0;
  margin: 0;
  background: #fff;
}

h1{
  width: 550px;
  padding: 10px;
  background: #ccf;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  font: bold 22px Arial, Helvetica, sans-serif;
  color: #000;
  text-align: center;
  border: 1px solid #999;
}

#sitecontainer{
  width: 550px;
  height: 400px;
  background: #ccf;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: 1px solid #999;
  overflow: auto;
}

#sitecontainer p{
  font: normal 11px Verdana, Arial, Helvetica, sans-serif;
  color: #000;
}

#sitecontainer a:link,#sitecontainer a:visited{
  font: bold 11px Verdana, Arial, Helvetica, sans-serif;
  color: #00f;
  text-decoration: underline;
}

#sitecontainer a:hover{
  color: #c30;
}

#formcontainer{
  width: 550px;
  height: 300px;
  background: #ccf;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #999;
}

#formcontainer p{
  text-align: right;
  margin-right: 100px;
  font: bold 11px Verdana, Arial, Helvetica, sans-serif;
  color: #000;
}

.inputbox{
  width: 300px;
  padding: 2px;
  background: #eee;
  font: normal 11px Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  border: 1px solid #999;
}

.submitbox{
  font: normal 11px Verdana, Arial, Helvetica, sans-serif;
  color: #000;
  padding: 2px;
}

textarea{
  width: 300px;
  height: 150px;
  padding: 2px;
  background: #eee;
  font: normal 11px Verdana, Arial, Helvetica, sans- serif;
  color: #000;
  border: 1px solid #999;
}

</style>

As shown above, I defined a few simple CSS styles to improve the visual appearance of each element that composes the front-end of this web site indexing application. In particular, I created not only the layout for the all the containing DIVs that are part of the user interface, but also styled some additional elements, such as text areas and form buttons, paragraphs and links, and <h1> headers.

Logically, at this point you shouldn't have major problems understanding how the previous CSS styles were created, since they're very easy to follow. Therefore, and keeping in mind that defining the look and feel that corresponds to this application is a straightforward process that can be performed with minor efforts,  let's move forward and see how all the CSS rules that were created previously can be annexed to the pertinent structural markup. Sounds pretty logical, right?

To learn how this will be done, please click on the link that appears below and keep reading.

Next: Completing the front-end of the application: Putting the CSS styles and structural markup together >>
 

More JavaScript Articles
More By Alejandro Gervasio

Comments On: Building the User Interface for a Web Site Indexing Application with Prototype

· If you're a strong advocate of using the Prototype JavaScript framework, hopefully...   >>> Post your comment now!