Adding Simple CSS - Part 1

---

---

Keep it Simple Stupid left us with a web page that contained some basic content and navigation, yet was completely unformatted. Now we begin applying CSS to this XHTML to mould it into a web page with a slightly more common layout. The examples used here are extremely simple and also contain rather ugly colour schemes, this is done to keep sections on the page clear and easy to see (though not easy to read). Obviously as you start to finalise your design, you will want to move to colours and graphics that are more pleasing to the eye.

The padding and margin settings used here will be described in more detail in an article about the CSS box model in the future.

First we need to create a CSS file that will be loaded by the browser when it views our web page. You can name the file whatever you want, though it is preferable to have an easy to remember name and give it the .css extension. Now we start by defining the background colour of the entire web page. We also want to make this web page have a maximum width of 800 pixels, the lowest screen resolution width still in common use today. We want to apply these to anything within the body tag in the XHTML, and we will set the colour to a light blue-green.
The background colour defined here is the hexadecimal values of the colour we want, in the order red, green, blue. Simple right!

Next we tackle the header, in this we want to change the way the H1 tags are displayed as well as change both the background and text colour.
First we define the id, header, in which we set the background colour and the foreground (text) colour. The second section sets up the formatting for h1 tags found within the header block. In this we manually set the padding and margins to 0 instead of their default. Note that any h1 tag that falls outside of the header block will not be affected by this.

That is the header done. Now we want to take the menu list, and format it so that it is a horizontal menu just below the header. To do this we insert the following CSS.
As you can see in the menu id, we can define the colours by using their system name as well. Now we start to have to include CSS to help the various browsers display the page fine. In this case we need to add the width:100% to the menu id so that Internet Explorer (the least standards compliant browser in common use) uses up the full width of the web page. If we did not do this the next line of text would continue straight on from the last menu item, confusing matter and making it look rather ugly.

We then define the list to have no style, which removes the discs before each entry, as well as remove all padding and borders for the list as a whole. We then float each list element left. The float left setting means that the element it is applied is "floated" to the left of the box it is in (in this case the body of the XHTML document). All text that follows is now unaffected by this floated text and will attempt to wrap around it. In the case of a list, this means that the list no longer uses a new line per item, but rather stacks them left to right. We add padding left and right so that the list items are not too closely packed.

We have now complete the CSS for the header and menu, yet some browser compatibility issues remain. If you view the example here in Internet Explorer, everything should look fine; the menu appearing like this:



But rendered in a standards compliant browser the menu looks like this:


The reason for this is the way the box model is supposed to work with floats. Since the floated elements are taken out of the normal flow of the document, the menu box correctly does not expand with standards compliant browsers. The fix for this is easy enough. In the XHTML we just need to add a character after the last list item, of course we don't want to see this character so the best thing to add is in fact a space. XHTML will not show spaces by themselves so we need to put the HTML special character in  . This forces the menu box to grow to the correct size and the menu now looks correct. The corrected example can be found here.

With the header and menu formatter, we are now ready to attack the content. This will be covered in the next part of this two part series.