The Zend Framework in Practice

The application makes use of two stylesheets. The first is called default.css and is located in the htdocs/css directory. The second is called jquery-ui-1.7.2.custom.css and is located in the htdocs/css/smoothness, along with its associated image files; this was created using the jQuery UI ThemeRoller and is used by the jQuery UI components. We will be looking at the first of these in this article.

The stylesheet starts with the general styling for the page:

body {
  font-size: 0.9em;
  line-height: 1.3em;
  margin: 0;
  padding: 3em;
  background-image: url(/img/background.png);
  background-repeat: repeat-x;
  border-top: 10px solid gray;
  font-family: trebuchet ms, tahoma, verdana, arial, helvetica;
  text-align: left;
}

The CSS elements fall into the following groupings:

• Text styling: The font family and size; the line height; the text alignment.
• Background: The background image.
• The page border: The margin; the padding; the thick line across the top.

Then come the styling for the header elements:

h1 {
  font-size: 1.5em;
  font-weight: bold;
}
 
h2 {
  font-size: 1.2em;
  font-weight: bold;
}
 
h3, h4, h5, h6 {
  font-size: 1em;
  font-weight: bold;
}

The headings are in bold text and are larger than normal text; they get smaller from h1 to h6 as is customary.

Next come the link styling:

a, a:link, a:visited, a:active {
  color: #930;
  text-decoration: none;
}
 
a:hover {
  color: #aaa;
  text-decoration: none;
}

Links are not underlined, as is the default behaviour. When the user hovers over a link, the colour changes; otherwise it stays the same.

The images are styled to stop them being given a border, if they are also links:

img {
  border: 0;
}

The remaining styling is concerned with the page layout.

The first part is the most important, a wrapper which fixes the page content width and centers it within the page:

#wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 800px;
}

The top section within this is the header, which has its contents centered by default:

#header {
  text-align: center;
  padding-bottom: 10px;
}

However, the navigation is right-aligned; it is rendered in the form of an unordered list, but this is styled to be displayed as a horizontal row of links:

#nav {
  text-align: right;
}
 
#nav ul {
  padding-left: 0;
}
 
#nav li {
  display: inline;
  padding-right: 10px;
  font-weight: bold;
}

The styling for the content is pretty simple:

#content {
  padding-top: 5px;
}

The following sets the width of the submit button on the contact page:

#submit {
  width: 80px;
}

The footer has its content centered, like the header:

#footer {
  padding-top: 20px;
  text-align: center;
}

Finally, there are stylings for error text (coloured red) and warning text (coloured orange):

.error {
  color: red;
}
 
.warning {
  color: orange;
}