Urban Giraffe

Adding a touch of style

Right, so we know what the header is made from, now let’s style it. I will present three variations here, giving some idea of what you can do.

Before we begin it’s worth making a note about font sizes. I mentioned earlier about allowing the user to resize the fonts. We want to provide this ability without the layout deteriorating. This is much more difficult than it seems, and there is a lot of debate on the Internet on how to achieve it. For me the cleanest method is to set the body font size to 76% and then using the ems unit to specify font sizes - an ‘em’ is the size of the letter M, and the everything is specified as ratio of the default (1.2em is 1.2 times the size of the default em).

Let’s put some style back into the body element:

body
{
  font-family: 'Trebuchet MS', Arial, Verdana, Sans-Serif;
  font-size: 76%;
}

Here I’ve selected a sans-serif font. Note how it’s important to specify several fonts. These are alternatives if our preferred font doesn’t exist on the viewer’s computer.

Second, let’s turn off those horizontal rules. We can bring them back later if necessary.

hr
{
  display: none;
}

Option 1 – Basic title, full width, left aligned
Here we have the header section at full screen width, with a small logo.

#header
{
  margin-bottom: 20px;
}
 
#headerimg
{
  font-size: 1.2em;
  height: 6.5em;
  color: #FEF4DF;
  padding-left: 7.5%;
  background: #F6C760 URL(images/headerlogo1.png) no-repeat fixed top left;
}
 
#header a
{
  text-decoration: none;
  color: white;
}
 
#header h1
{
  font-size: 3em;
}

The colours were chosen using the colour selector in an image program (Adobe Photoshop). This supplied them as RGB values, which were then copied into the stylesheet. Most other image programs should have something similar.

What else is going on with the style?

#header

• margin-bottom: 20px – provides space between header and content. Space is good

#headerimg

• font-size: 1.2em – This is for the blog description text, and we want something a little larger than normal
• height: 6.5em – Notice how this is also specified in em units. This ensures that if the font size is increased, the header size will also increase. If we specified a pixel size then the font would eventually overflow the header. Not good
• padding-left: 7.5% - Why 7.5%? Well, our body area is 85%, leaving us with 15%. The theme is centered, so both sides are 7.5% from the edge. Setting 7.5% here puts our title on level with the body and being fluid to move with it
• background –places a simple logo in the corner

So let’s see what effect this gives us:

Firefox
Internet Explorer

Not bad for a few simple styles!

Option 2 – Basic title, centred

#header
{
  margin-top: 20px;
  margin-bottom: 30px;
}
 
#headerimg
{
  font-size: 1.2em;
  margin: 0 auto;
  text-align: center;
  width: 85%;
  height: 6.5em;
  color: #FEF4DF;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #F6C760;
}
 
#header a
{
  text-decoration: none;
  color: #CD7042;
}
 
#header h1
{
  font-size: 3em;
}

This style is similar to the previous, but it is centred on the page (using the auto margin trick). I will excuse myself from explaining things again.

Option 3 – Fancy header

#page
{
  background: url(images/headerlogo2.png) no-repeat top left;
}
 
#header
{
  padding-top: 20px;
  margin-bottom: 20px;
  height: 250px;
}
 
#headerimg
{
  font-size: 1.2em;
  text-align: left;
  margin-left: 200px;
  padding: 10px 0px 20px 20px;
  height: 5em;
  color: #E39F7D;
  background-color: #F2D5AC;
  border: 1px solid #EDC791;
}
 
#header a
{
  text-decoration: none;
  color: white;
}
 
#header h1
{
  font-size: 3em;
}

We try for something a little more unusual here, having a background image that floats underneath part of the content. It also makes use of fixed and fluid sizes, demonstrating that not everything needs to be flexible.