The CSS for now is more or less a bunch of ordinary CSS2 with some background images at this stage in the game. The bulk of the look is with the header so let's cover that a bit.

The links are displayed as inline-block elements, which allows them to stay centered and also have a width and height applied to them. This is crucial if we want to be able to use a background image with them. The background image is a combination of an off state and a hover state. This means that the image has the visual look of the normal and hover state combined as one image which will cut HTTP requests in half. The hover style in the CSS moves the position of the background image to fulfill the look for the visual hover.

The preceding image is a look at the nav section of CSS again. Notice how the hover state swaps the position of the background image and changes the text color. Also notice that the font family is using one of the families included by the Google Font API. The code snippet used is as follows:

/* Apply some very basic styling to the anchor tags in the navigation */
#nav a{
  margin: 0 5px;
  line-height: 3em;
  color: white;
  font-size: 3em;
  text-decoration: none;
  font-family: 'Fredoka One', cursive;
  background: url( images/link-tabs.png ) no-repeat 0px 0 transparent;
  display: inline-block;
  height: 138px;
  width: 75px;
  text-align: center;
}

#nav a:hover{

  color: black;
  background-position: -75px 0;
}

We will accomplish the following identical look using no images at all in the next chapter, using CSS3 in conjunction with some CSS classes provided by Modernizr:

The header that spans across the top of the page in a fixed position uses a striped PNG image for the background, again in the next chapter we'll duplicate that with CSS3. The important points are the position set to fixed, the background URL, which is a PNG image (as small as possible about 115 bytes) with a fallback background color of #333 as shown in the following code snippet:

/* Navigation */
#navbar{

  width: 100%;
  height: 50px;
  text-align: center;
  position: fixed;
  top: 0;
  padding: 0;
  background: url( images/stripe-header.png ) 0 0 #333;
  border-bottom: solid 1px white;
  z-index: 10;
}

The logo is a PNG image as well, again rather straightforward. It's a background image of its div element. The logo will be absolutely positioned inside the navbar element using the following code snippet:


/* The logo png, in the next chapter we'll enhance this and make it entirely css based */
#navbar #logo{
  position: absolute;
  width: 70px;
  height: 110px;
  background: url( images/logo.png );
  top: -5px;
  left: 10%;
}

The final visual piece is the stripe background of each section panel. Again, this is a background image PNG with the overhead size as small as possible. Our PNG background image weighs in at only 81 bytes, as seen in the following code snippet:

/* General styles for all the sections, i.e. frames */
#main .frame{
  height: 700px;
  position: relative;
  border-bottom: dotted 5px #fff;
  /* Image fallback, to be replaced by CSS3 hotness in the next chapter */
  background: url( images/grey-stripe.png );
}

There we have it. Each section panel will have a striped background, a thick bottom dashed border, and is ready for some fresh visual CSS3 content! I have also pre-emptively set its position to relative in preparation for any content we place inside that may end up being absolutely positioned. This is so the items inside each frame will be positioned absolutely to the frame itself as opposed to the page.

The header is placed inside the new HTML5 h group block and has been set to be a block element; typically this element is set as an inline element by default, which is common for text. By setting these h1 and h2 elements as block-level elements, we get to take advantage of centering them with the left and right margin being set to auto. Additionally, they have some of the Google font sprucing up as well, and are on their way to even more CSS3 being added in.