Customizing and Managing Your Site's Appearance

As mentioned, the majority of the heavy lifting for these themes is done by the CSS file for each theme. Listings 6.7 and 6.8 contain the content of each CSS file. The two CSS files are similar in that they use class, ID, and descendant selectors to specify the text formatting and the positioning for the different elements in your Web Form. The professionalStyles.css file is the easier of the two to understand because it contains no positioning styles. The only complexity in this style sheet is how the unordered list items are turned into a horizontal menu—that is, by turning off the bullets (list-item: none), keeping the list items together on a single line (display: inline), and by styling the link and hover pseudo elements.

body {
  background-color: White;
  font-size: small;
}

h1 {
  margin-top: 3em;
  font-family: Georgia, Times New Roman, serif;
  font-size: 1.2em;
  padding-bottom: 4px;
  border-bottom: 1px solid #cc0000;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.4em;
}

p {
  font: normal .8em/2.0em Verdana, Arial , sans-serif;
}

#container {
  position: relative;
  top: 30px;
  left: 30px;
  width: 400px;
}

/* style the list as a horizontal menu */
#menu {
  font-family: Verdana, Arial , sans-serif;
  font-size: 0.9em;
}

#blstSample {
  margin-left: 0;
  padding-left: 0;
  white-space: nowrap;
}

#blstSample li {
  display: inline;
  list-style: none;
  text-transform: uppercase;
}

#blstSample a {
  font-weight: bold;
  padding: 3px 10px 3px 20px;
  margin-right: 2px;
}

#blstSample a:link, #blstSample a:visited {
  text-decoration: none;
  color: white;
  background-color: Gray;

}
#blstSample a:hover {
  color: #cc0000;
  border-bottom: 4px solid #cc0000;
  padding-bottom: 2px;
  text-decoration: none;
  background: url(images/bullet.gif) no-repeat 0 50%;
  background-color: white;
}

/* style the form elements */
fieldset {
  border: 1px solid #cc0000;
  padding: 1em;
}

.txtBox {
  border:1px solid #666666;
  margin: 0.2em 0 0.8em 0.2em;
}

.myButton {
  border:1px solid gray;
  color:#FFFFFF;
  background-color:#FF9900;
  font-size:1em;
  font-weight: bold;
  margin: 0.2em 0 0.8em 0.2em;
}

label {
  font: normal 0.8em Verdana, Arial , sans-serif;
  margin: 0.2em 0 0 0.2em;
}

legend {
  font-family: Georgia, Times New Roman, serif;
  font-size: 1em;
  font-weight: bold;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

The coolStyles.css file is a bit more complex. It uses CSS positioning and margins to place the menu <div> and the content <div> into two separate columns. The menu <div> is floated to the left (float: left) of the subsequent content in the form (the content <div>) and given a specified width. The content <div> is given a left margin that places all of the content to the right of the menu <div>. One interesting feature of this CSS file is the use of the so-called Tan Hack to deal with a bug with Internet Explorer 6.0 and earlier. In this case, Internet Explorer is adding the content <div> left margin setting to the form's <input> elements (the TextBox and Button controls). To fix this problem, the style sheet uses the * html selector (which is only supported by IE) to override the correct margin settings and apply a negative margin. The rest of the CSS is simple text formatting.

body {
  background-color: #0A4581;
  font-size: small;
}

h1 {
  margin-top: 0;
  padding: 0.2em;
  font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
  font-size: 1.2em;
  background-color: #ABC6EE;
  color: #666666;
}

P {
  font: normal .9em/2.2em Verdana, Helvetica, Arial, sans-serif;
}

/* style each of the principle div elements */
#container {
  width: 90%;
  margin: 10px auto;
  background-color: #ffffff;
  color: #333333;
  border: 1px solid gray;
}

#content {
  margin-left: 16em;
  border-left: 1px solid gray;
  padding: 1em;
}

#header {
  padding: 0;
  height: 92px;
  background: url(images/header_background.gif);
}

/* style the list as a vertical list of links */
#menu {
  float: left;
  color: black;
  width: 9em;
  margin: 1em;
  padding: 0.5em;
  border: 1px solid #000;
  font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
  background-color: #ABC6EE;
}

#blstSample li {
  padding-top: 0.4em;
}

#blstSample a:link, #blstSample a:visited {
  text-decoration: underline; color: blue;
}
#blstSample a:hover {
  color: #cc0000;
  border-bottom: 3px solid #cc0000;
  text-decoration: none;
}

/* style the form elements */
#register {
  font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
}

fieldset {
  border: 1px solid #666666;
  padding: 1em;
}

legend {
  font-size: 1em;
  font-weight: bold;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background-color: #ABC6EE;
  border: 1px solid #666666;
}

.txtBox {
  border:1px solid #666666;
  margin: 0.3em 0 0.8em 0.2em;
}

/* IE 6 adds the #content margin to the text box and button so we
  must give the text boxes and buttons a negative margin using
  a CSS format only understood by IE (which will override the
  margin set in the .txtBox rule just above).
*/
* html .txtBox { margin-left: -16em; }
* html .myButton { margin-left: -16em; }

label {
  font: normal 0.8em Verdana, Arial , sans-serif;
}

One other feature worth mentioning about these two themes is their use of em units for sizing. By avoiding the use of pixels, these two layouts still work even if users change the display size of the text in their browser (see Figure 6.8 . We could have achieved a similar result as well by using percent units (e.g., font-size: 90%;) for sizing.

The em unit is the size of the character box for the element's parent. If no other font sizes are specified in other containers, a font size of 1em is equivalent to the default font size (determined by the browser). The principle used in these styles is to set the default font size in the body to small, and then make all other dimensions relative to whatever the browser sets for the small font size.

If the browser's font size for small is 14px, the h1 is displayed at around 17px (14 x 1.2) and the p is displayed at around 11px (14 x 0.8). If the user increases the size of her text through browser preferences, so that small is now 18px, the h1 and the p are 21 and 14 pixels, respectively (18 x 1.2 and 18 x 0.8).

Customizing and Managing Your Site's Appearance - Part 2 [con't]

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos